diff --git a/addons/interactions/README.md b/addons/interactions/README.md
index d3687e084f32..0cd9e62bc3a5 100644
--- 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();
 };
 ```
 
diff --git a/addons/storyshots/storyshots-core/src/test-bodies.ts b/addons/storyshots/storyshots-core/src/test-bodies.ts
index e8fbc7f674ff..b24b45826683 100644
--- 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 });
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 40ec2bc4fbf6..aa5b7f172c56 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -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-rc.1",
-    "puppeteer": "^2.0.0 || ^3.0.0"
+    "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "puppeteer": {
diff --git a/addons/storyshots/storyshots-puppeteer/src/config.ts b/addons/storyshots/storyshots-puppeteer/src/config.ts
index c6f40fd6bd04..c7fae1f04371 100644
--- 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 {
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 086b25b779f9..d4e6637b2ef3 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -52,7 +52,7 @@
     "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": {
diff --git a/app/react/src/client/docs/jsxDecorator.test.tsx b/app/react/src/client/docs/jsxDecorator.test.tsx
index 40eb7c57b74d..86e70c1c87e3 100644
--- 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>'
+    );
+  });
 });
diff --git a/app/react/src/client/docs/jsxDecorator.tsx b/app/react/src/client/docs/jsxDecorator.tsx
index 727ee31e5f98..20a294ea35f8 100644
--- 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) {
diff --git a/app/react/src/server/framework-preset-react-docs.test.ts b/app/react/src/server/framework-preset-react-docs.test.ts
index bd86e13da568..7ed80a8cf5f0 100644
--- 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,
diff --git a/app/react/src/server/framework-preset-react-docs.ts b/app/react/src/server/framework-preset-react-docs.ts
index 1e9a1e74cfb1..675d31487c75 100644
--- a/app/react/src/server/framework-preset-react-docs.ts
+++ b/app/react/src/server/framework-preset-react-docs.ts
@@ -21,7 +21,7 @@ export async function babel(config: TransformOptions, options: Options) {
     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'),
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index 071ac289e240..6245585bda3d 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -66,7 +66,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 Initialize a local Storybook instance to allow you to test your addon.
 
 ```shell
-npx sb init
+npx storybook init
 ```
 
 <div class="aside">
diff --git a/docs/builders/overview.md b/docs/builders/overview.md
index f7395953f7e4..45869adcb7e3 100644
--- 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
diff --git a/docs/builders/vite.md b/docs/builders/vite.md
index bd43e267830d..7bd7eadfcbd6 100644
--- 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.
 
diff --git a/docs/configure/babel.md b/docs/configure/babel.md
index a1af175354ef..827fc2621a81 100644
--- 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:
diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md
index d4f93edb3312..08ac9d49be0a 100644
--- a/docs/configure/upgrading.md
+++ b/docs/configure/upgrading.md
@@ -11,7 +11,7 @@ The most common upgrade is Storybook itself. [Storybook releases](https://storyb
 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>
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index 8b55caa63fe4..d59237c6fe1d 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -136,7 +136,7 @@ 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:
 
 ```shell
-npx sb@next link https://github.com/your-username/your-project.git
+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).
@@ -144,11 +144,11 @@ This command creates a project `../storybook-repros/your-project`, and automatic
 If you already have a reproduction on your local machine, you can similarly link it to your monorepo dev setup with the `--local` flag:
 
 ```shell
-npx sb@next link --local /path/to/local-repro-directory
+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
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index ebc2ae7f39f3..2936c2be92a7 100644
--- 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">
diff --git a/docs/essentials/introduction.md b/docs/essentials/introduction.md
index bd2b6661e24d..78b3da7d1e38 100644
--- a/docs/essentials/introduction.md
+++ b/docs/essentials/introduction.md
@@ -14,7 +14,7 @@ A major strength of Storybook are [addons](https://storybook.js.org/addons) that
 
 ### 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:
 
diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx
index c0c463e548bf..8113277199e3 100644
--- a/docs/get-started/installation-problems/angular.mdx
+++ b/docs/get-started/installation-problems/angular.mdx
@@ -1,20 +1,19 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+- Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type angular
   ```
 
-- Add the `--type angular` flag to the installation command to set up Storybook manually:
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type angular
+  npx storybook init --use-npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
 
   ```shell
-  npx sb@next automigrate
+  npx storybook@next automigrate
   ```
 
   Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#automigrate) for more information on how to set up Webpack 5.
@@ -26,7 +25,7 @@
 - If you need further customization to the Storybook builder configuration, you can use the following table as a reference:
 
 | Configuration element        | Description                                                                                                                                                                                      |
-|------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `"browserTarget"`            | Build target to be served using the following format. <br/> `"example-project:builder:config"`                                                                                                   |
 | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br/> `"tsConfig": "./tsconfig.json"`.                                                                         |
 | `"port"`                     | Port used by Storybook. <br/> `"port": 6006`                                                                                                                                                     |
diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx
index 7a7698e3d84b..04920a346755 100644
--- a/docs/get-started/installation-problems/ember.mdx
+++ b/docs/get-started/installation-problems/ember.mdx
@@ -1,14 +1,7 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-
-  ```shell
-  npx storybook init --use-npm
-  ```
-
 - Add the `--type ember` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type ember
+  npx storybook init --type ember
   ```
 
 - During the install process, if you get the following warning message:
@@ -21,4 +14,10 @@
 
 Update the [`@storybook/ember-cli-storybook`](https://www.npmjs.com/package/@storybook/ember-cli-storybook) package to the latest version to fix it.
 
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
+  ```
+  
 - For other installation issues, check the [Ember README](../../app/ember/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/html.mdx b/docs/get-started/installation-problems/html.mdx
index d03ae5eb9385..8bd4eae77abe 100644
--- a/docs/get-started/installation-problems/html.mdx
+++ b/docs/get-started/installation-problems/html.mdx
@@ -1,7 +1,7 @@
 - Add the `--type html` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type html
+  npx storybook init --type html
   ```
 
 - For other installation issues, check the [Html README](../../app/html/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
index 593f0c13ef33..d3c98c8a2f38 100644
--- a/docs/get-started/installation-problems/preact.mdx
+++ b/docs/get-started/installation-problems/preact.mdx
@@ -1,14 +1,13 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+- Add the `--type preact` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type preact
   ```
-
-- Add the `--type preact` flag to the installation command to set up Storybook manually:
+  
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type preact
+  npx storybook init --use-npm
   ```
 
 - For other installation issues, check the [Preact README](../../app/preact/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx
index 0acc6ef29f97..6f2853b02b41 100644
--- a/docs/get-started/installation-problems/react.mdx
+++ b/docs/get-started/installation-problems/react.mdx
@@ -1,20 +1,19 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-  
+- Add the `--type react` flag to the installation command to set up Storybook manually:
+
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type react
   ```
 
-- Add the `--type react` flag to the installation command to set up Storybook manually:
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type react
+  npx storybook init --use-npm
   ```
 
 - Storybook supports Webpack 5 out of the box. If you're upgrading from a previous version, run the following command to enable it:
 
   ```shell
-  npx sb@next automigrate
+  npx storybook@next automigrate
   ```
 
   Check the [Migration Guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade) for more information on how to set up Webpack 5.
diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
index 68f248b11ec8..0fa6d9782b37 100644
--- a/docs/get-started/installation-problems/svelte.mdx
+++ b/docs/get-started/installation-problems/svelte.mdx
@@ -1,14 +1,13 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-  
+- Add the `--type svelte` flag to the installation command to set up Storybook manually:
+
   ```shell
-  npx storybook init --use-npm
+  npx storybook init --type svelte
   ```
-
-- Add the `--type svelte` flag to the installation command to set up Storybook manually:
+  
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
 
   ```shell
-  npx sb init --type svelte
+  npx storybook init --use-npm
   ```
 
 - For issues with Svelte Native Story Format, check the [Svelte Story Format addon repository](https://github.com/storybookjs/addon-svelte-csf) for instructions.
diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx
index d0c276ff4970..3caa0a56199e 100644
--- a/docs/get-started/installation-problems/vue.mdx
+++ b/docs/get-started/installation-problems/vue.mdx
@@ -1,18 +1,17 @@
-- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
-  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
-  
-  ```shell
-  npx storybook init --use-npm
-  ```
-
 - Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
 
   ```shell
   # For Vue 2 projects
-  npx sb init --type vue
+  npx storybook init --type vue
 
   # For Vue 3 projects
-  npx sb init --type vue3
+  npx storybook init --type vue3
+  ```
+
+  - Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers. If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
   ```
 
 - For other installation issues, check the [Vue 2 README](../../app/vue/README.md), or the [Vue 3 README](../../app/vue3/README.md) for additional instructions.
diff --git a/docs/get-started/installation-problems/web-components.mdx b/docs/get-started/installation-problems/web-components.mdx
index 21098fcf6aad..09841ea19343 100644
--- a/docs/get-started/installation-problems/web-components.mdx
+++ b/docs/get-started/installation-problems/web-components.mdx
@@ -1,7 +1,7 @@
 - Add the `--type web_components` flag to the installation command to set up Storybook manually:
 
   ```shell
-  npx sb init --type web_components
+  npx storybook init --type web_components
   ```
 
 - For other installation issues, check the [Web Components README](../../app/web-components/README.md) for additional instructions.
\ No newline at end of file
diff --git a/docs/sharing/storybook-composition.md b/docs/sharing/storybook-composition.md
index ba12b5276a9c..2ccb5570bc8b 100644
--- a/docs/sharing/storybook-composition.md
+++ b/docs/sharing/storybook-composition.md
@@ -74,12 +74,12 @@ You can also compose Storybooks based on the current development environment (e.
 So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
 
 ```shell
-npx sb extract
+npx storybook extract
 ```
 
 <div class="aside">
 
-`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
+`storybook extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
 
 </div>
 
@@ -100,7 +100,7 @@ Linking to a Storybook deployed using this approach will yield all the stories a
 If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
 
 ```shell
-npx sb extract my-built-storybook-directory my-other-directory/stories.json
+npx storybook extract my-built-storybook-directory my-other-directory/stories.json
 ```
 
 When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index 3bc936240afa..bf521438d404 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -52,7 +52,7 @@ export default {
     meshColors: {
       control: {
         type: 'color',
-        presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
       },
     },
     revisionDate: {
diff --git a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
index 79959e089d55..55543dd93639 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
@@ -60,7 +60,7 @@ import { Gizmo } from './Gizmo';
     meshColors: {
       control: {
         type: 'color',
-        presetsColors: ['#ff0000', '#00ff00', '#0000ff'],
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
       },
     },
     revisionDate: {
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
new file mode 100644
index 000000000000..c87cb62adbb8
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..d1a4efaa4258
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
new file mode 100644
index 000000000000..c6bbe5bf64f1
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+};
+```
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
new file mode 100644
index 000000000000..e294d98b1b40
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import { Meta } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+```
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
new file mode 100644
index 000000000000..3f13f148ce43
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+export const Primary = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..0b37196b9a41
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
new file mode 100644
index 000000000000..9df04fd6e394
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..759858bf1da4
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 60feb2014547..8d71b288cef9 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index 3130fc260de7..9b75446177ee 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,16 +1,23 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
+type ButtonArgs = {
+  primary: boolean;
+  label: string;
+}
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta;
+} as Meta<ButtonArgs>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLButtonElement => {
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
   const btn = document.createElement('button');
   btn.innerText = args.label;
 
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
new file mode 100644
index 000000000000..5cb8981ad168
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..906845b4f472
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
new file mode 100644
index 000000000000..b6b9b43ec295
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..47a1f99f8ee1
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 743c489eff80..6268687c428b 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index 104aa6ccbd19..62e72638171e 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,4 +1,6 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
 export default {
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
new file mode 100644
index 000000000000..b9cbe7d627f1
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -0,0 +1,27 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+};
+
+export const Empty = (args) => createList(args);
+
+export const OneItem = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
new file mode 100644
index 000000000000..81e14d1162a4
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -0,0 +1,29 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
new file mode 100644
index 000000000000..a58833617912
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -0,0 +1,22 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
new file mode 100644
index 000000000000..434bec00d690
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -0,0 +1,32 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
new file mode 100644
index 000000000000..8e4959b468d3
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -0,0 +1,12 @@
+```js
+// List.stories.js
+
+import { createList } from  './List';
+
+export default {
+  title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => createList(args);
+```
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
new file mode 100644
index 000000000000..e0706e6c0827
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+// Always an empty list, not super interesting
+const Template: StoryFn<ListArgs> = (args) => createList(args);
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index b7b5ac95c273..6d10a8faab72 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
     'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
+    'html/button-story-with-args.ts.mdx',
+    'html/button-story-with-args.js.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 96ca9925fffa..15e4c456516b 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'angular/button-story-default-export-with-component.ts.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
     'web-components/button-story-default-export-with-component.js.mdx',
+    'html/button-story-default-export.js.mdx',
+    'html/button-story-default-export.ts.mdx',
   ]}
 />
 
@@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'svelte/button-story.js.mdx',
     'svelte/button-story.native-format.mdx',
     'web-components/button-story.js.mdx',
+    'html/button-story.js.mdx',
+    'html/button-story.ts.mdx',
   ]}
 />
 
@@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.ts.mdx',
   ]}
 />
 
@@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
     'svelte/button-story-with-emojis.native-format.mdx',
     'svelte/button-story-with-emojis.mdx.mdx',
     'web-components/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.ts.mdx',
   ]}
 />
 
@@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'svelte/button-story-using-args.js.mdx',
     'svelte/button-story-using-args.native-format.mdx',
     'web-components/button-story-using-args.js.mdx',
+    'html/button-story-using-args.js.mdx',
+    'html/button-story-using-args.ts.mdx',
   ]}
 />
 
@@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
     'svelte/button-story-with-blue-args.native-format.mdx',
     'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.ts.mdx',
   ]}
 />
 
@@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'svelte/button-story-component-decorator.native-format.mdx',
     'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
     'vue/list-story-starter.ts-3.ts.mdx',
     'svelte/list-story-starter.native-format.mdx',
     'web-components/list-story-starter.js.mdx',
+    'html/list-story-starter.js.mdx',
+    'html/list-story-starter.ts.mdx',
   ]}
 />
 
@@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
     'vue/list-story-expanded.ts-3.ts.mdx',
     'svelte/list-story-expanded.native-format.mdx',
     'web-components/list-story-expanded.js.mdx',
+    'html/list-story-expanded.js.mdx',
+    'html/list-story-expanded.ts.mdx',
   ]}
 />
 
@@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'vue/list-story-reuse-data.3.js.mdx',
     'vue/list-story-reuse-data.ts-3.ts.mdx',
     'web-components/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.ts.mdx',
   ]}
 />
 
diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
index 6dea53b8f168..94f29aa214ad 100644
--- a/examples/official-storybook/stories/addon-controls.stories.tsx
+++ b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -6,7 +6,7 @@ export default {
   component: Button,
   argTypes: {
     children: { control: 'text', name: 'Children', mapping: { basic: 'BASIC' } },
-    type: { control: 'text', name: 'Type' },
+    type: { name: 'Type', control: { type: 'text', maxLength: 32 } },
     json: { control: 'object', name: 'JSON' },
     imageUrls: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
     label: {
@@ -71,8 +71,10 @@ export default {
 const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };
 
 const Template = (args) => (
-  <div>
-    <Button type={args.type}>{args.label || args.children}</Button>
+  <div style={args.background ? { background: args.background } : undefined}>
+    <Button type={args.type}>
+      {args.label?.type === 'b' ? <b>{args.children}</b> : args.children}
+    </Button>
     {args.json && <pre>{JSON.stringify(args.json, null, 2)}</pre>}
   </div>
 );
diff --git a/examples/official-storybook/stories/title/AutoTitle.stories.js b/examples/official-storybook/stories/title/AutoTitle.stories.js
index 3a2b02502232..125c1157c1c1 100644
--- a/examples/official-storybook/stories/title/AutoTitle.stories.js
+++ b/examples/official-storybook/stories/title/AutoTitle.stories.js
@@ -10,4 +10,3 @@ export default {
 };
 
 export const Basic = () => <Button label="Click me" />;
-
diff --git a/examples/official-storybook/stories/title/CustomTitle.stories.js b/examples/official-storybook/stories/title/CustomTitle.stories.js
index 390b8480ecc9..1ff5710b11d1 100644
--- a/examples/official-storybook/stories/title/CustomTitle.stories.js
+++ b/examples/official-storybook/stories/title/CustomTitle.stories.js
@@ -4,8 +4,8 @@ import { Form } from '@storybook/components';
 const { Button } = Form;
 
 export default {
-    title: 'CustomTitle',
-    component: Button,
+  title: 'CustomTitle',
+  component: Button,
 };
 
 export const Basic = () => <Button label="Click me" />;
diff --git a/examples/react-ts/src/title/AutoTitle.stories.js b/examples/react-ts/src/title/AutoTitle.stories.js
index e912d9560606..125c1157c1c1 100644
--- a/examples/react-ts/src/title/AutoTitle.stories.js
+++ b/examples/react-ts/src/title/AutoTitle.stories.js
@@ -9,4 +9,4 @@ export default {
   component: Button,
 };
 
-export const Basic = () => <Button label="Click me" />;
\ No newline at end of file
+export const Basic = () => <Button label="Click me" />;
diff --git a/examples/react-ts/src/title/CustomTitle.stories.js b/examples/react-ts/src/title/CustomTitle.stories.js
index 390b8480ecc9..1ff5710b11d1 100644
--- a/examples/react-ts/src/title/CustomTitle.stories.js
+++ b/examples/react-ts/src/title/CustomTitle.stories.js
@@ -4,8 +4,8 @@ import { Form } from '@storybook/components';
 const { Button } = Form;
 
 export default {
-    title: 'CustomTitle',
-    component: Button,
+  title: 'CustomTitle',
+  component: Button,
 };
 
 export const Basic = () => <Button label="Click me" />;
diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
index 38023cdd8fd3..10e3eb0522ba 100644
--- a/lib/api/src/lib/stories.ts
+++ b/lib/api/src/lib/stories.ts
@@ -282,9 +282,12 @@ export const transformStoriesRawToStoriesHash = (
     rootAndGroups.forEach((group, index) => {
       const child = paths[index + 1];
       const { id } = group;
+      // @ts-ignore
+      const { parameters: originalParameters = group.parameters } = acc[id] || {};
       acc[id] = merge(acc[id] || {}, {
         ...group,
         ...(child && { children: [child] }),
+        parameters: originalParameters,
       });
     });
 
diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js
index 97e1d15c9947..bfd3b48e0bf6 100644
--- a/lib/api/src/tests/stories.test.js
+++ b/lib/api/src/tests/stories.test.js
@@ -84,6 +84,8 @@ describe('stories API', () => {
     });
   });
   const parameters = {};
+  const firstInGroupParameters = { viewMode: 'docs' };
+  const secondInGroupParameters = { viewMode: 'story' };
   const storiesHash = {
     'a--1': {
       kind: 'a',
@@ -112,7 +114,7 @@ describe('stories API', () => {
     'b-d--1': {
       kind: 'b/d',
       name: '1',
-      parameters,
+      parameters: firstInGroupParameters,
       path: 'b-d--1',
       id: 'b-d--1',
       args: {},
@@ -120,7 +122,7 @@ describe('stories API', () => {
     'b-d--2': {
       kind: 'b/d',
       name: '2',
-      parameters,
+      parameters: secondInGroupParameters,
       path: 'b-d--2',
       id: 'b-d--2',
       args: { a: 'b' },
@@ -229,6 +231,7 @@ describe('stories API', () => {
         id: 'b-d',
         parent: 'b',
         children: ['b-d--1', 'b-d--2'],
+        parameters: firstInGroupParameters,
         isRoot: false,
         isComponent: true,
       });
@@ -239,7 +242,7 @@ describe('stories API', () => {
         parent: 'b-d',
         kind: 'b/d',
         name: '1',
-        parameters,
+        parameters: firstInGroupParameters,
         args: {},
         prepared: true,
       });
@@ -250,7 +253,7 @@ describe('stories API', () => {
         parent: 'b-d',
         kind: 'b/d',
         name: '2',
-        parameters,
+        parameters: secondInGroupParameters,
         args: { a: 'b' },
         prepared: true,
       });
diff --git a/lib/builder-webpack4/src/preview/babel-loader-preview.ts b/lib/builder-webpack4/src/preview/babel-loader-preview.ts
index 7056e71e78d2..c7eee56fae41 100644
--- a/lib/builder-webpack4/src/preview/babel-loader-preview.ts
+++ b/lib/builder-webpack4/src/preview/babel-loader-preview.ts
@@ -2,7 +2,7 @@ import { getProjectRoot } from '@storybook/core-common';
 import { useBaseTsSupport } from './useBaseTsSupport';
 
 export const createBabelLoader = (options: any, framework: string) => ({
-  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+  test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
   use: [
     {
       loader: require.resolve('babel-loader'),
diff --git a/lib/builder-webpack5/src/preview/babel-loader-preview.ts b/lib/builder-webpack5/src/preview/babel-loader-preview.ts
index 7d02ca31a461..86d9a1cc713d 100644
--- a/lib/builder-webpack5/src/preview/babel-loader-preview.ts
+++ b/lib/builder-webpack5/src/preview/babel-loader-preview.ts
@@ -10,7 +10,7 @@ export const useBaseTsSupport = (framework: string) => {
 };
 
 export const createBabelLoader = (options: any, framework: string) => ({
-  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,
+  test: useBaseTsSupport(framework) ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
   use: [
     {
       loader: require.resolve('babel-loader'),
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index c4221f5509d4..3f1dc430f218 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -195,7 +195,8 @@ export class PostmsgTransport {
   private handleEvent(rawEvent: MessageEvent): void {
     try {
       const { data } = rawEvent;
-      const { key, event, refId } = typeof data === 'string' && isJSON(data) ? parse(data, global.CHANNEL_OPTIONS || {}) : data;
+      const { key, event, refId } =
+        typeof data === 'string' && isJSON(data) ? parse(data, global.CHANNEL_OPTIONS || {}) : data;
 
       if (key === KEY) {
         const pageString =
diff --git a/lib/codemod/src/transforms/csf-2-to-3.ts b/lib/codemod/src/transforms/csf-2-to-3.ts
index 97552cbd9373..18e7e272171f 100644
--- a/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -89,7 +89,9 @@ const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =
   annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
 
 function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
-  const makeTitle = (userTitle?: string) => { return userTitle || 'FIXME' }
+  const makeTitle = (userTitle?: string) => {
+    return userTitle || 'FIXME';
+  };
   const csf = loadCsf(source, { makeTitle });
 
   try {
diff --git a/lib/components/src/controls/Text.tsx b/lib/components/src/controls/Text.tsx
index bbf18c74b015..dc76b95b05ce 100644
--- a/lib/components/src/controls/Text.tsx
+++ b/lib/components/src/controls/Text.tsx
@@ -11,7 +11,22 @@ const Wrapper = styled.label({
   display: 'flex',
 });
 
-export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onBlur }) => {
+const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
+  marginLeft: '0.75rem',
+  paddingTop: '0.35rem',
+  color: isMaxed ? 'red' : undefined,
+}));
+
+const format = (value?: TextValue) => value || '';
+
+export const TextControl: FC<TextProps> = ({
+  name,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  maxLength,
+}) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange(event.target.value);
   };
@@ -34,6 +49,7 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
     <Wrapper>
       <Form.Textarea
         id={getControlId(name)}
+        maxLength={maxLength}
         onChange={handleChange}
         size="flex"
         placeholder="Edit string..."
@@ -41,6 +57,11 @@ export const TextControl: FC<TextProps> = ({ name, value, onChange, onFocus, onB
         valid={isValid ? null : 'error'}
         {...{ name, value: isValid ? value : '', onFocus, onBlur }}
       />
+      {maxLength && (
+        <MaxLength isMaxed={value?.length === maxLength}>
+          {value?.length ?? 0} / {maxLength}
+        </MaxLength>
+      )}
     </Wrapper>
   );
 };
diff --git a/lib/components/src/controls/types.ts b/lib/components/src/controls/types.ts
index 668c366f8eef..aee13cc9f191 100644
--- a/lib/components/src/controls/types.ts
+++ b/lib/components/src/controls/types.ts
@@ -61,7 +61,9 @@ export interface NormalizedOptionsConfig {
 }
 
 export type TextValue = string;
-export interface TextConfig {}
+export interface TextConfig {
+  maxLength?: number;
+}
 
 export type ControlType =
   | 'array'
diff --git a/lib/core-common/templates/base-preview-head.html b/lib/core-common/templates/base-preview-head.html
index 39baba09b3fb..45c0c3032dac 100644
--- a/lib/core-common/templates/base-preview-head.html
+++ b/lib/core-common/templates/base-preview-head.html
@@ -237,8 +237,8 @@
   .sb-argstableBlock td:nth-of-type(3) {
     width: 15%;
   }
-  .sb-argstableBlock th:laste-of-type,
-  .sb-argstableBlock td:laste-of-type {
+  .sb-argstableBlock th:last-of-type,
+  .sb-argstableBlock td:last-of-type {
     width: 25%;
     padding-right: 20px;
   }
diff --git a/lib/core-server/package.json b/lib/core-server/package.json
index 1ad69bfb5563..7dfeb8dac548 100644
--- a/lib/core-server/package.json
+++ b/lib/core-server/package.json
@@ -62,7 +62,6 @@
     "commander": "^6.2.1",
     "compression": "^1.7.4",
     "core-js": "^3.8.2",
-    "cpy": "^8.1.2",
     "detect-port": "^1.3.0",
     "express": "^4.17.1",
     "fs-extra": "^9.0.1",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
index 1937cd52a90a..13c335a8dc80 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-dev-posix
@@ -40,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
index 4bcbcf07d680..7e21d5625a97 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_manager-prod-posix
@@ -1,262 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cra-ts-essentials manager dev 1`] = `
-Object {
-  "entry": Array [
-    "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
-    "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
-    "ROOT/lib/core-client/dist/esm/manager/index.js",
-    "ROOT/addons/docs/manager.js",
-    "ROOT/addons/controls/manager.js",
-    "ROOT/addons/actions/manager.js",
-    "ROOT/addons/backgrounds/manager.js",
-    "ROOT/addons/toolbars/manager.js",
-    "ROOT/addons/measure/manager.js",
-    "ROOT/addons/outline/manager.js",
-  ],
-  "keys": Array [
-    "name",
-    "mode",
-    "bail",
-    "devtool",
-    "entry",
-    "output",
-    "watchOptions",
-    "plugins",
-    "module",
-    "resolve",
-    "resolveLoader",
-    "recordsPath",
-    "performance",
-    "optimization",
-  ],
-  "module": Object {
-    "rules": Array [
-      Object {
-        "exclude": Array [
-          "NODE_MODULES/",
-          "/dist/",
-        ],
-        "include": Array [
-          "ROOT",
-        ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "configFile": false,
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "shippedProposals": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-typescript/lib/index.js",
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "include": [Function],
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "plugins": Array [
-                "NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
-                  Object {
-                    "legacy": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-property-in-object/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
-                  Object {
-                    "loose": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
-                "NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
-                Array [
-                  "NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "useBuiltIns": true,
-                  },
-                ],
-                "NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
-                "NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
-                "NODE_MODULES/babel-plugin-macros/dist/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
-                "NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
-                Array [
-                  "NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
-                  Object {
-                    "absoluteImports": "NODE_MODULES/core-js/index.js",
-                    "method": "usage-global",
-                    "version": "*",
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "loose": true,
-                    "modules": false,
-                    "shippedProposals": true,
-                    "targets": "defaults",
-                  },
-                ],
-                "NODE_MODULES/@babel/preset-react/lib/index.js",
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "test": "/\\\\.css$/",
-        "use": Array [
-          "NODE_MODULES/style-loader/dist/cjs.js",
-          Object {
-            "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-            "options": Object {
-              "importLoaders": 1,
-            },
-          },
-        ],
-      },
-      Object {
-        "loader": "NODE_MODULES/file-loader/dist/cjs.js",
-        "options": Object {
-          "name": "static/media/[path][name].[ext]",
-        },
-        "test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
-      },
-      Object {
-        "loader": "NODE_MODULES/url-loader/dist/cjs.js",
-        "options": Object {
-          "limit": 10000,
-          "name": "static/media/[path][name].[ext]",
-        },
-        "test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
-      },
-      Object {
-        "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-    ],
-  },
-  "plugins": Array [
-    "VirtualModulesPlugin",
-    "HtmlWebpackPlugin",
-    "CaseSensitivePathsPlugin",
-    "DefinePlugin",
-  ],
-}
-`;
-
 exports[`cra-ts-essentials manager prod 1`] = `
 Object {
   "entry": Array [
@@ -297,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
index 45f3199dcaa1..74d84b599459 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-dev-posix
@@ -360,7 +360,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [
@@ -410,7 +410,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [
diff --git a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
index 19d3bb4c27a5..6e7e1b6c8ea4 100644
--- a/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/cra-ts-essentials_preview-prod-posix
@@ -1,502 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cra-ts-essentials preview dev 1`] = `
-Object {
-  "entry": Array [
-    "ROOT/lib/core-client/dist/esm/globals/polyfills.js",
-    "ROOT/lib/core-client/dist/esm/globals/globals.js",
-    "NODE_MODULES/@storybook/addon-ie11/dist/event-source-polyfill.js",
-    "ROOT/storybook-init-framework-entry.js",
-    "ROOT/app/react/dist/esm/client/docs/config-generated-config-entry.js",
-    "ROOT/app/react/dist/esm/client/preview/config-generated-config-entry.js",
-    "ROOT/addons/docs/preview.js-generated-config-entry.js",
-    "ROOT/addons/actions/preview.js-generated-config-entry.js",
-    "ROOT/addons/backgrounds/preview.js-generated-config-entry.js",
-    "ROOT/addons/measure/preview.js-generated-config-entry.js",
-    "ROOT/addons/outline/preview.js-generated-config-entry.js",
-    "ROOT/examples/cra-ts-essentials/.storybook/preview.tsx-generated-config-entry.js",
-    "ROOT/generated-stories-entry.js",
-  ],
-  "keys": Array [
-    "name",
-    "mode",
-    "bail",
-    "devtool",
-    "entry",
-    "output",
-    "watchOptions",
-    "plugins",
-    "module",
-    "resolve",
-    "resolveLoader",
-    "optimization",
-    "performance",
-  ],
-  "module": Object {
-    "rules": Array [
-      Object {
-        "test": "/\\\\.md$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/raw-loader/dist/cjs.js",
-          },
-        ],
-      },
-      Object {
-        "parser": Object {
-          "requireEnsure": false,
-        },
-      },
-      Object {
-        "oneOf": Array [
-          Object {
-            "loader": "NODE_MODULES/url-loader/dist/cjs.js",
-            "options": Object {
-              "limit": 10000,
-              "mimetype": "image/avif",
-              "name": "static/media/[name].[hash:8].[ext]",
-            },
-            "test": Array [
-              "/\\\\.avif$/",
-            ],
-          },
-          Object {
-            "loader": "NODE_MODULES/url-loader/dist/cjs.js",
-            "options": Object {
-              "limit": 10000,
-              "name": "static/media/[name].[hash:8].[ext]",
-            },
-            "test": Array [
-              "/\\\\.bmp$/",
-              "/\\\\.gif$/",
-              "/\\\\.jpe?g$/",
-              "/\\\\.png$/",
-            ],
-          },
-          Object {
-            "include": Array [
-              "ROOT/src",
-              "ROOT/examples/cra-ts-essentials/.storybook",
-            ],
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "cacheCompression": false,
-              "cacheDirectory": true,
-              "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3",
-              "compact": true,
-              "configFile": false,
-              "customize": "NODE_MODULES/babel-preset-react-app/webpack-overrides.js",
-              "extends": undefined,
-              "overrides": Array [
-                Object {
-                  "plugins": Array [
-                    Array [
-                      "NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
-                      Object {
-                        "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
-                      },
-                    ],
-                  ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
-                },
-              ],
-              "plugins": Array [
-                Array [
-                  "NODE_MODULES/babel-plugin-named-asset-import/index.js",
-                  Object {
-                    "loaderMap": Object {
-                      "svg": Object {
-                        "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]",
-                      },
-                    },
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-                Array [
-                  "NODE_MODULES/babel-preset-react-app/index.js",
-                  Object {
-                    "runtime": "automatic",
-                  },
-                ],
-              ],
-            },
-            "test": "/\\\\.(js|mjs|jsx|ts|tsx)$/",
-          },
-          Object {
-            "exclude": "/@babel(?:\\\\/|\\\\\\\\{1,2})runtime/",
-            "include": Array [
-              "ROOT/examples/cra-ts-essentials/.storybook",
-            ],
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "cacheCompression": false,
-              "cacheDirectory": true,
-              "cacheIdentifier": "production:babel-plugin-named-asset-import@:babel-preset-react-app@10.0.1:react-dev-utils@11.0.4:react-scripts@4.0.3",
-              "compact": false,
-              "configFile": false,
-              "inputSourceMap": true,
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/babel-preset-react-app/dependencies.js",
-                  Object {
-                    "helpers": true,
-                  },
-                ],
-              ],
-              "sourceMaps": true,
-            },
-            "test": "/\\\\.(js|mjs)$/",
-          },
-          Object {
-            "exclude": Array [
-              "/\\\\.module\\\\.css$/",
-              "/@storybook/",
-            ],
-            "include": undefined,
-            "sideEffects": true,
-            "test": "/\\\\.css$/",
-            "use": Array [
-              Object {
-                "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
-                "options": Object {
-                  "publicPath": "../../",
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-                "options": Object {
-                  "importLoaders": 1,
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/postcss-loader/src/index.js",
-                "options": Object {
-                  "ident": "postcss",
-                  "plugins": [Function],
-                  "sourceMap": true,
-                },
-              },
-            ],
-          },
-          Object {
-            "test": "/\\\\.module\\\\.css$/",
-            "use": Array [
-              Object {
-                "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
-                "options": Object {
-                  "publicPath": "../../",
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-                "options": Object {
-                  "importLoaders": 1,
-                  "modules": Object {
-                    "getLocalIdent": [Function],
-                  },
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/postcss-loader/src/index.js",
-                "options": Object {
-                  "ident": "postcss",
-                  "plugins": [Function],
-                  "sourceMap": true,
-                },
-              },
-            ],
-          },
-          Object {
-            "exclude": "/\\\\.module\\\\.(scss|sass)$/",
-            "sideEffects": true,
-            "test": "/\\\\.(scss|sass)$/",
-            "use": Array [
-              Object {
-                "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
-                "options": Object {
-                  "publicPath": "../../",
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-                "options": Object {
-                  "importLoaders": 3,
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/postcss-loader/src/index.js",
-                "options": Object {
-                  "ident": "postcss",
-                  "plugins": [Function],
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/resolve-url-loader/index.js",
-                "options": Object {
-                  "root": "ROOT/src",
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/sass-loader/dist/cjs.js",
-                "options": Object {
-                  "sourceMap": true,
-                },
-              },
-            ],
-          },
-          Object {
-            "test": "/\\\\.module\\\\.(scss|sass)$/",
-            "use": Array [
-              Object {
-                "loader": "NODE_MODULES/mini-css-extract-plugin/dist/loader.js",
-                "options": Object {
-                  "publicPath": "../../",
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/css-loader/dist/cjs.js",
-                "options": Object {
-                  "importLoaders": 3,
-                  "modules": Object {
-                    "getLocalIdent": [Function],
-                  },
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/postcss-loader/src/index.js",
-                "options": Object {
-                  "ident": "postcss",
-                  "plugins": [Function],
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/resolve-url-loader/index.js",
-                "options": Object {
-                  "root": "ROOT/src",
-                  "sourceMap": true,
-                },
-              },
-              Object {
-                "loader": "NODE_MODULES/sass-loader/dist/cjs.js",
-                "options": Object {
-                  "sourceMap": true,
-                },
-              },
-            ],
-          },
-          Object {
-            "exclude": Array [
-              "/\\\\.(js|mjs|jsx|ts|tsx)$/",
-              "/\\\\.html$/",
-              "/\\\\.json$/",
-              "/\\\\.(ejs|md|mdx)$/",
-            ],
-            "loader": "NODE_MODULES/file-loader/dist/cjs.js",
-            "options": Object {
-              "name": "static/media/[name].[hash:8].[ext]",
-            },
-          },
-        ],
-      },
-      Object {
-        "include": "NODE_MODULES[\\\\\\\\/](@storybook[\\\\\\\\/]node_logger|@testing-library[\\\\\\\\/]dom|@testing-library[\\\\\\\\/]user-event|acorn-jsx|ansi-align|ansi-colors|ansi-escapes|ansi-regex|ansi-styles|better-opn|boxen|camelcase|chalk|color-convert|commander|find-cache-dir|find-up|fs-extra|highlight.js|json5|node-fetch|pkg-dir|prettier|pretty-format|react-dev-utils|resolve-from|semver|slash|strip-ansi|uuid)/",
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-              ],
-              "sourceType": "unambiguous",
-            },
-          },
-        ],
-      },
-      Object {
-        "include": "NODE_MODULES\\\\/acorn-jsx/",
-        "test": "/\\\\.js$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "presets": Array [
-                Array [
-                  "NODE_MODULES/@babel/preset-env/lib/index.js",
-                  Object {
-                    "modules": "commonjs",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      },
-      Object {
-        "test": "/(stories|story)\\\\.mdx$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
-              "configFile": false,
-              "overrides": Array [
-                Object {
-                  "plugins": Array [
-                    Array [
-                      "NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
-                      Object {
-                        "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
-                      },
-                    ],
-                  ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
-                },
-              ],
-              "plugins": Array [
-                Array [
-                  "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
-                  Object {
-                    "pragma": "React.createElement",
-                    "pragmaFrag": "React.Fragment",
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-              ],
-            },
-          },
-          Object {
-            "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
-          },
-        ],
-      },
-      Object {
-        "exclude": "/(stories|story)\\\\.mdx$/",
-        "test": "/\\\\.mdx$/",
-        "use": Array [
-          Object {
-            "loader": "NODE_MODULES/babel-loader/lib/index.js",
-            "options": Object {
-              "babelrc": false,
-              "cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
-              "configFile": false,
-              "overrides": Array [
-                Object {
-                  "plugins": Array [
-                    Array [
-                      "NODE_MODULES/babel-plugin-react-docgen/lib/index.js",
-                      Object {
-                        "DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
-                      },
-                    ],
-                  ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
-                },
-              ],
-              "plugins": Array [
-                Array [
-                  "NODE_MODULES/@babel/plugin-transform-react-jsx/lib/index.js",
-                  Object {
-                    "pragma": "React.createElement",
-                    "pragmaFrag": "React.Fragment",
-                  },
-                ],
-              ],
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "ie": "11",
-                    },
-                  },
-                  "storybook-addon-ie11",
-                ],
-              ],
-            },
-          },
-          Object {
-            "loader": "NODE_MODULES/@storybook/mdx1-csf/loader.js",
-            "options": Object {
-              "remarkPlugins": Array [
-                [Function],
-                [Function],
-              ],
-              "skipCsf": true,
-            },
-          },
-        ],
-      },
-      Object {
-        "enforce": "pre",
-        "loader": "ROOT/lib/source-loader/dist/cjs/index.js",
-        "options": Object {
-          "injectStoryParameters": true,
-          "inspectLocalDependencies": true,
-        },
-        "test": "/\\\\.(stories|story)\\\\.[tj]sx?$/",
-      },
-    ],
-  },
-  "plugins": Array [
-    "FilterWarningsPlugin",
-    "VirtualModulesPlugin",
-    "HtmlWebpackPlugin",
-    "DefinePlugin",
-    "CaseSensitivePathsPlugin",
-    "ProgressPlugin",
-    "InlineChunkHtmlPlugin",
-    "InterpolateHtmlPlugin",
-    "ModuleNotFoundPlugin",
-    "MiniCssExtractPlugin",
-    "ManifestPlugin",
-    "IgnorePlugin",
-    "ForkTsCheckerWebpackPlugin",
-    "ESLintWebpackPlugin",
-    "IgnorePlugin",
-    "DocgenPlugin",
-  ],
-}
-`;
-
 exports[`cra-ts-essentials preview prod 1`] = `
 Object {
   "entry": Array [
@@ -875,7 +378,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [
@@ -925,7 +428,7 @@ Object {
                       },
                     ],
                   ],
-                  "test": "/\\\\.(mjs|jsx?)$/",
+                  "test": "/\\\\.(cjs|mjs|jsx?)$/",
                 },
               ],
               "plugins": Array [
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
index 9fcbeaa6c249..e73793bb5a10 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-dev-posix
@@ -41,7 +41,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
index 348d29de932a..88df4ac7b910 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_manager-prod-posix
@@ -41,7 +41,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
index fef4e5b1e09b..f05e53f9bf47 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev-posix
@@ -39,7 +39,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
index d1c67aacb001..840cbdd0dc60 100644
--- a/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod-posix
@@ -38,7 +38,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
index ec8992f03346..01c529220ab8 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-dev-posix
@@ -42,7 +42,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
index a686af760a22..a86a667481da 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_manager-prod-posix
@@ -42,7 +42,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
index ab76b4d0c1c7..4cf2f80e4570 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-posix
@@ -41,7 +41,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
index c769b18749c7..fe831e185d10 100644
--- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-posix
@@ -40,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
index 0676e83166fe..f3dec4361294 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-dev-posix
@@ -42,7 +42,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
index 982723cbc1ac..be24c3d5e9fc 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_manager-prod-posix
@@ -42,7 +42,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
index 12efbe2571e2..5ef8867718bb 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev-posix
@@ -40,7 +40,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
index 0a9453609940..51adf69ea33c 100644
--- a/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
+++ b/lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod-posix
@@ -39,7 +39,7 @@ Object {
         "include": Array [
           "ROOT",
         ],
-        "test": "/\\\\.(mjs|tsx?|jsx?)$/",
+        "test": "/\\\\.(cjs|mjs|tsx?|jsx?)$/",
         "use": Array [
           Object {
             "loader": "NODE_MODULES/babel-loader/lib/index.js",
diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts
index e74c78f31850..402acb2dea05 100644
--- a/lib/core-server/src/build-static.ts
+++ b/lib/core-server/src/build-static.ts
@@ -1,5 +1,4 @@
 import chalk from 'chalk';
-import cpy from 'cpy';
 import fs from 'fs-extra';
 import path from 'path';
 import dedent from 'ts-dedent';
@@ -56,7 +55,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
   }
   await fs.emptyDir(options.outputDir);
 
-  await cpy(defaultFavIcon, options.outputDir);
+  await fs.copyFile(defaultFavIcon, path.join(options.outputDir, path.basename(defaultFavIcon)));
 
   const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
   const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
@@ -169,7 +168,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
   const startTime = process.hrtime();
   // When using the prebuilt manager, we straight up copy it into the outputDir instead of building it
   const manager = prebuiltDir
-    ? cpy('**', options.outputDir, { cwd: prebuiltDir, parents: true }).then(() => {})
+    ? fs.copy(prebuiltDir, options.outputDir, { dereference: true }).then(() => {})
     : managerBuilder.build({ startTime, options: fullOptions });
 
   if (options.ignorePreview) {
@@ -222,7 +221,9 @@ export async function buildStatic({ packageJson, ...loadOptions }: LoadOptions)
   try {
     await buildStaticStandalone(options);
   } catch (error) {
-    logger.error(error);
+    if (error instanceof Error) {
+      logger.error(error.stack || error.message);
+    }
 
     const presets = loadAllPresets({
       corePresets: [require.resolve('./presets/common-preset')],
diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts
index 4569b1dfd488..0151dfe7febc 100644
--- a/lib/core-server/src/core-presets.test.ts
+++ b/lib/core-server/src/core-presets.test.ts
@@ -83,7 +83,11 @@ jest.mock('@storybook/store', () => {
   };
 });
 
-jest.mock('cpy', () => () => Promise.resolve());
+jest.mock('fs-extra', () => ({
+  ...jest.requireActual('fs-extra'),
+  copyFile: jest.fn().mockResolvedValue(Promise.resolve()),
+  copy: jest.fn().mockResolvedValue(Promise.resolve()),
+}));
 jest.mock('http', () => ({
   ...jest.requireActual('http'),
   createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
diff --git a/lib/core-server/src/utils/StoryIndexGenerator.ts b/lib/core-server/src/utils/StoryIndexGenerator.ts
index 8a0d69cb4997..80323b8cea62 100644
--- a/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -88,7 +88,7 @@ export class StoryIndexGenerator {
       const importPath = slash(normalizeStoryPath(relativePath));
       const makeTitle = (userTitle?: string) => {
         return userOrAutoTitleFromSpecifier(importPath, specifier, userTitle);
-      }
+      };
       const csf = (await readCsfOrMdx(absolutePath, { makeTitle })).parse();
       csf.stories.forEach(({ id, name }) => {
         fileStories[id] = {
diff --git a/lib/manager-webpack4/src/presets/babel-loader-manager.ts b/lib/manager-webpack4/src/presets/babel-loader-manager.ts
index 04ca8447de9d..72d68b591491 100644
--- a/lib/manager-webpack4/src/presets/babel-loader-manager.ts
+++ b/lib/manager-webpack4/src/presets/babel-loader-manager.ts
@@ -5,7 +5,7 @@ export const babelLoader = () => {
   const { plugins, presets } = getStorybookBabelConfig();
 
   return {
-    test: /\.(mjs|tsx?|jsx?)$/,
+    test: /\.(cjs|mjs|tsx?|jsx?)$/,
     use: [
       {
         loader: require.resolve('babel-loader'),
diff --git a/lib/manager-webpack5/src/presets/babel-loader-manager.ts b/lib/manager-webpack5/src/presets/babel-loader-manager.ts
index 04ca8447de9d..72d68b591491 100644
--- a/lib/manager-webpack5/src/presets/babel-loader-manager.ts
+++ b/lib/manager-webpack5/src/presets/babel-loader-manager.ts
@@ -5,7 +5,7 @@ export const babelLoader = () => {
   const { plugins, presets } = getStorybookBabelConfig();
 
   return {
-    test: /\.(mjs|tsx?|jsx?)$/,
+    test: /\.(cjs|mjs|tsx?|jsx?)$/,
     use: [
       {
         loader: require.resolve('babel-loader'),
diff --git a/lib/router/src/utils.test.ts b/lib/router/src/utils.test.ts
index e7ae39173ade..adda7905ba85 100644
--- a/lib/router/src/utils.test.ts
+++ b/lib/router/src/utils.test.ts
@@ -34,6 +34,12 @@ describe('getMatch', () => {
 
     expect(output).toBe(null);
   });
+
+  it('returns null match if "startsWith" part is in the middle', () => {
+    const output = getMatch('/foo/bar', '/bar', true);
+
+    expect(output).toBe(null);
+  });
 });
 
 describe('parsePath', () => {
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
index ed84228bfa98..7d3aeca0c786 100644
--- a/lib/router/src/utils.ts
+++ b/lib/router/src/utils.ts
@@ -148,11 +148,19 @@ type Match = { path: string };
 
 export const getMatch = memoize(1000)(
   (current: string, target: string, startsWith = true): Match | null => {
-    const startsWithTarget = current && startsWith && current.startsWith(target);
+    if (startsWith) {
+      const startsWithTarget = current && current.startsWith(target);
+      if (startsWithTarget) {
+        return { path: current };
+      }
+
+      return null;
+    }
+
     const currentIsTarget = typeof target === 'string' && current === target;
     const matchTarget = current && target && current.match(target);
 
-    if (startsWithTarget || currentIsTarget || matchTarget) {
+    if (currentIsTarget || matchTarget) {
       return { path: current };
     }
 
diff --git a/lib/store/src/autoTitle.test.ts b/lib/store/src/autoTitle.test.ts
index 112448ff4059..b7e95b6e7268 100644
--- a/lib/store/src/autoTitle.test.ts
+++ b/lib/store/src/autoTitle.test.ts
@@ -18,18 +18,25 @@ const winOptions = {
 };
 
 describe('userOrAutoTitleFromSpecifier', () => {
-
   describe('user title', () => {
     it('no match', () => {
       expect(
-        userOrAuto('./ path / to / file.stories.js', normalizeStoriesEntry({ directory: './ other' }, options), 'title')
+        userOrAuto(
+          './ path / to / file.stories.js',
+          normalizeStoriesEntry({ directory: './ other' }, options),
+          'title'
+        )
       ).toBeFalsy();
     });
 
     describe('no trailing slash', () => {
       it('match with no titlePrefix', () => {
         expect(
-          userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options), 'title')
+          userOrAuto(
+            './path/to/file.stories.js',
+            normalizeStoriesEntry({ directory: './path' }, options),
+            'title'
+          )
         ).toMatchInlineSnapshot(`title`);
       });
 
@@ -77,7 +84,11 @@ describe('userOrAutoTitleFromSpecifier', () => {
     describe('trailing slash', () => {
       it('match with no titlePrefix', () => {
         expect(
-          userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options), 'title')
+          userOrAuto(
+            './path/to/file.stories.js',
+            normalizeStoriesEntry({ directory: './path/' }, options),
+            'title'
+          )
         ).toMatchInlineSnapshot(`title`);
       });
 
@@ -126,14 +137,22 @@ describe('userOrAutoTitleFromSpecifier', () => {
   describe('auto title', () => {
     it('no match', () => {
       expect(
-        userOrAuto('./ path / to / file.stories.js', normalizeStoriesEntry({ directory: './ other' }, options), undefined)
+        userOrAuto(
+          './ path / to / file.stories.js',
+          normalizeStoriesEntry({ directory: './ other' }, options),
+          undefined
+        )
       ).toBeFalsy();
     });
 
     describe('no trailing slash', () => {
       it('match with no titlePrefix', () => {
         expect(
-          userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path' }, options), undefined)
+          userOrAuto(
+            './path/to/file.stories.js',
+            normalizeStoriesEntry({ directory: './path' }, options),
+            undefined
+          )
         ).toMatchInlineSnapshot(`to/file`);
       });
 
@@ -201,7 +220,11 @@ describe('userOrAutoTitleFromSpecifier', () => {
     describe('trailing slash', () => {
       it('match with no titlePrefix', () => {
         expect(
-          userOrAuto('./path/to/file.stories.js', normalizeStoriesEntry({ directory: './path/' }, options), undefined)
+          userOrAuto(
+            './path/to/file.stories.js',
+            normalizeStoriesEntry({ directory: './path/' }, options),
+            undefined
+          )
         ).toMatchInlineSnapshot(`to/file`);
       });
 
diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts
index 50976f126bd5..8ffe07a3e2b9 100644
--- a/lib/store/src/storySort.test.ts
+++ b/lib/store/src/storySort.test.ts
@@ -124,4 +124,19 @@ describe('preview.storySort', () => {
     expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
     expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
   });
+
+  it('sorts according to the nested order array with parent wildcard', () => {
+    const sortFn = storySort({
+      order: ['*', ['*', 'b', 'a']],
+      includeNames: true,
+    });
+
+    expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
+    expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
+    expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
+    expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
+  });
 });
diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts
index ec3d01e3040a..b1d49bfb2865 100644
--- a/lib/store/src/storySort.ts
+++ b/lib/store/src/storySort.ts
@@ -79,7 +79,8 @@ export const storySort =
       }
 
       // If a nested array is provided for a name, use it for ordering.
-      const index = order.indexOf(nameA);
+      let index = order.indexOf(nameA);
+      if (index === -1) index = order.indexOf('*');
       order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
 
       // We'll need to look at the next part of the name.
diff --git a/lib/telemetry/src/get-monorepo-type.ts b/lib/telemetry/src/get-monorepo-type.ts
index 9f49ce41cdf8..e9c628c521dd 100644
--- a/lib/telemetry/src/get-monorepo-type.ts
+++ b/lib/telemetry/src/get-monorepo-type.ts
@@ -27,7 +27,7 @@ export const getMonorepoType = (): MonorepoType => {
   if (monorepoType) {
     return monorepoType;
   }
-  
+
   if (!fs.existsSync(path.join(projectRootPath, 'package.json'))) return undefined;
 
   const packageJson = fs.readJsonSync(path.join(projectRootPath, 'package.json')) as PackageJson;
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
index 845e3a3d0754..0628723a94af 100644
--- a/lib/ui/src/components/layout/container.tsx
+++ b/lib/ui/src/components/layout/container.tsx
@@ -569,10 +569,11 @@ class Layout extends Component<LayoutProps, LayoutState> {
                       marginTop: -margin,
                     }
                   : {
-                      marginLeft: -margin,
+                      marginLeft: 1,
                     }
               }
               axis={isPanelBottom ? 'y' : 'x'}
+              reverse
             />
           </Draggable>
         )}
diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
index 4424b084fdb0..6fe6dfed7a32 100644
--- a/lib/ui/src/components/layout/draggers.tsx
+++ b/lib/ui/src/components/layout/draggers.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 
 export type Axis = 'x' | 'y';
 
-const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
+const Handle = styled.div<{ isDragging: boolean; axis: Axis; reverse?: boolean }>(
   ({ theme, isDragging }) => ({
     zIndex: 10,
     position: 'absolute',
@@ -17,7 +17,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
 
     overflow: 'hidden',
     transition:
-      'color 0.2s linear, background-position 0.2s linear, background-size 0.2s linear, background 0.2s linear',
+      'color 0.2s linear, background-size 0.2s linear, background 0.2s linear, background-position 0s linear',
     '&:hover': {
       color: theme.color.secondary,
     },
@@ -37,7 +37,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
           width: '100%',
           marginTop: 0,
         },
-  ({ axis, isDragging }) => {
+  ({ axis, isDragging, reverse = false }) => {
     if (axis === 'y') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
@@ -57,7 +57,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '50px 100%',
-        backgroundPosition: '0 50%',
+        backgroundPosition: reverse ? '100% 50%' : '0 50%',
         backgroundRepeat: 'no-repeat',
       };
       return isDragging
diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 222df3e2bcf3..20887cae22f2 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -190,7 +190,6 @@ const Node = React.memo<NodeProps>(
           data-ref-id={refId}
           data-item-id={item.id}
           data-nodetype="root"
-          aria-expanded={isExpanded}
         >
           <CollapseButton
             type="button"
@@ -199,6 +198,7 @@ const Node = React.memo<NodeProps>(
               event.preventDefault();
               setExpanded({ ids: [item.id], value: !isExpanded });
             }}
+            aria-expanded={isExpanded}
           >
             <CollapseIcon isExpanded={isExpanded} />
             {item.renderLabel?.(item) || item.name}
diff --git a/yarn.lock b/yarn.lock
index be9ddfd72d27..08135ba78f4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6829,10 +6829,11 @@ __metadata:
     "@types/puppeteer": ^5.4.0
     core-js: ^3.8.2
     jest-image-snapshot: ^4.3.0
+    puppeteer: ^2.0.0 || ^3.0.0
     regenerator-runtime: ^0.13.7
   peerDependencies:
     "@storybook/addon-storyshots": 6.5.0-rc.1
-    puppeteer: ^2.0.0 || ^3.0.0
+    puppeteer: ">=2.0.0"
   peerDependenciesMeta:
     puppeteer:
       optional: true
@@ -6947,7 +6948,7 @@ __metadata:
     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
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7763,7 +7764,6 @@ __metadata:
     commander: ^6.2.1
     compression: ^1.7.4
     core-js: ^3.8.2
-    cpy: ^8.1.2
     detect-port: ^1.3.0
     express: ^4.17.1
     fs-extra: ^9.0.1
@@ -15978,7 +15978,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer@npm:^5.5.0, buffer@npm:^5.6.0":
+"buffer@npm:^5.2.1, buffer@npm:^5.5.0, buffer@npm:^5.6.0":
   version: 5.7.1
   resolution: "buffer@npm:5.7.1"
   dependencies:
@@ -18123,35 +18123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cp-file@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "cp-file@npm:7.0.0"
-  dependencies:
-    graceful-fs: ^4.1.2
-    make-dir: ^3.0.0
-    nested-error-stacks: ^2.0.0
-    p-event: ^4.1.0
-  checksum: db3ef3e3e466742f392ae71edb9b2cdbb314e855d97630a65de57bc1097bacf6e844f6d9d44882b8678c0de26ba7e656c2c915960435970067823372e807eafa
-  languageName: node
-  linkType: hard
-
-"cpy@npm:^8.1.2":
-  version: 8.1.2
-  resolution: "cpy@npm:8.1.2"
-  dependencies:
-    arrify: ^2.0.1
-    cp-file: ^7.0.0
-    globby: ^9.2.0
-    has-glob: ^1.0.0
-    junk: ^3.1.0
-    nested-error-stacks: ^2.1.0
-    p-all: ^2.1.0
-    p-filter: ^2.1.0
-    p-map: ^3.0.0
-  checksum: 84611fdd526a0582ae501a0fa1e1d55e16348c69110eb17be5fc0c087b7b2aa6caec014286b669e4f123750d01e0c4db77d32fdcdb9840c3df4d161a137a345a
-  languageName: node
-  linkType: hard
-
 "cra-kitchen-sink@workspace:examples/cra-kitchen-sink":
   version: 0.0.0-use.local
   resolution: "cra-kitchen-sink@workspace:examples/cra-kitchen-sink"
@@ -20919,7 +20890,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0":
+"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
   version: 1.4.4
   resolution: "end-of-stream@npm:1.4.4"
   dependencies:
@@ -22733,7 +22704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extract-zip@npm:2.0.1":
+"extract-zip@npm:2.0.1, extract-zip@npm:^2.0.0":
   version: 2.0.1
   resolution: "extract-zip@npm:2.0.1"
   dependencies:
@@ -23695,6 +23666,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-constants@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fs-constants@npm:1.0.0"
+  checksum: a0cde99085f0872f4d244e83e03a46aa387b74f5a5af750896c6b05e9077fac00e9932fdf5aef84f2f16634cd473c63037d7a512576da7d5c2b9163d1909f3a8
+  languageName: node
+  linkType: hard
+
 "fs-exists-sync@npm:^0.1.0":
   version: 0.1.0
   resolution: "fs-exists-sync@npm:0.1.0"
@@ -24894,15 +24872,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-glob@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-glob@npm:1.0.0"
-  dependencies:
-    is-glob: ^3.0.0
-  checksum: 2546d20b7a667304d8b2e490c2d5a4e20e799a43eb6d97c0d47c0c737bbde082a73731001c791d445b904b3f408d584477df7d2d301183e13c4b3f0a3c81787b
-  languageName: node
-  linkType: hard
-
 "has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-symbols@npm:1.0.2"
@@ -26982,7 +26951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
+"is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
   dependencies:
@@ -29707,13 +29676,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"junk@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "junk@npm:3.1.0"
-  checksum: 820174b9fa9a3af09aeeeeb1022df2481a2b10752ce5f65ac63924a79cb9bba83ea7c288e8d5b448951109742da5ea69a230846f4bf3c17c5c6a1d0603b63db4
-  languageName: node
-  linkType: hard
-
 "jwa@npm:^1.4.1":
   version: 1.4.1
   resolution: "jwa@npm:1.4.1"
@@ -32779,6 +32741,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mkdirp-classic@npm:^0.5.2":
+  version: 0.5.3
+  resolution: "mkdirp-classic@npm:0.5.3"
+  checksum: 95371d831d196960ddc3833cc6907e6b8f67ac5501a6582f47dfae5eb0f092e9f8ce88e0d83afcae95d6e2b61a01741ba03714eeafb6f7a6e9dcc158ac85b168
+  languageName: node
+  linkType: hard
+
 "mkdirp-promise@npm:^5.0.1":
   version: 5.0.1
   resolution: "mkdirp-promise@npm:5.0.1"
@@ -33162,13 +33131,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nested-error-stacks@npm:^2.0.0, nested-error-stacks@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "nested-error-stacks@npm:2.1.0"
-  checksum: 8d4e8f81a66be0910d766b3a5972117b0a65bade2f18b2dcb414489e73f93d84dd2b88d5cbf3550b7f427c2f2bbfe2e6e2945b228eefe3328b1fde335df220d1
-  languageName: node
-  linkType: hard
-
 "next-tick@npm:~1.0.0":
   version: 1.0.0
   resolution: "next-tick@npm:1.0.0"
@@ -34464,15 +34426,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-all@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "p-all@npm:2.1.0"
-  dependencies:
-    p-map: ^2.0.0
-  checksum: 874eafa2e3f38b258f8beed34549befbc8a52a63818e0981b8beff03f592e1e1f47b8aab2483f844f2745815ffa010def58bf1edbc95614466c55411f02f3049
-  languageName: node
-  linkType: hard
-
 "p-cancelable@npm:^1.0.0":
   version: 1.1.0
   resolution: "p-cancelable@npm:1.1.0"
@@ -34510,24 +34463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-event@npm:^4.1.0":
-  version: 4.2.0
-  resolution: "p-event@npm:4.2.0"
-  dependencies:
-    p-timeout: ^3.1.0
-  checksum: f1b6a2fb13d47f2a8afc00150da5ece0d28940ce3d8fa562873e091d3337d298e78fee9cb18b768598ff1d11df608b2ae23868309ff6405b864a2451ccd6d25a
-  languageName: node
-  linkType: hard
-
-"p-filter@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "p-filter@npm:2.1.0"
-  dependencies:
-    p-map: ^2.0.0
-  checksum: 5ac34b74b3b691c04212d5dd2319ed484f591c557a850a3ffc93a08cb38c4f5540be059c6b10a185773c479ca583a91ea00c7d6c9958c815e6b74d052f356645
-  languageName: node
-  linkType: hard
-
 "p-finally@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-finally@npm:1.0.0"
@@ -34678,15 +34613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-timeout@npm:^3.1.0":
-  version: 3.2.0
-  resolution: "p-timeout@npm:3.2.0"
-  dependencies:
-    p-finally: ^1.0.0
-  checksum: 524b393711a6ba8e1d48137c5924749f29c93d70b671e6db761afa784726572ca06149c715632da8f70c090073afb2af1c05730303f915604fd38ee207b70a61
-  languageName: node
-  linkType: hard
-
 "p-try@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-try@npm:1.0.0"
@@ -37176,6 +37102,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.27.0":
+  version: 1.28.0
+  resolution: "prismjs@npm:1.28.0"
+  checksum: bf879309e74188b424cf8bb3962f9df9e7004a71f44f82a3cfbd26f884c9a0bb91f529db79503c1bc0b570ed7b94a10c3303153642da533c1e10f51779c0617f
+  languageName: node
+  linkType: hard
+
 "private@npm:^0.1.6, private@npm:^0.1.8, private@npm:~0.1.5":
   version: 0.1.8
   resolution: "private@npm:0.1.8"
@@ -37719,6 +37652,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"puppeteer@npm:^2.0.0 || ^3.0.0":
+  version: 3.3.0
+  resolution: "puppeteer@npm:3.3.0"
+  dependencies:
+    debug: ^4.1.0
+    extract-zip: ^2.0.0
+    https-proxy-agent: ^4.0.0
+    mime: ^2.0.3
+    progress: ^2.0.1
+    proxy-from-env: ^1.0.0
+    rimraf: ^3.0.2
+    tar-fs: ^2.0.0
+    unbzip2-stream: ^1.3.3
+    ws: ^7.2.3
+  checksum: 9f8d7f00458425f9ca42580f509f5406ddf27767dbf93080d05157a7882efaf0e32c77e540c8a4d2bd295ab11584a8447d9e6593d6316bf04ce1a16d6fd11b4e
+  languageName: node
+  linkType: hard
+
 "puppeteer@npm:^2.1.1":
   version: 2.1.1
   resolution: "puppeteer@npm:2.1.1"
@@ -38670,6 +38621,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-syntax-highlighter@npm:^15.5.0":
+  version: 15.5.0
+  resolution: "react-syntax-highlighter@npm:15.5.0"
+  dependencies:
+    "@babel/runtime": ^7.3.1
+    highlight.js: ^10.4.1
+    lowlight: ^1.17.0
+    prismjs: ^1.27.0
+    refractor: ^3.6.0
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: 2bf57a1ea151f688efc7eba355677577c9bb55f05f9df7ef86627aae42f63f505486cddf3f4a628aecc51ec75e89beb9533201570d03201c4bf7d69d61d2545d
+  languageName: node
+  linkType: hard
+
 "react-test-renderer@npm:^16.0.0-0, react-test-renderer@npm:^16.2.0":
   version: 16.14.0
   resolution: "react-test-renderer@npm:16.14.0"
@@ -39179,7 +39145,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"refractor@npm:^3.2.0":
+"refractor@npm:^3.2.0, refractor@npm:^3.6.0":
   version: 3.6.0
   resolution: "refractor@npm:3.6.0"
   dependencies:
@@ -43368,6 +43334,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar-fs@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "tar-fs@npm:2.1.1"
+  dependencies:
+    chownr: ^1.1.1
+    mkdirp-classic: ^0.5.2
+    pump: ^3.0.0
+    tar-stream: ^2.1.4
+  checksum: 871d26a934bfb7beeae4c4d8a09689f530b565f79bd0cf489823ff0efa3705da01278160da10bb006d1a793fa0425cf316cec029b32a9159eacbeaff4965fb6d
+  languageName: node
+  linkType: hard
+
+"tar-stream@npm:^2.1.4":
+  version: 2.2.0
+  resolution: "tar-stream@npm:2.2.0"
+  dependencies:
+    bl: ^4.0.3
+    end-of-stream: ^1.4.1
+    fs-constants: ^1.0.0
+    inherits: ^2.0.3
+    readable-stream: ^3.1.1
+  checksum: 2f4c910b3ee7196502e1ff015a7ba321ec6ea837667220d7bcb8d0852d51cb04b87f7ae471008a6fb8f5b1a1b5078f62f3a82d30c706f20ada1238ac797e7692
+  languageName: node
+  linkType: hard
+
 "tar@npm:5.0.5":
   version: 5.0.5
   resolution: "tar@npm:5.0.5"
@@ -44844,6 +44835,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unbzip2-stream@npm:^1.3.3":
+  version: 1.4.3
+  resolution: "unbzip2-stream@npm:1.4.3"
+  dependencies:
+    buffer: ^5.2.1
+    through: ^2.3.8
+  checksum: 2ea2048f3c9db3499316ccc1d95ff757017ccb6f46c812d7c42466247e3b863fb178864267482f7f178254214247779daf68e85f50bd7736c3c97ba2d58b910a
+  languageName: node
+  linkType: hard
+
 "undefsafe@npm:^2.0.5":
   version: 2.0.5
   resolution: "undefsafe@npm:2.0.5"
@@ -47928,6 +47929,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^7.2.3":
+  version: 7.5.8
+  resolution: "ws@npm:7.5.8"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 0d2e3f16102dc7fe7544e1f7c09a12cdd2b2ac3134ba3f9dabdc7e8c003d5a7797caa29fdb13d22cd5e2a7481d80fde779526d73a7b4b57d0480d6f62e5571d5
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.2.3":
   version: 8.5.0
   resolution: "ws@npm:8.5.0"