diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96041db16abb..a2458954ccd9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 7.6.7
+
+- Core: Skip no-framework error when ignorePreview=true - [#25286](https://github.com/storybookjs/storybook/pull/25286), thanks [@ndelangen](https://github.com/ndelangen)!
+- Dependencies: Semver dependency fixes - [#25283](https://github.com/storybookjs/storybook/pull/25283), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vite: Fix pre-transform error in Vite 5 - [#25329](https://github.com/storybookjs/storybook/pull/25329), thanks [@yannbf](https://github.com/yannbf)!
+- Vue3: Fix pnp by making compiler-core a dependency - [#25311](https://github.com/storybookjs/storybook/pull/25311), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.6.6
 
 - SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 0930b04e6a74..077e70147763 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,16 @@
+## 8.0.0-alpha.7
+
+- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)!
+- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)!
+
 ## 8.0.0-alpha.6
 
 - NextJS: Autoconfigure public directory for new projects - [#25279](https://github.com/storybookjs/storybook/pull/25279), thanks [@shilman](https://github.com/shilman)!
diff --git a/MIGRATION.md b/MIGRATION.md
index c69c72a1fc66..6e673bbea530 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,13 @@
 <h1>Migration</h1>
 
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
+  - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
+  - [MDX related changes](#mdx-related-changes)
+    - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
+    - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support)
+    - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block)
   - [Core changes](#core-changes)
     - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
     - [Autotitle breaking fixes](#autotitle-breaking-fixes)
@@ -10,12 +16,19 @@
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
     - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
     - [Icons is deprecated](#icons-is-deprecated)
-    - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
     - [Removed postinstall](#removed-postinstall)
     - [Removed stories.json](#removed-storiesjson)
   - [Framework-specific changes](#framework-specific-changes)
-    - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
-    - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
+    - [React](#react)
+      - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
+    - [Next.js](#nextjs)
+      - [Require Next.js 13.5 and up](#require-nextjs-135-and-up)
+    - [Angular](#angular)
+      - [Require Angular 15 and up](#require-angular-15-and-up)
+    - [Svelte](#svelte)
+      - [Require Svelte 4 and up](#require-svelte-4-and-up)
+  - [Deprecations which are now removed](#deprecations-which-are-now-removed)
+    - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -331,6 +344,36 @@
 
 ## From version 7.x to 8.0.0
 
+### Removed deprecated shim packages
+
+In Storybook 7, these packages existed for backwards compatibility, but were marked as deprecated:
+
+- `@storybook/addons` - this package has been split into 2 packages: `@storybook/preview-api` and `@storybook/manager-api`, see more here: [New Addons API](#new-addons-api).
+- `@storybook/channel-postmessage` - this package has been merged into `@storybook/channel`.
+- `@storybook/channel-websocket` - this package has been merged into `@storybook/channel`.
+- `@storybook/client-api` - this package has been merged into `@storybook/preview-api`.
+- `@storybook/core-client` - this package has been merged into `@storybook/preview-api`.
+- `@storybook/preview-web` - this package has been merged into `@storybook/preview-api`.
+- `@storybook/store` - this package has been merged into `@storybook/preview-api`.
+- `@storybook/api` - this package has been replaced with `@storybook/manager-api`.
+
+This section explains the rationale, and the required changed you might have to make: [New Addons API](#new-addons-api)
+
+### Framework-specific Vite plugins have to be explicitly added
+
+In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g. `@vitejs/plugin-react` if not installed.
+In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+```
+
 ### Implicit actions can not be used during rendering (for example in the play function)
 
 In Storybook 7, we inferred if the component accepts any action props,
@@ -380,6 +423,26 @@ To summarize:
 - This allows users and (test) integrators to run or build storybook without docgen, boosting the user performance and allows tools to give quicker feedback.
 - This will make sure that we can one day lazy load docgen, without changing how stories are rendered.
 
+### MDX related changes
+
+#### MDX is upgraded to v3
+
+Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that probably won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/).
+
+#### Dropping support for *.stories.mdx (CSF in MDX) format and MDX1 support
+
+In Storybook 7, we deprecated the ability of using MDX both for documentation and for defining stories in the same .stories.mdx file. It is now removed, and Storybook won't support .stories.mdx files anymore. We provide migration scripts to help you onto the new format.
+
+If you were using the [legacy MDX1 format](#legacy-mdx1-support), you will have to remove the `legacyMdx1` main.js feature flag and the `@storybook/mdx1-csf` package.
+
+Alongside with this change, the `jsxOptions` configuration was removed as it is not used anymore.
+
+[More info here](https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf).
+
+#### Dropping support for id, name and story in Story block
+
+Referencing stories by `id`, `name` or `story` in the Story block is not possible anymore. [More info here](#story-block).
+
 ### Core changes
 
 #### Dropping support for Node.js 16
@@ -407,22 +470,24 @@ Addon authors are advised to upgrade to react v18.
 
 #### Storyshots has been removed
 
-Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests.
+Storyshots was an addon for Storybook which allowed users to turn their stories into automated snapshot tests.
+
+Every story would automatically be taken into account and create a snapshot file.
 
-Every story would automatically be taken into account and created a snapshot-file for.
+Snapshot testing has since fallen out of favor and is no longer recommended.
 
-Snapshot-testing has since fallen out of favor and is no longer recommended.
+In addition to its limited use, and high chance of false positives, Storyshots ran code developed to run in the browser in NodeJS via JSDOM.
+JSDOM has limitations and is not a perfect emulation of the browser environment; therefore, Storyshots was always a pain to set up and maintain.
 
-In addition to it's limited use, and high chance of false-positives, storyshots ran code developed to run in the browser in NodeJS via JSDOM.
-JSDOM has limitations and is not a perfect emulation of the browser environment; therefore storyshots was always a pain to setup and maintain.
+The Storybook team has built the test-runner as a direct replacement, which utilizes Playwright to connect to an actual browser where Storybook runs the code.
 
-The storybook team has build the test-runner as a direct replacement, which utilizes playwright to connect to an actual browser where storybook runs the code.
+In addition, CSF has expanded to allow for play functions to be defined on stories, which allows for more complex testing scenarios, fully integrated within Storybook itself (and supported by the test-runner, and not Storyshots).
 
-In addition CSF has expanded to allow for play-function to be defined on stories, which allows for more complex testing scenarios, fully integrated within storybook itself (and supported by the test-runner, and not storyshots).
+Finally, storyStoreV7: true (the default and only option in Storybook 8), was not supported by Storyshots.
 
-Finally `storyStoreV7: true` (the default and only options in storybook 8), was not supported by storyshots.
+By removing Storyshots, the Storybook team was unblocked from moving (eventually) to an ESM-only Storybook, which is a big step towards a more modern Storybook.
 
-By removing storyshots, the storybook team was unblocked from moving (eventually) to an ESM-only storybook, which is a big step towards a more modern storybook.
+Please check the [migration guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) that we prepared.
 
 #### UI layout state has changed shape
 
@@ -454,7 +519,21 @@ The `IconButton` doesn't have any deprecated props but it now uses the new `Butt
 
 In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead.
 
-#### React-docgen component analysis by default
+#### Removed postinstall
+
+We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
+
+#### Removed stories.json
+
+In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0.
+
+In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91
+
+### Framework-specific changes
+
+#### React
+
+##### `react-docgen` component analysis by default
 
 In Storybook 7, we used `react-docgen-typescript` to analyze React component props and auto-generate controls. In Storybook 8, we have moved to `react-docgen` as the new default. `react-docgen` is dramatically more efficient, shaving seconds off of dev startup times. However, it only analyzes basic TypeScript constructs.
 
@@ -470,25 +549,29 @@ export default {
 
 For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen
 
-#### Removed postinstall
+#### Next.js
 
-We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
+##### Require Next.js 13.5 and up
 
-#### Removed stories.json
+Starting in 8.0, Storybook requires Next.js 13.5 and up.
 
-In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0.
+#### Angular
 
-In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91
+##### Require Angular 15 and up
 
-### Framework-specific changes
+Starting in 8.0, Storybook requires Angular 15 and up.
+
+#### Svelte
+
+##### Require Svelte 4 and up
 
-#### Angular: Drop support for Angular \< 15
+Starting in 8.0, Storybook requires Svelte 4 and up.
 
-Starting in 8.0, we drop support for Angular < 15
+### Deprecations which are now removed
 
-#### Next.js: Drop support for version \< 13.5
+#### --use-npm flag in storybook CLI
 
-Starting in 8.0, we drop support for Next.js < 13.5.
+The `--use-npm` is now removed. Use `--package-manager=npm` instead. [More info here](#cli-option---use-npm-deprecated).
 
 ## From version 7.5.0 to 7.6.0
 
diff --git a/README.md b/README.md
index 7c174bdcc250..263ee639e993 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 
 See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-### Deprecated Addons
+### Deprecated/Removed Addons
 
 | Addons                                                                                       |                                                            |
 | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
@@ -147,12 +147,14 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr
 | [options](https://www.npmjs.com/package/@storybook/addon-options)                            | Customize the Storybook UI in code                         |
 | [storyshots](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-core) | Snapshot testing for components in Storybook               |
 
-To continue improving your experience, we have to eventually deprecate certain addons in favor of new and better tools.
+To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
 
 If you're using info/notes, we highly recommend you migrate to [docs](code/addons/docs/) instead, and [here is a guide](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
 
 If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you.
 
+If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) to help you.
+
 ## Badges & Presentation materials
 
 We have a badge! Link it to your live Storybook example.
diff --git a/code/.eslintrc.js b/code/.eslintrc.js
index d770489b6580..06b9f06ee759 100644
--- a/code/.eslintrc.js
+++ b/code/.eslintrc.js
@@ -39,6 +39,18 @@ module.exports = {
         allowIndexSignaturePropertyAccess: true,
       },
     ],
+    '@typescript-eslint/no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'vite',
+            message: 'Please dynamically import from vite instead, to force the use of ESM',
+            allowTypeImports: true,
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {
diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md
index 1d3a8ae3797b..3b04a3a75dec 100644
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@@ -176,38 +176,4 @@ Like [story parameters](https://storybook.js.org/docs/react/writing-stories/para
 
 ### How do controls work with MDX?
 
-MDX compiles to component story format (CSF) under the hood, so there's a direct mapping for every example above using the `args` and `argTypes` props.
-
-Consider this example in CSF:
-
-```js
-import { Button } from './Button';
-export default {
-  title: 'Button',
-  component: Button,
-  argTypes: {
-    background: { control: 'color' },
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-export const Basic = Template.bind({});
-Basic.args = { label: 'hello', background: '#ff0' };
-```
-
-Here's the MDX equivalent:
-
-```jsx
-import { Meta, Story } from '@storybook/addon-docs';
-import { Button } from './Button';
-
-<Meta title="Button" component={Button} argTypes={{ background: { control: 'color' } }} />
-
-export const Template = (args) => <Button {...args} />
-
-<Story name="Basic" args={{ label: 'hello', background: '#ff0' }}>
-  {Template.bind({})}
-</Story>
-```
-
-For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/code/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).
+When importing stories from your CSF file into MDX, controls will work the same way. See [the documentation](https://storybook.js.org/docs/writing-docs/mdx#basic-example) for examples.
\ No newline at end of file
diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
index 9a9a3debad2a..9495cf2c1508 100644
--- a/code/addons/docs/README.md
+++ b/code/addons/docs/README.md
@@ -110,20 +110,6 @@ export default {
 };
 ```
 
-If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to
-configure Jest to transform MDX stories into something Storyshots can understand:
-
-Add the following to your Jest configuration:
-
-```json
-{
-  "transform": {
-    "^.+\\.[tj]sx?$": "babel-jest",
-    "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
-  }
-}
-```
-
 ### Be sure to check framework specific installation needs
 
 - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
@@ -143,7 +129,6 @@ export default {
     {
       name: '@storybook/addon-docs',
       options: {
-        jsxOptions: {},
         csfPluginOptions: null,
         mdxPluginOptions: {},
       },
@@ -152,8 +137,6 @@ export default {
 };
 ```
 
-`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
-
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 
 > With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
diff --git a/code/addons/docs/jest-transform-mdx.js b/code/addons/docs/jest-transform-mdx.js
deleted file mode 100644
index eb3106944ae1..000000000000
--- a/code/addons/docs/jest-transform-mdx.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const path = require('path');
-const { ScriptTransformer } = require('@jest/transform');
-const { dedent } = require('ts-dedent');
-
-const { compile } = require('@storybook/mdx2-csf');
-
-module.exports = {
-  async processAsync(src, filename, config, { instrument }) {
-    const code = await compile(src, { skipCsf: false });
-    const result = dedent`
-      /* @jsx mdx */
-      import React from 'react'
-      import { mdx } from '@mdx-js/react'
-      ${code}
-    `;
-
-    const extension = path.extname(filename);
-    const jsFileName = `${filename.slice(0, -extension.length)}.js`;
-
-    return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);
-  },
-};
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 5d17d68be076..bfe3168c5f82 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -65,13 +65,13 @@
       "require": "./dist/shims/mdx-react-shim.js",
       "import": "./dist/shims/mdx-react-shim.mjs"
     },
+    "./mdx-loader": "./dist/mdx-loader.js",
     "./svelte/HOC.svelte": "./svelte/HOC.svelte",
     "./ember": "./ember/index.js",
     "./ember/index.js": "./ember/index.js",
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./jest-transform-mdx": "./jest-transform-mdx.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -98,15 +98,14 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@jest/transform": "^29.3.1",
-    "@mdx-js/react": "^2.1.5",
+    "@babel/core": "^7.12.3",
+    "@mdx-js/react": "^3.0.0",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/react-dom-shim": "workspace:*",
@@ -120,6 +119,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
@@ -133,10 +133,8 @@
       "./src/preset.ts",
       "./src/preview.ts",
       "./src/blocks.ts",
-      "./src/shims/mdx-react-shim.ts"
-    ],
-    "externals": [
-      "@storybook/mdx1-csf"
+      "./src/shims/mdx-react-shim.ts",
+      "./src/mdx-loader.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
diff --git a/code/addons/docs/src/compiler/index.test.ts b/code/addons/docs/src/compiler/index.test.ts
new file mode 100644
index 000000000000..d390e7257ec1
--- /dev/null
+++ b/code/addons/docs/src/compiler/index.test.ts
@@ -0,0 +1,669 @@
+import { expect, describe, it } from 'vitest';
+import { dedent } from 'ts-dedent';
+import { compileSync, compile } from './index';
+
+expect.addSnapshotSerializer({
+  serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
+  test: (_val) => true,
+});
+
+// Remove unnecessary noise from snapshots
+const clean = (code: string) => {
+  const mdxContentRegex =
+    /export default function MDXContent\([^)]*\) \{(?:[^{}]*|{(?:[^{}]*|{[^{}]*})*})*\}/gs;
+
+  const mdxMissingReferenceRegex =
+    /function _missingMdxReference\([^)]*\) \{(?:[^{}]*|{(?:[^{}]*|{[^{}]*})*})*\}/gs;
+
+  return code.replace(mdxMissingReferenceRegex, '').replace(mdxContentRegex, '');
+};
+
+describe('mdx3', () => {
+  it('supports AdjacentBlockJSX', () => {
+    const input = dedent`
+      <style>{\`
+        h1 {
+          color: blue;
+        }
+      \`}</style>
+   `;
+
+    expect(clean(compileSync(input))).toMatchInlineSnapshot(`
+      import {jsx as _jsx} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      function _createMdxContent(props) {
+        return _jsx("style", {
+          children: \`
+        h1 {
+          color: blue;
+        }
+      \`
+        });
+      }
+    `);
+  });
+
+  it('supports Await in MDX', () => {
+    const input = dedent`
+      {await Promise.resolve('Hello World')}
+   `;
+
+    expect(clean(compileSync(input))).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      async function _createMdxContent(props) {
+        return _jsx(_Fragment, {
+          children: await Promise.resolve('Hello World')
+        });
+      }
+    `);
+  });
+
+  it('supports ES2024', () => {
+    const input = dedent`
+    export const obj = {
+      nested: {
+        property: 'Hello world!'
+      }
+    };
+    
+    export const value = obj?.nested?.property ?? 'Default Value';
+    
+    Value: {value}
+   `;
+
+    expect(clean(compileSync(input))).toMatchInlineSnapshot(`
+      import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      export const obj = {
+        nested: {
+          property: 'Hello world!'
+        }
+      };
+      export const value = obj?.nested?.property ?? 'Default Value';
+      function _createMdxContent(props) {
+        const _components = {
+          p: "p",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_components.p, {
+          children: ["Value: ", value]
+        });
+      }
+    `);
+  });
+});
+
+describe('mdx2', () => {
+  it('works', () => {
+    const input = dedent`
+      # hello
+
+      <Meta title="foobar" />
+
+      world {2 + 1}
+    `;
+
+    expect(clean(compileSync(input))).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          p: "p",
+          ..._provideComponents(),
+          ...props.components
+        }, {Meta} = _components;
+        if (!Meta) _missingMdxReference("Meta", true);
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "hello"
+          }), "\\n", _jsx(Meta, {
+            title: "foobar"
+          }), "\\n", _jsxs(_components.p, {
+            children: ["world ", 2 + 1]
+          })]
+        });
+      }
+    `);
+  });
+
+  it('standalone jsx expressions', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        # Standalone JSX expressions
+
+        {3 + 3}
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "Standalone JSX expressions"
+          }), "\\n", 3 + 3]
+        });
+      }
+    `);
+  });
+});
+
+describe('full snapshots', () => {
+  it('compileSync', () => {
+    const input = dedent`
+      # hello
+
+      <Meta title="foobar" />
+
+      world {2 + 1}
+    `;
+
+    expect(compileSync(input)).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          p: "p",
+          ..._provideComponents(),
+          ...props.components
+        }, {Meta} = _components;
+        if (!Meta) _missingMdxReference("Meta", true);
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "hello"
+          }), "\\n", _jsx(Meta, {
+            title: "foobar"
+          }), "\\n", _jsxs(_components.p, {
+            children: ["world ", 2 + 1]
+          })]
+        });
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = {
+          ..._provideComponents(),
+          ...props.components
+        };
+        return MDXLayout ? _jsx(MDXLayout, {
+          ...props,
+          children: _jsx(_createMdxContent, {
+            ...props
+          })
+        }) : _createMdxContent(props);
+      }
+      function _missingMdxReference(id, component) {
+        throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
+      }
+    `);
+  });
+  it('compile', async () => {
+    const input = dedent`
+      # hello
+
+      <Meta title="foobar" />
+
+      world {2 + 1}
+    `;
+
+    expect(await compile(input)).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          p: "p",
+          ..._provideComponents(),
+          ...props.components
+        }, {Meta} = _components;
+        if (!Meta) _missingMdxReference("Meta", true);
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "hello"
+          }), "\\n", _jsx(Meta, {
+            title: "foobar"
+          }), "\\n", _jsxs(_components.p, {
+            children: ["world ", 2 + 1]
+          })]
+        });
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = {
+          ..._provideComponents(),
+          ...props.components
+        };
+        return MDXLayout ? _jsx(MDXLayout, {
+          ...props,
+          children: _jsx(_createMdxContent, {
+            ...props
+          })
+        }) : _createMdxContent(props);
+      }
+      function _missingMdxReference(id, component) {
+        throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
+      }
+    `);
+  });
+  it('sync & async should match', async () => {
+    const input = dedent`
+    # hello
+
+    <Meta title="foobar" />
+
+    world {2 + 1}
+  `;
+
+    const ou1 = compileSync(input);
+    const ou2 = await compile(input);
+
+    expect(ou1).toEqual(ou2);
+  });
+  it('canvas without story children', () => {
+    const input = dedent`
+      import { Canvas } from '@storybook/addon-docs';
+
+      <Canvas>
+        <h2>Some here</h2>
+      </Canvas>
+    `;
+    expect(compileSync(input)).toMatchInlineSnapshot(`
+      import {jsx as _jsx} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Canvas} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        return _jsx(Canvas, {
+          children: _jsx("h2", {
+            children: "Some here"
+          })
+        });
+      }
+      export default function MDXContent(props = {}) {
+        const {wrapper: MDXLayout} = {
+          ..._provideComponents(),
+          ...props.components
+        };
+        return MDXLayout ? _jsx(MDXLayout, {
+          ...props,
+          children: _jsx(_createMdxContent, {
+            ...props
+          })
+        }) : _createMdxContent(props);
+      }
+    `);
+  });
+});
+
+describe('docs-mdx-compiler-plugin', () => {
+  it('csf-imports.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Story, Meta, Canvas } from '@storybook/addon-docs';
+        import { Welcome, Button } from '@storybook/angular/demo';
+        import * as MyStories from './My.stories';
+        import { Other } from './Other.stories';
+
+        <Meta title="MDX/CSF imports" />
+
+        # Stories from CSF imports
+
+        <Story of={MyStories.Basic} />
+
+        <Canvas>
+          <Story of={Other} />
+        </Canvas>
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Story, Meta, Canvas} from '@storybook/addon-docs';
+      import {Welcome, Button} from '@storybook/angular/demo';
+      import * as MyStories from './My.stories';
+      import {Other} from './Other.stories';
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(Meta, {
+            title: "MDX/CSF imports"
+          }), "\\n", _jsx(_components.h1, {
+            children: "Stories from CSF imports"
+          }), "\\n", _jsx(Story, {
+            of: MyStories.Basic
+          }), "\\n", _jsx(Canvas, {
+            children: _jsx(Story, {
+              of: Other
+            })
+          })]
+        });
+      }
+    `);
+  });
+
+  it('docs-only.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Meta } from '@storybook/addon-docs';
+
+        <Meta title="docs-only" />
+
+        # Documentation only
+
+        This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story.
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Meta} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          p: "p",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(Meta, {
+            title: "docs-only"
+          }), "\\n", _jsx(_components.h1, {
+            children: "Documentation only"
+          }), "\\n", _jsx(_components.p, {
+            children: "This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story."
+          })]
+        });
+      }
+    `);
+  });
+
+  it('meta-quotes-in-title.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Meta } from '@storybook/addon-docs';
+
+        <Meta title="Addons/Docs/what's in a title?" />
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {jsx as _jsx} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Meta} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        return _jsx(Meta, {
+          title: "Addons/Docs/what's in a title?"
+        });
+      }
+    `);
+  });
+
+  it('non-story-exports.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Button } from '@storybook/react/demo';
+        import { Story, Meta } from '@storybook/addon-docs';
+
+        <Meta title="Button" />
+
+        # Story definition
+
+        <Story of={Button} />
+
+        export const two = 2;
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Button} from '@storybook/react/demo';
+      import {Story, Meta} from '@storybook/addon-docs';
+      export const two = 2;
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(Meta, {
+            title: "Button"
+          }), "\\n", _jsx(_components.h1, {
+            children: "Story definition"
+          }), "\\n", _jsx(Story, {
+            of: Button
+          })]
+        });
+      }
+    `);
+  });
+
+  it('story-current.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Story } from '@storybook/addon-docs';
+
+        # Current story
+
+        <Story id="." />
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Story} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "Current story"
+          }), "\\n", _jsx(Story, {
+            id: "."
+          })]
+        });
+      }
+    `);
+  });
+
+  it('story-references.mdx', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Story } from '@storybook/addon-docs';
+
+        # Story reference
+
+        <Story id="welcome--welcome" />
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Story} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        const _components = {
+          h1: "h1",
+          ..._provideComponents(),
+          ...props.components
+        };
+        return _jsxs(_Fragment, {
+          children: [_jsx(_components.h1, {
+            children: "Story reference"
+          }), "\\n", _jsx(Story, {
+            id: "welcome--welcome"
+          })]
+        });
+      }
+    `);
+  });
+
+  it('title-template-string.mdx', () => {
+    expect(
+      clean(
+        compileSync(
+          [
+            "import { Meta, Story } from '@storybook/addon-docs';",
+            "import { titleFunction } from '../title-generators';",
+            '',
+            // eslint-disable-next-line no-template-curly-in-string
+            "<Meta title={`${titleFunction('template')}`} />",
+          ].join('\n')
+        )
+      )
+    ).toMatchInlineSnapshot(`
+      import {jsx as _jsx} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Meta, Story} from '@storybook/addon-docs';
+      import {titleFunction} from '../title-generators';
+      function _createMdxContent(props) {
+        return _jsx(Meta, {
+          title: \`\${titleFunction('template')}\`
+        });
+      }
+    `);
+  });
+
+  describe('csf3', () => {
+    it('auto-title-docs-only.mdx', () => {
+      expect(
+        clean(
+          compileSync(dedent`
+          import { Meta } from '@storybook/addon-docs';
+
+          <Meta />
+
+          # Auto-title Docs Only
+
+          Some **markdown** here!
+        `)
+        )
+      ).toMatchInlineSnapshot(`
+        import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+        import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+        import {Meta} from '@storybook/addon-docs';
+        function _createMdxContent(props) {
+          const _components = {
+            h1: "h1",
+            p: "p",
+            strong: "strong",
+            ..._provideComponents(),
+            ...props.components
+          };
+          return _jsxs(_Fragment, {
+            children: [_jsx(Meta, {}), "\\n", _jsx(_components.h1, {
+              children: "Auto-title Docs Only"
+            }), "\\n", _jsxs(_components.p, {
+              children: ["Some ", _jsx(_components.strong, {
+                children: "markdown"
+              }), " here!"]
+            })]
+          });
+        }
+      `);
+    });
+
+    it('auto-title.mdx', () => {
+      expect(
+        clean(
+          compileSync(dedent`
+          import { Button } from '@storybook/react/demo';
+          import { Story, Meta } from '@storybook/addon-docs';
+
+          <Meta component={Button} />
+        `)
+        )
+      ).toMatchInlineSnapshot(`
+        import {jsx as _jsx} from "react/jsx-runtime";
+        import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+        import {Button} from '@storybook/react/demo';
+        import {Story, Meta} from '@storybook/addon-docs';
+        function _createMdxContent(props) {
+          return _jsx(Meta, {
+            component: Button
+          });
+        }
+      `);
+    });
+  });
+
+  it('style tag', () => {
+    expect(
+      clean(
+        compileSync(dedent`
+        import { Meta } from '@storybook/addon-docs';
+
+        <Meta title="Example/Introduction" />
+
+        <style>{\`
+          .subheading {
+            --mediumdark: '#999999';
+            font-weight: 900;
+            font-size: 13px;
+            color: #999;
+            letter-spacing: 6px;
+            line-height: 24px;
+            text-transform: uppercase;
+            margin-bottom: 12px;
+            margin-top: 40px;
+          }
+          .link-list {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: 1fr 1fr;
+            row-gap: 10px;
+          }
+        \`}</style>
+      `)
+      )
+    ).toMatchInlineSnapshot(`
+      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
+      import {useMDXComponents as _provideComponents} from "@mdx-js/react";
+      import {Meta} from '@storybook/addon-docs';
+      function _createMdxContent(props) {
+        return _jsxs(_Fragment, {
+          children: [_jsx(Meta, {
+            title: "Example/Introduction"
+          }), "\\n", _jsx("style", {
+            children: \`
+        .subheading {
+          --mediumdark: '#999999';
+          font-weight: 900;
+          font-size: 13px;
+          color: #999;
+          letter-spacing: 6px;
+          line-height: 24px;
+          text-transform: uppercase;
+          margin-bottom: 12px;
+          margin-top: 40px;
+        }
+        .link-list {
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr 1fr;
+          row-gap: 10px;
+        }
+      \`
+          })]
+        });
+      }
+    `);
+  });
+});
diff --git a/code/addons/docs/src/compiler/index.ts b/code/addons/docs/src/compiler/index.ts
new file mode 100644
index 000000000000..79af50d3fb18
--- /dev/null
+++ b/code/addons/docs/src/compiler/index.ts
@@ -0,0 +1,29 @@
+import { compile as mdxCompile, compileSync as mdxCompileSync } from '@mdx-js/mdx';
+
+import type { CompileOptions, MdxCompileOptions } from './types';
+
+export type { CompileOptions, MdxCompileOptions };
+
+export const compile = async (input: string, { mdxCompileOptions = {} }: CompileOptions = {}) => {
+  const options = getCompilerOptions(mdxCompileOptions);
+
+  const mdxResult = await mdxCompile(input, options);
+
+  return mdxResult.toString();
+};
+
+export const compileSync = (input: string, { mdxCompileOptions = {} }: CompileOptions = {}) => {
+  const options = getCompilerOptions(mdxCompileOptions);
+
+  const mdxResult = mdxCompileSync(input, options);
+
+  return mdxResult.toString();
+};
+
+function getCompilerOptions(mdxCompileOptions: MdxCompileOptions): MdxCompileOptions {
+  return {
+    providerImportSource: '@mdx-js/react',
+    rehypePlugins: [],
+    ...mdxCompileOptions,
+  };
+}
diff --git a/code/addons/docs/src/compiler/types.ts b/code/addons/docs/src/compiler/types.ts
new file mode 100644
index 000000000000..9ef068b0aeed
--- /dev/null
+++ b/code/addons/docs/src/compiler/types.ts
@@ -0,0 +1,7 @@
+import type { compile as mdxCompile } from '@mdx-js/mdx';
+
+export type MdxCompileOptions = Parameters<typeof mdxCompile>[1];
+
+export interface CompileOptions {
+  mdxCompileOptions?: MdxCompileOptions;
+}
diff --git a/code/addons/docs/src/mdx-loader.ts b/code/addons/docs/src/mdx-loader.ts
new file mode 100644
index 000000000000..639fb0c70f0d
--- /dev/null
+++ b/code/addons/docs/src/mdx-loader.ts
@@ -0,0 +1,42 @@
+import type { transformAsync } from '@babel/core';
+import type { compile as mdxCompile } from '@mdx-js/mdx';
+import { compile } from './compiler';
+
+export type MdxCompileOptions = Parameters<typeof mdxCompile>[1];
+export type BabelOptions = Parameters<typeof transformAsync>[1];
+
+export interface CompileOptions {
+  mdxCompileOptions?: MdxCompileOptions;
+}
+
+const DEFAULT_RENDERER = `
+import React from 'react';
+`; // Adjust this import based on your actual webpack version and typings
+
+// Kind of like a mock so we don't have to install Webpack just for the types
+type LoaderOptions = {
+  filepath?: string;
+  [key: string]: any;
+} & any;
+
+interface LoaderContext {
+  async: () => (err: Error | null, result?: string) => void;
+  getOptions: () => LoaderOptions;
+  resourcePath: string;
+}
+
+async function loader(this: LoaderContext, content: string): Promise<void> {
+  const callback = this.async();
+  const options = { ...this.getOptions(), filepath: this.resourcePath };
+
+  try {
+    const result = await compile(content, options);
+    const code = `${DEFAULT_RENDERER}\n${result}`;
+    return callback(null, code);
+  } catch (err: any) {
+    console.error('Error loading:', this.resourcePath);
+    return callback(err);
+  }
+}
+
+export default loader;
diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
index 046e6c742bfd..c011a9202fb7 100644
--- a/code/addons/docs/src/plugins/mdx-plugin.ts
+++ b/code/addons/docs/src/plugins/mdx-plugin.ts
@@ -5,12 +5,11 @@ import remarkExternalLinks from 'remark-external-links';
 import { createFilter } from '@rollup/pluginutils';
 import { dirname, join } from 'path';
 
-const isStorybookMdx = (id: string) => id.endsWith('.stories.mdx') || id.endsWith('.story.mdx');
+import { compile } from '../compiler';
 
 /**
- * Storybook uses two different loaders when dealing with MDX:
+ * Storybook uses a single loader when dealing with MDX:
  *
- * - *stories.mdx and *story.mdx are compiled with the CSF compiler
  * - *.mdx are compiled with the MDX compiler directly
  *
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
@@ -18,8 +17,8 @@ const isStorybookMdx = (id: string) => id.endsWith('.stories.mdx') || id.endsWit
 export async function mdxPlugin(options: Options): Promise<Plugin> {
   const include = /\.mdx$/;
   const filter = createFilter(include);
-  const { features, presets } = options;
-  const { mdxPluginOptions, jsxOptions } = await presets.apply<Record<string, any>>('options', {});
+  const { presets } = options;
+  const { mdxPluginOptions } = await presets.apply<Record<string, any>>('options', {});
 
   return {
     name: 'storybook:mdx-plugin',
@@ -27,10 +26,6 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
     async transform(src, id) {
       if (!filter(id)) return undefined;
 
-      const { compile } = features?.legacyMdx1
-        ? await import('@storybook/mdx1-csf')
-        : await import('@storybook/mdx2-csf');
-
       const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
@@ -43,19 +38,18 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
             mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
           ),
         },
-        jsxOptions,
       });
 
       const code = String(
         await compile(src, {
-          skipCsf: !isStorybookMdx(id),
           ...mdxLoaderOptions,
         })
       );
 
       return {
         code,
-        map: null, // TODO: update mdx2-csf to return the map
+        // TODO: support source maps
+        map: null,
       };
     },
   };
diff --git a/code/addons/docs/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts
deleted file mode 100644
index fea94f85dc25..000000000000
--- a/code/addons/docs/src/plugins/mdx-plugin.types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@storybook/mdx1-csf';
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 0877643bae9f..8d623fe5b97f 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -1,15 +1,11 @@
-import fs from 'fs-extra';
 import { dirname, join } from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
-import { dedent } from 'ts-dedent';
 
-import type { DocsOptions, Indexer, Options, PresetProperty } from '@storybook/types';
+import type { DocsOptions, Options, PresetProperty } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
-import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
-import { global } from '@storybook/global';
-import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
+import type { CompileOptions } from './compiler';
 
 /**
  * Get the resolvedReact preset, which points either to
@@ -27,27 +23,14 @@ const getResolvedReact = async (options: Options) => {
     // addon-docs, causing addon-docs's dependencies not to be hoisted.
     // This might also affect regular users who have a similar setup.
     // Explicitly alias @mdx-js/react to avoid this issue.
-    mdx: resolvedReact.mdx ?? dirname(require.resolve('@mdx-js/react/package.json')),
+    mdx: resolvedReact.mdx ?? dirname(require.resolve('@mdx-js/react')),
   };
 };
 
 async function webpack(
   webpackConfig: any = {},
   options: Options & {
-    /**
-     * @deprecated
-     * Use `jsxOptions` to customize options used by @babel/preset-react
-     */
-    configureJsx: boolean;
-    /**
-     * @deprecated
-     * Use `jsxOptions` to customize options used by @babel/preset-react
-     */
-    mdxBabelOptions?: any;
-    /** @deprecated */
-    sourceLoaderOptions: any;
     csfPluginOptions: CsfPluginOptions | null;
-    jsxOptions?: JSXOptions;
     mdxPluginOptions?: CompileOptions;
   } /* & Parameters<
       typeof createCompiler
@@ -55,19 +38,9 @@ async function webpack(
 ) {
   const { module = {} } = webpackConfig;
 
-  // it will reuse babel options that are already in use in storybook
-  // also, these babel options are chained with other presets.
-  const {
-    csfPluginOptions = {},
-    jsxOptions = {},
-    sourceLoaderOptions = null,
-    configureJsx,
-    mdxBabelOptions,
-    mdxPluginOptions = {},
-  } = options;
+  const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
 
   const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
-    skipCsf: true,
     ...mdxPluginOptions,
     mdxCompileOptions: {
       providerImportSource: join(
@@ -79,35 +52,9 @@ async function webpack(
         mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? []
       ),
     },
-    jsxOptions,
   });
 
-  if (sourceLoaderOptions) {
-    throw new Error(dedent`
-      Addon-docs no longer uses source-loader in 7.0.
-
-      To update your configuration, please see migration instructions here:
-
-      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
-    `);
-  }
-
-  if (mdxBabelOptions || configureJsx) {
-    throw new Error(dedent`
-      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
-
-      To update your configuration, please see migration instructions here:
-
-      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
-    `);
-  }
-
-  const mdxVersion = global.FEATURES?.legacyMdx1 ? 'MDX1' : 'MDX2';
-  logger.info(`Addon-docs: using ${mdxVersion}`);
-
-  const mdxLoader = global.FEATURES?.legacyMdx1
-    ? require.resolve('@storybook/mdx1-csf/loader')
-    : require.resolve('@storybook/mdx2-csf/loader');
+  logger.info(`Addon-docs: using MDX3`);
 
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
   const { react, reactDom, mdx } = await getResolvedReact(options);
@@ -155,24 +102,12 @@ async function webpack(
       ...module,
       rules: [
         ...(module.rules || []),
-        {
-          test: /(stories|story)\.mdx$/,
-          use: [
-            {
-              loader: mdxLoader,
-              options: {
-                ...mdxLoaderOptions,
-                skipCsf: false,
-              },
-            },
-          ],
-        },
         {
           test: /\.mdx$/,
           exclude: /(stories|story)\.mdx$/,
           use: [
             {
-              loader: mdxLoader,
+              loader: require.resolve('./mdx-loader'),
               options: mdxLoaderOptions,
             },
           ],
@@ -184,36 +119,6 @@ async function webpack(
   return result;
 }
 
-export const createStoriesMdxIndexer = (legacyMdx1?: boolean): Indexer => ({
-  test: /(stories|story)\.mdx$/,
-  createIndex: async (fileName, opts) => {
-    let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    const { compile } = legacyMdx1
-      ? await import('@storybook/mdx1-csf')
-      : await import('@storybook/mdx2-csf');
-    code = await compile(code, {});
-    const csf = loadCsf(code, { ...opts, fileName }).parse();
-
-    const { indexInputs, stories } = csf;
-
-    return indexInputs.map((input, index) => {
-      const docsOnly = stories[index].parameters?.docsOnly;
-      const tags = input.tags ? input.tags : [];
-      if (docsOnly) {
-        tags.push('stories-mdx-docsOnly');
-      }
-      // the mdx-csf compiler automatically adds the 'stories-mdx' tag to meta, here' we're just making sure it is always there
-      if (!tags.includes('stories-mdx')) {
-        tags.push('stories-mdx');
-      }
-      return { ...input, tags };
-    });
-  },
-});
-
-const indexers: PresetProperty<'experimental_indexers'> = (existingIndexers) =>
-  [createStoriesMdxIndexer(global.FEATURES?.legacyMdx1)].concat(existingIndexers || []);
-
 const docs = (docsOptions: DocsOptions) => {
   return {
     ...docsOptions,
@@ -259,7 +164,6 @@ export const viteFinal = async (config: any, options: Options) => {
  * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
  */
 const webpackX = webpack as any;
-const indexersX = indexers as any;
 const docsX = docs as any;
 
 /**
@@ -272,7 +176,7 @@ const docsX = docs as any;
 export const resolvedReact = async (existing: any) => ({
   react: existing?.react ?? dirname(require.resolve('react/package.json')),
   reactDom: existing?.reactDom ?? dirname(require.resolve('react-dom/package.json')),
-  mdx: existing?.mdx ?? dirname(require.resolve('@mdx-js/react/package.json')),
+  mdx: existing?.mdx ?? dirname(require.resolve('@mdx-js/react')),
 });
 
 const optimizeViteDeps = [
@@ -283,4 +187,4 @@ const optimizeViteDeps = [
   'markdown-to-jsx',
 ];
 
-export { webpackX as webpack, indexersX as experimental_indexers, docsX as docs, optimizeViteDeps };
+export { webpackX as webpack, docsX as docs, optimizeViteDeps };
diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts
index 04846593c045..cfa3c4639f8e 100644
--- a/code/addons/docs/src/typings.d.ts
+++ b/code/addons/docs/src/typings.d.ts
@@ -3,7 +3,6 @@ declare module 'remark-slug';
 declare module 'remark-external-links';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';
-declare module '@storybook/mdx1-csf';
 
 declare module 'sveltedoc-parser' {
   export function parse(options: any): Promise<any>;
diff --git a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx
deleted file mode 100644
index 7aec7745397d..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { global as globalThis } from '@storybook/global';
-
-<Meta component={globalThis.Components.Button} />
-
-# MDX Stories
-
-This file demonstrates defining stories inside MDX.
-
-<Canvas>
-  <Story name="Primary" args={{ label: 'Primary' }} />
-</Canvas>
-
-<ArgsTable story="^" />
-
-<Canvas>
-  <Story name="Secondary" args={{ label: 'Secondary' }} />
-</Canvas>
-
-<Canvas>
-  <div>Non-story content</div>
-</Canvas>
diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.non-stories.js b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.non-stories.js
deleted file mode 100644
index abbc65c94ddb..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.non-stories.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// NOTE: commented out default since these stories are re-exported
-// in the primary file './csf-docs-with-mdx-docs.stories.mdx'
-//
-// export default {
-//   title: 'Addons/Docs/csf-with-mdx-docs',
-//   component: Button,
-// };
-
-export const Primary = {
-  args: { label: 'Primary' },
-};
-
-export const Secondary = {
-  args: { label: 'Secondary' },
-};
-
-export const ImplicitName = {
-  args: { label: 'Implicit Name' },
-};
diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx
deleted file mode 100644
index dbb010e80e59..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { global as globalThis } from '@storybook/global';
-import * as Csf from './csf-in-mdx.non-stories.js';
-
-<Meta component={globalThis.Components.Button} />
-
-# Legacy CSF in MDX Stories
-
-This file demonstrates legacy reuse of CSF stories inside MDX. This mechanism has been
-overhauled and improved in 7.0, and the legacy mode is now deprecated and will be
-removed in 8.0.
-
-<Canvas>
-  <Story story={Csf.Primary} />
-</Canvas>
-
-<ArgsTable story="^" />
-
-<Canvas>
-  <Story story={Csf.Secondary} />
-</Canvas>
-
-## Duplicate stories
-
-Reference story by ID to show it multiple times in a page.
-
-<Canvas>
-  <Story id="addons-docs-stories-mdx-csf-in-mdx--primary" />
-</Canvas>
diff --git a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
deleted file mode 100644
index f947df3b35cf..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { global as globalThis } from '@storybook/global';
-
-<Meta component={globalThis.Components.Button} />
-
-# MDX Stories
-
-This file demonstrates rendering iframe stories in MDX.
-
-<Canvas>
-  <Story name="Primary" args={{ label: 'Primary' }} inline={false} />
-</Canvas>
-
-<ArgsTable story="^" />
-
-<Canvas>
-  <Story name="Secondary" args={{ label: 'Secondary' }} inline={false} />
-</Canvas>
diff --git a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx
deleted file mode 100644
index aef8fe5df0ba..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { global as globalThis } from '@storybook/global';
-
-<Meta component={globalThis.Components.Button} play={() => console.log('component play')} />
-
-# MDX Play function Stories
-
-This file demonstrates defining stories inside MDX.
-
-<Canvas>
-  <Story name="Component Play" args={{ label: 'Component Play' }} />
-</Canvas>
-
-<Canvas>
-  <Story name="Story Play" args={{ label: 'Story Play' }} play={() => console.log('story play')} />
-</Canvas>
diff --git a/code/addons/docs/template/stories/stories-mdx/unattached.stories.mdx b/code/addons/docs/template/stories/stories-mdx/unattached.stories.mdx
deleted file mode 100644
index c327ecb73730..000000000000
--- a/code/addons/docs/template/stories/stories-mdx/unattached.stories.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="stories-mdx/unattached" />
-
-# Unattached `stories.mdx` file
\ No newline at end of file
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 3d9ffe7bdb1a..8b3126116631 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -43,6 +43,7 @@
     "./outline/manager": "./dist/outline/manager.js",
     "./toolbars/manager": "./dist/toolbars/manager.js",
     "./viewport/manager": "./dist/viewport/manager.js",
+    "./viewport/preview": "./dist/viewport/preview.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -102,7 +103,8 @@
       "./src/docs/preview.ts",
       "./src/highlight/preview.ts",
       "./src/measure/preview.ts",
-      "./src/outline/preview.ts"
+      "./src/outline/preview.ts",
+      "./src/viewport/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
diff --git a/code/addons/essentials/src/viewport/preview.ts b/code/addons/essentials/src/viewport/preview.ts
new file mode 100644
index 000000000000..34ee7de45614
--- /dev/null
+++ b/code/addons/essentials/src/viewport/preview.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-viewport/preview';
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 6bbc1332beb9..03dcd8dc74ae 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -29,6 +29,7 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./preview": "./dist/preview.js",
     "./manager": "./dist/manager.js",
     "./package.json": "./package.json"
   },
@@ -72,6 +73,9 @@
     ],
     "managerEntries": [
       "./src/manager.tsx"
+    ],
+    "previewEntries": [
+      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
diff --git a/code/addons/viewport/preview.js b/code/addons/viewport/preview.js
new file mode 100644
index 000000000000..6a4da7cfa953
--- /dev/null
+++ b/code/addons/viewport/preview.js
@@ -0,0 +1 @@
+export { globals } from './dist/preview';
diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
index 093d16bb57ba..f365fb65d040 100644
--- a/code/addons/viewport/src/Tool.tsx
+++ b/code/addons/viewport/src/Tool.tsx
@@ -6,10 +6,10 @@ import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
+import { useStorybookApi, useParameter, useGlobals } from '@storybook/manager-api';
 import { GrowIcon, TransferIcon } from '@storybook/icons';
 import { registerShortcuts } from './shortcuts';
-import { PARAM_KEY, ADDON_ID } from './constants';
+import { PARAM_KEY } from './constants';
 import { MINIMAL_VIEWPORTS } from './defaults';
 import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
 
@@ -35,19 +35,21 @@ const responsiveViewport: ViewportItem = {
 
 const baseViewports: ViewportItem[] = [responsiveViewport];
 
-const toLinks = memoize(50)((list: ViewportItem[], active: LinkBase, set, state, close): Link[] => {
-  return list
-    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
-    .map((i) => {
-      return {
-        ...i,
-        onClick: () => {
-          set({ ...state, selected: i.id });
-          close();
-        },
-      };
-    });
-});
+const toLinks = memoize(50)(
+  (list: ViewportItem[], active: LinkBase, updateGlobals, close): Link[] => {
+    return list
+      .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
+      .map((i) => {
+        return {
+          ...i,
+          onClick: () => {
+            updateGlobals({ viewport: i.id });
+            close();
+          },
+        };
+      });
+  }
+);
 
 interface LinkBase {
   id: string;
@@ -95,11 +97,6 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: 10,
 }));
 
-interface ViewportToolState {
-  isRotated: boolean;
-  selected: string | null;
-}
-
 const getStyles = (
   prevStyles: ViewportStyles | undefined,
   styles: Styles,
@@ -115,22 +112,20 @@ const getStyles = (
 
 export const ViewportTool: FC = memo(
   withTheme(({ theme }: { theme: Theme }) => {
+    const [globals, updateGlobals] = useGlobals();
+
     const {
       viewports = MINIMAL_VIEWPORTS,
-      defaultOrientation = 'portrait',
-      defaultViewport = responsiveViewport.id,
+      defaultOrientation,
+      defaultViewport,
       disable,
     } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-    const [state, setState] = useAddonState<ViewportToolState>(ADDON_ID, {
-      selected: defaultViewport,
-      isRotated: defaultOrientation === 'landscape',
-    });
 
     const list = toList(viewports);
     const api = useStorybookApi();
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-    if (!list.find((i) => i.id === defaultViewport)) {
+    if (defaultViewport && !list.find((i) => i.id === defaultViewport)) {
       // eslint-disable-next-line no-console
       console.warn(
         `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
@@ -138,28 +133,32 @@ export const ViewportTool: FC = memo(
     }
 
     useEffect(() => {
-      registerShortcuts(api, setState, Object.keys(viewports));
-    }, [viewports]);
+      registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
+    }, [viewports, globals.viewport]);
 
     useEffect(() => {
-      setState({
-        selected:
-          defaultViewport ||
-          (state.selected && viewports[state.selected] ? state.selected : responsiveViewport.id),
-        isRotated: defaultOrientation === 'landscape',
-      });
-    }, [defaultOrientation, defaultViewport]);
+      const defaultRotated = defaultOrientation === 'landscape';
+
+      if (
+        (defaultViewport && globals.viewport !== defaultViewport) ||
+        (defaultOrientation && globals.viewportRotated !== defaultRotated)
+      ) {
+        updateGlobals({
+          viewport: defaultViewport,
+          viewportRotated: defaultRotated,
+        });
+      }
+    }, [defaultOrientation, defaultViewport, globals, updateGlobals]);
 
-    const { selected, isRotated } = state;
     const item =
-      list.find((i) => i.id === selected) ||
+      list.find((i) => i.id === globals.viewport) ||
       list.find((i) => i.id === defaultViewport) ||
       list.find((i) => i.default) ||
       responsiveViewport;
 
     const ref = useRef<ViewportStyles>();
 
-    const styles = getStyles(ref.current, item.styles, isRotated);
+    const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
 
     useEffect(() => {
       ref.current = styles;
@@ -174,7 +173,7 @@ export const ViewportTool: FC = memo(
         <WithTooltip
           placement="top"
           tooltip={({ onHide }) => (
-            <TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
+            <TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
           )}
           closeOnOutsideClick
           onVisibleChange={setIsTooltipVisible}
@@ -184,13 +183,13 @@ export const ViewportTool: FC = memo(
             title="Change the size of the preview"
             active={isTooltipVisible || !!styles}
             onDoubleClick={() => {
-              setState({ ...state, selected: responsiveViewport.id });
+              updateGlobals({ viewport: responsiveViewport.id });
             }}
           >
             <GrowIcon />
             {styles ? (
               <IconButtonLabel>
-                {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
+                {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
               </IconButtonLabel>
             ) : null}
           </IconButtonWithLabel>
@@ -215,7 +214,7 @@ export const ViewportTool: FC = memo(
               key="viewport-rotate"
               title="Rotate viewport"
               onClick={() => {
-                setState({ ...state, isRotated: !isRotated });
+                updateGlobals({ viewportRotated: !globals.viewportRotated });
               }}
             >
               <TransferIcon />
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
new file mode 100644
index 000000000000..afe0f1b5f0b4
--- /dev/null
+++ b/code/addons/viewport/src/preview.ts
@@ -0,0 +1 @@
+export const globals = { viewport: 'reset', viewportRotated: false };
diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts
index 39cff92af12b..47fd37cbb996 100644
--- a/code/addons/viewport/src/shortcuts.ts
+++ b/code/addons/viewport/src/shortcuts.ts
@@ -1,10 +1,6 @@
 import type { API } from '@storybook/manager-api';
 import { ADDON_ID } from './constants';
-
-type State = {
-  selected: string;
-  isRotated: boolean;
-};
+import { globals as defaultGlobals } from './preview';
 
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>
   viewportsKeys.indexOf(current);
@@ -23,16 +19,19 @@ const getPreviousViewport = (viewportsKeys: string[], current: string): string =
     : viewportsKeys[currentViewportIndex - 1];
 };
 
-export const registerShortcuts = async (api: API, setState: any, viewportsKeys: string[]) => {
+export const registerShortcuts = async (
+  api: API,
+  globals: any,
+  updateGlobals: any,
+  viewportsKeys: string[]
+) => {
   await api.setAddonShortcut(ADDON_ID, {
     label: 'Previous viewport',
     defaultShortcut: ['shift', 'V'],
     actionName: 'previous',
     action: () => {
-      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: getPreviousViewport(viewportsKeys, selected),
-        isRotated,
+      updateGlobals({
+        viewport: getPreviousViewport(viewportsKeys, globals.viewport),
       });
     },
   });
@@ -42,10 +41,8 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['V'],
     actionName: 'next',
     action: () => {
-      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: getNextViewport(viewportsKeys, selected),
-        isRotated,
+      updateGlobals({
+        viewport: getNextViewport(viewportsKeys, globals.viewport),
       });
     },
   });
@@ -55,11 +52,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['alt', 'V'],
     actionName: 'reset',
     action: () => {
-      const { isRotated } = api.getAddonState<State>(ADDON_ID);
-      setState({
-        selected: 'reset',
-        isRotated,
-      });
+      updateGlobals(defaultGlobals);
     },
   });
 };
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 081fcf17090c..59bb5dc7e3fc 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -57,14 +57,12 @@
     "express": "^4.17.3",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
-    "magic-string": "^0.30.0",
-    "rollup": "^2.25.0 || ^3.3.0"
+    "magic-string": "^0.30.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
     "@types/node": "^18.0.0",
     "glob": "^10.0.0",
-    "rollup": "^3.20.1",
     "slash": "^5.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
@@ -72,7 +70,7 @@
   "peerDependencies": {
     "@preact/preset-vite": "*",
     "typescript": ">= 4.3.x",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "vite": "^4.0.0 || ^5.0.0",
     "vite-plugin-glimmerx": "*"
   },
   "peerDependenciesMeta": {
diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index 9437bdaee678..0dfd0534ee39 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import type { Options, Presets } from '@storybook/types';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { loadConfigFromFile } from 'vite';
 import { commonConfig } from './vite-config';
 
diff --git a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx b/code/frameworks/angular/template/stories/angular-mdx.stories.mdx
deleted file mode 100644
index afe20c14379b..000000000000
--- a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { moduleMetadata } from '@storybook/angular';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-export const Button = globalThis.Components.Button;
-
-<Meta
-  title="angular/angular-mdx"
-  component={Button}
-  decorators={[moduleMetadata({ declarations: [Button] })]}
-/>
-
-# Angular-specific MDX Stories
-
-<Canvas>
-  <Story name="Angular Story">
-    {{
-      template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
-      props: {
-        text: 'hello button',
-        onClick: () => {},
-      },
-    }}
-  </Story>
-</Canvas>
diff --git a/code/frameworks/angular/template/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.mdx
similarity index 100%
rename from code/frameworks/angular/template/stories/basics/README.stories.mdx
rename to code/frameworks/angular/template/stories/basics/README.mdx
diff --git a/code/frameworks/angular/template/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.mdx
similarity index 100%
rename from code/frameworks/angular/template/stories/core/README.stories.mdx
rename to code/frameworks/angular/template/stories/core/README.mdx
diff --git a/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx
similarity index 100%
rename from code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
rename to code/frameworks/angular/template/stories/others/ngx-translate/README.mdx
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index caad949fb1a4..96c6e744dcf6 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -47,7 +47,6 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@preact/preset-vite": "^2.0.0",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/preact": "workspace:*"
   },
@@ -58,7 +57,7 @@
   },
   "peerDependencies": {
     "preact": ">=10",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"
diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts
index 2d4e18d77e90..4002182ea926 100644
--- a/code/frameworks/preact-vite/src/preset.ts
+++ b/code/frameworks/preact-vite/src/preset.ts
@@ -1,6 +1,4 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
-import preact from '@preact/preset-vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
@@ -13,14 +11,6 @@ export const core: PresetProperty<'core', StorybookConfig> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {
-  const { plugins = [] } = config;
-
-  // Add Preact plugin if not present
-  if (!(await hasVitePlugins(plugins, ['vite:preact-jsx']))) {
-    plugins.push(preact());
-  }
-
   // TODO: Add docgen plugin per issue https://github.com/storybookjs/storybook/issues/19739
-
   return config;
 };
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index d06ab648e3ce..a5c9895676ab 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -51,7 +51,6 @@
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
-    "@vitejs/plugin-react": "^3.0.1",
     "magic-string": "^0.30.0",
     "react-docgen": "^7.0.0"
   },
@@ -63,7 +62,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"
diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
index 207f60988ebc..0defee003966 100644
--- a/code/frameworks/react-vite/src/preset.ts
+++ b/code/frameworks/react-vite/src/preset.ts
@@ -1,6 +1,5 @@
 /* eslint-disable global-require */
 import type { PresetProperty } from '@storybook/types';
-import { hasVitePlugins } from '@storybook/builder-vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
@@ -15,12 +14,6 @@ export const core: PresetProperty<'core', StorybookConfig> = {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const { plugins = [] } = config;
 
-  // Add react plugin if not present
-  if (!(await hasVitePlugins(plugins, ['vite:react-babel', 'vite:react-swc']))) {
-    const { default: react } = await import('@vitejs/plugin-react');
-    plugins.push(react());
-  }
-
   // Add docgen plugin
   const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply<any>(
     'typescript',
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 22357db9e547..654cca9a9e0c 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -50,21 +50,22 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/svelte": "workspace:*",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@types/node": "^18.0.0",
     "svelte": "^5.0.0-next.16",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0",
     "svelte": "^4.0.0 || ^5.0.0-next.16",
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
index 5ee6f7e53ce8..1e33174e11a5 100644
--- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
+++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
@@ -6,7 +6,6 @@ import svelteDoc from 'sveltedoc-parser';
 import type { SvelteComponentDoc, SvelteParserOptions } from 'sveltedoc-parser';
 import { logger } from '@storybook/node-logger';
 import { preprocess } from 'svelte/compiler';
-import { createFilter } from 'vite';
 import { replace, typescript } from 'svelte-preprocess';
 
 /*
@@ -59,10 +58,12 @@ function getNameFromFilename(filename: string) {
   return base[0].toUpperCase() + base.slice(1);
 }
 
-export function svelteDocgen(svelteOptions: Record<string, any> = {}): PluginOption {
+export async function svelteDocgen(svelteOptions: Record<string, any> = {}): Promise<PluginOption> {
   const cwd = process.cwd();
   const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions;
   const include = /\.(svelte)$/;
+  const { createFilter } = await import('vite');
+
   const filter = createFilter(include);
 
   let docPreprocessOptions: Parameters<typeof preprocess>[1] | undefined;
diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts
index 220812cf7c5a..9ef71bb26e89 100644
--- a/code/frameworks/svelte-vite/src/preset.ts
+++ b/code/frameworks/svelte-vite/src/preset.ts
@@ -1,4 +1,3 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
@@ -17,16 +16,11 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
   const { plugins = [] } = config;
   // TODO: set up eslint import to use typescript resolver
   // eslint-disable-next-line import/no-unresolved
-  const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
+  const { loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
   const svelteConfig = await loadSvelteConfig();
 
-  // Add svelte plugin if the user does not have a Vite config of their own
-  if (!(await hasVitePlugins(plugins, ['vite-plugin-svelte']))) {
-    plugins.push(svelte());
-  }
-
   // Add docgen plugin
-  plugins.push(svelteDocgen(svelteConfig));
+  plugins.push(await svelteDocgen(svelteConfig));
 
   await handleSvelteKit(plugins, options);
 
diff --git a/code/frameworks/sveltekit/src/plugins/config-overrides.ts b/code/frameworks/sveltekit/src/plugins/config-overrides.ts
index d132764d6e5c..db5294a13242 100644
--- a/code/frameworks/sveltekit/src/plugins/config-overrides.ts
+++ b/code/frameworks/sveltekit/src/plugins/config-overrides.ts
@@ -1,4 +1,4 @@
-import { type Plugin } from 'vite';
+import type { Plugin } from 'vite';
 
 export function configOverrides() {
   return {
diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
index f338760c3908..32f6eb0c41b0 100644
--- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
+++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'node:path';
 import type { Plugin } from 'vite';
 
-export function mockSveltekitStores() {
+export async function mockSveltekitStores() {
   return {
     name: 'storybook:sveltekit-mock-stores',
     config: () => ({
diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts
index 7af34f9e4206..53d616c18913 100644
--- a/code/frameworks/sveltekit/src/preset.ts
+++ b/code/frameworks/sveltekit/src/preset.ts
@@ -32,7 +32,7 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
     ])
   )
     .concat(configOverrides())
-    .concat(mockSveltekitStores());
+    .concat(await mockSveltekitStores());
 
   return { ...baseConfig, plugins };
 };
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index b2793bc7be19..28eeb77722e1 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -50,7 +50,6 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/vue3": "workspace:*",
-    "@vitejs/plugin-vue": "^4.0.0",
     "magic-string": "^0.30.0",
     "vue-docgen-api": "^4.40.0"
   },
@@ -60,7 +59,7 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
index 6bed6a1fed98..f8008fc3a4bd 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
@@ -1,10 +1,10 @@
 import { parse } from 'vue-docgen-api';
 import type { PluginOption } from 'vite';
-import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 
-export function vueDocgen(): PluginOption {
+export async function vueDocgen(): Promise<PluginOption> {
   const include = /\.(vue)$/;
+  const { createFilter } = await import('vite');
   const filter = createFilter(include);
 
   return {
diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts
index c0d97bd8da87..58ceb6afb846 100644
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/code/frameworks/vue3-vite/src/preset.ts
@@ -1,6 +1,5 @@
-import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
-import { mergeConfig, type PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 import { vueDocgen } from './plugins/vue-docgen';
@@ -16,15 +15,10 @@ export const core: PresetProperty<'core'> = {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
   const plugins: PluginOption[] = [];
 
-  // Add vue plugin if not present
-  if (!(config.plugins && (await hasVitePlugins(config.plugins, ['vite:vue'])))) {
-    const { default: vue } = await import('@vitejs/plugin-vue');
-    plugins.push(vue());
-  }
-
   // Add docgen plugin
-  plugins.push(vueDocgen());
+  plugins.push(await vueDocgen());
 
+  const { mergeConfig } = await import('vite');
   return mergeConfig(config, {
     plugins,
     resolve: {
diff --git a/code/lib/cli/src/add.ts b/code/lib/cli/src/add.ts
index 20e1c42bc811..3c730d68da5a 100644
--- a/code/lib/cli/src/add.ts
+++ b/code/lib/cli/src/add.ts
@@ -4,11 +4,7 @@ import { isAbsolute, join } from 'path';
 import SemVer from 'semver';
 import dedent from 'ts-dedent';
 
-import {
-  JsPackageManagerFactory,
-  useNpmWarning,
-  type PackageManagerName,
-} from './js-package-manager';
+import { JsPackageManagerFactory, type PackageManagerName } from './js-package-manager';
 import { getStorybookVersion, isCorePackage } from './utils';
 
 const logger = console;
@@ -71,13 +67,10 @@ const checkInstalled = (addonName: string, main: any) => {
  */
 export async function add(
   addon: string,
-  options: { useNpm: boolean; packageManager: PackageManagerName; skipPostinstall: boolean }
+  options: { packageManager: PackageManagerName; skipPostinstall: boolean }
 ) {
-  let { packageManager: pkgMgr } = options;
-  if (options.useNpm) {
-    useNpmWarning();
-    pkgMgr = 'npm';
-  }
+  const { packageManager: pkgMgr } = options;
+
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const packageJson = await packageManager.retrievePackageJson();
   const { mainConfig, configDir } = getStorybookInfo(packageJson);
diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts
index bd33074805d8..0c6202f24264 100644
--- a/code/lib/cli/src/automigrate/fixes/index.ts
+++ b/code/lib/cli/src/automigrate/fixes/index.ts
@@ -19,6 +19,7 @@ import { incompatibleAddons } from './incompatible-addons';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
 import { wrapRequire } from './wrap-require';
 import { reactDocgen } from './react-docgen';
+import { storyshotsMigration } from './storyshots-migration';
 
 export * from '../types';
 
@@ -42,6 +43,7 @@ export const allFixes: Fix[] = [
   angularBuilders,
   wrapRequire,
   reactDocgen,
+  storyshotsMigration,
 ];
 
 export const initFixes: Fix[] = [missingBabelRc, eslintPlugin];
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
index 7c3fd0130231..f844decf1443 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
@@ -82,7 +82,7 @@ export const mdxgfm: Fix<Options> = {
     return dedent`
       In MDX1 you had the option of using GitHub flavored markdown.
 
-      Storybook 7.0 uses MDX2 for compiling MDX, and thus no longer supports GFM out of the box.
+      Storybook 8.0 uses MDX3 for compiling MDX, and thus no longer supports GFM out of the box.
       Because of this you need to explicitly add the GFM plugin in the addon-docs options:
       https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
 
diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts
new file mode 100644
index 000000000000..4a7ccc9d335a
--- /dev/null
+++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts
@@ -0,0 +1,60 @@
+import { describe, afterEach, it, expect, vi } from 'vitest';
+
+import type { StorybookConfig } from '@storybook/types';
+import { storyshotsMigration } from './storyshots-migration';
+import type { JsPackageManager } from '../../js-package-manager';
+
+const check = async ({
+  packageManager,
+  main: mainConfig = {},
+  storybookVersion = '8.0.0',
+}: {
+  packageManager: Partial<JsPackageManager>;
+  main?: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+}) => {
+  return storyshotsMigration.check({
+    packageManager: packageManager as any,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+  });
+};
+
+describe('storyshots-migration fix', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should detect storyshots registered in main.js', async () => {
+    await expect(
+      check({
+        packageManager: {
+          getAllDependencies: async () => ({}),
+        },
+        main: { addons: ['@storybook/addon-storyshots'] },
+      })
+    ).resolves.toBeTruthy();
+  });
+
+  it('should detect storyshots in package.json', async () => {
+    await expect(
+      check({
+        packageManager: {
+          getAllDependencies: async () => ({ '@storybook/addon-storyshots': '7.0.0' }),
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+
+  it('no-op when storyshots is not present', async () => {
+    await expect(
+      check({
+        packageManager: {
+          getAllDependencies: async () => ({}),
+        },
+        main: { addons: ['@storybook/essentials'] },
+      })
+    ).resolves.toBeNull();
+  });
+});
diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
new file mode 100644
index 000000000000..6d047f88449f
--- /dev/null
+++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
@@ -0,0 +1,30 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+import type { Fix } from '../types';
+
+export const storyshotsMigration: Fix = {
+  id: 'storyshots-migration',
+  promptOnly: true,
+
+  async check({ mainConfig, packageManager }) {
+    const allDeps = await packageManager.getAllDependencies();
+    const hasStoryshots =
+      allDeps['@storybook/addon-storyshots'] ||
+      mainConfig.addons?.find((addon) => {
+        const addonName = typeof addon === 'string' ? addon : addon.name;
+        return addonName.includes('@storybook/addon-storyshots');
+      });
+
+    return hasStoryshots ?? null;
+  },
+  prompt() {
+    return dedent`
+      ${chalk.bold(
+        'Attention'
+      )}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8. 
+      
+      We recommend following the migration guide we've prepared to help you during this transition period:
+      ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')}
+    `;
+  },
+};
diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli/src/automigrate/index.ts
index 1ef8ec9ce1a2..3fd322e724d0 100644
--- a/code/lib/cli/src/automigrate/index.ts
+++ b/code/lib/cli/src/automigrate/index.ts
@@ -9,7 +9,7 @@ import dedent from 'ts-dedent';
 import { join } from 'path';
 import { getStorybookInfo, loadMainConfig } from '@storybook/core-common';
 import invariant from 'tiny-invariant';
-import { JsPackageManagerFactory, useNpmWarning } from '../js-package-manager';
+import { JsPackageManagerFactory } from '../js-package-manager';
 import type { PackageManagerName } from '../js-package-manager';
 
 import type { Fix, FixId, FixOptions, FixSummary } from './fixes';
@@ -55,7 +55,6 @@ export const automigrate = async ({
   fixes: inputFixes,
   dryRun,
   yes,
-  useNpm,
   packageManager: pkgMgr,
   list,
   configDir: userSpecifiedConfigDir,
@@ -86,7 +85,6 @@ export const automigrate = async ({
 
   const { fixResults, fixSummary, preCheckFailure } = await runFixes({
     fixes,
-    useNpm,
     pkgMgr,
     userSpecifiedConfigDir,
     rendererPackage,
@@ -129,7 +127,6 @@ export async function runFixes({
   fixes,
   dryRun,
   yes,
-  useNpm,
   pkgMgr,
   userSpecifiedConfigDir,
   rendererPackage,
@@ -138,7 +135,6 @@ export async function runFixes({
   fixes: Fix[];
   yes?: boolean;
   dryRun?: boolean;
-  useNpm?: boolean;
   pkgMgr?: PackageManagerName;
   userSpecifiedConfigDir?: string;
   rendererPackage?: string;
@@ -148,12 +144,6 @@ export async function runFixes({
   fixResults: Record<FixId, FixStatus>;
   fixSummary: FixSummary;
 }> {
-  if (useNpm) {
-    useNpmWarning();
-    // eslint-disable-next-line no-param-reassign
-    pkgMgr = 'npm';
-  }
-
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
 
   const fixResults = {} as Record<FixId, FixStatus>;
diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli/src/automigrate/types.ts
index 1befb24bf22c..5949d70db98e 100644
--- a/code/lib/cli/src/automigrate/types.ts
+++ b/code/lib/cli/src/automigrate/types.ts
@@ -41,7 +41,6 @@ export interface FixOptions {
   fixes?: Fix[];
   yes?: boolean;
   dryRun?: boolean;
-  useNpm?: boolean;
   packageManager?: PackageManagerName;
   configDir?: string;
   renderer?: string;
diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index c964767da543..5ee5c9d89abf 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -48,7 +48,6 @@ command('init')
   .option('-f --force', 'Force add Storybook')
   .option('-s --skip-install', 'Skip installing deps')
   .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
-  .option('-N --use-npm', 'Use npm to install deps (deprecated)')
   .option('--use-pnp', 'Enable pnp mode for Yarn 2+')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
   .option('-t --type <type>', 'Add Storybook for a specific project type')
@@ -65,7 +64,6 @@ command('add <addon>')
     '--package-manager <npm|pnpm|yarn1|yarn2>',
     'Force package manager for installing dependencies'
   )
-  .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)')
   .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
   .action((addonName: string, options: any) => add(addonName, options));
 
@@ -79,7 +77,6 @@ command('upgrade')
     '--package-manager <npm|pnpm|yarn1|yarn2>',
     'Force package manager for installing dependencies'
   )
-  .option('-N --use-npm', 'Use NPM to install dependencies (deprecated)')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for upgrades, do not install')
   .option('-t --tag <tag>', 'Upgrade to a certain npm dist-tag (e.g. next, prerelease)')
@@ -167,7 +164,6 @@ command('automigrate [fixId]')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for fixes, do not actually run them')
   .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager')
-  .option('-N --use-npm', 'Use npm as package manager (deprecated)')
   .option('-l --list', 'List available migrations')
   .option('-c, --config-dir <dir-name>', 'Directory of Storybook configurations to migrate')
   .option('-s --skip-install', 'Skip installing deps')
diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts
index 2f97a34df126..85ed0dbc600c 100644
--- a/code/lib/cli/src/generators/types.ts
+++ b/code/lib/cli/src/generators/types.ts
@@ -41,7 +41,6 @@ export type Generator<T = void> = (
 
 export type CommandOptions = {
   packageManager: PackageManagerName;
-  useNpm?: boolean;
   usePnp?: boolean;
   type?: ProjectType;
   force?: any;
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts
index 5217bca197aa..c0dbf5a3c7b3 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@@ -29,7 +29,7 @@ import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
 import serverGenerator from './generators/SERVER';
 import type { JsPackageManager } from './js-package-manager';
-import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
+import { JsPackageManagerFactory } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions, GeneratorOptions } from './generators/types';
 import { HandledError } from './HandledError';
@@ -235,12 +235,7 @@ async function doInitiate(
     }
   | { shouldRunDev: false }
 > {
-  let { packageManager: pkgMgr } = options;
-  if (options.useNpm) {
-    useNpmWarning();
-
-    pkgMgr = 'npm';
-  }
+  const { packageManager: pkgMgr } = options;
 
   const packageManager = JsPackageManagerFactory.getPackageManager({
     force: pkgMgr,
diff --git a/code/lib/cli/src/js-package-manager/deprecations.ts b/code/lib/cli/src/js-package-manager/deprecations.ts
deleted file mode 100644
index 5883fad3a294..000000000000
--- a/code/lib/cli/src/js-package-manager/deprecations.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import deprecate from 'util-deprecate';
-
-export const useNpmWarning = deprecate(
-  () => {},
-  `\`--use-npm\` is deprecated and will be removed in Storybook 8.0. 
-Please use the \`--package-manager=npm\` option instead.
-Read more at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated`
-);
diff --git a/code/lib/cli/src/js-package-manager/index.ts b/code/lib/cli/src/js-package-manager/index.ts
index d9849cbff268..f95d6f9659ba 100644
--- a/code/lib/cli/src/js-package-manager/index.ts
+++ b/code/lib/cli/src/js-package-manager/index.ts
@@ -1,5 +1,3 @@
-export * from './deprecations';
-
 export * from './JsPackageManagerFactory';
 
 export * from './JsPackageManager';
diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli/src/upgrade.test.ts
index 3acb5fd92a0d..6fcea5f84596 100644
--- a/code/lib/cli/src/upgrade.test.ts
+++ b/code/lib/cli/src/upgrade.test.ts
@@ -63,7 +63,7 @@ describe('addNxPackagesToReject', () => {
     const flags = ['--reject', '/preset-create-react-app/', '--some-flag', 'hello'];
     expect(addNxPackagesToReject(flags)).toMatchObject([
       '--reject',
-      '/(preset-create-react-app|@nrwl/storybook|@nx/storybook)/',
+      '"/(preset-create-react-app|@nrwl/storybook|@nx/storybook)/"',
       '--some-flag',
       'hello',
     ]);
diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts
index aefd6bc8bc07..a4b22675e027 100644
--- a/code/lib/cli/src/upgrade.ts
+++ b/code/lib/cli/src/upgrade.ts
@@ -3,9 +3,13 @@ import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry';
 import semver from 'semver';
 import { logger } from '@storybook/node-logger';
 import { withTelemetry } from '@storybook/core-server';
+import {
+  ConflictingVersionTagsError,
+  UpgradeStorybookPackagesError,
+} from '@storybook/core-events/server-errors';
 
 import type { PackageJsonWithMaybeDeps, PackageManagerName } from './js-package-manager';
-import { getPackageDetails, JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
+import { getPackageDetails, JsPackageManagerFactory } from './js-package-manager';
 import { coerceSemver, commandLog } from './helpers';
 import { automigrate } from './automigrate';
 import { isCorePackage } from './utils';
@@ -117,7 +121,7 @@ export const addNxPackagesToReject = (flags: string[]) => {
     if (newFlags[index + 1].endsWith('/') && newFlags[index + 1].startsWith('/')) {
       // Remove last and first slash so that I can add the parentheses
       newFlags[index + 1] = newFlags[index + 1].substring(1, newFlags[index + 1].length - 1);
-      newFlags[index + 1] = `/(${newFlags[index + 1]}|@nrwl/storybook|@nx/storybook)/`;
+      newFlags[index + 1] = `"/(${newFlags[index + 1]}|@nrwl/storybook|@nx/storybook)/"`;
     } else {
       // Adding the two packages as comma-separated values
       // If the existing rejects are in regex format, they will be ignored.
@@ -135,7 +139,6 @@ export interface UpgradeOptions {
   tag: string;
   prerelease: boolean;
   skipCheck: boolean;
-  useNpm: boolean;
   packageManager: PackageManagerName;
   dryRun: boolean;
   yes: boolean;
@@ -147,28 +150,20 @@ export const doUpgrade = async ({
   tag,
   prerelease,
   skipCheck,
-  useNpm,
   packageManager: pkgMgr,
   dryRun,
   configDir,
   yes,
   ...options
 }: UpgradeOptions) => {
-  if (useNpm) {
-    useNpmWarning();
-    // eslint-disable-next-line no-param-reassign
-    pkgMgr = 'npm';
-  }
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
 
   const beforeVersion = await getStorybookCoreVersion();
 
-  commandLog(`Checking for latest versions of '@storybook/*' packages`);
+  commandLog(`Checking for latest versions of '@storybook/*' packages\n`);
 
   if (tag && prerelease) {
-    throw new Error(
-      `Cannot set both --tag and --prerelease. Use --tag next to get the latest prereleae`
-    );
+    throw new ConflictingVersionTagsError();
   }
 
   let target = 'latest';
@@ -187,20 +182,40 @@ export const doUpgrade = async ({
   flags.push(target);
   flags = addExtraFlags(EXTRA_FLAGS, flags, await packageManager.retrievePackageJson());
   flags = addNxPackagesToReject(flags);
-  const check = spawnSync('npx', ['npm-check-updates@latest', '/storybook/', ...flags], {
+
+  const command = 'npx';
+  const checkArgs = ['npm-check-updates@latest', '/storybook/', ...flags];
+  const check = spawnSync(command, checkArgs, {
     stdio: 'pipe',
     shell: true,
   });
+
+  if (check.stderr && !check.stderr.toString().includes('npm notice')) {
+    throw new UpgradeStorybookPackagesError({
+      command,
+      args: checkArgs,
+      errorMessage: check.stderr.toString(),
+    });
+  }
+
   logger.info(check.stdout.toString());
-  logger.info(check.stderr.toString());
 
-  const checkSb = spawnSync('npx', ['npm-check-updates@latest', 'sb', ...flags], {
+  const checkSbArgs = ['npm-check-updates@latest', 'sb', ...flags];
+  const checkSb = spawnSync(command, checkSbArgs, {
     stdio: 'pipe',
     shell: true,
   });
   logger.info(checkSb.stdout.toString());
   logger.info(checkSb.stderr.toString());
 
+  if (checkSb.stderr && !checkSb.stderr.toString().includes('npm notice')) {
+    throw new UpgradeStorybookPackagesError({
+      command,
+      args: checkSbArgs,
+      errorMessage: checkSb.stderr.toString(),
+    });
+  }
+
   if (!dryRun) {
     commandLog(`Installing upgrades`);
     await packageManager.installDependencies();
diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts
index b5f68b8a7b50..51bd69be962d 100644
--- a/code/lib/codemod/src/transforms/mdx-to-csf.ts
+++ b/code/lib/codemod/src/transforms/mdx-to-csf.ts
@@ -136,6 +136,7 @@ export function transform(source: string, baseName: string): [string, string] {
             value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */`,
           };
           storiesMap.set(idAttribute.value as string, { type: 'id' });
+          // @ts-expect-error issue with mdast types
           parent?.children.splice(index as number, 0, newNode);
           // current index is the new comment, and index + 1 is current node
           // SKIP traversing current node, and continue with the node after that
diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts
index bacdd7d6055e..5f9f98d7ec8e 100644
--- a/code/lib/core-events/src/errors/server-errors.ts
+++ b/code/lib/core-events/src/errors/server-errors.ts
@@ -422,7 +422,7 @@ export class GenerateNewProjectOnInitError extends StorybookError {
     super();
   }
 
-  template(): string {
+  template() {
     return dedent`
       There was an error while using ${this.data.packageManager} to create a new ${
       this.data.projectType
@@ -432,3 +432,35 @@ export class GenerateNewProjectOnInitError extends StorybookError {
       `;
   }
 }
+
+export class ConflictingVersionTagsError extends StorybookError {
+  readonly category = Category.CLI_UPGRADE;
+
+  readonly code = 1;
+
+  template() {
+    return 'Cannot set both --tag and --prerelease. Use --tag=next to get the latest prerelease.';
+  }
+}
+
+export class UpgradeStorybookPackagesError extends StorybookError {
+  readonly category = Category.CLI_UPGRADE;
+
+  readonly code = 2;
+
+  constructor(public data: { command: string; args: string[]; errorMessage: string }) {
+    super();
+  }
+
+  template() {
+    return dedent`
+      There was an error while trying to upgrade your Storybook dependencies.
+
+      Command:
+      ${this.data.command} ${this.data.args.join(' ')}
+
+      Error:
+      ${this.data.errorMessage}
+    `;
+  }
+}
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 93c10100afc4..af46533e1211 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -68,7 +68,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/csf": "^0.1.2",
     "@storybook/csf-tools": "workspace:*",
-    "@storybook/docs-mdx": "^0.1.0",
+    "@storybook/docs-mdx": "3.0.0",
     "@storybook/global": "^5.0.0",
     "@storybook/manager": "workspace:*",
     "@storybook/node-logger": "workspace:*",
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 350872f38891..e1248f1f8dd1 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -187,7 +187,6 @@ export const previewAnnotations = async (base: any, options: Options) => {
 
 export const features: PresetProperty<'features'> = async (existing) => ({
   ...existing,
-  warnOnLegacyHierarchySeparator: true,
   buildStoriesJson: false,
   storyStoreV7: true,
   argTypeTargetsV7: true,
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index fefb477426df..1fa90d63d8b8 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -6,8 +6,6 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
 
 import path from 'path';
-// @ts-expect-error -- cannot find declaration file
-import { createStoriesMdxIndexer } from '@storybook/addon-docs/preset';
 import { normalizeStoriesEntry } from '@storybook/core-common';
 import type { NormalizedStoriesSpecifier, StoryIndexEntry } from '@storybook/types';
 import { readCsf, getStorySortParameter } from '@storybook/csf-tools';
@@ -45,7 +43,7 @@ const options: StoryIndexGeneratorOptions = {
   configDir: path.join(__dirname, '__mockdata__'),
   workingDir: path.join(__dirname, '__mockdata__'),
   storyIndexers: [],
-  indexers: [csfIndexer, createStoriesMdxIndexer(false)],
+  indexers: [csfIndexer],
   storyStoreV7: true,
   docs: { defaultName: 'docs', autodocs: false },
 };
@@ -292,51 +290,6 @@ describe('StoryIndexGenerator', () => {
       });
     });
 
-    describe('mdx tagged components', () => {
-      it('adds docs entry with docs enabled', async () => {
-        const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/nested/Page.stories.mdx',
-          options
-        );
-
-        const generator = new StoryIndexGenerator([specifier], {
-          ...options,
-        });
-        await generator.initialize();
-
-        expect(await generator.getIndex()).toMatchInlineSnapshot(`
-          {
-            "entries": {
-              "page--docs": {
-                "id": "page--docs",
-                "importPath": "./src/nested/Page.stories.mdx",
-                "name": "docs",
-                "storiesImports": [],
-                "tags": [
-                  "stories-mdx",
-                  "docs",
-                ],
-                "title": "Page",
-                "type": "docs",
-              },
-              "page--story-one": {
-                "id": "page--story-one",
-                "importPath": "./src/nested/Page.stories.mdx",
-                "name": "StoryOne",
-                "tags": [
-                  "stories-mdx",
-                  "story",
-                ],
-                "title": "Page",
-                "type": "story",
-              },
-            },
-            "v": 4,
-          }
-        `);
-      }, 20_000);
-    });
-
     describe('autodocs', () => {
       const autodocsOptions = {
         ...options,
diff --git a/code/lib/core-server/src/utils/__mockdata__/src/nested/Page.stories.mdx b/code/lib/core-server/src/utils/__mockdata__/src/nested/Page.stories.mdx
deleted file mode 100644
index 402d2a302ec5..000000000000
--- a/code/lib/core-server/src/utils/__mockdata__/src/nested/Page.stories.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta component={{}} />
-
-<Story name="StoryOne" />
diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
index 360a687eaaed..e76fd6b277b6 100644
--- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
+++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
@@ -604,53 +604,4 @@ describe('docs entries from story extraction', () => {
       }
     `);
   });
-  it(`Only adds a docs entry and not a story entry when an input has the "docsOnly" tag`, async () => {
-    const relativePath = './src/nested/Page.stories.mdx';
-    const absolutePath = path.join(options.workingDir, relativePath);
-    const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
-
-    const generator = new StoryIndexGenerator([specifier], {
-      ...options,
-      docs: { defaultName: 'docs', autodocs: false },
-      indexers: [
-        {
-          test: /\.stories\.mdx?$/,
-          createIndex: async (fileName) => [
-            {
-              exportName: '__page',
-              __id: 'page--page',
-              name: 'Page',
-              title: 'Page',
-              tags: [STORIES_MDX_TAG, 'stories-mdx-docsOnly'],
-              importPath: fileName,
-              type: 'story',
-            },
-          ],
-        },
-      ],
-    });
-    const result = await generator.extractStories(specifier, absolutePath);
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "dependents": [],
-        "entries": [
-          {
-            "id": "page--docs",
-            "importPath": "./src/nested/Page.stories.mdx",
-            "name": "docs",
-            "storiesImports": [],
-            "tags": [
-              "stories-mdx",
-              "stories-mdx-docsOnly",
-              "docs",
-            ],
-            "title": "Page",
-            "type": "docs",
-          },
-        ],
-        "type": "stories",
-      }
-    `);
-  });
 });
diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
index 74401020256e..810b95244c72 100644
--- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
@@ -10,7 +10,6 @@ export async function getStoryIndexGenerator(
     buildStoriesJson?: boolean;
     storyStoreV7?: boolean;
     argTypeTargetsV7?: boolean;
-    warnOnLegacyHierarchySeparator?: boolean;
   },
   options: Options,
   serverChannel: ServerChannel
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index 197f630eddf1..61fb64b71649 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -4,8 +4,6 @@ import type { Router, Request, Response } from 'express';
 import Watchpack from 'watchpack';
 import path from 'path';
 import debounce from 'lodash/debounce.js';
-// @ts-expect-error -- cannot find declaration file
-import { createStoriesMdxIndexer } from '@storybook/addon-docs/preset';
 import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
 import { normalizeStoriesEntry } from '@storybook/core-common';
 
@@ -45,7 +43,7 @@ const getInitializedStoryIndexGenerator = async (
 ) => {
   const options: StoryIndexGeneratorOptions = {
     storyIndexers: [],
-    indexers: [csfIndexer, createStoriesMdxIndexer(false)],
+    indexers: [csfIndexer],
     configDir: workingDir,
     workingDir,
     storyStoreV7: true,
@@ -239,29 +237,6 @@ describe('useStoriesJson', () => {
               "title": "nested/Button",
               "type": "story",
             },
-            "nested-page--docs": {
-              "id": "nested-page--docs",
-              "importPath": "./src/nested/Page.stories.mdx",
-              "name": "docs",
-              "storiesImports": [],
-              "tags": [
-                "stories-mdx",
-                "docs",
-              ],
-              "title": "nested/Page",
-              "type": "docs",
-            },
-            "nested-page--story-one": {
-              "id": "nested-page--story-one",
-              "importPath": "./src/nested/Page.stories.mdx",
-              "name": "StoryOne",
-              "tags": [
-                "stories-mdx",
-                "story",
-              ],
-              "title": "nested/Page",
-              "type": "story",
-            },
             "second-nested-g--story-one": {
               "id": "second-nested-g--story-one",
               "importPath": "./src/second-nested/G.stories.ts",
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts
index b3d7aa04bde9..494ceec4c7ae 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts
@@ -111,7 +111,9 @@ describe('PreviewWeb', () => {
       await waitForRender();
 
       expect(docsRoot.outerHTML).toMatchInlineSnapshot('"<div><div>INSIDE</div></div>"');
-    });
+      // Extended timeout to try and avoid
+      // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing
+    }, 10_000);
 
     // TODO @tmeasday please help fixing this test
     it.skip('sends docs rendering exceptions to showException', async () => {
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 8f848909d8ed..1affaa649a9b 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -375,12 +375,6 @@ export interface StorybookConfigRaw {
      */
     argTypeTargetsV7?: boolean;
 
-    /**
-     * Warn when there is a pre-6.0 hierarchy separator ('.' / '|') in the story title.
-     * Will be removed in 7.0.
-     */
-    warnOnLegacyHierarchySeparator?: boolean;
-
     /**
      * Use legacy MDX1, to help smooth migration to 7.0
      */
diff --git a/code/package.json b/code/package.json
index dfb9615ac3fe..6d32eef356b0 100644
--- a/code/package.json
+++ b/code/package.json
@@ -308,5 +308,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.0-alpha.7"
 }
diff --git a/code/renderers/html/template/stories/html-mdx.stories.mdx b/code/renderers/html/template/stories/html-mdx.stories.mdx
deleted file mode 100644
index ec1e3ced3b69..000000000000
--- a/code/renderers/html/template/stories/html-mdx.stories.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="html/html-mdx" />
-
-## HTML-specific MDX Stories
-
-<Canvas>
-  <Story name="Basic" height="100px">
-    {'<h1>Hello World</h1>'}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Function" height="100px">
-    {() => {
-      const btn = document.createElement('button');
-      btn.innerHTML = 'Hello Button';
-      return btn;
-    }}
-  </Story>
-</Canvas>
diff --git a/code/renderers/react/template/stories/react-mdx.stories.mdx b/code/renderers/react/template/stories/react-mdx.stories.mdx
deleted file mode 100644
index e8676a0e22d8..000000000000
--- a/code/renderers/react/template/stories/react-mdx.stories.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="stories/renderers/react/react-mdx" />
-
-# React-specific MDX Stories
-
-export const Button = globalThis.Components.Button;
-
-export const Template = (args) => <Button label="From template" />;
-
-<Canvas>
-  <Story name="Primary">
-    <Button label="Primary" />
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Secondary">
-    <Button label="Secondary" />
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="From Template">{Template.bind({})}</Story>
-</Canvas>
diff --git a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx b/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx
deleted file mode 100644
index 396812ea5737..000000000000
--- a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ButtonView from './views/ButtonJavaScript.svelte';
-import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
-
-<Meta title="stories/renderers/svelte/svelte-mdx" />
-
-# Svelte-specific MDX stories
-
-## Primary
-
-<Canvas>
-  <Story name="Primary">
-    {{
-      Component: ButtonView,
-      props: {
-        primary: true,
-        text: 'Primary text',
-      },
-    }}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story name="Secondary">
-    {{
-      Component: ButtonView,
-      props: {
-        primary: false,
-        text: 'Secondary text',
-      },
-    }}
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="WithDecorator" decorators={[() => BorderDecoratorRed]}>
-    {{
-      Component: ButtonView,
-      props: {
-        primary: false,
-        text: 'Secondary text',
-      },
-    }}
-  </Story>
-</Canvas>
diff --git a/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx b/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx
deleted file mode 100644
index e84f893819d5..000000000000
--- a/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="stories/renderers/vue3/vue3-mdx" />
-
-# Vue3-specific MDX Stories
-
-export const Button = globalThis.Components.Button;
-
-export const Template = (args, { argTypes }) => ({
-  components: { MyButton: Button },
-  template: '<my-button v-bind="args" />',
-  setup() {
-    return { args };
-  },
-});
-
-## Primary
-
-<Canvas>
-  <Story name="Primary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="true" label="Primary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-  <Story name="Secondary">
-    {{
-      components: { MyButton: Button },
-      template: '<my-button :primary="false" label="Secondary button" />',
-    }}
-  </Story>
-</Canvas>
-
-## From template
-
-<Canvas>
-  <Story name="From Template" args={{ label: 'From template' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 4800dda1e181..a15c3a4fd988 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import pluginTurbosnap from 'vite-plugin-turbosnap';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
 import type { StorybookConfig } from '../../frameworks/react-vite';
 
diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx
index 42f7e5935ae3..2211bcc54cd6 100644
--- a/code/ui/blocks/src/blocks/Story.tsx
+++ b/code/ui/blocks/src/blocks/Story.tsx
@@ -88,37 +88,11 @@ type StoryParameters = {
 export type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
 
 export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => {
-  const { id, of, meta, story } = props as StoryRefProps;
+  const { of, meta, story } = props as StoryRefProps;
   if ('of' in props && of === undefined) {
     throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
   }
 
-  if (id) {
-    deprecate(dedent`Referencing stories by \`id\` is deprecated, please use \`of\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`);
-    return id;
-  }
-
-  const { name } = props as StoryDefProps;
-  if (name) {
-    deprecate(dedent`Referencing stories by \`name\` is deprecated, please use \`of\` instead. 
-    
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`);
-    return context.storyIdByName(name);
-  }
-
-  // The `story={moduleExports}` prop is a legacy prop for stories defined in CSF files, but
-  // "declared" in MDX files (the CSF file has no meta export or doesn't match the stories glob).
-  // In this case, the `.stories.mdx` file will have actually ended up declaring the story
-  // so we can reference the story just the same as an `of={moduleExports}` would have.
-  // See https://github.com/storybookjs/mdx2-csf/issues/3
-  if (story) {
-    deprecate(dedent`The \`story\` prop is deprecated, please export your stories from CSF files and reference them with \`of={}\`.
-
-      Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`);
-  }
-
   if (meta) context.referenceMeta(meta, false);
   const resolved = context.resolveOf(of || story || 'story', ['story']);
   return resolved.story.id;
diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx
index 5045f0621ed2..37b64a786493 100644
--- a/code/ui/components/src/components/Button/Button.tsx
+++ b/code/ui/components/src/components/Button/Button.tsx
@@ -15,23 +15,23 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
   animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
 
-  /** @deprecated Use {@link asChild} instead */
+  /** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */
   isLink?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   primary?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   secondary?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   tertiary?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   gray?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   inForm?: boolean;
-  /** @deprecated Use {@link size} instead */
+  /** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */
   small?: boolean;
-  /** @deprecated Use {@link variant} instead */
+  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
   outline?: boolean;
-  /** @deprecated Add your icon as a child directly */
+  /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
   containsIcon?: boolean;
 }
 
diff --git a/code/ui/components/src/components/typography/typography.stories.mdx b/code/ui/components/src/components/typography/typography.mdx
similarity index 100%
rename from code/ui/components/src/components/typography/typography.stories.mdx
rename to code/ui/components/src/components/typography/typography.mdx
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index e04811e76bf8..ebc234f75efc 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -8,7 +8,7 @@ import { styled } from '@storybook/theming';
 import { screen, userEvent, within } from '@storybook/testing-library';
 import type { State } from '@storybook/manager-api';
 import { LinkIcon } from '@storybook/icons';
-import { SidebarMenu, ToolbarMenu } from './Menu';
+import { SidebarMenu } from './Menu';
 import { useMenu } from '../../container/Menu';
 import { LayoutProvider } from '../layout/LayoutProvider';
 
@@ -34,11 +34,10 @@ export const Items: Story = {
 };
 
 export const Real: Story = {
-  render: () => <SidebarMenu menu={fakemenu} isHighlighted />,
-};
-
-export const Toolbar = {
-  render: () => <ToolbarMenu menu={fakemenu} />,
+  args: {
+    isHighlighted: true,
+  },
+  render: (args) => <SidebarMenu menu={fakemenu} {...args} />,
 };
 
 const DoubleThemeRenderingHack = styled.div({
diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
index 95290acbc093..9dadfa2b156e 100644
--- a/code/ui/manager/src/components/sidebar/Menu.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.tsx
@@ -5,7 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import type { Button, TooltipLinkListLink } from '@storybook/components';
 import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components';
-import { CloseIcon, CogIcon, MenuIcon } from '@storybook/icons';
+import { CloseIcon, CogIcon } from '@storybook/icons';
 import { useLayout } from '../layout/LayoutProvider';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
@@ -22,48 +22,42 @@ const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
-export const SidebarIconButton: FC<
-  ComponentProps<typeof Button> & { highlighted: boolean; active: boolean }
-> = styled(IconButton)<
-  ComponentProps<typeof Button> & {
-    highlighted: boolean;
-    active: boolean;
-  }
->(({ highlighted, active, theme }) => ({
-  position: 'relative',
-  overflow: 'visible',
-  color: theme.textMutedColor,
-  marginTop: 0,
-  zIndex: 1,
-
-  ...(highlighted && {
-    '&:before, &:after': {
-      content: '""',
-      position: 'absolute',
-      top: 6,
-      right: 6,
-      width: 5,
-      height: 5,
-      zIndex: 2,
-      borderRadius: '50%',
-      background: theme.background.app,
-      border: `1px solid ${theme.background.app}`,
-      boxShadow: `0 0 0 2px ${theme.background.app}`,
-    },
-    '&:after': {
-      background: theme.color.positive,
-      border: `1px solid rgba(0, 0, 0, 0.1)`,
-      boxShadow: `0 0 0 2px ${theme.background.app}`,
-    },
-
-    '&:hover:after, &:focus-visible:after': {
-      boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
-    },
-  }),
-  ...(active && {
-    color: theme.color.secondary,
-  }),
-}));
+export const SidebarIconButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> =
+  styled(IconButton)<
+    ComponentProps<typeof Button> & {
+      highlighted: boolean;
+    }
+  >(({ highlighted, theme }) => ({
+    position: 'relative',
+    overflow: 'visible',
+    marginTop: 0,
+    zIndex: 1,
+
+    ...(highlighted && {
+      '&:before, &:after': {
+        content: '""',
+        position: 'absolute',
+        top: 6,
+        right: 6,
+        width: 5,
+        height: 5,
+        zIndex: 2,
+        borderRadius: '50%',
+        background: theme.background.app,
+        border: `1px solid ${theme.background.app}`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+      '&:after': {
+        background: theme.color.positive,
+        border: `1px solid rgba(0, 0, 0, 0.1)`,
+        boxShadow: `0 0 0 2px ${theme.background.app}`,
+      },
+
+      '&:hover:after, &:focus-visible:after': {
+        boxShadow: `0 0 0 2px ${transparentize(0.88, theme.color.secondary)}`,
+      },
+    }),
+  }));
 
 const MenuButtonGroup = styled.div({
   display: 'flex',
@@ -134,13 +128,13 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick
         >
           <CogIcon />
         </SidebarIconButton>
-        <CloseIconButton
+        <IconButton
           title="Close menu"
           aria-label="Close menu"
           onClick={() => setMobileMenuOpen(false)}
         >
           <CloseIcon />
-        </CloseIconButton>
+        </IconButton>
       </MenuButtonGroup>
     );
   }
@@ -163,33 +157,3 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick
     </WithTooltip>
   );
 };
-
-export const ToolbarMenu: FC<{
-  menu: MenuList;
-}> = ({ menu }) => {
-  return (
-    <WithTooltip
-      placement="bottom"
-      closeOnOutsideClick
-      modifiers={[
-        {
-          name: 'flip',
-          options: {
-            allowedAutoPlacements: [],
-          },
-        },
-      ]}
-      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
-    >
-      <IconButton title="Shortcuts" aria-label="Shortcuts">
-        <MenuIcon />
-      </IconButton>
-    </WithTooltip>
-  );
-};
-
-// We should not have to reset the margin-top here
-// TODO: remove this once we have a the new IconButton component
-const CloseIconButton = styled(IconButton)({
-  marginTop: 0,
-});
diff --git a/code/ui/manager/src/settings/About.tsx b/code/ui/manager/src/settings/About.tsx
index 797af9dcc732..658bc92030b4 100644
--- a/code/ui/manager/src/settings/About.tsx
+++ b/code/ui/manager/src/settings/About.tsx
@@ -2,15 +2,19 @@ import type { FC } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
-import { Button as BaseButton, Link, StorybookIcon } from '@storybook/components';
+import { Button, Link, StorybookLogo } from '@storybook/components';
 import { DocumentIcon, GithubIcon } from '@storybook/icons';
 import { UpgradeBlock } from '../components/upgrade/UpgradeBlock';
 
-const Header = styled.header(({ theme }) => ({
+const Container = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  marginTop: 40,
+});
+
+const Header = styled.header({
   marginBottom: 32,
-  fontSize: theme.typography.size.l2,
-  color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-  fontWeight: theme.typography.weight.bold,
   alignItems: 'center',
   display: 'flex',
 
@@ -19,14 +23,6 @@ const Header = styled.header(({ theme }) => ({
     width: 'auto',
     marginRight: 8,
   },
-}));
-
-const Container = styled.div({
-  display: `flex`,
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 'calc(100% - 40px)',
-  flexDirection: 'column',
 });
 
 const Footer = styled.div(({ theme }) => ({
@@ -39,18 +35,14 @@ const Footer = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
 }));
 
-const SquareButton = styled(BaseButton)(({ theme }) => ({
-  '&&': {
-    borderRadius: 4,
-    fontSize: '13px',
-    lineHeight: '14px',
-    color: theme.base === 'light' ? theme.color.darker : theme.color.lightest,
-    padding: '9px 12px',
-    svg: {
-      marginRight: 6,
-    },
-  },
-}));
+const Actions = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  marginBottom: 24,
+  marginTop: 24,
+  gap: 16,
+});
 
 const StyledLink = styled(Link as any)(({ theme }) => ({
   '&&': {
@@ -65,28 +57,25 @@ const StyledLink = styled(Link as any)(({ theme }) => ({
 const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWhatsNew }) => {
   return (
     <Container>
-      <div style={{ flex: '1' }} />
       <Header>
-        <StorybookIcon /> Storybook
+        <StorybookLogo alt="Storybook" />
       </Header>
       <UpgradeBlock onNavigateToWhatsNew={onNavigateToWhatsNew} />
-      <div style={{ flex: '1.2' }} />
       <Footer>
-        <div style={{ marginBottom: 12 }}>
-          <SquareButton asChild style={{ marginRight: 12 }}>
+        <Actions>
+          <Button asChild>
             <a href="https://github.com/storybookjs/storybook">
               <GithubIcon />
               GitHub
             </a>
-          </SquareButton>
-
-          <SquareButton asChild>
+          </Button>
+          <Button asChild>
             <a href="https://storybook.js.org/docs">
               <DocumentIcon style={{ display: 'inline', marginRight: 5 }} />
               Documentation
             </a>
-          </SquareButton>
-        </div>
+          </Button>
+        </Actions>
         <div>
           Open source software maintained by{' '}
           <StyledLink href="https://www.chromatic.com/">Chromatic</StyledLink> and the{' '}
diff --git a/code/ui/manager/src/settings/index.tsx b/code/ui/manager/src/settings/index.tsx
index eec87d2ae18e..0a3708744368 100644
--- a/code/ui/manager/src/settings/index.tsx
+++ b/code/ui/manager/src/settings/index.tsx
@@ -1,5 +1,5 @@
 import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api';
-import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
+import { IconButton, TabBar, TabButton, ScrollArea } from '@storybook/components';
 import { Location, Route } from '@storybook/router';
 import { styled } from '@storybook/theming';
 import { global } from '@storybook/global';
@@ -15,6 +15,16 @@ import { matchesModifiers, matchesKeyCode } from '../keybinding';
 
 const { document } = global;
 
+const Header = styled.div(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: 40,
+  boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
+  background: theme.barBg,
+  paddingRight: 8,
+}));
+
 const TabBarButton = React.memo(function TabBarButton({
   changeTab,
   id,
@@ -70,7 +80,7 @@ const Pages: FC<{
 
   return (
     <Fragment>
-      <FlexBar border>
+      <Header>
         <TabBar role="tablist">
           <TabBarButton id="about" title="About" changeTab={changeTab} />
           {enableWhatsNew && (
@@ -87,7 +97,7 @@ const Pages: FC<{
         >
           <CloseIcon />
         </IconButton>
-      </FlexBar>
+      </Header>
       <Content vertical horizontal={false}>
         <Route path="about">
           <AboutPage key="about" />
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index ee6aba4e6c53..4b69aaa56ee4 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming';
-import { Button, IconButton, Loader } from '@storybook/components';
+import { Button, Loader } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
 import { EyeCloseIcon, EyeIcon, HeartIcon, AlertIcon as AlertIconSvg } from '@storybook/icons';
@@ -42,22 +42,6 @@ const Container = styled.div(({ theme }) => ({
   justifyContent: 'space-between',
 }));
 
-const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  color: theme.color.mediumdark,
-  margin: 0,
-}));
-
-const CopyButton = styled(Button)(({ theme }) => ({
-  '&&': {
-    fontSize: `13px`,
-    color: theme.color.defaultText,
-    margin: 0,
-    padding: 0,
-    borderRadius: 0,
-  },
-}));
-
 export const WhatsNewFooter = ({
   isNotificationsEnabled,
   onToggleNotifications,
@@ -80,23 +64,21 @@ export const WhatsNewFooter = ({
       <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
         <HeartIcon color={theme.color.mediumdark} />
         <div>Share this with your team.</div>
-        <CopyButton onClick={copyLink} small>
+        <Button onClick={copyLink} size="small" variant="ghost">
           {copyText}
-        </CopyButton>
+        </Button>
       </div>
-      <ToggleNotificationButton onClick={onToggleNotifications}>
-        {isNotificationsEnabled ? (
-          <>
-            <EyeCloseIcon />
-            &nbsp;Hide notifications
-          </>
-        ) : (
-          <>
-            <EyeIcon />
-            &nbsp;Show notifications
-          </>
-        )}
-      </ToggleNotificationButton>
+      {isNotificationsEnabled ? (
+        <Button size="small" variant="ghost" onClick={onToggleNotifications}>
+          <EyeCloseIcon />
+          Hide notifications
+        </Button>
+      ) : (
+        <Button size="small" variant="ghost" onClick={onToggleNotifications}>
+          <EyeIcon />
+          Show notifications
+        </Button>
+      )}
     </Container>
   );
 };
diff --git a/code/yarn.lock b/code/yarn.lock
index 1a55377378c9..bddedd2eaaec 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -3325,7 +3325,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^29.3.1, @jest/transform@npm:^29.7.0":
+"@jest/transform@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/transform@npm:29.7.0"
   dependencies:
@@ -3514,15 +3514,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:^2.1.5":
-  version: 2.3.0
-  resolution: "@mdx-js/react@npm:2.3.0"
+"@mdx-js/mdx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@mdx-js/mdx@npm:3.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdx": "npm:^2.0.0"
+    collapse-white-space: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-build-jsx: "npm:^3.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    estree-util-to-js: "npm:^2.0.0"
+    estree-walker: "npm:^3.0.0"
+    hast-util-to-estree: "npm:^3.0.0"
+    hast-util-to-jsx-runtime: "npm:^2.0.0"
+    markdown-extensions: "npm:^2.0.0"
+    periscopic: "npm:^3.0.0"
+    remark-mdx: "npm:^3.0.0"
+    remark-parse: "npm:^11.0.0"
+    remark-rehype: "npm:^11.0.0"
+    source-map: "npm:^0.7.0"
+    unified: "npm:^11.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 42e631bc12f5dda528f00833f9592d05f4728fc673209f4cb08948c45751c479724f890379810baf60dfa32857793644c8ceb868f162f3798d81caa775b89aac
+  languageName: node
+  linkType: hard
+
+"@mdx-js/react@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@mdx-js/react@npm:3.0.0"
   dependencies:
     "@types/mdx": "npm:^2.0.0"
-    "@types/react": "npm:>=16"
   peerDependencies:
+    "@types/react": ">=16"
     react: ">=16"
-  checksum: 6d647115703dbe258f7fe372499fa8c6fe17a053ff0f2a208111c9973a71ae738a0ed376770445d39194d217e00e1a015644b24f32c2f7cb4f57988de0649b15
+  checksum: 865f6ebc7ae83c6cb9f7e92db4eddd3f85cd1664391643b4736887ddc32b0ddb5aec012db6fbc9b486b552e08e6d5ad800450fcd9d51c20665667ff0f174d966
   languageName: node
   linkType: hard
 
@@ -4130,64 +4161,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@preact/preset-vite@npm:^2.0.0":
-  version: 2.7.0
-  resolution: "@preact/preset-vite@npm:2.7.0"
-  dependencies:
-    "@babel/plugin-transform-react-jsx": "npm:^7.22.15"
-    "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5"
-    "@prefresh/vite": "npm:^2.4.1"
-    "@rollup/pluginutils": "npm:^4.1.1"
-    babel-plugin-transform-hook-names: "npm:^1.0.2"
-    debug: "npm:^4.3.4"
-    kolorist: "npm:^1.8.0"
-    resolve: "npm:^1.22.8"
-  peerDependencies:
-    "@babel/core": 7.x
-    vite: 2.x || 3.x || 4.x || 5.x
-  checksum: 95a5a87d804d9f33d98f7c8db93fe27de0d626b2794e745734bcad7a7d89db5a3ad37712feb188f1857d834658de33167f524b3040e8cea48ef422da6a1e74db
-  languageName: node
-  linkType: hard
-
-"@prefresh/babel-plugin@npm:0.5.1":
-  version: 0.5.1
-  resolution: "@prefresh/babel-plugin@npm:0.5.1"
-  checksum: f9153c210427adbddb4403502f8fa845f6207516de2d162f5d550683a87173dc3eaabc6be2bb4f1206b882cdd23339f2092567be8d09794a3d06a5626942b1e4
-  languageName: node
-  linkType: hard
-
-"@prefresh/core@npm:^1.5.1":
-  version: 1.5.2
-  resolution: "@prefresh/core@npm:1.5.2"
-  peerDependencies:
-    preact: ^10.0.0
-  checksum: 53d1ce714ed098ccc11f3a8e2826ff6b90237445c24df6281eb162791b534d1d7626a43c0c1c7427139d2ade658e1ba7020963c001135bbdbeeb15073008529b
-  languageName: node
-  linkType: hard
-
-"@prefresh/utils@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@prefresh/utils@npm:1.2.0"
-  checksum: 38cdc6cbb5e18df36996161214eb1097db3361cb0b6402a8012cbe500ba8fb5bcbdc39a687d3b6d67e99f6c340ed77d59f27ab167dfc1655eb4d783740d87d52
-  languageName: node
-  linkType: hard
-
-"@prefresh/vite@npm:^2.4.1":
-  version: 2.4.4
-  resolution: "@prefresh/vite@npm:2.4.4"
-  dependencies:
-    "@babel/core": "npm:^7.22.1"
-    "@prefresh/babel-plugin": "npm:0.5.1"
-    "@prefresh/core": "npm:^1.5.1"
-    "@prefresh/utils": "npm:^1.2.0"
-    "@rollup/pluginutils": "npm:^4.2.1"
-  peerDependencies:
-    preact: ^10.4.0
-    vite: ">=2.0.0"
-  checksum: 31c3fcdcfbfd31921d41f01ca027515d4411f4169c2d3810578bf87b61609d155a1a410c977f098839982adb8da2d88674382cc4a5e55b6fe249a59be60a2483
-  languageName: node
-  linkType: hard
-
 "@radix-ui/number@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/number@npm:1.0.1"
@@ -4366,16 +4339,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "@rollup/pluginutils@npm:4.2.1"
-  dependencies:
-    estree-walker: "npm:^2.0.1"
-    picomatch: "npm:^2.2.2"
-  checksum: 3ee56b2c8f1ed8dfd0a92631da1af3a2dfdd0321948f089b3752b4de1b54dc5076701eadd0e5fc18bd191b77af594ac1db6279e83951238ba16bf8a414c64c48
-  languageName: node
-  linkType: hard
-
 "@rollup/pluginutils@npm:^5.0.2":
   version: 5.1.0
   resolution: "@rollup/pluginutils@npm:5.1.0"
@@ -4732,8 +4695,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
-    "@jest/transform": "npm:^29.3.1"
-    "@mdx-js/react": "npm:^2.1.5"
+    "@babel/core": "npm:^7.12.3"
+    "@mdx-js/mdx": "npm:^3.0.0"
+    "@mdx-js/react": "npm:^3.0.0"
     "@rollup/pluginutils": "npm:^5.0.2"
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -4741,7 +4705,6 @@ __metadata:
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/mdx2-csf": "npm:^1.0.0"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/react-dom-shim": "workspace:*"
@@ -5172,14 +5135,13 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     glob: "npm:^10.0.0"
     magic-string: "npm:^0.30.0"
-    rollup: "npm:^3.20.1"
     slash: "npm:^5.0.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.4"
   peerDependencies:
     "@preact/preset-vite": "*"
     typescript: ">= 4.3.x"
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0
     vite-plugin-glimmerx: "*"
   peerDependenciesMeta:
     "@preact/preset-vite":
@@ -5460,7 +5422,7 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/csf-tools": "workspace:*"
-    "@storybook/docs-mdx": "npm:^0.1.0"
+    "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/manager": "workspace:*"
     "@storybook/node-logger": "workspace:*"
@@ -5593,10 +5555,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-mdx@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "@storybook/docs-mdx@npm:0.1.0"
-  checksum: e4d510f0452a7a3cb09d9617920c18b974f836299dfba38d6b2e62fbfea418d71f340b6c280a87201b1336a7221c7cc16b47794c1f8e81d01dcfa1f599343085
+"@storybook/docs-mdx@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@storybook/docs-mdx@npm:3.0.0"
+  checksum: 4f4242fc05b57e8dc239204c71fd0d1481c9abbf20d12dd0f3dace74f77a7ff7cbe0bd07d7d785873b45747be64cad273423d3dc0cf89b52e9f117592a4b054f
   languageName: node
   linkType: hard
 
@@ -5851,13 +5813,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/mdx2-csf@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "@storybook/mdx2-csf@npm:1.1.0"
-  checksum: ba4496a51efae35edb3e509e488cd16066ccf0768d2dc527bbc2650d0bc0f630540985205772d63d1711d1a5dae66136a919077c90fa2ac7a02a13de43446baa
-  languageName: node
-  linkType: hard
-
 "@storybook/nextjs@workspace:*, @storybook/nextjs@workspace:frameworks/nextjs":
   version: 0.0.0-use.local
   resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
@@ -5941,7 +5896,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preact-vite@workspace:frameworks/preact-vite"
   dependencies:
-    "@preact/preset-vite": "npm:^2.0.0"
     "@storybook/builder-vite": "workspace:*"
     "@storybook/preact": "workspace:*"
     "@types/node": "npm:^18.0.0"
@@ -5949,7 +5903,7 @@ __metadata:
     vite: "npm:^4.0.0"
   peerDependencies:
     preact: ">=10"
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -6224,7 +6178,6 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/react": "workspace:*"
     "@types/node": "npm:^18.0.0"
-    "@vitejs/plugin-react": "npm:^3.0.1"
     magic-string: "npm:^0.30.0"
     react-docgen: "npm:^7.0.0"
     typescript: "npm:^5.3.2"
@@ -6232,7 +6185,7 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -6536,7 +6489,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/svelte": "workspace:*"
-    "@sveltejs/vite-plugin-svelte": "npm:^2.4.2"
+    "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
     svelte: "npm:^5.0.0-next.16"
@@ -6546,8 +6499,9 @@ __metadata:
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
   peerDependencies:
+    "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0
     svelte: ^4.0.0 || ^5.0.0-next.16
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -6723,13 +6677,12 @@ __metadata:
     "@storybook/core-server": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@types/node": "npm:^18.0.0"
-    "@vitejs/plugin-vue": "npm:^4.0.0"
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
     vue-docgen-api: "npm:^4.40.0"
   peerDependencies:
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -6838,19 +6791,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte-inspector@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:1.0.4"
-  dependencies:
-    debug: "npm:^4.3.4"
-  peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^2.2.0
-    svelte: ^3.54.0 || ^4.0.0
-    vite: ^4.0.0
-  checksum: f21cb6bde0d8cce505c558dcb786d00e514c270848d9ff21dca12bc8335588e1bd05215fe3cd7478c8a6779bae7a75629b68d484fcdf309d759f25ee58ea771e
-  languageName: node
-  linkType: hard
-
 "@sveltejs/vite-plugin-svelte-inspector@npm:^2.0.0-next.0 || ^2.0.0":
   version: 2.0.0
   resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:2.0.0"
@@ -6864,24 +6804,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte@npm:^2.4.2":
-  version: 2.5.3
-  resolution: "@sveltejs/vite-plugin-svelte@npm:2.5.3"
-  dependencies:
-    "@sveltejs/vite-plugin-svelte-inspector": "npm:^1.0.4"
-    debug: "npm:^4.3.4"
-    deepmerge: "npm:^4.3.1"
-    kleur: "npm:^4.1.5"
-    magic-string: "npm:^0.30.3"
-    svelte-hmr: "npm:^0.15.3"
-    vitefu: "npm:^0.2.4"
-  peerDependencies:
-    svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
-    vite: ^4.0.0
-  checksum: 613a4ad18a946ddee7b82cae0d892040a9459a5ac5137cbaa91a4b7b67d504409b5dbc02d268136a740b09e42531b7516f80a0f687ca4fe2b0d99e6e483c5d06
-  languageName: node
-  linkType: hard
-
 "@sveltejs/vite-plugin-svelte@npm:^3.0.1":
   version: 3.0.1
   resolution: "@sveltejs/vite-plugin-svelte@npm:3.0.1"
@@ -7688,6 +7610,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@types/hast@npm:3.0.3"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 0779740926efc1f856976abd95fcb04f4b45d885ec65ef148505722e15cd8fdf4e84d93bf29908131ae6b040f3ca1c1f0cf9fef1b35d52c90c76ff90cfc1214f
+  languageName: node
+  linkType: hard
+
 "@types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "@types/hoist-non-react-statics@npm:3.3.2"
@@ -7847,6 +7778,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdast@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "@types/mdast@npm:4.0.3"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: e6994404f5ce58073aa6c1a37ceac3060326470a464e2d751580a9f89e2dbca3a2a6222b849bdaaa5bffbe89033c50a886d17e49fca3b040a4ffcf970e387a0c
+  languageName: node
+  linkType: hard
+
 "@types/mdx@npm:^2.0.0":
   version: 2.0.8
   resolution: "@types/mdx@npm:2.0.8"
@@ -8067,7 +8007,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.37":
+"@types/react@npm:*, @types/react@npm:^18.0.37":
   version: 18.2.43
   resolution: "@types/react@npm:18.2.43"
   dependencies:
@@ -8224,6 +8164,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:*, @types/unist@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "@types/unist@npm:3.0.2"
+  checksum: 39f220ce184a773c55c18a127062bfc4d0d30c987250cd59bab544d97be6cfec93717a49ef96e81f024b575718f798d4d329eb81c452fc57d6d051af8b043ebf
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2":
   version: 2.0.8
   resolution: "@types/unist@npm:2.0.8"
@@ -8479,6 +8426,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ungap/structured-clone@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 8209c937cb39119f44eb63cf90c0b73e7c754209a6411c707be08e50e29ee81356dca1a848a405c8bdeebfe2f5e4f831ad310ae1689eeef65e7445c090c6657d
+  languageName: node
+  linkType: hard
+
 "@urql/core@npm:>=4.1.0, @urql/core@npm:^4.1.0":
   version: 4.2.0
   resolution: "@urql/core@npm:4.2.0"
@@ -8523,7 +8477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-vue@npm:^4.0.0, @vitejs/plugin-vue@npm:^4.4.0":
+"@vitejs/plugin-vue@npm:^4.4.0":
   version: 4.5.2
   resolution: "@vitejs/plugin-vue@npm:4.5.2"
   peerDependencies:
@@ -9869,6 +9823,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astring@npm:^1.8.0":
+  version: 1.8.6
+  resolution: "astring@npm:1.8.6"
+  bin:
+    astring: bin/astring
+  checksum: 31f09144597048c11072417959a412f208f8f95ba8dce408dfbc3367acb929f31fbcc00ed5eb61ccbf7c2f1173b9ac8bfcaaa37134a9455050c669b2b036ed88
+  languageName: node
+  linkType: hard
+
 "async-disk-cache@npm:^1.2.1":
   version: 1.3.5
   resolution: "async-disk-cache@npm:1.3.5"
@@ -10208,15 +10171,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-hook-names@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "babel-plugin-transform-hook-names@npm:1.0.2"
-  peerDependencies:
-    "@babel/core": ^7.12.10
-  checksum: 517b85fe0611d742b3fffad5d0e119fcbd29bf69f95c6970b9ede4cb66453c7106a2d3bf048b35255b78a9d6a9565ad37e73b46c0be1fe557e941c792fad79f0
-  languageName: node
-  linkType: hard
-
 "babel-preset-current-node-syntax@npm:^1.0.0":
   version: 1.0.1
   resolution: "babel-preset-current-node-syntax@npm:1.0.1"
@@ -11697,6 +11651,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"collapse-white-space@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "collapse-white-space@npm:2.1.0"
+  checksum: b2e2800f4ab261e62eb27a1fbe853378296e3a726d6695117ed033e82d61fb6abeae4ffc1465d5454499e237005de9cfc52c9562dc7ca4ac759b9a222ef14453
+  languageName: node
+  linkType: hard
+
 "collection-visit@npm:^1.0.0":
   version: 1.0.0
   resolution: "collection-visit@npm:1.0.0"
@@ -11798,6 +11759,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: 91f90f1aae320f1755d6957ef0b864fe4f54737f3313bd95e0802686ee2ca38bff1dd381964d00ae5db42912dd1f4ae5c2709644e82706ffc6f6842a813cdd67
+  languageName: node
+  linkType: hard
+
 "commander@npm:11.0.0":
   version: 11.0.0
   resolution: "commander@npm:11.0.0"
@@ -12933,6 +12901,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devlop@npm:^1.0.0, devlop@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "devlop@npm:1.1.0"
+  dependencies:
+    dequal: "npm:^2.0.0"
+  checksum: e0928ab8f94c59417a2b8389c45c55ce0a02d9ac7fd74ef62d01ba48060129e1d594501b77de01f3eeafc7cb00773819b0df74d96251cf20b31c5b3071f45c0e
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^28.1.1":
   version: 28.1.1
   resolution: "diff-sequences@npm:28.1.1"
@@ -14442,6 +14419,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-attach-comments@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-attach-comments@npm:3.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+  checksum: ee69bb5c45e2ad074725b90ed181c1c934b29d81bce4b0c7761431e83c4c6ab1b223a6a3d6a4fbeb92128bc5d5ee201d5dd36cf1770aa5e16a40b0cf36e8a1f1
+  languageName: node
+  linkType: hard
+
+"estree-util-build-jsx@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "estree-util-build-jsx@npm:3.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    estree-walker: "npm:^3.0.0"
+  checksum: 274c119817b8e7caa14a9778f1e497fea56cdd2b01df1a1ed037f843178992d3afe85e0d364d485e1e2e239255763553d1b647b15e4a7ba50851bcb43dc6bf80
+  languageName: node
+  linkType: hard
+
 "estree-util-is-identifier-name@npm:^2.0.0":
   version: 2.1.0
   resolution: "estree-util-is-identifier-name@npm:2.1.0"
@@ -14449,6 +14447,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-is-identifier-name@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-is-identifier-name@npm:3.0.0"
+  checksum: d1881c6ed14bd588ebd508fc90bf2a541811dbb9ca04dec2f39d27dcaa635f85b5ed9bbbe7fc6fb1ddfca68744a5f7c70456b4b7108b6c4c52780631cc787c5b
+  languageName: node
+  linkType: hard
+
+"estree-util-to-js@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "estree-util-to-js@npm:2.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    astring: "npm:^1.8.0"
+    source-map: "npm:^0.7.0"
+  checksum: ac88cb831401ef99e365f92f4af903755d56ae1ce0e0f0fb8ff66e678141f3d529194f0fb15f6c78cd7554c16fda36854df851d58f9e05cfab15bddf7a97cea0
+  languageName: node
+  linkType: hard
+
 "estree-util-visit@npm:^1.0.0":
   version: 1.2.1
   resolution: "estree-util-visit@npm:1.2.1"
@@ -14459,6 +14475,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-visit@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "estree-util-visit@npm:2.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/unist": "npm:^3.0.0"
+  checksum: acda8b03cc8f890d79c7c7361f6c95331ba84b7ccc0c32b49f447fc30206b20002b37ffdfc97b6ad16e6fe065c63ecbae1622492e2b6b4775c15966606217f39
+  languageName: node
+  linkType: hard
+
 "estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2":
   version: 2.0.2
   resolution: "estree-walker@npm:2.0.2"
@@ -16400,6 +16426,62 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-estree@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "hast-util-to-estree@npm:3.1.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-attach-comments: "npm:^3.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-object: "npm:^0.4.0"
+    unist-util-position: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 9003a8bac26a4580d5fc9f2a271d17330dd653266425e9f5539feecd2f7538868d6630a18f70698b8b804bf14c306418a3f4ab3119bb4692aca78b0c08b1291e
+  languageName: node
+  linkType: hard
+
+"hast-util-to-jsx-runtime@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "hast-util-to-jsx-runtime@npm:2.3.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-object: "npm:^1.0.0"
+    unist-util-position: "npm:^5.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: df7a36dcc792df7667a54438f044b721753d5e09692606d23bf7336bf4651670111fe7728eebbf9f0e4f96ab3346a05bb23037fa1b1d115482b3bc5bde8b6912
+  languageName: node
+  linkType: hard
+
+"hast-util-whitespace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-whitespace@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: b898bc9fe27884b272580d15260b6bbdabe239973a147e97fa98c45fa0ffec967a481aaa42291ec34fb56530dc2d484d473d7e2bae79f39c83f3762307edfea8
+  languageName: node
+  linkType: hard
+
 "hastscript@npm:^6.0.0":
   version: 6.0.0
   resolution: "hastscript@npm:6.0.0"
@@ -17067,6 +17149,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-parser@npm:0.1.1":
+  version: 0.1.1
+  resolution: "inline-style-parser@npm:0.1.1"
+  checksum: 08832a533f51a1e17619f2eabf2f5ec5e956d6dcba1896351285c65df022c9420de61d73256e1dca8015a52abf96cc84ddc3b73b898b22de6589d3962b5e501b
+  languageName: node
+  linkType: hard
+
+"inline-style-parser@npm:0.2.2":
+  version: 0.2.2
+  resolution: "inline-style-parser@npm:0.2.2"
+  checksum: 82099645fd99451301ff243706f70917c066e3033d32bdb1074a54eb1909e08d1cafb48c426a643facbe8248cff362082e90ca14760b3d44e09a858fe668b3fe
+  languageName: node
+  linkType: hard
+
 "inquirer@npm:9.2.11":
   version: 9.2.11
   resolution: "inquirer@npm:9.2.11"
@@ -18654,13 +18750,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kolorist@npm:^1.8.0":
-  version: 1.8.0
-  resolution: "kolorist@npm:1.8.0"
-  checksum: 73075db44a692bf6c34a649f3b4b3aea4993b84f6b754cbf7a8577e7c7db44c0bad87752bd23b0ce533f49de2244ce2ce03b7b1b667a85ae170a94782cc50f9b
-  languageName: node
-  linkType: hard
-
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -19314,7 +19403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:0.30.5, magic-string@npm:^0.30.0, magic-string@npm:^0.30.3, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5":
+"magic-string@npm:0.30.5, magic-string@npm:^0.30.0, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5":
   version: 0.30.5
   resolution: "magic-string@npm:0.30.5"
   dependencies:
@@ -19499,6 +19588,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-extensions@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "markdown-extensions@npm:2.0.0"
+  checksum: 406139da2aa0d5ebad86195c8e8c02412f873c452b4c087ae7bc767af37956141be449998223bb379eea179b5fd38dfa610602b6f29c22ddab5d51e627a7e41d
+  languageName: node
+  linkType: hard
+
 "markdown-table@npm:^3.0.0":
   version: 3.0.3
   resolution: "markdown-table@npm:3.0.3"
@@ -19606,6 +19702,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-from-markdown@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-from-markdown@npm:2.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark: "npm:^4.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: fb66e917f66e33fc60d6964264c4abd519fd8829a4a58ff9c61b2ba5c337554fb954b9ec31ca1c34e83c1163a73f310c39072d656f9a2d3184fe39c87cbba65a
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-autolink-literal@npm:^1.0.0":
   version: 1.0.3
   resolution: "mdast-util-gfm-autolink-literal@npm:1.0.3"
@@ -19696,6 +19812,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mdast-util-mdx-expression@npm:2.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 512848cbc44b9dc7cffc1bb3f95f7e67f0d6562870e56a67d25647f475d411e136b915ba417c8069fb36eac1839d0209fb05fb323d377f35626a82fcb0879363
+  languageName: node
+  linkType: hard
+
 "mdast-util-mdx-jsx@npm:^2.0.0, mdast-util-mdx-jsx@npm:^2.1.2":
   version: 2.1.4
   resolution: "mdast-util-mdx-jsx@npm:2.1.4"
@@ -19716,6 +19846,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-mdx-jsx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-mdx-jsx@npm:3.0.0"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    devlop: "npm:^1.1.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    parse-entities: "npm:^4.0.0"
+    stringify-entities: "npm:^4.0.0"
+    unist-util-remove-position: "npm:^5.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: c14fc72587acd482086be56bb809a142b4d732833593c9a14c1ebb863e549aafbc9391507b177eac8788b2a9de624b8665a2092c75243bbe80f808728ffa421a
+  languageName: node
+  linkType: hard
+
 "mdast-util-mdx@npm:^2.0.0":
   version: 2.0.1
   resolution: "mdast-util-mdx@npm:2.0.1"
@@ -19729,6 +19880,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-mdx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-mdx@npm:3.0.0"
+  dependencies:
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 4faea13f77d6bc9aa64ee41a5e4779110b73444a17fda363df6ebe880ecfa58b321155b71f8801c3faa6d70d6222a32a00cbd6dbf5fad8db417f4688bc9c74e1
+  languageName: node
+  linkType: hard
+
 "mdast-util-mdxjs-esm@npm:^1.0.0, mdast-util-mdxjs-esm@npm:^1.3.1":
   version: 1.3.1
   resolution: "mdast-util-mdxjs-esm@npm:1.3.1"
@@ -19742,6 +19906,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-mdxjs-esm@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdxjs-esm@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 5bda92fc154141705af2b804a534d891f28dac6273186edf1a4c5e3f045d5b01dbcac7400d27aaf91b7e76e8dce007c7b2fdf136c11ea78206ad00bdf9db46bc
+  languageName: node
+  linkType: hard
+
 "mdast-util-phrasing@npm:^3.0.0":
   version: 3.0.1
   resolution: "mdast-util-phrasing@npm:3.0.1"
@@ -19752,6 +19930,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-phrasing@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-phrasing@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: bf281d159d1a9a9705ed8fdbadb70c9633d1c25716ff2c282b6c2ecbc1f05cff10f73e5280d754ed833b09d42b00260c4b8d0a5fed4ce3236d4cffb5230b50cf
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-hast@npm:^13.0.0":
+  version: 13.0.2
+  resolution: "mdast-util-to-hast@npm:13.0.2"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    trim-lines: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: f6e9a5b1ab94483ce1cf2ef229578fde4fe7d085f8b9d88a048823da5f93f9469adc98839e8db73f7475e8128a6df30eccad9cd0f9ee0a1d410e74db19b82d8c
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-markdown@npm:^0.6.0":
   version: 0.6.5
   resolution: "mdast-util-to-markdown@npm:0.6.5"
@@ -19782,6 +19986,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-markdown@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "mdast-util-to-markdown@npm:2.1.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    longest-streak: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 8bd37a9627a438ef6418d6642661904d0cc03c5c732b8b018a8e238ef5cc82fe8aef1940b19c6f563245e58b9659f35e527209bd3fe145f3c723ba14d18fc3e6
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-string@npm:^1.0.0, mdast-util-to-string@npm:^1.0.2":
   version: 1.1.0
   resolution: "mdast-util-to-string@npm:1.1.0"
@@ -19805,6 +20025,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-string@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+  checksum: 2d3c1af29bf3fe9c20f552ee9685af308002488f3b04b12fa66652c9718f66f41a32f8362aa2d770c3ff464c034860b41715902ada2306bb0a055146cef064d7
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.30":
   version: 2.0.30
   resolution: "mdn-data@npm:2.0.30"
@@ -19926,6 +20155,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-core-commonmark@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-core-commonmark@npm:2.0.0"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-destination: "npm:^2.0.0"
+    micromark-factory-label: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-factory-title: "npm:^2.0.0"
+    micromark-factory-whitespace: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-html-tag-name: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: e087824b98d1f1d0db34791ac53945b0d68fb5e541c6c9da6700cc3db54d6b697d8110d3120d5d30e2fb39443aabddccd3e2bbf684795359f38b5a696fdc5913
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-autolink-literal@npm:^1.0.0":
   version: 1.0.5
   resolution: "micromark-extension-gfm-autolink-literal@npm:1.0.5"
@@ -20035,6 +20288,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-mdx-expression@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdx-expression@npm:3.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-mdx-expression: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: fa799c594d8ff9ecbbd28e226959c4928590cfcddb60a926d9d859d00fc7acd25684b6f78dbe6a7f0830879a402b4a3628efd40bb9df1f5846e6d2b7332715f7
+  languageName: node
+  linkType: hard
+
 "micromark-extension-mdx-jsx@npm:^1.0.0":
   version: 1.0.5
   resolution: "micromark-extension-mdx-jsx@npm:1.0.5"
@@ -20053,6 +20322,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-mdx-jsx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdx-jsx@npm:3.0.0"
+  dependencies:
+    "@types/acorn": "npm:^4.0.0"
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    micromark-factory-mdx-expression: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 18a81c8def7f3a2088dc435bba19e649c19f679464b1a01e2c680f9518820e70fb0974b8403c790aee8f44205833a280b56ba157fe5a5b2903b476c5de5ba353
+  languageName: node
+  linkType: hard
+
 "micromark-extension-mdx-md@npm:^1.0.0":
   version: 1.0.1
   resolution: "micromark-extension-mdx-md@npm:1.0.1"
@@ -20062,6 +20349,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-mdx-md@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-extension-mdx-md@npm:2.0.0"
+  dependencies:
+    micromark-util-types: "npm:^2.0.0"
+  checksum: bae91c61273de0e5ba80a980c03470e6cd9d7924aa936f46fbda15d780704d9386e945b99eda200e087b96254fbb4271a9545d5ce02676cd6ae67886a8bf82df
+  languageName: node
+  linkType: hard
+
 "micromark-extension-mdxjs-esm@npm:^1.0.0":
   version: 1.0.5
   resolution: "micromark-extension-mdxjs-esm@npm:1.0.5"
@@ -20079,6 +20375,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-mdxjs-esm@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdxjs-esm@npm:3.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 13e3f726495a960650cdedcba39198ace5bdc953ccb12c14d71fc9ed9bb88e40cc3ba9231e973f6984da3b3573e7ddb23ce409f7c16f52a8d57b608bf46c748d
+  languageName: node
+  linkType: hard
+
 "micromark-extension-mdxjs@npm:^1.0.0":
   version: 1.0.1
   resolution: "micromark-extension-mdxjs@npm:1.0.1"
@@ -20095,6 +20408,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-mdxjs@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "micromark-extension-mdxjs@npm:3.0.0"
+  dependencies:
+    acorn: "npm:^8.0.0"
+    acorn-jsx: "npm:^5.0.0"
+    micromark-extension-mdx-expression: "npm:^3.0.0"
+    micromark-extension-mdx-jsx: "npm:^3.0.0"
+    micromark-extension-mdx-md: "npm:^2.0.0"
+    micromark-extension-mdxjs-esm: "npm:^3.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: fd84f036ddad0aabbc12e7f1b3e9dcfe31573bbc413c5ae903779ef0366d7a4c08193547e7ba75718c9f45654e45f52e575cfc2f23a5f89205a8a70d9a506aea
+  languageName: node
+  linkType: hard
+
 "micromark-factory-destination@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-factory-destination@npm:1.1.0"
@@ -20106,6 +20435,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-destination@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-destination@npm:2.0.0"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: b73492f687d41a6a379159c2f3acbf813042346bcea523d9041d0cc6124e6715f0779dbb2a0b3422719e9764c3b09f9707880aa159557e3cb4aeb03b9d274915
+  languageName: node
+  linkType: hard
+
 "micromark-factory-label@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-factory-label@npm:1.1.0"
@@ -20118,6 +20458,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-label@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-label@npm:2.0.0"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 8ffad00487a7891941b1d1f51d53a33c7a659dcf48617edb7a4008dad7aff67ec316baa16d55ca98ae3d75ce1d81628dbf72fedc7c6f108f740dec0d5d21c8ee
+  languageName: node
+  linkType: hard
+
 "micromark-factory-mdx-expression@npm:^1.0.0":
   version: 1.0.9
   resolution: "micromark-factory-mdx-expression@npm:1.0.9"
@@ -20134,6 +20486,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-mdx-expression@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-mdx-expression@npm:2.0.1"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-events-to-acorn: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-position-from-estree: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: d9cf475a73a7fbfa09aba0d057e033d57e45b7adff78692be9efb4405c4a1717ece4594a632f92a4302e4f8f2ae96355785b616e3f5b2fe8599ec24cfdeee12d
+  languageName: node
+  linkType: hard
+
 "micromark-factory-space@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-factory-space@npm:1.1.0"
@@ -20144,6 +20512,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-space@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-space@npm:2.0.0"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 103ca954dade963d4ff1d2f27d397833fe855ddc72590205022832ef68b775acdea67949000cee221708e376530b1de78c745267b0bf8366740840783eb37122
+  languageName: node
+  linkType: hard
+
 "micromark-factory-title@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-factory-title@npm:1.1.0"
@@ -20156,6 +20534,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-title@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-title@npm:2.0.0"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 2b2188e7a011b1b001faf8c860286d246d5c3485ef8819270c60a5808f4c7613e49d4e481dbdff62600ef7acdba0f5100be2d125cbd2a15e236c26b3668a8ebd
+  languageName: node
+  linkType: hard
+
 "micromark-factory-whitespace@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-factory-whitespace@npm:1.1.0"
@@ -20168,6 +20558,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-whitespace@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-factory-whitespace@npm:2.0.0"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 4e91baab0cc71873095134bd0e225d01d9786cde352701402d71b72d317973954754e8f9f1849901f165530e6421202209f4d97c460a27bb0808ec5a3fc3148c
+  languageName: node
+  linkType: hard
+
 "micromark-util-character@npm:^1.0.0":
   version: 1.2.0
   resolution: "micromark-util-character@npm:1.2.0"
@@ -20178,6 +20580,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-character@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-character@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 5b91c90f29c8873a9f2f2385bbeb70f481b0e56c26092451d1796cd323257927a69eccca19b079d83d5751ec6fc92964214a3c868114555f87631426631df6b9
+  languageName: node
+  linkType: hard
+
 "micromark-util-chunked@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-chunked@npm:1.1.0"
@@ -20187,6 +20599,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-chunked@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-chunked@npm:2.0.0"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 043b5f2abc8c13a1e2e4c378ead191d1a47ed9e0cd6d0fa5a0a430b2df9e17ada9d5de5a20688a000bbc5932507e746144acec60a9589d9a79fa60918e029203
+  languageName: node
+  linkType: hard
+
 "micromark-util-classify-character@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-classify-character@npm:1.1.0"
@@ -20198,6 +20619,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-classify-character@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-classify-character@npm:2.0.0"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 2bf5fa5050faa9b69f6c7e51dbaaf02329ab70fabad8229984381b356afbbf69db90f4617bec36d814a7d285fb7cad8e3c4e38d1daf4387dc9e240aa7f9a292a
+  languageName: node
+  linkType: hard
+
 "micromark-util-combine-extensions@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-combine-extensions@npm:1.1.0"
@@ -20208,6 +20640,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-combine-extensions@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-combine-extensions@npm:2.0.0"
+  dependencies:
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: cd4c8d1a85255527facb419ff3b3cc3d7b7f27005c5ef5fa7ef2c4d0e57a9129534fc292a188ec2d467c2c458642d369c5f894bc8a9e142aed6696cc7989d3ea
+  languageName: node
+  linkType: hard
+
 "micromark-util-decode-numeric-character-reference@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-decode-numeric-character-reference@npm:1.1.0"
@@ -20217,6 +20659,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-decode-numeric-character-reference@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 3f6d684ee8f317c67806e19b3e761956256cb936a2e0533aad6d49ac5604c6536b2041769c6febdd387ab7175b7b7e551851bf2c1f78da943e7a3671ca7635ac
+  languageName: node
+  linkType: hard
+
 "micromark-util-decode-string@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-decode-string@npm:1.1.0"
@@ -20229,6 +20680,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-decode-string@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-decode-string@npm:2.0.0"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: f5413bebb21bdb686cfa1bcfa7e9c93093a523d1b42443ead303b062d2d680a94e5e8424549f57b8ba9d786a758e5a26a97f56068991bbdbca5d1885b3aa7227
+  languageName: node
+  linkType: hard
+
 "micromark-util-encode@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-encode@npm:1.1.0"
@@ -20236,6 +20699,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-encode@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-encode@npm:2.0.0"
+  checksum: ebdaafff23100bbf4c74e63b4b1612a9ddf94cd7211d6a076bc6fb0bc32c1b48d6fb615aa0953e607c62c97d849f97f1042260d3eb135259d63d372f401bbbb2
+  languageName: node
+  linkType: hard
+
 "micromark-util-events-to-acorn@npm:^1.0.0":
   version: 1.2.3
   resolution: "micromark-util-events-to-acorn@npm:1.2.3"
@@ -20252,6 +20722,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-events-to-acorn@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-util-events-to-acorn@npm:2.0.2"
+  dependencies:
+    "@types/acorn": "npm:^4.0.0"
+    "@types/estree": "npm:^1.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-visit: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 2bd2660a49efddb625e6adcabdc3384ae4c50c7a04270737270f4aab53d09e8253e6d2607cd947c4c77f8a9900278915babb240e61fd143dc5bab51d9fd50709
+  languageName: node
+  linkType: hard
+
 "micromark-util-html-tag-name@npm:^1.0.0":
   version: 1.2.0
   resolution: "micromark-util-html-tag-name@npm:1.2.0"
@@ -20259,6 +20745,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-html-tag-name@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-html-tag-name@npm:2.0.0"
+  checksum: 988aa26367449bd345b627ae32cf605076daabe2dc1db71b578a8a511a47123e14af466bcd6dcbdacec60142f07bc2723ec5f7a0eed0f5319ce83b5e04825429
+  languageName: node
+  linkType: hard
+
 "micromark-util-normalize-identifier@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-normalize-identifier@npm:1.1.0"
@@ -20268,6 +20761,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-normalize-identifier@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-normalize-identifier@npm:2.0.0"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 93bf8789b8449538f22cf82ac9b196363a5f3b2f26efd98aef87c4c1b1f8c05be3ef6391ff38316ff9b03c1a6fd077342567598019ddd12b9bd923dacc556333
+  languageName: node
+  linkType: hard
+
 "micromark-util-resolve-all@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-resolve-all@npm:1.1.0"
@@ -20277,6 +20779,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-resolve-all@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-resolve-all@npm:2.0.0"
+  dependencies:
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 3b912e88453dcefe728a9080c8934a75ac4732056d6576ceecbcaf97f42c5d6fa2df66db8abdc8427eb167c5ffddefe26713728cfe500bc0e314ed260d6e2746
+  languageName: node
+  linkType: hard
+
 "micromark-util-sanitize-uri@npm:^1.0.0":
   version: 1.2.0
   resolution: "micromark-util-sanitize-uri@npm:1.2.0"
@@ -20288,6 +20799,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-sanitize-uri@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-sanitize-uri@npm:2.0.0"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 74763ca1c927dd520d3ab8fd9856a19740acf76fc091f0a1f5d4e99c8cd5f1b81c5a0be3efb564941a071fb6d85fd951103f2760eb6cff77b5ab3abe08341309
+  languageName: node
+  linkType: hard
+
 "micromark-util-subtokenize@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-subtokenize@npm:1.1.0"
@@ -20300,6 +20822,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-subtokenize@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-subtokenize@npm:2.0.0"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 1907c56c4974d430b984c50b3eb0930241112d931e611f178dee17d58f2976614950631b70f4e9c7e49dbccf21f91654ee61f250e028bf2f2b0f3d3aeb168da8
+  languageName: node
+  linkType: hard
+
 "micromark-util-symbol@npm:^1.0.0":
   version: 1.1.0
   resolution: "micromark-util-symbol@npm:1.1.0"
@@ -20307,6 +20841,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-symbol@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-symbol@npm:2.0.0"
+  checksum: 4e76186c185ce4cefb9cea8584213d9ffacd77099d1da30c0beb09fa21f46f66f6de4c84c781d7e34ff763fe3a06b530e132fa9004882afab9e825238d0aa8b3
+  languageName: node
+  linkType: hard
+
 "micromark-util-types@npm:^1.0.0, micromark-util-types@npm:^1.0.1":
   version: 1.1.0
   resolution: "micromark-util-types@npm:1.1.0"
@@ -20314,6 +20855,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-types@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "micromark-util-types@npm:2.0.0"
+  checksum: d74e913b9b61268e0d6939f4209e3abe9dada640d1ee782419b04fd153711112cfaaa3c4d5f37225c9aee1e23c3bb91a1f5223e1e33ba92d33e83956a53e61de
+  languageName: node
+  linkType: hard
+
 "micromark@npm:^3.0.0":
   version: 3.2.0
   resolution: "micromark@npm:3.2.0"
@@ -20339,6 +20887,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "micromark@npm:4.0.0"
+  dependencies:
+    "@types/debug": "npm:^4.0.0"
+    debug: "npm:^4.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 7e91c8d19ff27bc52964100853f1b3b32bb5b2ece57470a34ba1b2f09f4e2a183d90106c4ae585c9f2046969ee088576fed79b2f7061cba60d16652ccc2c64fd
+  languageName: node
+  linkType: hard
+
 "micromark@npm:~2.11.0":
   version: 2.11.4
   resolution: "micromark@npm:2.11.4"
@@ -22397,7 +22970,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"periscopic@npm:^3.1.0":
+"periscopic@npm:^3.0.0, periscopic@npm:^3.1.0":
   version: 3.1.0
   resolution: "periscopic@npm:3.1.0"
   dependencies:
@@ -22429,7 +23002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -23096,6 +23669,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^6.0.0":
+  version: 6.4.0
+  resolution: "property-information@npm:6.4.0"
+  checksum: 48ba202f12c6abc82d37135452377dd528fae90a151bcffb28582d58d9db6e42ce835c91e2fcb12e875200b32bcaed90de4807dfb37c687f7cccf2597ccb55e1
+  languageName: node
+  linkType: hard
+
 "proxy-addr@npm:~2.0.7":
   version: 2.0.7
   resolution: "proxy-addr@npm:2.0.7"
@@ -24397,6 +24977,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-mdx@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "remark-mdx@npm:3.0.0"
+  dependencies:
+    mdast-util-mdx: "npm:^3.0.0"
+    micromark-extension-mdxjs: "npm:^3.0.0"
+  checksum: e7a59428c55753f89f1bd299bc92cfd96fb3289285384b631f8af253d8df6473ebdba085e6d1a846b55b46700aafc76f35810a3268733e6a7c676bc2a8648f17
+  languageName: node
+  linkType: hard
+
 "remark-message-control@npm:^6.0.0":
   version: 6.0.0
   resolution: "remark-message-control@npm:6.0.0"
@@ -24418,6 +25008,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-parse@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-parse@npm:11.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 6eed15ddb8680eca93e04fcb2d1b8db65a743dcc0023f5007265dda558b09db595a087f622062ccad2630953cd5cddc1055ce491d25a81f3317c858348a8dd38
+  languageName: node
+  linkType: hard
+
 "remark-parse@npm:^9.0.0":
   version: 9.0.0
   resolution: "remark-parse@npm:9.0.0"
@@ -24451,6 +25053,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-rehype@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-rehype@npm:11.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: d88180819f6695bc4f257cffcbe201973fc946144cc0101da589f25f3238932e384e98a8897b6060948ad2b5679eb2de5a720866b8b6f36b74e9f20e3e0b1d5d
+  languageName: node
+  linkType: hard
+
 "remark-slug@npm:^6.0.0":
   version: 6.1.0
   resolution: "remark-slug@npm:6.1.0"
@@ -24666,7 +25281,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8, resolve@npm:^1.4.0":
+"resolve@npm:1.22.8, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.4.0":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -24692,7 +25307,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.12.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.13.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.15.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -24845,7 +25460,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^3.20.1, rollup@npm:^3.27.1":
+"rollup@npm:^3.27.1":
   version: 3.29.4
   resolution: "rollup@npm:3.29.4"
   dependencies:
@@ -25894,7 +26509,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:0.7.4, source-map@npm:^0.7.3, source-map@npm:^0.7.4":
+"source-map@npm:0.7.4, source-map@npm:^0.7.0, source-map@npm:^0.7.3, source-map@npm:^0.7.4":
   version: 0.7.4
   resolution: "source-map@npm:0.7.4"
   checksum: dc0cf3768fe23c345ea8760487f8c97ef6fca8a73c83cd7c9bf2fde8bc2c34adb9c0824d6feb14bc4f9e37fb522e18af621543f1289038a66ac7586da29aa7dc
@@ -25931,6 +26546,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 6173e1d903dca41dcab6a2deed8b4caf61bd13b6d7af8374713500570aa929ff9414ae09a0519f4f8772df993300305a395d4871f35bc4ca72b6db57e1f30af8
+  languageName: node
+  linkType: hard
+
 "spawn-command@npm:^0.0.2-1":
   version: 0.0.2
   resolution: "spawn-command@npm:0.0.2"
@@ -26473,6 +27095,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-to-object@npm:^0.4.0":
+  version: 0.4.4
+  resolution: "style-to-object@npm:0.4.4"
+  dependencies:
+    inline-style-parser: "npm:0.1.1"
+  checksum: 3a733080da66952881175b17d65f92985cf94c1ca358a92cf21b114b1260d49b94a404ed79476047fb95698d64c7e366ca7443f0225939e2fb34c38bbc9c7639
+  languageName: node
+  linkType: hard
+
+"style-to-object@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "style-to-object@npm:1.0.5"
+  dependencies:
+    inline-style-parser: "npm:0.2.2"
+  checksum: 39bbc5e9f82a80d6a84c134bf49ba50402bf90304af4281fdd317c9792436c166b2f3a2a3d9a65e3f2a3360b35fe4e352932ec9a51513b9864bfd80b7f5a82e1
+  languageName: node
+  linkType: hard
+
 "styled-jsx@npm:5.1.1":
   version: 5.1.1
   resolution: "styled-jsx@npm:5.1.1"
@@ -27209,6 +27849,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trim-lines@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "trim-lines@npm:3.0.1"
+  checksum: 3a1611fa9e52aa56a94c69951a9ea15b8aaad760eaa26c56a65330dc8adf99cb282fc07cc9d94968b7d4d88003beba220a7278bbe2063328eb23fb56f9509e94
+  languageName: node
+  linkType: hard
+
 "trough@npm:^1.0.0":
   version: 1.0.5
   resolution: "trough@npm:1.0.5"
@@ -27709,6 +28356,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified@npm:^11.0.0":
+  version: 11.0.4
+  resolution: "unified@npm:11.0.4"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    bail: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    extend: "npm:^3.0.0"
+    is-plain-obj: "npm:^4.0.0"
+    trough: "npm:^2.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: b550cdc994d54c84e2e098eb02cfa53535cbc140c148aa3296f235cb43082b499d239110f342fa65eb37ad919472a93cc62f062a83541485a69498084cc87ba1
+  languageName: node
+  linkType: hard
+
 "unified@npm:^9.1.0":
   version: 9.2.2
   resolution: "unified@npm:9.2.2"
@@ -27821,6 +28483,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "unist-util-is@npm:6.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 9419352181eaa1da35eca9490634a6df70d2217815bb5938a04af3a662c12c5607a2f1014197ec9c426fbef18834f6371bfdb6f033040fa8aa3e965300d70e7e
+  languageName: node
+  linkType: hard
+
 "unist-util-position-from-estree@npm:^1.0.0, unist-util-position-from-estree@npm:^1.1.0":
   version: 1.1.2
   resolution: "unist-util-position-from-estree@npm:1.1.2"
@@ -27830,6 +28501,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-position-from-estree@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "unist-util-position-from-estree@npm:2.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 39127bf5f0594e0a76d9241dec4f7aa26323517120ce1edd5ed91c8c1b9df7d6fb18af556e4b6250f1c7368825720ed892e2b6923be5cdc08a9bb16536dc37b3
+  languageName: node
+  linkType: hard
+
 "unist-util-position@npm:^3.0.0, unist-util-position@npm:^3.1.0":
   version: 3.1.0
   resolution: "unist-util-position@npm:3.1.0"
@@ -27837,6 +28517,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: dde3b31e314c98f12b4dc6402f9722b2bf35e96a4f2d463233dd90d7cde2d4928074a7a11eff0a5eb1f4e200f27fc1557e0a64a7e8e4da6558542f251b1b7400
+  languageName: node
+  linkType: hard
+
 "unist-util-remove-position@npm:^4.0.0":
   version: 4.0.2
   resolution: "unist-util-remove-position@npm:4.0.2"
@@ -27847,6 +28536,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-remove-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-remove-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: e8c76da4399446b3da2d1c84a97c607b37d03d1d92561e14838cbe4fdcb485bfc06c06cfadbb808ccb72105a80643976d0660d1fe222ca372203075be9d71105
+  languageName: node
+  linkType: hard
+
 "unist-util-select@npm:^4.0.3":
   version: 4.0.3
   resolution: "unist-util-select@npm:4.0.3"
@@ -27877,6 +28576,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-stringify-position@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-stringify-position@npm:4.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: dfe1dbe79ba31f589108cb35e523f14029b6675d741a79dea7e5f3d098785045d556d5650ec6a8338af11e9e78d2a30df12b1ee86529cded1098da3f17ee999e
+  languageName: node
+  linkType: hard
+
 "unist-util-visit-parents@npm:^3.0.0":
   version: 3.1.1
   resolution: "unist-util-visit-parents@npm:3.1.1"
@@ -27897,6 +28605,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit-parents@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "unist-util-visit-parents@npm:6.0.1"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 51b1a5b0aa23c97d3e03e7288f0cdf136974df2217d0999d3de573c05001ef04cccd246f51d2ebdfb9e8b0ed2704451ad90ba85ae3f3177cf9772cef67f56206
+  languageName: node
+  linkType: hard
+
 "unist-util-visit@npm:^2.0.0":
   version: 2.0.3
   resolution: "unist-util-visit@npm:2.0.3"
@@ -27919,6 +28637,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-visit@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 51434a1d80252c1540cce6271a90fd1a106dbe624997c09ed8879279667fb0b2d3a685e02e92bf66598dcbe6cdffa7a5f5fb363af8fdf90dda6c855449ae39a5
+  languageName: node
+  linkType: hard
+
 "universal-user-agent@npm:^5.0.0":
   version: 5.0.0
   resolution: "universal-user-agent@npm:5.0.0"
@@ -28291,6 +29020,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-message@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "vfile-message@npm:4.0.2"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 07671d239a075f888b78f318bc1d54de02799db4e9dce322474e67c35d75ac4a5ac0aaf37b18801d91c9f8152974ea39678aa72d7198758b07f3ba04fb7d7514
+  languageName: node
+  linkType: hard
+
 "vfile-reporter@npm:^6.0.0":
   version: 6.0.2
   resolution: "vfile-reporter@npm:6.0.2"
@@ -28343,6 +29082,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "vfile@npm:6.0.1"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 443bda43e5ad3b73c5976e987dba2b2d761439867ba7d5d7c5f4b01d3c1cb1b976f5f0e6b2399a00dc9b4eaec611bd9984ce9ce8a75a72e60aed518b10a902d2
+  languageName: node
+  linkType: hard
+
 "vite-node@npm:1.0.4":
   version: 1.0.4
   resolution: "vite-node@npm:1.0.4"
@@ -28485,18 +29235,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitefu@npm:^0.2.4":
-  version: 0.2.4
-  resolution: "vitefu@npm:0.2.4"
-  peerDependencies:
-    vite: ^3.0.0 || ^4.0.0
-  peerDependenciesMeta:
-    vite:
-      optional: true
-  checksum: 78d5e7071c0c4fdfc010f15a3e5bac2d31090ddd48789446fce5b7d0f01496fc6a041b65d3add904365bb0ac6576bb93635f700971c16ffd27cd7c0bee9eb1ae
-  languageName: node
-  linkType: hard
-
 "vitefu@npm:^0.2.5":
   version: 0.2.5
   resolution: "vitefu@npm:0.2.5"
diff --git a/docs/api/main-config-features.md b/docs/api/main-config-features.md
index 81a80502a7bc..f92ae24139a1 100644
--- a/docs/api/main-config-features.md
+++ b/docs/api/main-config-features.md
@@ -54,23 +54,6 @@ Apply decorators from preview.js before decorators from addons or frameworks. [M
 
 <!-- prettier-ignore-end -->
 
-## `legacyMdx1`
-
-Type: `boolean`
-
-Enables support for MDX version 1 as a fallback. Requires [@storybook/mdx1-csf](https://github.com/storybookjs/mdx1-csf) to be installed.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-features-legacy-mdx-1.js.mdx',
-    'common/main-config-features-legacy-mdx-1.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ## `storyStoreV7`
 
 Type: `boolean`
diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md
index 306ee9e94160..498d984cabec 100644
--- a/docs/configure/frameworks-feature-support.md
+++ b/docs/configure/frameworks-feature-support.md
@@ -113,5 +113,5 @@ To align the Storybook ecosystem with the current state of frontend development,
 | Feature                                                                                                  | Status                                                                                                                                                                                                                                                                                                                                                           |
 | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [Knobs](https://github.com/storybookjs/addon-knobs)                                                      | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead.                                                                                                                                                                          |
-| [Storyshots](../writing-tests/snapshot-testing.md)                                                       | The Storyshots addon was officially deprecated with the release of Storybook 7.6 and is no longer actively maintained. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives.                                                                                                                                 |
+| [Storyshots](../writing-tests/snapshot-testing.md)                                                       | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives.                                                                                                                                 |
 | [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially deprecated with the release of Storybook 7.5 and is no longer actively maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.<br/>See the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated) for more information. |
diff --git a/docs/configure/index.md b/docs/configure/index.md
index ee38fd9a4569..f8c904c925d3 100644
--- a/docs/configure/index.md
+++ b/docs/configure/index.md
@@ -56,7 +56,6 @@ Additionally, you can also provide additional feature flags to your Storybook co
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `storyStoreV7`        | Configures Storybook to load stories [on demand](#on-demand-story-loading), rather than during boot up (defaults to `true` as of `v7.0`) <br/> `features: { storyStoreV7: true }`             |
 | `buildStoriesJson`    | Generates `index.json` and `stories.json` files to help story loading with the on-demand mode (defaults to `true` when `storyStoreV7` is `true`) <br/> `features: { buildStoriesJson: true }` |
-| `legacyMdx1`          | Enables support for MDX version 1 as a fallback. Requires [`@storybook/mdx1-csf`](https://github.com/storybookjs/mdx1-csf) <br/> `features: { legacyMdx1: true }`                             |
 
 ## Configure story loading
 
diff --git a/docs/essentials/index.md b/docs/essentials/index.md
index 4cddae864fee..2ef9254bfab7 100644
--- a/docs/essentials/index.md
+++ b/docs/essentials/index.md
@@ -92,7 +92,6 @@ Below is an abridged configuration and table with all the available options for
 | `@storybook/addon-actions`     | N/A                | N/A                                                                                                                                                      |
 | `@storybook/addon-viewport`    | N/A                | N/A                                                                                                                                                      |
 | `@storybook/addon-docs`        | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`.                                                               |
-|                                | `jsxOptions`       | Extends the default Babel configuration options for processing Markdown and MDX files.                                                                   |
 |                                | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.md#lack-of-github-flavored-markdown-gfm). |
 | `@storybook/addon-controls`    | N/A                | N/A                                                                                                                                                      |
 | `@storybook/addon-backgrounds` | N/A                | N/A                                                                                                                                                      |
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
index e0cf30691b06..c2a40c5968fe 100644
--- a/docs/migration-guide.md
+++ b/docs/migration-guide.md
@@ -94,26 +94,6 @@ This shows the errors visually in your editor, which speeds things up a lot. Her
 
 ![MDX errors showing in VS Code](./assets/mdx-vs-code-extension-errors.gif)
 
-#### MDX1 as fallback
-
-If, for some reason, you are unable to get MDX2 working, we’ve implemented legacy MDX1 support as a last resort. MDX1 is deprecated and opt-in, and we recommend against it unless you really need it.
-
-To use MDX1:
-
-1. Install `@storybook/mdx1-csf` as a dev dependency
-2. Add the `legacyMdx1` feature flag to your `.storybook/main.js`:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/main-config-features-legacy-mdx-1.js.mdx',
-    'common/main-config-features-legacy-mdx-1.ts.mdx'
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
 ### storiesOf support discontinued by default
 
 If you use Storybook’s legacy `storiesOf` API, it is no longer supported by default in Storybook 7.
diff --git a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx
deleted file mode 100644
index bb7ce17277ed..000000000000
--- a/docs/snippets/common/storybook-fallback-mdx-install.npm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-npm install @storybook/mdx1-csf --save-dev
-```
diff --git a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx
deleted file mode 100644
index 624f84077d48..000000000000
--- a/docs/snippets/common/storybook-fallback-mdx-install.pnpm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-pnpm add --save-dev @storybook/mdx1-csf
-```
diff --git a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx b/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx
deleted file mode 100644
index 02fadab47356..000000000000
--- a/docs/snippets/common/storybook-fallback-mdx-install.yarn.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-yarn add --dev @storybook/mdx1-csf
-```
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
index 07391e43ad0b..0c11bf383b6f 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
@@ -13,7 +13,6 @@ export default {
       name: '@storybook/addon-docs',
       options: {
         csfPluginOptions: null,
-        jsxOptions: {},
         mdxPluginOptions: {
           mdxCompileOptions: {
             remarkPlugins: [],
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
index b2407522632b..5ddd5f067d6b 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
@@ -15,7 +15,6 @@ const config: StorybookConfig = {
       name: '@storybook/addon-docs',
       options: {
         csfPluginOptions: null,
-        jsxOptions: {},
         mdxPluginOptions: {
           mdxCompileOptions: {
             remarkPlugins: [],
diff --git a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
deleted file mode 100644
index 61117f8c4b02..000000000000
--- a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-npm install @storybook/mdx2-csf --save-dev
-```
diff --git a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
deleted file mode 100644
index 7d7c4a172b0d..000000000000
--- a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-```shell
-yarn add --dev @storybook/mdx2-csf
-```
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 9731c646282b..fcd9f1cce99a 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.0.0-alpha.6","info":{"plain":"- NextJS: Autoconfigure public directory for new projects - [#25279](https://github.com/storybookjs/storybook/pull/25279), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix pre-transform error in Vite 5 - [#25329](https://github.com/storybookjs/storybook/pull/25329), thanks [@yannbf](https://github.com/yannbf)!\n- Vue3: Fix pnp by making compiler-core a dependency - [#25311](https://github.com/storybookjs/storybook/pull/25311), thanks [@shilman](https://github.com/shilman)!"}}
+{"version":"8.0.0-alpha.7","info":{"plain":"- Addon-Docs: Upgrade to MDX3 - [#25303](https://github.com/storybookjs/storybook/pull/25303), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Add Storyshots migration notice - [#25327](https://github.com/storybookjs/storybook/pull/25327), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Fix regex used in upgrade command - [#25284](https://github.com/storybookjs/storybook/pull/25284), thanks [@yannbf](https://github.com/yannbf)!\n- CLI: Remove --use-npm flag - [#25414](https://github.com/storybookjs/storybook/pull/25414), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove unused warnOnLegacyHierarchySeparator type - [#25416](https://github.com/storybookjs/storybook/pull/25416), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Remove vite plugins and drop Vite 3 support - [#25427](https://github.com/storybookjs/storybook/pull/25427), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Maintenance: Add comment to deprecation notice in Button component - [#25411](https://github.com/storybookjs/storybook/pull/25411), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix about page layout - [#25396](https://github.com/storybookjs/storybook/pull/25396), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Viewport: Store viewport, rotation in globals - [#25423](https://github.com/storybookjs/storybook/pull/25423), thanks [@shilman](https://github.com/shilman)!\n- Vite: Fix Vite 5 CJS warnings - [#25005](https://github.com/storybookjs/storybook/pull/25005), thanks [@JReinhold](https://github.com/JReinhold)!"}}
diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md
index a37751b58718..438258b36adb 100644
--- a/docs/writing-tests/snapshot-testing.md
+++ b/docs/writing-tests/snapshot-testing.md
@@ -10,13 +10,13 @@ Storybook is a helpful tool for snapshot testing because every story is essentia
 
 ## Migrating Tests
 
-The Storyshots addon was the original testing solution for Storybook, offering a highly extensible API and a wide range of configuration options for testing. However, it was difficult to set up and maintain, and it needed to be compatible with the latest version of Storybook, which introduced some significant architectural changes, including a high-performance [on-demand story loading](../configure/index.md#on-demand-story-loading) feature. As a result, Storyhots is now officially deprecated, is no longer being maintained, and will be removed in the next major release of Storybook. We recommend following the [migration guide](./storyshots-migration-guide.md) we've prepared to help you during this transition period.
+The Storyshots addon was the original testing solution for Storybook, offering a highly extensible API and a wide range of configuration options for testing. However, it was difficult to set up and maintain, and it needed to be compatible with the latest version of Storybook, which introduced some significant architectural changes, including a high-performance [on-demand story loading](../configure/index.md#on-demand-story-loading) feature. As a result, Storyshots is now officially deprecated, is no longer being maintained, and will be removed in the next major release of Storybook. We recommend following the [migration guide](./storyshots-migration-guide.md) we've prepared to help you during this transition period.
 
 ## Set up Storyshots
 
 <Callout variant="warning">
 
-The Storyshots addon has been deprecated and will be removed in a future release of Storybook. See the [migration guide](./storyshots-migration-guide.md) for more information.
+The Storyshots addon was deprecated and has been removed in Storybook 8. See the [migration guide](./storyshots-migration-guide.md) for more information.
 
 </Callout>
 
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 4d84258f5030..9a6354d05c62 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -191,11 +191,6 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
   // NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
   const require = createRequire(import.meta.url);
   const esbuildLoaderPath = require.resolve('../../code/node_modules/esbuild-loader');
-  const storiesMdxLoaderPath = require.resolve(
-    '../../code/node_modules/@storybook/mdx2-csf/loader'
-  );
-  const babelLoaderPath = require.resolve('babel-loader');
-  const jsxPluginPath = require.resolve('@babel/plugin-transform-react-jsx');
   const webpackFinalCode = `
   (config) => ({
     ...config,
@@ -213,45 +208,13 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
           },
         },
         // Handle MDX files per the addon-docs presets (ish)
-        {
-          test: [/\\/template-stories\\//],
-          include: [/\\.stories\\.mdx$/],
-          use: [
-            {
-              loader: '${babelLoaderPath}',
-              options: {
-                babelrc: false,
-                configFile: false,
-                plugins: ['${jsxPluginPath}'],
-              }
-            },
-            {
-              loader: '${storiesMdxLoaderPath}',
-              options: {
-                skipCsf: false,
-              }
-            }
-          ],
-        },
-        {
-          test: [/\\/template-stories\\//],
-          include: [/\\.mdx$/],
-          exclude: [/\\.stories\\.mdx$/],
+        {        
+          test: /template-stories\\/.*\\.mdx$/,
+          exclude: /\\.stories\\.mdx$/,
           use: [
             {
-              loader: '${babelLoaderPath}',
-              options: {
-                babelrc: false,
-                configFile: false,
-                plugins: ['${jsxPluginPath}'],
-              }
+              loader: require.resolve('@storybook/addon-docs/mdx-loader'),
             },
-            {
-              loader: '${storiesMdxLoaderPath}',
-              options: {
-                skipCsf: true,
-              }
-            }
           ],
         },
         // Ensure no other loaders from the framework apply
diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts
index f5340c037a85..b6e7c930b9fc 100644
--- a/scripts/utils/options.ts
+++ b/scripts/utils/options.ts
@@ -140,11 +140,12 @@ export function getOptions<TOptions extends OptionSpecifier>(
 
       const checkStringValue = (raw: string) => {
         if (option.values && !option.values.includes(raw)) {
-          const possibleOptions = chalk.cyan(option.values.join(', '));
+          const possibleOptions = chalk.cyan(option.values.join('\n'));
           throw new Error(
             dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'.
             
-            These are the possible options: ${possibleOptions}\n\n`
+            These are the possible options:
+              ${possibleOptions}\n\n`
           );
         }
         return raw;
diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml
index e0139f305f0b..6ab5ce649186 100644
--- a/scripts/verdaccio.yaml
+++ b/scripts/verdaccio.yaml
@@ -87,14 +87,6 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
-  '@storybook/mdx1-csf':
-    access: $all
-    publish: $all
-    proxy: npmjs
-  '@storybook/mdx2-csf':
-    access: $all
-    publish: $all
-    proxy: npmjs
   '@storybook/expect':
     access: $all
     publish: $all