Merge branch 'next' into tech/do-not-remove-old-framewokr-automigrate

2025-04-05 08:01:20 +08:00 · 2022-09-13 14:24:43 +03:00 · 2022-09-13 14:24:43 +03:00 · 028f327e2e
commit 028f327e2e
parent 9a0ca4fc32 11ec40bfcf
553 changed files with 5242 additions and 13951 deletions
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@ -15,7 +15,7 @@ jobs:
      fail-fast: false
      matrix:
        os: [ubuntu-latest]
-        node_version: [12, 14, 16]
+        node_version: [14, 16]
        include:
          - os: macos-latest
            node_version: 16
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -3,5 +3,15 @@
 # and commit this file to your remote git repository to share the goodness with others.

 tasks:
-  - init: yarn
-    command: yarn bootstrap --core
+  - name: Scripts
+    init: |
+      cd scripts
+      yarn install
+      gp sync-done scripts
+  
+  - name: Code
+    init: |
+      gp sync-await scripts # wait for the above 'init' to finish
+      cd code
+      yarn install
+      yarn bootstrap --core
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,41 @@
+## 7.0.0-alpha.33 (September 13, 2022)
+
+#### Features
+
+-   Core: Add a new `throwPlayFunctionExceptions` parameter [#19143](https://github.com/storybooks/storybook/pull/19143)
+
+#### Bug Fixes
+
+-   Fix issue in instrumenter with `waitFor` [#19145](https://github.com/storybooks/storybook/pull/19145)
+-   Core: Fix static dirs targeting same destination [#19064](https://github.com/storybooks/storybook/pull/19064)
+-   React: Fix issue with react 18 implementation [#19125](https://github.com/storybooks/storybook/pull/19125)
+-   CLI: Fix spawning child processes on windows [#19019](https://github.com/storybooks/storybook/pull/19019)
+-   Vite: Ensure we set `DOCS_OPTIONS` in the vite builder [#19127](https://github.com/storybooks/storybook/pull/19127)
+
+#### Maintenance
+
+-   Build: Bundle @storybook/cli with tsup [#19138](https://github.com/storybooks/storybook/pull/19138)
+-   Examples: Remove `cra-ts-essentials` [#19170](https://github.com/storybooks/storybook/pull/19170)
+-   Added some basic interactions stories [#19153](https://github.com/storybooks/storybook/pull/19153)
+-   Presets: Replace `config` with `previewAnnotations`, remove `previewEntries` [#19152](https://github.com/storybooks/storybook/pull/19152)
+-   Addon-links: Move stories into addon [#19124](https://github.com/storybooks/storybook/pull/19124)
+-   Addon-a11y: Move stories into addon [#19114](https://github.com/storybooks/storybook/pull/19114)
+-   Toolbars: Generic example stories [#19166](https://github.com/storybooks/storybook/pull/19166)
+-   TypeScript: Revert a few @ts-expect-errors [#19168](https://github.com/storybooks/storybook/pull/19168)
+-   Addon-docs: Generic stories for DocsPage [#19162](https://github.com/storybooks/storybook/pull/19162)
+-   Controls: Generic stories for sorting [#19161](https://github.com/storybooks/storybook/pull/19161)
+-   Build: Generic stories for addon-controls [#19149](https://github.com/storybooks/storybook/pull/19149)
+-   remove node12 from the matrix [#19147](https://github.com/storybooks/storybook/pull/19147)
+-   Build libs/router with ts-up [#19140](https://github.com/storybooks/storybook/pull/19140)
+-   Build: Bundle addon-interactions with tsup [#19139](https://github.com/storybooks/storybook/pull/19139)
+-   Generic stories for remaining core features [#19118](https://github.com/storybooks/storybook/pull/19118)
+-   Add parameter, loader and decorator stories to `lib/store` [#19105](https://github.com/storybooks/storybook/pull/19105)
+-   Convert @ts-ignore to @ts-expect-error [#19122](https://github.com/storybooks/storybook/pull/19122)
+
+#### Dependency Upgrades
+
+-   Upgrade emotion deps again [#19054](https://github.com/storybooks/storybook/pull/19054)
+
 ## 7.0.0-alpha.31 (September 7, 2022)

 #### Maintenance
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -21,6 +21,7 @@
    - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
    - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
    - [Icons API changed](#icons-api-changed)
+    - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-preview-annotations)
  - [Docs Changes](#docs-changes)
    - [Standalone docs files](#standalone-docs-files)
    - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@ -543,6 +544,12 @@ export interface IconsProps extends ComponentProps<typeof Svg> {

 Full change here: https://github.com/storybookjs/storybook/pull/18809

+#### 'config' preset entry replaced with 'previewAnnotations'
+
+The preset field `'config'` has been replaced with `'previewAnnotations'`. `'config'` is now deprecated and will be removed in Storybook 8.0.
+
+Additionally, the internal field `'previewEntries'` has been removed. If you need a preview entry, just use a `'previewAnnotations'` file and don't export anything.
+
 ### Docs Changes

 The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.
@ -672,9 +679,7 @@ import * as previewAnnotations from '../.storybook/preview';

 export default function App({ Component, pageProps }) {
  return (
-    <ExternalDocs
-      projectAnnotationsList={[reactAnnotations, previewAnnotations]}
-    >
+    <ExternalDocs projectAnnotationsList={[reactAnnotations, previewAnnotations]}>
      <Component {...pageProps} />
    </ExternalDocs>
  );
@ -798,8 +803,7 @@ import startCase from 'lodash/startCase';

 addons.setConfig({
  sidebar: {
-    renderLabel: ({ name, type }) =>
-      type === 'story' ? name : startCase(name),
+    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
  },
 });
 ```
@ -1226,11 +1230,7 @@ After:
 ```js
 // .storybook/main.js
 module.exports = {
-  staticDirs: [
-    '../public',
-    '../static',
-    { from: '../foo/assets', to: '/assets' },
-  ],
+  staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
 };
 ```

@ -1778,17 +1778,13 @@ This breaking change only affects you if your stories actually use the context,
 Consider the following story that uses the context:

 ```js
-export const Dummy = ({ parameters }) => (
-  <div>{JSON.stringify(parameters)}</div>
-);
+export const Dummy = ({ parameters }) => <div>{JSON.stringify(parameters)}</div>;
 ```

 Here's an updated story for 6.0 that ignores the args object:

 ```js
-export const Dummy = (_args, { parameters }) => (
-  <div>{JSON.stringify(parameters)}</div>
-);
+export const Dummy = (_args, { parameters }) => <div>{JSON.stringify(parameters)}</div>;
 ```

 Alternatively, if you want to opt out of the new behavior, you can add the following to your `.storybook/preview.js` config:
@ -2208,7 +2204,7 @@ To configure a11y now, you have to specify configuration using story parameters,
 ```js
 export const parameters = {
  a11y: {
-    element: "#storybook-root",
+    element: '#storybook-root',
    config: {},
    options: {},
    manual: true,
@ -2578,9 +2574,7 @@ For example, here's how to sort by story ID using `storySort`:
 addParameters({
  options: {
    storySort: (a, b) =>
-      a[1].kind === b[1].kind
-        ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
 });
 ```
@ -2626,9 +2620,7 @@ Storybook 5.1 relies on `core-js@^3.0.0` and therefore causes a conflict with An
 {
  "compilerOptions": {
    "paths": {
-      "core-js/es7/reflect": [
-        "node_modules/core-js/proposals/reflect-metadata"
-      ],
+      "core-js/es7/reflect": ["node_modules/core-js/proposals/reflect-metadata"],
      "core-js/es6/*": ["node_modules/core-js/es"]
    }
  }
--- a/code/.eslintignore
+++ b/code/.eslintignore
@ -17,8 +17,6 @@ examples/ember-cli/.storybook/preview-head.html
 examples/official-storybook/tests/addon-jest.test.js
 examples/cra-ts-kitchen-sink/*.json
 examples/cra-ts-kitchen-sink/public/*
-examples/cra-ts-essentials/*.json
-examples/cra-ts-essentials/public/*
 ember-output
 .yarn
 !.remarkrc.js
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -62,15 +62,15 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.31",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/channels": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addon-highlight": "7.0.0-alpha.33",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/channels": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/theming": "7.0.0-alpha.33",
    "axe-core": "^4.2.0",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -104,7 +104,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/code/addons/a11y/src/a11yRunner.ts
+++ b/code/addons/a11y/src/a11yRunner.ts
@ -69,9 +69,7 @@ const getParams = async (storyId: string): Promise<A11yParameters> => {
  return (
    parameters.a11y || {
      config: {},
-      options: {
-        restoreScroll: true,
-      },
+      options: {},
    }
  );
 };
--- a/code/addons/a11y/template/stories/parameters.stories.ts
+++ b/code/addons/a11y/template/stories/parameters.stories.ts
@ -0,0 +1,63 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Html,
+  args: {
+    contents: '<button>Click Me!</button>',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Options = {
+  args: {
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
+  },
+  parameters: {
+    a11y: {
+      config: {},
+      options: {
+        checks: {
+          'color-contrast': { enabled: false },
+        },
+      },
+    },
+  },
+};
+
+export const Config = {
+  args: {
+    contents:
+      '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: 'avoid-inline-spacing', options: {} }],
+        disableOtherRules: true,
+      },
+      options: {},
+    },
+  },
+};
+
+export const Targetted = {
+  args: {
+    contents: '<button class="custom-target">Click Me!</button>',
+  },
+  parameters: {
+    a11y: {
+      element: '.custom-target',
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    a11y: {
+      disable: true,
+    },
+  },
+};
--- a/code/addons/a11y/template/stories/tests.stories.ts
+++ b/code/addons/a11y/template/stories/tests.stories.ts
@ -0,0 +1,65 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Html,
+  args: {
+    contents: '',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Violations = {
+  args: {
+    contents: `
+      <div>
+        <p>empty heading</p>
+        <h1></h1>
+      </div>
+      <div>
+        <p>empty button</p>
+        <button></button>
+      </div>
+      <div>
+        <p>low contrast</p>
+        <button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>
+      </div>
+      <div>
+        <p>missing label</p>
+        <label><input /></label>
+      </div>
+      <div>
+        <p>missing alt</p>
+        <img src="https://storybook.js.org/images/placeholders/350x150.png" />
+      </div>
+    `,
+  },
+};
+
+export const Passes = {
+  args: {
+    contents: `
+      <div>
+        <p>heading</p>
+        <h1>heading 1</h1>
+      </div>
+      <div>
+        <p>button</p>
+        <button>Click me!</button>
+      </div>
+      <div>
+        <p>contrast</p>
+        <button style="color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">Click me!</button>
+      </div>
+      <div>
+        <p>label</p>
+        <label><span>label</span><input /></label>
+      </div>
+      <div>
+        <p>alt</p>
+        <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="placeholder" />
+      </div>
+    `,
+  },
+};
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -35,13 +35,13 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/theming": "7.0.0-alpha.33",
    "dequal": "^2.0.2",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/code/addons/actions/src/preview/action.ts
+++ b/code/addons/actions/src/preview/action.ts
@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
 const serializeArg = <T>(a: T) => {
  if (isReactSyntheticEvent(a)) {
    const e: SyntheticEvent = Object.create(
-      // @ts-ignore
+      // @ts-expect-error (Converted from ts-ignore)
      a.constructor.prototype,
      Object.getOwnPropertyDescriptors(a)
    );
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -62,13 +62,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/theming": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "ts-dedent": "^2.0.0",
@ -99,7 +99,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/code/addons/backgrounds/template/stories/parameters.stories.ts
+++ b/code/addons/backgrounds/template/stories/parameters.stories.ts
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -57,16 +57,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/blocks": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-common": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/blocks": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/node-logger": "7.0.0-alpha.31",
-    "@storybook/store": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/node-logger": "7.0.0-alpha.33",
+    "@storybook/store": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
@ -92,7 +92,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/code/addons/controls/template/stories/basics.stories.ts
+++ b/code/addons/controls/template/stories/basics.stories.ts
@ -0,0 +1,83 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+  argTypes: {
+    boolean: { control: 'boolean' },
+    color: { control: 'color' },
+    colorWithPresets: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
+      },
+    },
+    colorStartOpen: { control: { type: 'color', startOpen: true } },
+    date: { control: 'date' },
+    file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
+    number: { control: 'number' },
+    object: { control: 'object' },
+    radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
+    radioWithLabels: {
+      control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
+    },
+    inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
+    select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
+    multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
+    range: { control: 'range' },
+    rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
+    text: { control: 'text' },
+  },
+};
+
+export const Undefined = {
+  args: {},
+};
+
+const DEFAULT_NESTED_OBJECT = {
+  text: 'Hello world',
+  boolean: true,
+  array: ['One', 'Two', 'Three'],
+  object: { a: 1, b: 2, c: 3 },
+};
+export const Defined = {
+  args: {
+    boolean: true,
+    color: '#ff0',
+    colorWithPresets: 'pink',
+    colorStartOpen: 'orange',
+    date: new Date(2010, 1, 1),
+    file: ['https://storybook.js.org/images/placeholders/350x150.png'],
+    number: 10,
+    object: DEFAULT_NESTED_OBJECT,
+    radio: 'a',
+    radioWithLabels: 'b',
+    inlineRadio: 'c',
+    select: 'b',
+    multiSelect: ['a'],
+    range: 15,
+    rangeCustom: 10,
+    text: 'hello',
+  },
+};
+
+// export const ImageFileControl = (args) => <img src={args.imageUrls[0]} alt="Your Example Story" />;
+// ImageFileControl.args = {
+//   imageUrls: ['https://storybook.js.org/images/placeholders/350x150.png'],
+// };
+
+// const hasCycle: any = {};
+// hasCycle.cycle = hasCycle;
+
+// export const CyclicArgs = {
+//   args: process.env.NODE_ENV !== 'test' ? { object: hasCycle } : {},
+//   parameters: {
+//     docs: { disable: true },
+//     chromatic: { disable: true },
+//     storyshots: { disable: true },
+//   },
+// };
--- a/code/addons/controls/template/stories/conditional.stories.ts
+++ b/code/addons/controls/template/stories/conditional.stories.ts
@ -0,0 +1,62 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const MutuallyExclusiveModes = {
+  argTypes: {
+    mutuallyExclusiveA: { control: 'text', if: { arg: 'mutuallyExclusiveB', truthy: false } },
+    mutuallyExclusiveB: { control: 'text', if: { arg: 'mutuallyExclusiveA', truthy: false } },
+  },
+};
+
+export const ToggleControl = {
+  argTypes: {
+    colorMode: {
+      control: 'boolean',
+    },
+    dynamicText: {
+      if: { arg: 'colorMode', truthy: false },
+      control: 'text',
+    },
+    dynamicColor: {
+      if: { arg: 'colorMode' },
+      control: 'color',
+    },
+  },
+};
+
+export const ToggleExpandCollapse = {
+  argTypes: {
+    advanced: {
+      control: 'boolean',
+    },
+    margin: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+    padding: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+    cornerRadius: {
+      control: 'number',
+      if: { arg: 'advanced' },
+    },
+  },
+};
+
+export const GlobalBased = {
+  argTypes: {
+    ifThemeExists: { control: 'text', if: { global: 'theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+  },
+};
--- a/code/addons/controls/template/stories/disable.stories.ts
+++ b/code/addons/controls/template/stories/disable.stories.ts
@ -0,0 +1,22 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const DisableTable = {
+  args: { a: 'a', b: 'b' },
+  argTypes: {
+    b: { table: { disable: true } },
+  },
+};
+
+export const DisableControl = {
+  args: { a: 'a', b: 'b' },
+  b: { control: { disable: true } },
+};
--- a/code/addons/controls/template/stories/filters.stories.ts
+++ b/code/addons/controls/template/stories/filters.stories.ts
@ -0,0 +1,47 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+  args: {
+    helloWorld: 1,
+    helloPlanet: 1,
+    byeWorld: 1,
+  },
+};
+
+export const IncludeList = {
+  parameters: {
+    controls: {
+      include: ['helloWorld'],
+    },
+  },
+};
+
+export const IncludeRegex = {
+  parameters: {
+    controls: {
+      include: /hello*/,
+    },
+  },
+};
+
+export const ExcludeList = {
+  parameters: {
+    controls: {
+      exclude: ['helloPlanet', 'helloWorld'],
+    },
+  },
+};
+
+export const ExcludeRegex = {
+  parameters: {
+    controls: {
+      exclude: /hello*/,
+    },
+  },
+};
--- a/code/addons/controls/template/stories/issues.stories.ts
+++ b/code/addons/controls/template/stories/issues.stories.ts
@ -0,0 +1,16 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+// https://github.com/storybookjs/storybook/issues/14752
+export const MissingRadioOptions = {
+  argTypes: { invalidRadio: { control: 'radio' } },
+  args: { invalidRadio: 'someValue' },
+};
--- a/code/addons/controls/template/stories/matchers.stories.ts
+++ b/code/addons/controls/template/stories/matchers.stories.ts
@ -0,0 +1,39 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+};
+
+export const CustomMatchers = {
+  parameters: {
+    controls: {
+      matchers: {
+        date: /whateverIwant/,
+      },
+    },
+    docs: { source: { state: 'open' } },
+  },
+  args: {
+    whateverIwant: '10/10/2020',
+  },
+};
+
+export const DisabledMatchers = {
+  parameters: {
+    controls: {
+      matchers: {
+        date: null,
+        color: null,
+      },
+    },
+  },
+  args: {
+    purchaseDate: '10/10/2020',
+    backgroundColor: '#BADA55',
+  },
+};
--- a/code/addons/controls/template/stories/sorting.stories.ts
+++ b/code/addons/controls/template/stories/sorting.stories.ts
@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+export default {
+  component: null,
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ component: globalThis.Components.Pre, args: { object: context.args } }),
+  ],
+  argTypes: {
+    x: { type: { required: true } },
+    y: { type: { required: true }, table: { category: 'foo' } },
+    z: {},
+    a: { type: { required: true } },
+    b: { table: { category: 'foo' } },
+    c: {},
+  },
+  args: {
+    x: 'x',
+    y: 'y',
+    z: 'z',
+    a: 'a',
+    b: 'b',
+    c: 'c',
+  },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const None = { parameters: { controls: { sort: 'none' } } };
+
+export const Alpha = { parameters: { controls: { sort: 'alpha' } } };
+
+export const RequiredFirst = { parameters: { controls: { sort: 'requiredFirst' } } };
--- a/code/addons/docs/angular/index.js
+++ b/code/addons/docs/angular/index.js
@ -2,6 +2,6 @@
 /* global window */

 export const setCompodocJson = (compodocJson) => {
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -53,22 +53,22 @@
    "@babel/preset-env": "^7.12.11",
    "@jest/transform": "^26.6.2",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/blocks": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-common": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/blocks": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/csf-tools": "7.0.0-alpha.31",
-    "@storybook/docs-tools": "7.0.0-alpha.31",
+    "@storybook/csf-tools": "7.0.0-alpha.33",
+    "@storybook/docs-tools": "7.0.0-alpha.33",
    "@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
-    "@storybook/node-logger": "7.0.0-alpha.31",
-    "@storybook/postinstall": "7.0.0-alpha.31",
-    "@storybook/preview-web": "7.0.0-alpha.31",
-    "@storybook/source-loader": "7.0.0-alpha.31",
-    "@storybook/store": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/node-logger": "7.0.0-alpha.33",
+    "@storybook/postinstall": "7.0.0-alpha.33",
+    "@storybook/preview-web": "7.0.0-alpha.33",
+    "@storybook/source-loader": "7.0.0-alpha.33",
+    "@storybook/store": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "babel-loader": "^8.2.5",
    "dequal": "^2.0.2",
    "global": "^4.4.0",
@ -103,7 +103,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@ -145,7 +145,7 @@ export async function webpack(
 export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
  const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
    let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
    const { compile } = global.FEATURES?.previewMdx2
      ? await import('@storybook/mdx2-csf')
      : await import('@storybook/mdx1-csf');
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@ -0,0 +1,20 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Basic = {
+  args: { children: 'Basic' },
+};
+
+export const Disabled = {
+  args: { children: 'Disabled in DocsPage' },
+  parameters: { docs: { disable: true } },
+};
+
+export const Another = {
+  args: { children: 'Another' },
+};
--- a/code/addons/docs/template/stories/docspage/description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/description.stories.ts
@ -0,0 +1,30 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  // FIXME: remove array subcomponents in 7.0?
+  subcomponents: {
+    Pre: globalThis.Components.Pre,
+  },
+  args: { children: 'Click Me!' },
+  parameters: {
+    docs: {
+      description: {
+        component: '**Component** description',
+      },
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {};
+
+export const CustomDescription = {
+  parameters: {
+    docs: {
+      description: {
+        story: '**Story** description',
+      },
+    },
+  },
+};
--- a/code/addons/docs/template/stories/docspage/extract-description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@ -0,0 +1,17 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: {
+    docs: {
+      // FIXME: this is typically provided by the renderer preset to extract
+      //   the description automatically based on docgen info. including here
+      //   for documentation purposes only.
+      extractComponentDescription: () => 'component description',
+    },
+    chromatic: { disable: true },
+  },
+};
+
+export const Basic = {};
--- a/code/addons/docs/template/stories/docspage/overflow.stories.ts
+++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@ -0,0 +1,12 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Demonstrates overflow',
+    style: { width: 2000, height: 500, background: 'hotpink' },
+  },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Basic = {};
--- a/code/addons/docs/template/stories/docspage/override.stories.ts
+++ b/code/addons/docs/template/stories/docspage/override.stories.ts
@ -0,0 +1,25 @@
+import globalThis from 'global';
+
+// FIXME: do this using basic React functions for multi-framework
+//        once sandbox linking is working
+//
+// import { createElement } from 'react';
+// import { Title, Primary } from '@storybook/addon-docs';
+//
+// const Override = () =>
+//   createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [
+//     createElement(Title),
+//     createElement(Primary),
+//   ]);
+const Override = () => 'overridden';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: {
+    chromatic: { disable: true },
+    docs: { page: Override },
+  },
+};
+
+export const Basic = {};
--- a/code/addons/docs/template/stories/docspage/source.stories.ts
+++ b/code/addons/docs/template/stories/docspage/source.stories.ts
@ -0,0 +1,43 @@
+import globalThis from 'global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { children: 'Click Me!' },
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Auto = {};
+
+export const Disabled = {
+  parameters: {
+    docs: {
+      source: { code: null },
+    },
+  },
+};
+
+export const Code = {
+  parameters: {
+    docs: {
+      source: { type: 'code' },
+    },
+  },
+};
+
+export const Custom = {
+  parameters: {
+    docs: {
+      source: { code: 'custom source' },
+    },
+  },
+};
+
+export const Transform = {
+  parameters: {
+    docs: {
+      transformSource(src: string) {
+        return `// We transformed this!\nconst example = (\n${src}\n);`;
+      },
+    },
+  },
+};
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -33,24 +33,24 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.31",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.31",
-    "@storybook/addon-controls": "7.0.0-alpha.31",
-    "@storybook/addon-docs": "7.0.0-alpha.31",
-    "@storybook/addon-highlight": "7.0.0-alpha.31",
-    "@storybook/addon-measure": "7.0.0-alpha.31",
-    "@storybook/addon-outline": "7.0.0-alpha.31",
-    "@storybook/addon-toolbars": "7.0.0-alpha.31",
-    "@storybook/addon-viewport": "7.0.0-alpha.31",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/core-common": "7.0.0-alpha.31",
-    "@storybook/node-logger": "7.0.0-alpha.31",
+    "@storybook/addon-actions": "7.0.0-alpha.33",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.33",
+    "@storybook/addon-controls": "7.0.0-alpha.33",
+    "@storybook/addon-docs": "7.0.0-alpha.33",
+    "@storybook/addon-highlight": "7.0.0-alpha.33",
+    "@storybook/addon-measure": "7.0.0-alpha.33",
+    "@storybook/addon-outline": "7.0.0-alpha.33",
+    "@storybook/addon-toolbars": "7.0.0-alpha.33",
+    "@storybook/addon-viewport": "7.0.0-alpha.33",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
+    "@storybook/node-logger": "7.0.0-alpha.33",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "7.0.0-alpha.31",
+    "@storybook/vue": "7.0.0-alpha.33",
    "@types/jest": "^26.0.16",
    "typescript": "~4.6.3"
  },
@ -98,5 +98,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
 }
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
@ -37,8 +37,8 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "global": "^4.4.0"
  },
  "devDependencies": {
@ -48,7 +48,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Highlight",
--- a/code/addons/interactions/manager.js
+++ b/code/addons/interactions/manager.js
@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -21,9 +21,32 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preset/preview.js",
+      "import": "./dist/preset/preview.mjs",
+      "types": "./dist/preset/preview.d.ts"
+    },
+    "./register.js": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
  "files": [
    "dist/**/*",
    "README.md",
@ -32,20 +55,19 @@
  ],
  "scripts": {
    "check": "tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
    "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-common": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/instrumenter": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
-    "core-js": "^3.8.2",
+    "@storybook/instrumenter": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "jest-mock": "^27.0.6",
    "polished": "^4.2.2",
@ -72,7 +94,14 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preset/preview.ts"
+    ]
+  },
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Interactions",
    "unsupportedFrameworks": [
--- a/code/addons/interactions/preview.js
+++ b/code/addons/interactions/preview.js
@ -1 +1 @@
-export * from './dist/esm/preset/preview';
+export * from './dist/preset/preview';
--- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx
+++ b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.mdx
@ -1,31 +0,0 @@
-import { Meta, Canvas, Story } from '@storybook/addon-docs';
-import { expect } from '@storybook/jest';
-import { within, waitFor, fireEvent, userEvent, screen } from '@storybook/testing-library';
-
-import { AccountForm } from './AccountFormInteractions';
-
-<Meta
-  title="Addons/Interactions/Examples/AccountForm MDX"
-  component={AccountForm}
-  parameters={{ layout: 'centered', theme: 'light' }}
-  argTypes={{
-    onSubmit: { action: true },
-  }}
-/>
-
-## AccountForm
-
-<Canvas>
-  <Story
-    name="StandardEmailFilled"
-    args={{
-      passwordVerification: false,
-    }}
-    play={async ({ args }) => {
-      await userEvent.type(screen.getByTestId('email'), 'username@email.com');
-      await userEvent.type(screen.getByTestId('password1'), 'thepassword');
-      await userEvent.click(screen.getByRole('button', { name: /create account/i }));
-      await expect(args.onSubmit).not.toHaveBeenCalled();
-    }}
-  />
-</Canvas>
--- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx
+++ b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.stories.tsx
@ -1,162 +0,0 @@
-/* eslint-disable jest/no-standalone-expect */
-import { Meta, ComponentStoryObj } from '@storybook/react';
-import { expect } from '@storybook/jest';
-import { within, waitFor, fireEvent, userEvent } from '@storybook/testing-library';
-
-import { AccountForm } from './AccountFormInteractions';
-
-export default {
-  title: 'Addons/Interactions/Examples/AccountForm',
-  component: AccountForm,
-  parameters: {
-    layout: 'centered',
-    theme: 'light',
-    options: { selectedPanel: 'storybook/interactions/panel' },
-  },
-  argTypes: {
-    onSubmit: { action: true },
-  },
-} as Meta;
-
-type CSF3Story = ComponentStoryObj<typeof AccountForm>;
-
-export const Standard: CSF3Story = {
-  args: { passwordVerification: false },
-};
-
-export const StandardEmailFilled = {
-  ...Standard,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Enter email', async () => {
-      await fireEvent.change(canvas.getByTestId('email'), {
-        target: { value: 'michael@chromatic.com' },
-      });
-    });
-  },
-};
-
-export const StandardEmailFailed = {
-  ...Standard,
-  play: async ({ args, canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Enter email and password', async () => {
-      await userEvent.type(canvas.getByTestId('email'), 'gert@chromatic');
-      await userEvent.type(canvas.getByTestId('password1'), 'supersecret');
-    });
-
-    await step('Submit form', async () => {
-      await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
-    });
-
-    await canvas.findByText('Please enter a correctly formatted email address');
-    await expect(args.onSubmit).not.toHaveBeenCalled();
-  },
-};
-
-export const StandardEmailSuccess = {
-  ...Standard,
-  play: async ({ args, canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Enter email and password', async () => {
-      await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
-      await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
-    });
-
-    await step('Submit form', async () => {
-      await userEvent.click(canvas.getByTestId('submit'));
-    });
-
-    await waitFor(async () => {
-      await expect(args.onSubmit).toHaveBeenCalledTimes(1);
-      await expect(args.onSubmit).toHaveBeenCalledWith({
-        email: 'michael@chromatic.com',
-        password: 'testpasswordthatwontfail',
-      });
-    });
-  },
-};
-
-export const StandardPasswordFailed = {
-  ...Standard,
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
-    await StandardEmailFilled.play(context);
-
-    await context.step('Enter password', async () => {
-      await userEvent.type(canvas.getByTestId('password1'), 'asdf');
-    });
-
-    await context.step('Submit form', async () => {
-      await userEvent.click(canvas.getByTestId('submit'));
-    });
-  },
-};
-
-export const StandardFailHover = {
-  ...StandardPasswordFailed,
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
-    await StandardPasswordFailed.play(context);
-    await waitFor(async () => {
-      await userEvent.hover(canvas.getByTestId('password-error-info'));
-    });
-  },
-};
-
-export const Verification = {
-  args: { passwordVerification: true },
-  argTypes: { onSubmit: { action: 'clicked' } },
-};
-
-export const VerificationPassword = {
-  ...Verification,
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
-    await StandardEmailFilled.play(context);
-    await context.step('Enter password', async () => {
-      await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
-    });
-    await context.step('Submit form', async () => {
-      await userEvent.click(canvas.getByTestId('submit'));
-    });
-  },
-};
-
-export const VerificationPasswordMismatch = {
-  ...Verification,
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
-    await StandardEmailFilled.play(context);
-    await context.step('Enter passwords', async () => {
-      await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
-      await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
-    });
-    await context.step('Submit form', async () => {
-      await userEvent.click(canvas.getByTestId('submit'));
-    });
-  },
-};
-
-export const VerificationSuccess = {
-  ...Verification,
-  play: async (context) => {
-    const canvas = within(context.canvasElement);
-    await StandardEmailFilled.play(context);
-
-    await context.step('Enter passwords', async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      await userEvent.type(canvas.getByTestId('password1'), 'helloyou', { delay: 50 });
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      await userEvent.type(canvas.getByTestId('password2'), 'helloyou', { delay: 50 });
-    });
-
-    await context.step('Submit form', async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      await userEvent.click(canvas.getByTestId('submit'));
-    });
-  },
-};
--- a/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx
+++ b/code/addons/interactions/src/examples/AccountFormInteractions/AccountFormInteractions.tsx
@ -1,553 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { Icons, WithTooltip } from '@storybook/components';
-import { keyframes, styled } from '@storybook/theming';
-import {
-  ErrorMessage,
-  Field as FormikInput,
-  Form as FormikForm,
-  Formik,
-  FormikProps,
-} from 'formik';
-import React, { FC, HTMLAttributes, useCallback, useState } from 'react';
-
-const errorMap = {
-  email: {
-    required: {
-      normal: 'Please enter your email address',
-      tooltip:
-        'We do require an email address and a password as a minimum in order to be able to create an account for you to log in with',
-    },
-    format: {
-      normal: 'Please enter a correctly formatted email address',
-      tooltip:
-        'Your email address is formatted incorrectly and is not correct - please double check for misspelling',
-    },
-  },
-  password: {
-    required: {
-      normal: 'Please enter a password',
-      tooltip: 'A password is requried to create an account',
-    },
-    length: {
-      normal: 'Please enter a password of minimum 6 characters',
-      tooltip:
-        'For security reasons we enforce a password length of minimum 6 characters - but have no other requirements',
-    },
-  },
-  verifiedPassword: {
-    required: {
-      normal: 'Please verify your password',
-      tooltip:
-        'Verification of your password is required to ensure no errors in the spelling of the password',
-    },
-    match: {
-      normal: 'Your passwords do not match',
-      tooltip:
-        'Your verification password has to match your password to make sure you have not misspelled',
-    },
-  },
-};
-
-// https://emailregex.com/
-const email99RegExp = new RegExp(
-  // eslint-disable-next-line no-useless-escape
-  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-);
-
-export interface AccountFormResponse {
-  success: boolean;
-}
-
-export interface AccountFormValues {
-  email: string;
-  password: string;
-}
-
-interface FormValues extends AccountFormValues {
-  verifiedPassword: string;
-}
-
-interface FormErrors {
-  email?: string;
-  emailTooltip?: string;
-  password?: string;
-  passwordTooltip?: string;
-  verifiedPassword?: string;
-  verifiedPasswordTooltip?: string;
-}
-
-export type AccountFormProps = {
-  passwordVerification?: boolean;
-  onSubmit?: (values: AccountFormValues) => void;
-  onTransactionStart?: (values: AccountFormValues) => void;
-  onTransactionEnd?: (values: AccountFormResponse) => void;
-};
-
-export const AccountForm: FC<AccountFormProps> = ({
-  passwordVerification,
-  onSubmit,
-  onTransactionStart,
-  onTransactionEnd,
-}) => {
-  const [state, setState] = useState({
-    transacting: false,
-    transactionSuccess: false,
-    transactionFailure: false,
-  });
-
-  const handleFormSubmit = useCallback(
-    async ({ email, password }: FormValues, { setSubmitting, resetForm }) => {
-      if (onSubmit) {
-        onSubmit({ email, password });
-      }
-
-      if (onTransactionStart) {
-        onTransactionStart({ email, password });
-      }
-
-      setSubmitting(true);
-
-      setState({
-        ...state,
-        transacting: true,
-      });
-
-      await new Promise((r) => setTimeout(r, 2100));
-
-      const success = Math.random() < 1;
-
-      if (onTransactionEnd) {
-        onTransactionEnd({ success });
-      }
-
-      setSubmitting(false);
-      resetForm({ values: { email: '', password: '', verifiedPassword: '' } });
-
-      setState({
-        ...state,
-        transacting: false,
-        transactionSuccess: success === true,
-        transactionFailure: success === false,
-      });
-    },
-    [setState, onTransactionEnd, onTransactionStart]
-  );
-
-  return (
-    <Wrapper>
-      <Brand>
-        <Logo
-          aria-label="Storybook Logo"
-          viewBox="0 0 64 64"
-          transacting={state.transacting}
-          role="img"
-        >
-          <title>Storybook icon</title>
-          <g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-            <path
-              d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-              id="path-1"
-              fill="#FF4785"
-              fillRule="nonzero"
-            />
-            <path
-              d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-              id="path9_fill-path"
-              fill="#FFFFFF"
-              fillRule="nonzero"
-            />
-            <path
-              d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-              id="Path"
-              fill="#FFFFFF"
-            />
-          </g>
-        </Logo>
-        <Title aria-label="Storybook" viewBox="0 0 200 40" role="img">
-          <title>Storybook</title>
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M53.3 31.7c-1.7 0-3.4-.3-5-.7-1.5-.5-2.8-1.1-3.9-2l1.6-3.5c2.2 1.5 4.6 2.3 7.3 2.3 1.5 0 2.5-.2 3.3-.7.7-.5 1.1-1 1.1-1.9 0-.7-.3-1.3-1-1.7s-2-.8-3.7-1.2c-2-.4-3.6-.9-4.8-1.5-1.1-.5-2-1.2-2.6-2-.5-1-.8-2-.8-3.2 0-1.4.4-2.6 1.2-3.6.7-1.1 1.8-2 3.2-2.6 1.3-.6 2.9-.9 4.7-.9 1.6 0 3.1.3 4.6.7 1.5.5 2.7 1.1 3.5 2l-1.6 3.5c-2-1.5-4.2-2.3-6.5-2.3-1.3 0-2.3.2-3 .8-.8.5-1.2 1.1-1.2 2 0 .5.2 1 .5 1.3.2.3.7.6 1.4.9l2.9.8c2.9.6 5 1.4 6.2 2.4a5 5 0 0 1 2 4.2 6 6 0 0 1-2.5 5c-1.7 1.2-4 1.9-7 1.9zm21-3.6l1.4-.1-.2 3.5-1.9.1c-2.4 0-4.1-.5-5.2-1.5-1.1-1-1.6-2.7-1.6-4.8v-6h-3v-3.6h3V11h4.8v4.6h4v3.6h-4v6c0 1.8.9 2.8 2.6 2.8zm11.1 3.5c-1.6 0-3-.3-4.3-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.3-1 1.7 0 3.2.3 4.4 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.4 1zm0-3.6c2.4 0 3.6-1.6 3.6-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.6-1c-2.3 0-3.5 1.4-3.5 4.4 0 3 1.2 4.6 3.5 4.6zm21.7-8.8l-2.7.3c-1.3.2-2.3.5-2.8 1.2-.6.6-.9 1.4-.9 2.5v8.2H96V15.7h4.6v2.6c.8-1.8 2.5-2.8 5-3h1.3l.3 4zm14-3.5h4.8L116.4 37h-4.9l3-6.6-6.4-14.8h5l4 10 4-10zm16-.4c1.4 0 2.6.3 3.6 1 1 .6 1.9 1.6 2.5 2.8.6 1.2.9 2.7.9 4.3 0 1.6-.3 3-1 4.3a6.9 6.9 0 0 1-2.4 2.9c-1 .7-2.2 1-3.6 1-1 0-2-.2-3-.7-.8-.4-1.5-1-2-1.9v2.4h-4.7V8.8h4.8v9c.5-.8 1.2-1.4 2-1.9.9-.4 1.8-.6 3-.6zM135.7 28c1.1 0 2-.4 2.6-1.2.6-.8 1-2 1-3.4 0-1.5-.4-2.5-1-3.3s-1.5-1.1-2.6-1.1-2 .3-2.6 1.1c-.6.8-1 2-1 3.3 0 1.5.4 2.6 1 3.4.6.8 1.5 1.2 2.6 1.2zm18.9 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.3 1a7 7 0 0 1 3 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm18 3.6c-1.7 0-3.2-.3-4.4-1a7 7 0 0 1-3-2.8c-.6-1.3-1-2.7-1-4.4 0-1.6.4-3 1-4.3a7 7 0 0 1 3-2.8c1.2-.7 2.7-1 4.4-1 1.6 0 3 .3 4.4 1a7 7 0 0 1 2.9 2.8c.6 1.2 1 2.7 1 4.3 0 1.7-.4 3.1-1 4.4a7 7 0 0 1-3 2.8c-1.2.7-2.7 1-4.3 1zm0-3.6c2.3 0 3.5-1.6 3.5-4.6 0-1.5-.3-2.6-1-3.4a3.2 3.2 0 0 0-2.5-1c-2.4 0-3.6 1.4-3.6 4.4 0 3 1.2 4.6 3.6 4.6zm27.4 3.4h-6l-6-7v7h-4.8V8.8h4.9v13.6l5.8-6.7h5.7l-6.6 7.5 7 8.2z"
-              fill="currentColor"
-            />
-          </g>
-        </Title>
-      </Brand>
-      {!state.transactionSuccess && !state.transactionFailure && (
-        <Introduction>Create an account to join the Storybook community</Introduction>
-      )}
-      <Content>
-        {state.transactionSuccess && !state.transactionFailure && (
-          <Presentation>
-            <p>
-              Everything is perfect. Your account is ready and we should probably get you started!
-            </p>
-            <p>So why don't you get started then?</p>
-            <Submit
-              dirty
-              onClick={() => {
-                setState({
-                  transacting: false,
-                  transactionSuccess: false,
-                  transactionFailure: false,
-                });
-              }}
-            >
-              Go back
-            </Submit>
-          </Presentation>
-        )}
-        {state.transactionFailure && !state.transactionSuccess && (
-          <Presentation>
-            <p>What a mess, this API is not working</p>
-            <p>
-              Someone should probably have a stern talking to about this, but it won't be me - coz
-              I'm gonna head out into the nice weather
-            </p>
-            <Submit
-              dirty
-              onClick={() => {
-                setState({
-                  transacting: false,
-                  transactionSuccess: false,
-                  transactionFailure: false,
-                });
-              }}
-            >
-              Go back
-            </Submit>
-          </Presentation>
-        )}
-        {!state.transactionSuccess && !state.transactionFailure && (
-          <Formik
-            initialValues={{ email: '', password: '', verifiedPassword: '' }}
-            validateOnBlur={false}
-            validateOnChange={false}
-            onSubmit={handleFormSubmit}
-            validate={({ email, password, verifiedPassword }) => {
-              const errors: FormErrors = {};
-
-              if (!email) {
-                errors.email = errorMap.email.required.normal;
-                errors.emailTooltip = errorMap.email.required.tooltip;
-              } else {
-                const validEmail = email.match(email99RegExp);
-
-                if (validEmail === null) {
-                  errors.email = errorMap.email.format.normal;
-                  errors.emailTooltip = errorMap.email.format.tooltip;
-                }
-              }
-
-              if (!password) {
-                errors.password = errorMap.password.required.normal;
-                errors.passwordTooltip = errorMap.password.required.tooltip;
-              } else if (password.length < 6) {
-                errors.password = errorMap.password.length.normal;
-                errors.passwordTooltip = errorMap.password.length.tooltip;
-              }
-
-              if (passwordVerification && !verifiedPassword) {
-                errors.verifiedPassword = errorMap.verifiedPassword.required.normal;
-                errors.verifiedPasswordTooltip = errorMap.verifiedPassword.required.tooltip;
-              } else if (passwordVerification && password !== verifiedPassword) {
-                errors.verifiedPassword = errorMap.verifiedPassword.match.normal;
-                errors.verifiedPasswordTooltip = errorMap.verifiedPassword.match.tooltip;
-              }
-
-              return errors;
-            }}
-          >
-            {({ errors: _errors, isSubmitting, dirty }: FormikProps<FormValues>) => {
-              const errors = _errors as FormErrors;
-
-              return (
-                <Form noValidate aria-disabled={isSubmitting ? 'true' : 'false'}>
-                  <FieldWrapper>
-                    <Label htmlFor="email">Email</Label>
-                    <FormikInput id="email" name="email">
-                      {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
-                        <>
-                          <Input
-                            data-testid="email"
-                            aria-required="true"
-                            aria-disabled={isSubmitting ? 'true' : 'false'}
-                            disabled={isSubmitting}
-                            type="email"
-                            aria-invalid={errors.email ? 'true' : 'false'}
-                            {...field}
-                          />
-                          {errors.email && (
-                            <WithTooltip
-                              tooltip={<ErrorTooltip>{errors.emailTooltip}</ErrorTooltip>}
-                            >
-                              <ErrorWrapper>
-                                <ErrorIcon icon="question" height={14} />
-                                <Error name="email" component="div" />
-                              </ErrorWrapper>
-                            </WithTooltip>
-                          )}
-                        </>
-                      )}
-                    </FormikInput>
-                  </FieldWrapper>
-                  <FieldWrapper>
-                    <Label htmlFor="password">Password</Label>
-                    <FormikInput id="password" name="password">
-                      {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
-                        <Input
-                          data-testid="password1"
-                          aria-required="true"
-                          aria-disabled={isSubmitting ? 'true' : 'false'}
-                          aria-invalid={errors.password ? 'true' : 'false'}
-                          type="password"
-                          disabled={isSubmitting}
-                          {...field}
-                        />
-                      )}
-                    </FormikInput>
-                    {errors.password && (
-                      <WithTooltip tooltip={<ErrorTooltip>{errors.passwordTooltip}</ErrorTooltip>}>
-                        <ErrorWrapper data-testid="password-error-info">
-                          <ErrorIcon icon="question" height={14} />
-                          <Error name="password" component="div" />
-                        </ErrorWrapper>
-                      </WithTooltip>
-                    )}
-                  </FieldWrapper>
-                  {passwordVerification && (
-                    <FieldWrapper>
-                      <Label htmlFor="verifiedPassword">Verify Password</Label>
-                      <FormikInput id="verifiedPassword" name="verifiedPassword">
-                        {({ field }: { field: HTMLAttributes<HTMLInputElement> }) => (
-                          <Input
-                            data-testid="password2"
-                            aria-required="true"
-                            aria-disabled={isSubmitting ? 'true' : 'false'}
-                            aria-invalid={errors.verifiedPassword ? 'true' : 'false'}
-                            type="password"
-                            disabled={isSubmitting}
-                            {...field}
-                          />
-                        )}
-                      </FormikInput>
-                      {errors.verifiedPassword && (
-                        <WithTooltip
-                          tooltip={<ErrorTooltip>{errors.verifiedPasswordTooltip}</ErrorTooltip>}
-                        >
-                          <ErrorWrapper>
-                            <ErrorIcon icon="question" height={14} />
-                            <Error name="verifiedPassword" component="div" />
-                          </ErrorWrapper>
-                        </WithTooltip>
-                      )}
-                    </FieldWrapper>
-                  )}
-                  <Actions>
-                    <Submit
-                      data-testid="submit"
-                      aria-disabled={isSubmitting || !dirty ? 'true' : 'false'}
-                      disabled={isSubmitting || !dirty}
-                      dirty={dirty}
-                      type="submit"
-                    >
-                      Create Account
-                    </Submit>
-                    <Reset
-                      aria-disabled={isSubmitting ? 'true' : 'false'}
-                      disabled={isSubmitting}
-                      type="reset"
-                    >
-                      Reset
-                    </Reset>
-                  </Actions>
-                </Form>
-              );
-            }}
-          </Formik>
-        )}
-      </Content>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.section(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  width: 450,
-  padding: 32,
-  backgroundColor: theme.background.content,
-  borderRadius: 7,
-}));
-
-const Brand = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const Title = styled.svg({
-  height: 40,
-  zIndex: 1,
-  left: -32,
-  position: 'relative',
-});
-
-const logoAnimation = keyframes({
-  '0': {
-    transform: 'rotateY(0deg)',
-    transformOrigin: '50% 5% 0',
-  },
-  '100%': {
-    transform: 'rotateY(360deg)',
-    transformOrigin: '50% 5% 0',
-  },
-});
-
-interface LogoProps {
-  transacting: boolean;
-}
-
-const Logo = styled.svg<LogoProps>(
-  ({ transacting }) =>
-    transacting && {
-      animation: `${logoAnimation} 1250ms both infinite`,
-    },
-  { height: 40, zIndex: 10, marginLeft: 32 }
-);
-
-const Introduction = styled.p({
-  marginTop: 20,
-  textAlign: 'center',
-});
-
-const Content = styled.div({
-  display: 'flex',
-  alignItems: 'flex-start',
-  justifyContent: 'center',
-  width: 350,
-  minHeight: 189,
-  marginTop: 8,
-});
-
-const Presentation = styled.div({
-  textAlign: 'center',
-});
-
-const Form = styled(FormikForm)({
-  width: '100%',
-  alignSelf: 'flex-start',
-  '&[aria-disabled="true"]': {
-    opacity: 0.6,
-  },
-});
-
-const FieldWrapper = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'stretch',
-  marginBottom: 10,
-});
-
-const Label = styled.label({
-  fontSize: 13,
-  fontWeight: 500,
-  marginBottom: 6,
-});
-
-const Input = styled.input(({ theme }) => ({
-  fontSize: 14,
-  color: theme.color.defaultText,
-  padding: '10px 15px',
-  borderRadius: 4,
-  appearance: 'none',
-  outline: 'none',
-  border: '0 none',
-  boxShadow: 'rgb(0 0 0 / 10%) 0px 0px 0px 1px inset',
-  '&:focus': {
-    boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
-  },
-  '&:active': {
-    boxShadow: 'rgb(30 167 253) 0px 0px 0px 1px inset',
-  },
-  '&[aria-invalid="true"]': {
-    boxShadow: 'rgb(255 68 0) 0px 0px 0px 1px inset',
-  },
-}));
-
-const ErrorWrapper = styled.div({
-  display: 'flex',
-  alignItems: 'flex-start',
-  fontSize: 11,
-  marginTop: 6,
-  cursor: 'help',
-});
-
-const ErrorIcon = styled(Icons)(({ theme }) => ({
-  fill: theme.color.defaultText,
-  opacity: 0.8,
-  marginRight: 6,
-  marginLeft: 2,
-  marginTop: 4,
-}));
-
-const ErrorTooltip = styled.div(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-  fontSize: 13,
-  padding: 8,
-  maxWidth: 350,
-}));
-
-const Actions = styled.div({
-  alignSelf: 'stretch',
-  display: 'flex',
-  justifyContent: 'space-between',
-  marginTop: 24,
-});
-
-const Error = styled(ErrorMessage)({});
-
-interface ButtonProps {
-  dirty?: boolean;
-}
-
-const Button = styled.button<ButtonProps>({
-  backgroundColor: 'transparent',
-  border: '0 none',
-  outline: 'none',
-  appearance: 'none',
-  fontWeight: 500,
-  fontSize: 12,
-  flexBasis: '50%',
-  cursor: 'pointer',
-  padding: '11px 16px',
-  borderRadius: 4,
-  textTransform: 'uppercase',
-  '&:focus': {
-    textDecoration: 'underline',
-    fontWeight: 700,
-  },
-  '&:active': {
-    textDecoration: 'underline',
-    fontWeight: 700,
-  },
-  '&[aria-disabled="true"]': {
-    cursor: 'default',
-  },
-});
-
-const Submit = styled(Button)(({ theme, dirty }) => ({
-  marginRight: 8,
-  backgroundColor: theme.color.secondary,
-  color: theme.color.inverseText,
-  opacity: dirty ? 1 : 0.6,
-  boxShadow: 'rgb(30 167 253 / 10%) 0 0 0 1px inset',
-}));
-
-const Reset = styled(Button)(({ theme }) => ({
-  marginLeft: 8,
-  boxShadow: 'rgb(30 167 253) 0 0 0 1px inset',
-  color: theme.color.secondary,
-}));
--- a/code/addons/interactions/src/examples/Examples.stories.tsx
+++ b/code/addons/interactions/src/examples/Examples.stories.tsx
@ -1,126 +0,0 @@
-/* eslint-disable jest/no-standalone-expect */
-import { Story, Meta } from '@storybook/react';
-import { expect } from '@storybook/jest';
-import { within, waitFor, userEvent, waitForElementToBeRemoved } from '@storybook/testing-library';
-import React from 'react';
-
-export default {
-  title: 'Addons/Interactions/Examples',
-  parameters: {
-    layout: 'centered',
-    theme: 'light',
-    options: { selectedPanel: 'storybook/interactions/panel' },
-  },
-  argTypes: {
-    onSubmit: { action: true },
-  },
-} as Meta;
-
-export const Assertions: Story = ({ onSubmit }) => (
-  <button type="button" onClick={() => onSubmit('clicked')}>
-    Click
-  </button>
-);
-Assertions.play = async ({ args, canvasElement }) => {
-  await userEvent.click(within(canvasElement).getByRole('button'));
-  await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
-  await expect([{ name: 'John', age: 42 }]).toEqual(
-    expect.arrayContaining([
-      expect.objectContaining({ name: 'John' }),
-      expect.objectContaining({ age: 42 }),
-    ])
-  );
-};
-
-export const FindBy: Story = () => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  React.useEffect(() => {
-    setTimeout(() => setIsLoading(false), 500);
-  }, []);
-  return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
-};
-FindBy.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await canvas.findByRole('button');
-  await expect(true).toBe(true);
-};
-
-export const WaitFor: Story = ({ onSubmit }) => (
-  <button type="button" onClick={() => setTimeout(() => onSubmit('clicked'), 100)}>
-    Click
-  </button>
-);
-WaitFor.play = async ({ args, canvasElement }) => {
-  await userEvent.click(await within(canvasElement).findByText('Click'));
-  await waitFor(async () => {
-    await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
-    await expect(true).toBe(true);
-  });
-};
-
-export const WaitForElementToBeRemoved: Story = () => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  React.useEffect(() => {
-    setTimeout(() => setIsLoading(false), 1500);
-  }, []);
-  return isLoading ? <div>Loading...</div> : <button type="button">Loaded!</button>;
-};
-WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
-  const button = await canvas.findByText('Loaded!');
-  await expect(button).not.toBeNull();
-};
-
-export const WithLoaders: Story = ({ onSubmit }, { loaded: { todo } }) => {
-  return (
-    <button type="button" onClick={onSubmit(todo.title)}>
-      Todo: {todo.title}
-    </button>
-  );
-};
-WithLoaders.loaders = [
-  async () => {
-    // long fake timeout
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    return {
-      todo: {
-        userId: 1,
-        id: 1,
-        title: 'delectus aut autem',
-        completed: false,
-      },
-    };
-  },
-];
-WithLoaders.play = async ({ args, canvasElement }) => {
-  const canvas = within(canvasElement);
-  const todoItem = await canvas.findByText('Todo: delectus aut autem');
-  await userEvent.click(todoItem);
-  await expect(args.onSubmit).toHaveBeenCalledWith('delectus aut autem');
-};
-
-export const WithSteps: Story = ({ onSubmit }) => (
-  <button type="button" onClick={() => onSubmit('clicked')}>
-    Click
-  </button>
-);
-WithSteps.play = async ({ args, canvasElement, step }) => {
-  await step('Click button', async () => {
-    await userEvent.click(within(canvasElement).getByRole('button'));
-
-    await step('Verify submit', async () => {
-      await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
-    });
-
-    await step('Verify result', async () => {
-      await expect([{ name: 'John', age: 42 }]).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ name: 'John' }),
-          expect.objectContaining({ age: 42 }),
-        ])
-      );
-    });
-  });
-};
--- a/code/addons/interactions/src/preset/preview.ts
+++ b/code/addons/interactions/src/preset/preview.ts
@ -59,3 +59,7 @@ export const { step: runStep } = instrument(
  { step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
  { intercept: true }
 );
+
+export const parameters = {
+  throwPlayFunctionExceptions: false,
+};
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@ -0,0 +1,89 @@
+/* eslint-disable jest/no-standalone-expect */
+import globalThis from 'global';
+import {
+  within,
+  waitFor,
+  fireEvent,
+  userEvent,
+  waitForElementToBeRemoved,
+} from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export default {
+  component: globalThis.Components.Form,
+  argTypes: {
+    onSuccess: { type: 'function' },
+  },
+};
+
+export const Type = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'test');
+  },
+};
+
+export const Step = {
+  play: async ({ step }) => {
+    await step('Enter value', Type.play);
+  },
+};
+
+export const Callback = {
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Enter value', Type.play);
+
+    await step('Submit', async () => {
+      await fireEvent.click(canvas.getByRole('button'));
+    });
+
+    await expect(args.onSuccess).toHaveBeenCalled();
+  },
+};
+
+// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
+// an explicit test here
+export const SyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Setup', Callback.play);
+    await waitFor(() => canvas.getByText('Completed!!'));
+  },
+};
+
+export const AsyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Setup', Callback.play);
+    await waitFor(async () => canvas.getByText('Completed!!'));
+  },
+};
+
+export const WaitForElementToBeRemoved = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Setup', SyncWaitFor.play);
+    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
+      timeout: 2000,
+    });
+  },
+};
+
+export const WithLoaders = {
+  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
+  play: async ({ step }) => {
+    await step('Setup', Callback.play);
+  },
+};
+
+export const Validation = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const canvas = within(canvasElement);
+
+    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
+
+    await expect(args.onSuccess).not.toHaveBeenCalled();
+  },
+};
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -59,12 +59,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
    "upath": "^1.2.0"
@ -94,7 +94,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- a/code/addons/jest/src/shared.test.ts
+++ b/code/addons/jest/src/shared.test.ts
@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
  });

  test('returns null if filename is a module ID that cannot be inferred from', () => {
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
    expect(defineJestParameter({ fileName: 1234 })).toBeNull();
  });
 });
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -63,11 +63,11 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/router": "7.0.0-alpha.31",
+    "@storybook/router": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "prop-types": "^15.7.2",
    "ts-dedent": "^2.0.0"
@ -98,7 +98,7 @@
      "./src/react/index.ts"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- a/code/addons/links/src/react/components/link.test.tsx
+++ b/code/addons/links/src/react/components/link.test.tsx
@ -14,7 +14,7 @@ jest.mock('global', () => ({
      search: 'search',
    },
  },
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
  window: global,
  __STORYBOOK_STORY_STORE__: {
    getSelection: jest.fn(() => ({ id: 1 })),
--- a/code/addons/links/src/utils.test.ts
+++ b/code/addons/links/src/utils.test.ts
@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils';

 jest.mock('@storybook/addons');
 jest.mock('global', () => ({
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
  document: global.document,
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
  window: global,
 }));

--- a/code/addons/links/src/utils.ts
+++ b/code/addons/links/src/utils.ts
@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
  return new Promise((resolve) => {
    const { location } = document;
    const query = parseQuery(location.search);
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
    const existingId = [].concat(query.id)[0];
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
    const titleToLink = title || existingId.split('--', 2)[0];
    const id = toId(titleToLink, name);
    const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id })
--- a/code/addons/links/template/stories/decorator.stories.ts
+++ b/code/addons/links/template/stories/decorator.stories.ts
@ -0,0 +1,38 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  parameters: {
+    chromatic: { disable: true },
+  },
+  decorators: [withLinks],
+};
+
+export const Basic = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+      </div>
+    `,
+  },
+};
+export const Other = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="basic">to to basic</a>
+      </div>
+    `,
+  },
+};
+export const Third = {
+  args: {
+    content: `
+      <div>
+        <a class="link" href="#" data-sb-story="other">go to other</a>
+      </div>
+    `,
+  },
+};
--- a/code/addons/links/template/stories/linkto.stories.ts
+++ b/code/addons/links/template/stories/linkto.stories.ts
@ -0,0 +1,44 @@
+import globalThis from 'global';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    children: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const ID = {
+  args: {
+    onClick: linkTo('addons-links-parameters--basic'),
+  },
+};
+export const Title = {
+  args: {
+    onClick: linkTo('addons-links-parameters'),
+  },
+};
+export const Basic = {
+  args: {
+    onClick: linkTo('addons-links-parameters', 'basic'),
+  },
+};
+export const Other = {
+  args: {
+    onClick: linkTo('addons-links-parameters', 'basic'),
+  },
+};
+export const Third = {
+  args: {
+    onClick: linkTo('addons-links-parameters', 'other'),
+  },
+};
+
+export const Callback = {
+  args: {
+    onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'),
+  },
+};
--- a/code/addons/links/template/stories/scroll.stories.ts
+++ b/code/addons/links/template/stories/scroll.stories.ts
@ -0,0 +1,41 @@
+import globalThis from 'global';
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+  component: globalThis.Components.Html,
+  parameters: {
+    chromatic: { disable: true },
+  },
+  decorators: [withLinks],
+};
+
+export const Basic = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom:100vh"></div>
+        <a class="link" href="#" data-sb-story="basic">go to basic</a>
+      </div>
+    `,
+  },
+};
+export const Other = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom:100vh"></div>
+        <a class="link" href="#" data-sb-story="basic">to to basic</a>
+      </div>
+    `,
+  },
+};
+export const Third = {
+  args: {
+    content: `
+      <div>
+        <div style="marginBottom:100vh"></div>
+        <a class="link" href="#" data-sb-story="other">go to other</a>
+      </div>
+    `,
+  },
+};
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -61,11 +61,11 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
    "global": "^4.4.0"
  },
@ -94,7 +94,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Measure",
    "unsupportedFrameworks": [
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -64,11 +64,11 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
    "global": "^4.4.0",
    "ts-dedent": "^2.0.0"
@ -98,7 +98,7 @@
      "./src/preset/preview.tsx"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Outline",
    "unsupportedFrameworks": [
--- a/code/addons/storyshots/storyshots-core/package.json
+++ b/code/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -38,12 +38,12 @@
  },
  "dependencies": {
    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.31",
-    "@storybook/core-client": "7.0.0-alpha.31",
-    "@storybook/core-common": "7.0.0-alpha.31",
-    "@storybook/core-webpack": "7.0.0-alpha.31",
+    "@storybook/client-api": "7.0.0-alpha.33",
+    "@storybook/core-client": "7.0.0-alpha.33",
+    "@storybook/core-common": "7.0.0-alpha.33",
+    "@storybook/core-webpack": "7.0.0-alpha.33",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
    "@types/glob": "^7.1.3",
    "@types/jest": "^26.0.16",
@ -62,11 +62,11 @@
    "@angular/core": "^13.3.6",
    "@angular/platform-browser-dynamic": "^13.3.6",
    "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.0-alpha.31",
-    "@storybook/angular": "7.0.0-alpha.31",
-    "@storybook/react": "7.0.0-alpha.31",
-    "@storybook/vue": "7.0.0-alpha.31",
-    "@storybook/vue3": "7.0.0-alpha.31",
+    "@storybook/addon-docs": "7.0.0-alpha.33",
+    "@storybook/angular": "7.0.0-alpha.33",
+    "@storybook/react": "7.0.0-alpha.33",
+    "@storybook/vue": "7.0.0-alpha.33",
+    "@storybook/vue3": "7.0.0-alpha.33",
    "babel-loader": "^8.2.5",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
@ -144,7 +144,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
+++ b/code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts
@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
  };
 }

-// @ts-ignore
 function ensureOptionsDefaults(options: StoryshotsOptions) {
  const {
    suite = 'Storyshots',
--- a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
+++ b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
      const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
      const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);

-      // @ts-ignore
+      // @ts-expect-error (Converted from ts-ignore)
      expect(storyshots).notToBeAbandoned(stories2snapsConverter);
    });
  });
--- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts
@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 import global from 'global';
-// @ts-ignore
 import { set_current_component } from 'svelte/internal';

 const { document } = global;
--- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts
@ -1,4 +1,3 @@
-// @ts-ignore
 import Vue from 'vue';

 // this is defined in @storybook/vue but not exported,
@ -14,7 +13,7 @@ function getRenderedTree(story: any) {
    },
  });

-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
  vm[VALUES] = story.initialArgs;

  return vm.$mount().$el;
--- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@ -1,6 +1,5 @@
 import React from 'react';

-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../react-demo';

 export default {
@ -11,6 +10,6 @@ export default {
  },
 };

-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={() => {}} />;

 ToStorybook.storyName = 'to Storybook';
--- a/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
+++ b/code/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../react-demo';
 import { Meta, Story } from '@storybook/addon-docs';

@ -10,5 +9,5 @@ import { Meta, Story } from '@storybook/addon-docs';
 />

 <Story name="to Storybook">
-  <Welcome showApp={linkTo('Button')} />
+  <Welcome showApp={() => {}} />
 </Story>
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -35,7 +35,7 @@
  "dependencies": {
    "@axe-core/puppeteer": "^4.2.0",
    "@storybook/csf": "0.0.2--canary.0899bb7.0",
-    "@storybook/node-logger": "7.0.0-alpha.31",
+    "@storybook/node-logger": "7.0.0-alpha.33",
    "@types/jest-image-snapshot": "^4.1.3",
    "jest-image-snapshot": "^4.3.0"
  },
@ -44,7 +44,7 @@
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.31",
+    "@storybook/addon-storyshots": "7.0.0-alpha.33",
    "puppeteer": ">=2.0.0"
  },
  "peerDependenciesMeta": {
@ -55,5 +55,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f"
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a"
 }
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -35,13 +35,13 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/router": "7.0.0-alpha.31",
-    "@storybook/source-loader": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/router": "7.0.0-alpha.33",
+    "@storybook/source-loader": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "estraverse": "^5.2.0",
    "prop-types": "^15.7.2",
    "react-syntax-highlighter": "^15.5.0"
@ -66,7 +66,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -57,11 +57,11 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31"
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33"
  },
  "devDependencies": {
    "typescript": "~4.6.3"
@ -88,7 +88,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/code/addons/toolbars/template/stories/globals.stories.ts
+++ b/code/addons/toolbars/template/stories/globals.stories.ts
@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { PartialStoryFn, StoryContext } from '@storybook/csf';
+
+const greetingForLocale = (locale: string) => {
+  switch (locale) {
+    case 'es':
+      return 'Hola!';
+    case 'fr':
+      return 'Bonjour !';
+    case 'zh':
+      return '你好!';
+    case 'kr':
+      return '안녕하세요!';
+    case 'en':
+    default:
+      return 'Hello';
+  }
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  decorators: [
+    (storyFn: PartialStoryFn, { globals }: StoryContext) => {
+      const object = {
+        ...globals,
+        caption: `Locale is '${globals.locale}', so I say: ${greetingForLocale(globals.locale)}`,
+      };
+      return storyFn({ args: { object } });
+    },
+  ],
+};
+
+export const Basic = {};
--- a/code/addons/toolbars/template/stories/preview.ts
+++ b/code/addons/toolbars/template/stories/preview.ts
@ -0,0 +1,44 @@
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'circlehollow',
+      title: 'Theme',
+      items: [
+        { value: 'light', icon: 'circlehollow', title: 'light' },
+        { value: 'dark', icon: 'circle', title: 'dark' },
+        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
+        { value: 'stacked', icon: 'bottombar', title: 'stacked' },
+      ],
+    },
+  },
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    toolbar: {
+      icon: 'globe',
+      shortcuts: {
+        next: {
+          label: 'Go to next language',
+          keys: ['L'],
+        },
+        previous: {
+          label: 'Go to previous language',
+          keys: ['K'],
+        },
+        reset: {
+          label: 'Reset language',
+          keys: ['meta', 'shift', 'L'],
+        },
+      },
+      items: [
+        { title: 'Reset locale', type: 'reset' },
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'es', right: '🇪🇸', title: 'Español' },
+        { value: 'zh', right: '🇨🇳', title: '中文' },
+        { value: 'kr', right: '🇰🇷', title: '한국어' },
+      ],
+    },
+  },
+};
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -59,12 +59,12 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/api": "7.0.0-alpha.31",
-    "@storybook/client-logger": "7.0.0-alpha.31",
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/core-events": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/api": "7.0.0-alpha.33",
+    "@storybook/client-logger": "7.0.0-alpha.33",
+    "@storybook/components": "7.0.0-alpha.33",
+    "@storybook/core-events": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "prop-types": "^15.7.2"
@ -95,7 +95,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "02c013c33186479017098d532a18ff8654b91f1f",
+  "gitHead": "5da5b0fabd04cc5cd5771e8242a960f05d03234a",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/code/cypress/integration/addon-links.spec.ts
+++ b/code/cypress/integration/addon-links.spec.ts
@ -1,17 +0,0 @@
-import { visit } from '../helper';
-
-describe('addon-links', () => {
-  before(() => {
-    visit('official-storybook?path=/story/addons-links-button--first');
-  });
-
-  it('should navigate on link', () => {
-    cy.getStoryElement().find('button').should('contain.text', 'Go to "Second"').click();
-
-    cy.url().should('include', 'path=/story/addons-links-button--second');
-
-    cy.getStoryElement().find('button').should('contain.text', 'Go to "First"').click();
-
-    cy.url().should('include', 'path=/story/addons-links-button--first');
-  });
-});
--- a/code/cypress/integration/navigation.spec.ts
+++ b/code/cypress/integration/navigation.spec.ts
@ -25,16 +25,16 @@ describe('Navigation', () => {
 });

 describe('Routing', () => {
-  it('should navigate to story addons-a11y-basebutton--default', () => {
-    visit('official-storybook');
+  it('should navigate to sibling story sibling', () => {
+    visit('official-storybook/?path=/story/basics-actionbar--single-item');

-    cy.get('#addons-a11y-basebutton--label').click({ force: true });
-    cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
+    cy.get('#basics-actionbar--many-items').click({ force: true });
+    cy.url().should('include', 'path=/story/basics-actionbar--many-items');
  });

  it('should directly visit a certain story and render correctly', () => {
-    visit('official-storybook/?path=/story/addons-a11y-basebutton--label');
+    visit('official-storybook/?path=/story/basics-actionbar--single-item');

-    cy.getStoryElement().should('contain.text', 'Testing the a11y addon');
+    cy.getStoryElement().should('contain.text', 'Clear');
  });
 });
--- a/code/examples/angular-cli/.storybook/main.ts
+++ b/code/examples/angular-cli/.storybook/main.ts
@ -19,7 +19,12 @@ const mainConfig: import('@storybook/angular').StorybookConfig = {
    channelOptions: { allowFunction: false, maxDepth: 10 },
    disableTelemetry: true,
  },
-  staticDirs: ['../src/assets'],
+  staticDirs: [
+    '../src/assets',
+    // reproduction of https://github.com/storybookjs/storybook/issues/16732
+    { from: '../src/assets/a', to: 'assets' },
+    { from: '../src/assets/b', to: 'assets/b' },
+  ],
  features: {
    buildStoriesJson: false,
    breakingChangesV7: false,
--- a/code/examples/angular-cli/.storybook/preview.ts
+++ b/code/examples/angular-cli/.storybook/preview.ts
@ -2,7 +2,6 @@
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';

-// @ts-ignore
 import docJson from '../documentation.json';
 // remove ButtonComponent to test #12009
 const filtered = !docJson?.components
--- a/code/examples/angular-cli/package.json
+++ b/code/examples/angular-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "angular-cli",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "private": true,
  "license": "MIT",
  "workspaces": {
@ -43,22 +43,22 @@
    "@angular/compiler-cli": "^13.3.6",
    "@angular/elements": "^13.3.6",
    "@compodoc/compodoc": "^1.1.18",
-    "@storybook/addon-a11y": "7.0.0-alpha.31",
-    "@storybook/addon-actions": "7.0.0-alpha.31",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.31",
-    "@storybook/addon-controls": "7.0.0-alpha.31",
-    "@storybook/addon-docs": "7.0.0-alpha.31",
-    "@storybook/addon-highlight": "7.0.0-alpha.31",
-    "@storybook/addon-interactions": "7.0.0-alpha.31",
-    "@storybook/addon-jest": "7.0.0-alpha.31",
-    "@storybook/addon-links": "7.0.0-alpha.31",
-    "@storybook/addon-storyshots": "7.0.0-alpha.31",
-    "@storybook/addon-storysource": "7.0.0-alpha.31",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/angular": "7.0.0-alpha.31",
+    "@storybook/addon-a11y": "7.0.0-alpha.33",
+    "@storybook/addon-actions": "7.0.0-alpha.33",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.33",
+    "@storybook/addon-controls": "7.0.0-alpha.33",
+    "@storybook/addon-docs": "7.0.0-alpha.33",
+    "@storybook/addon-highlight": "7.0.0-alpha.33",
+    "@storybook/addon-interactions": "7.0.0-alpha.33",
+    "@storybook/addon-jest": "7.0.0-alpha.33",
+    "@storybook/addon-links": "7.0.0-alpha.33",
+    "@storybook/addon-storyshots": "7.0.0-alpha.33",
+    "@storybook/addon-storysource": "7.0.0-alpha.33",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/angular": "7.0.0-alpha.33",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
    "@storybook/jest": "^0.0.10",
-    "@storybook/source-loader": "7.0.0-alpha.31",
+    "@storybook/source-loader": "7.0.0-alpha.33",
    "@storybook/testing-library": "0.0.14-next.0",
    "@types/jest": "^26.0.16",
    "@types/node": "^14.14.20 || ^16.0.0",
@ -70,7 +70,7 @@
    "jest": "^26.6.3",
    "jest-preset-angular": "^8.3.2",
    "protractor": "~7.0.0",
-    "storybook": "7.0.0-alpha.31",
+    "storybook": "7.0.0-alpha.33",
    "storybook-addon-angular-ivy": "^0.0.1",
    "ts-jest": "^26.4.4",
    "ts-node": "^10.4.0",
--- a/code/examples/angular-cli/src/assets/a/a.json
+++ b/code/examples/angular-cli/src/assets/a/a.json
--- a/code/examples/angular-cli/src/assets/b/b.json
+++ b/code/examples/angular-cli/src/assets/b/b.json
--- a/code/examples/angular-cli/src/stories/addons/controls/snapshots/addon-controls.stories.storyshot
+++ b/code/examples/angular-cli/src/stories/addons/controls/snapshots/addon-controls.stories.storyshot
@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Controls Basic 1`] = `
-<storybook-wrapper>
-  <my-button
-    ng-reflect-is-disabled="false"
-    ng-reflect-label="Args test"
-    ng-reflect-some-data-object="[object Object]"
-  >
-    <button
-      class="btn-secondary btn-medium"
-      ng-reflect-ng-class="btn-secondary,btn-medium"
-    >
-      <img
-        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-        width="100"
-      />
-       Args test
-  
-    </button>
-  </my-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Controls Disabled 1`] = `
-<storybook-wrapper>
-  <my-button
-    ng-reflect-is-disabled="true"
-    ng-reflect-label="Disabled"
-  >
-    <button
-      class="btn-secondary btn-medium"
-      disabled=""
-      ng-reflect-ng-class="btn-secondary,btn-medium"
-    >
-      <img
-        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-        width="100"
-      />
-       Disabled
-  
-    </button>
-  </my-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Controls No Template 1`] = `
-<storybook-wrapper>
-  <my-button
-    ng-reflect-is-disabled="false"
-    ng-reflect-label="No template"
-  >
-    <button
-      class="btn-secondary btn-medium"
-      ng-reflect-ng-class="btn-secondary,btn-medium"
-    >
-      <img
-        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-        width="100"
-      />
-       No template
-  
-    </button>
-  </my-button>
-</storybook-wrapper>
-`;
--- a/code/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts
+++ b/code/examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts
@ -1,27 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/angular';
-import { DocButtonComponent, ISomeInterface } from '../docs/doc-button/doc-button.component';
-
-export default {
-  title: 'Addons/Controls',
-  component: DocButtonComponent,
-} as Meta;
-
-const Template: StoryFn = (args) => ({
-  props: args,
-});
-
-const someDataObject: ISomeInterface = {
-  one: 'Hello world',
-  two: true,
-  three: ['One', 'Two', 'Three'],
-};
-
-export const Basic = Template.bind({});
-Basic.args = { label: 'Args test', isDisabled: false, someDataObject };
-
-export const Disabled = Template.bind({});
-Disabled.args = { label: 'Disabled', isDisabled: true };
-
-export const NoTemplate = () => ({
-  props: { label: 'No template', isDisabled: false },
-});
--- a/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
+++ b/code/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx
@ -1,7 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
 import { Welcome, Button } from '../.././angular-demo';
-import { linkTo } from '@storybook/addon-links';
 import { DocButtonComponent } from './doc-button/doc-button.component';

 # Storybook Docs for Angular
--- a/code/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts
+++ b/code/examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts
@ -66,16 +66,19 @@ Submitted.play = async (context) => {
  const canvas = within(context.canvasElement);
  await userEvent.click(canvas.getByText('Submit'));

-  await waitFor(async () => {
-    await expect(
-      canvas.getByRole('heading', {
-        name: /you submitted the following:/i,
-      })
-    ).toBeInTheDocument();
-    await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
-    await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
-    await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
-  });
+  await waitFor(
+    async () => {
+      await expect(
+        canvas.getByRole('heading', {
+          name: /you submitted the following:/i,
+        })
+      ).toBeInTheDocument();
+      await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
+      await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
+      await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
+    },
+    { timeout: 2000 }
+  );
 };

 export const SubmittedAndEditedAfter: StoryFn<HeroForm> = Template.bind({});
--- a/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
+++ b/code/examples/angular-cli/src/stories/addons/links/addon-links.stories.ts
@ -1,4 +1,3 @@
-import { linkTo } from '@storybook/addon-links';
 import { Button } from '../../angular-demo';

 export default {
@ -9,7 +8,7 @@ export default {
 export const ButtonWithLinkToAnotherStory = () => ({
  props: {
    text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
+    onClick: () => {},
  },
 });

--- a/code/examples/angular-cli/src/stories/addons/toolbars/locales/snapshots/locales.stories.storyshot
+++ b/code/examples/angular-cli/src/stories/addons/toolbars/locales/snapshots/locales.stories.storyshot
@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons / Toolbars / Locales With Angular Service 1`] = `
-<storybook-wrapper>
-   Your locale is en<br /> I say: Hello 
-</storybook-wrapper>
-`;
--- a/code/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts
+++ b/code/examples/angular-cli/src/stories/addons/toolbars/locales/locales.stories.ts
@ -1,48 +0,0 @@
-import type { DecoratorFunction } from '@storybook/addons';
-import { moduleMetadata } from '@storybook/angular';
-import type { Meta, StoryFn } from '@storybook/angular';
-
-import { TranslatePipe } from './translate.pipe';
-import { DEFAULT_LOCALE } from './translate.service';
-
-const withLocaleProvider: DecoratorFunction<unknown> = (storyFunc, context) => {
-  const { locale } = context.globals;
-
-  // uses `moduleMetadata` decorator to cleanly add locale provider into module metadata
-
-  // It is also possible to do it directly in story with
-  // ```
-  // const sotry = storyFunc();
-  // sotry.moduleMetadata = {
-  //   ...sotry.moduleMetadata,
-  //   providers: [
-  //     ...(sotry.moduleMetadata?.providers ?? []),
-  //     { provide: DEFAULT_LOCALE, useValue: locale },
-  //   ],
-  // };
-  // return sotry;
-  // ```
-  // but more verbose
-
-  return moduleMetadata({ providers: [{ provide: DEFAULT_LOCALE, useValue: locale }] })(
-    storyFunc,
-    context
-  );
-};
-
-export default {
-  title: 'Addons / Toolbars / Locales',
-  decorators: [withLocaleProvider, moduleMetadata({ declarations: [TranslatePipe] })],
-} as Meta;
-
-export const WithAngularService: StoryFn = (_args, { globals: { locale } }) => {
-  return {
-    template: `
-      Your locale is {{ locale }}<br>
-      I say: {{ 'hello' | translate }}
-    `,
-    props: {
-      locale,
-    },
-  };
-};
--- a/code/examples/angular-cli/src/stories/addons/toolbars/locales/translate.pipe.ts
+++ b/code/examples/angular-cli/src/stories/addons/toolbars/locales/translate.pipe.ts
@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { TranslateService } from './translate.service';
-
-@Pipe({
-  name: 'translate',
-})
-export class TranslatePipe implements PipeTransform {
-  // eslint-disable-next-line no-useless-constructor
-  constructor(private readonly translateService: TranslateService) {}
-
-  transform(value: string): string {
-    return `${this.translateService.getTranslation(value)}`;
-  }
-}
--- a/code/examples/angular-cli/src/stories/addons/toolbars/locales/translate.service.ts
+++ b/code/examples/angular-cli/src/stories/addons/toolbars/locales/translate.service.ts
@ -1,30 +0,0 @@
-import { Inject, Injectable, InjectionToken } from '@angular/core';
-
-export const DEFAULT_LOCALE = new InjectionToken<string>('test');
-
-@Injectable({ providedIn: 'root' })
-export class TranslateService {
-  private locale = 'en';
-
-  private translation = {
-    en: { hello: 'Hello' },
-    es: { hello: 'Hola!' },
-    fr: { hello: 'Bonjour!' },
-    kr: { hello: '안녕하세요!' },
-    zh: { hello: '你好!' },
-  };
-
-  constructor(@Inject(DEFAULT_LOCALE) defaultLocale: string | null) {
-    if (defaultLocale) {
-      this.setLocale(defaultLocale);
-    }
-  }
-
-  setLocale(locale) {
-    this.locale = locale;
-  }
-
-  getTranslation(key: string) {
-    return this.translation[this.locale][key] ?? key;
-  }
-}
--- a/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts
+++ b/code/examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts
@ -1,27 +0,0 @@
-import { addParameters } from '@storybook/angular';
-import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
-
-const globalParameter = 'globalParameter';
-const chapterParameter = 'chapterParameter';
-const storyParameter = 'storyParameter';
-
-addParameters({ globalParameter });
-
-export default {
-  title: 'Core / Parameters / All parameters',
-  parameters: {
-    chapterParameter,
-  },
-} as Meta;
-
-export const PassedToStory: StoryFn = (_args, { parameters: { fileName, ...parameters } }) => ({
-  component: Button,
-  props: {
-    text: `Parameters are ${JSON.stringify(parameters, null, 2)}`,
-    onClick: () => 0,
-  },
-});
-
-PassedToStory.storyName = 'All parameters passed to story';
-PassedToStory.parameters = { storyParameter };
--- a/code/examples/angular-cli/src/stories/welcome-angular.stories.ts
+++ b/code/examples/angular-cli/src/stories/welcome-angular.stories.ts
@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
 import { AppComponent } from '../app/app.component';

 export default {
@ -9,6 +8,6 @@ export default {
 export const ToAngular: StoryFn = () => ({
  component: AppComponent,
  props: {
-    showApp: linkTo('Button'),
+    showApp: () => {},
  },
 });
--- a/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
+++ b/code/examples/angular-cli/src/stories/welcome-storybook.stories.ts
@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from './angular-demo';

 export default {
@ -9,6 +8,6 @@ export default {
 export const ToStorybook: StoryFn = () => ({
  component: Welcome,
  props: {
-    showApp: linkTo('Button'),
+    showApp: () => {},
  },
 });
--- a/code/examples/cra-kitchen-sink/.storybook/main.ts
+++ b/code/examples/cra-kitchen-sink/.storybook/main.ts
@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = {
    const resolvePlugins = config.resolve?.plugins;
    if (Array.isArray(resolvePlugins)) {
      resolvePlugins.forEach((p) => {
-        // @ts-ignore
+        // @ts-expect-error (Converted from ts-ignore)
        const appSrcs = p.appSrcs as unknown as string[];
        if (Array.isArray(appSrcs)) {
          appSrcs.push(path.join(__dirname, '..', '..', '..'));
--- a/code/examples/cra-kitchen-sink/package.json
+++ b/code/examples/cra-kitchen-sink/package.json
@ -1,6 +1,6 @@
 {
  "name": "cra-kitchen-sink",
-  "version": "7.0.0-alpha.31",
+  "version": "7.0.0-alpha.33",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
@ -11,7 +11,7 @@
    "test": "react-scripts test --env=jsdom"
  },
  "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.31",
+    "@storybook/client-logger": "7.0.0-alpha.33",
    "global": "^4.4.0",
    "prop-types": "^15.7.2",
    "react": "16.14.0",
@ -21,21 +21,21 @@
  },
  "devDependencies": {
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@storybook/addon-a11y": "7.0.0-alpha.31",
-    "@storybook/addon-actions": "7.0.0-alpha.31",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.31",
-    "@storybook/addon-docs": "7.0.0-alpha.31",
-    "@storybook/addon-highlight": "7.0.0-alpha.31",
-    "@storybook/addon-jest": "7.0.0-alpha.31",
-    "@storybook/addon-links": "7.0.0-alpha.31",
-    "@storybook/addon-storyshots": "7.0.0-alpha.31",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/builder-webpack5": "7.0.0-alpha.31",
+    "@storybook/addon-a11y": "7.0.0-alpha.33",
+    "@storybook/addon-actions": "7.0.0-alpha.33",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.33",
+    "@storybook/addon-docs": "7.0.0-alpha.33",
+    "@storybook/addon-highlight": "7.0.0-alpha.33",
+    "@storybook/addon-jest": "7.0.0-alpha.33",
+    "@storybook/addon-links": "7.0.0-alpha.33",
+    "@storybook/addon-storyshots": "7.0.0-alpha.33",
+    "@storybook/addons": "7.0.0-alpha.33",
+    "@storybook/builder-webpack5": "7.0.0-alpha.33",
    "@storybook/preset-create-react-app": "^4.1.0",
-    "@storybook/react": "7.0.0-alpha.31",
-    "@storybook/react-webpack5": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
-    "storybook": "7.0.0-alpha.31",
+    "@storybook/react": "7.0.0-alpha.33",
+    "@storybook/react-webpack5": "7.0.0-alpha.33",
+    "@storybook/theming": "7.0.0-alpha.33",
+    "storybook": "7.0.0-alpha.33",
    "webpack": "5"
  },
  "storybook": {
--- a/code/examples/cra-kitchen-sink/src/stories/decorators.stories.js
+++ b/code/examples/cra-kitchen-sink/src/stories/decorators.stories.js
@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '../components/react-demo';
-
-const Bold = ({ children }) => {
-  return <b>{children}</b>;
-};
-
-Bold.propTypes = {
-  children: PropTypes.string.isRequired,
-};
-
-export default {
-  title: 'Decorators',
-  component: Button,
-  decorators: [
-    (Story) => (
-      <div style={{ padding: 25, border: '3px solid red' }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const WithArgs = (args) => <Button {...args} />;
-WithArgs.args = { children: 'With args' };
-
-export const Basic = () => <Button>Basic</Button>;
-
-export const Nested = () => (
-  <Button>
-    <Bold>Hello</Bold>
-  </Button>
-);
--- a/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
+++ b/code/examples/cra-kitchen-sink/src/stories/welcome.stories.js
@ -1,5 +1,4 @@
 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '../components/react-demo';

 export default {
@ -7,5 +6,5 @@ export default {
  component: Welcome,
 };

-export const Story1 = () => <Welcome showApp={linkTo('Button')} />;
+export const Story1 = () => <Welcome showApp={() => {}} />;
 Story1.title = 'to Storybook';
--- a/code/examples/cra-ts-essentials/.env
+++ b/code/examples/cra-ts-essentials/.env
@ -1,3 +0,0 @@
-DISABLE_ESLINT_PLUGIN=true
-SKIP_PREFLIGHT_CHECK=true
-NODE_PATH=src
--- a/code/examples/cra-ts-essentials/.storybook/main.ts
+++ b/code/examples/cra-ts-essentials/.storybook/main.ts
@ -1,44 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-
-const path = require('path');
-
-const mainConfig: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: [
-    '@storybook/preset-create-react-app',
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        viewport: false,
-      },
-    },
-    '@storybook/addon-interactions',
-  ],
-  logLevel: 'debug',
-  // add monorepo root as a valid directory to import modules from
-  webpackFinal: (config) => {
-    const resolvePlugins = config.resolve?.plugins;
-    if (Array.isArray(resolvePlugins)) {
-      resolvePlugins.forEach((p) => {
-        // @ts-ignore
-        const appSrcs = p.appSrcs as unknown as string[];
-        if (Array.isArray(appSrcs)) {
-          appSrcs.push(path.join(__dirname, '..', '..', '..'));
-        }
-      });
-    }
-    return config;
-  },
-  core: {
-    channelOptions: { allowFunction: false, maxDepth: 10 },
-    disableTelemetry: true,
-  },
-  staticDirs: ['../public'],
-  features: {
-    buildStoriesJson: true,
-    breakingChangesV7: true,
-  },
-  framework: '@storybook/react-webpack5',
-};
-
-module.exports = mainConfig;
--- a/code/examples/cra-ts-essentials/.storybook/preview.tsx
+++ b/code/examples/cra-ts-essentials/.storybook/preview.tsx
@ -1,54 +0,0 @@
-import React from 'react';
-import type { DecoratorFn } from '@storybook/react';
-import { ThemeProvider, convert, themes } from '@storybook/theming';
-
-export const decorators: DecoratorFn[] = [
-  (StoryFn, { globals: { locale } }) => (
-    <>
-      <div>Locale: {locale}</div>
-      <StoryFn />
-    </>
-  ),
-  (StoryFn) => (
-    <ThemeProvider theme={convert(themes.light)}>
-      <StoryFn />
-    </ThemeProvider>
-  ),
-];
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-};
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    defaultValue: 'en',
-    toolbar: {
-      dynamicTitle: true,
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'es', right: '🇪🇸', title: 'Español' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'kr', right: '🇰🇷', title: '한국어' },
-      ],
-    },
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      dynamicTitle: true,
-      icon: 'circlehollow',
-      title: 'Theme',
-      items: [
-        { value: 'light', icon: 'circlehollow', title: 'Light' },
-        { value: 'dark', icon: 'circle', title: 'Dark' },
-        { value: 'side-by-side', icon: 'sidebar', title: 'Side by side' },
-        { value: 'stacked', icon: 'bottombar', title: 'Stacked' },
-      ],
-    },
-  },
-};
--- a/code/examples/cra-ts-essentials/README.md
+++ b/code/examples/cra-ts-essentials/README.md
@ -1 +0,0 @@
-Demonstrate `@storybook/addon-essentials` default configuration with CRA / Typescript.
--- a/code/examples/cra-ts-essentials/package.json
+++ b/code/examples/cra-ts-essentials/package.json
@ -1,57 +0,0 @@
-{
-  "name": "cra-ts-essentials",
-  "version": "7.0.0-alpha.31",
-  "private": true,
-  "scripts": {
-    "build": "react-scripts build",
-    "build-storybook": "storybook build",
-    "eject": "react-scripts eject",
-    "start": "react-scripts start",
-    "storybook": "storybook dev -p 9009 --no-manager-cache",
-    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "dependencies": {
-    "@storybook/components": "7.0.0-alpha.31",
-    "@storybook/theming": "7.0.0-alpha.31",
-    "@types/jest": "^26.0.16",
-    "@types/node": "^14.14.20 || ^16.0.0",
-    "@types/react": "^16.14.23",
-    "@types/react-dom": "16.9.14",
-    "formik": "2.2.9",
-    "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-scripts": "^5.0.1",
-    "typescript": "~4.6.3"
-  },
-  "devDependencies": {
-    "@storybook/addon-essentials": "7.0.0-alpha.31",
-    "@storybook/addon-interactions": "7.0.0-alpha.31",
-    "@storybook/addons": "7.0.0-alpha.31",
-    "@storybook/builder-webpack5": "7.0.0-alpha.31",
-    "@storybook/preset-create-react-app": "^4.1.0",
-    "@storybook/react": "7.0.0-alpha.31",
-    "@storybook/react-webpack5": "7.0.0-alpha.31",
-    "@storybook/testing-library": "^0.0.9",
-    "storybook": "7.0.0-alpha.31",
-    "ts-node": "^10.4.0",
-    "webpack": "5"
-  },
-  "storybook": {
-    "chromatic": {
-      "projectToken": "b311ypk6of"
-    }
-  }
-}
--- a/code/examples/cra-ts-essentials/public/favicon.ico
+++ b/code/examples/cra-ts-essentials/public/favicon.ico
--- a/code/examples/cra-ts-essentials/public/index.html
+++ b/code/examples/cra-ts-essentials/public/index.html
@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
--- a/code/examples/cra-ts-essentials/public/logo192.png
+++ b/code/examples/cra-ts-essentials/public/logo192.png
--- a/code/examples/cra-ts-essentials/public/logo512.png
+++ b/code/examples/cra-ts-essentials/public/logo512.png
--- a/code/examples/cra-ts-essentials/public/manifest.json
+++ b/code/examples/cra-ts-essentials/public/manifest.json
@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
--- a/code/examples/cra-ts-essentials/public/robots.txt
+++ b/code/examples/cra-ts-essentials/public/robots.txt
@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
--- a/code/examples/cra-ts-essentials/src/App.css
+++ b/code/examples/cra-ts-essentials/src/App.css
@ -1,22 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
-}
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				Demonstrate `@storybook/addon-essentials` default configuration with CRA / Typescript.