diff --git a/.circleci/config.yml b/.circleci/config.yml
index 617cdac42c28..2273bcc5bdf3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -17,7 +17,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:16.20.0
+      - image: cimg/node:18.18.0
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -30,7 +30,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:16.20.0-browsers
+      - image: cimg/node:18.18.0-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -609,22 +609,22 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 36
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 36
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-dev:
@@ -632,7 +632,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 31
+          parallelism: 33
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml
index 474542495848..7d9328578493 100644
--- a/.github/workflows/generate-sandboxes-main.yml
+++ b/.github/workflows/generate-sandboxes-main.yml
@@ -19,12 +19,12 @@ jobs:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
     steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
       - uses: actions/checkout@v3
         with:
           ref: main
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
+        run: yarn generate-sandboxes --local-registry
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
index c20f5491ef30..8a28c4cbb23a 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes-next.yml
@@ -19,12 +19,12 @@ jobs:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
       CLEANUP_SANDBOX_NODE_MODULES: true
     steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
       - uses: actions/checkout@v3
         with:
           ref: next
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
@@ -43,7 +43,7 @@ jobs:
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
       - name: Generate
-        run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug
+        run: yarn generate-sandboxes --local-registry --debug
         working-directory: ./code
       - name: Publish
         run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
diff --git a/.github/workflows/prepare-prerelease.yml b/.github/workflows/prepare-non-patch-release.yml
similarity index 78%
rename from .github/workflows/prepare-prerelease.yml
rename to .github/workflows/prepare-non-patch-release.yml
index e68a7e1ef63a..8d523a17a7ab 100644
--- a/.github/workflows/prepare-prerelease.yml
+++ b/.github/workflows/prepare-non-patch-release.yml
@@ -1,5 +1,5 @@
-name: Prepare prerelease PR
-run-name: Prepare prerelease PR, triggered by ${{ github.triggering_actor }}
+name: Prepare non-patch PR
+run-name: Prepare non-patch PR, triggered by ${{ github.triggering_actor }}
 
 on:
   push:
@@ -34,8 +34,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  prepare-prerelease-pull-request:
-    name: Prepare prerelease pull request
+  prepare-non-patch-pull-request:
+    name: Prepare non-patch pull request
     runs-on: ubuntu-latest
     environment: release
     defaults:
@@ -112,21 +112,37 @@ jobs:
         run: |
           yarn release:version --deferred --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose
 
+      - name: Check release vs prerelease
+        id: is-prerelease
+        run: yarn release:is-prerelease
+
       - name: Write changelog
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose
 
-      - name: 'Commit changes to branch: version-prerelease-from-${{ steps.bump-version.outputs.current-version }}'
+      - name: 'Commit changes to branch: version-non-patch-from-${{ steps.bump-version.outputs.current-version }}'
         working-directory: .
         run: |
           git config --global user.name 'storybook-bot'
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
-          git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }}
+          git add .
+          git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true
+          git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }}
+
+      - name: Resolve merge-conflicts with base branch
+        if: steps.is-prerelease.outputs.prerelease == 'false'
+        working-directory: .
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git config pull.rebase false
+          git pull --no-commit --no-ff origin latest-release || true
+          git checkout --ours .
           git add .
-          git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }}" || true
-          git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git commit --no-verify -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]"
 
       - name: Generate PR description
         id: description
@@ -144,14 +160,15 @@ jobs:
             gh pr edit \
               --repo "${{github.repository }}" \
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
+              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
               --body "${{ steps.description.outputs.description }}"
           else
             gh pr create \
               --repo "${{github.repository }}"\
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
               --label "release" \
-              --base next-release \
-              --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \
+              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
+              --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \
               --body "${{ steps.description.outputs.description }}"
           fi
 
diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml
index e4f8e38df502..5cdc1ba44fcf 100644
--- a/.github/workflows/prepare-patch-release.yml
+++ b/.github/workflows/prepare-patch-release.yml
@@ -88,6 +88,15 @@ jobs:
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
           yarn release:pick-patches
 
+      - name: Cancel when no patches to pick
+        if: steps.pick-patches.outputs.pr-count == '0' && steps.pick-patches.outputs.pr-count != null
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        # From https://stackoverflow.com/a/75809743
+        run: |
+          gh run cancel ${{ github.run_id }}
+          gh run watch ${{ github.run_id }}
+
       - name: Bump version deferred
         id: bump-version
         if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
@@ -121,7 +130,7 @@ jobs:
           git config --global user.email '32066757+storybook-bot@users.noreply.github.com'
           git checkout -b version-patch-from-${{ steps.versions.outputs.current }}
           git add .
-          git commit -m "Write changelog for ${{ steps.versions.outputs.next }}" || true
+          git commit -m "Write changelog for ${{ steps.versions.outputs.next }} [skip ci]" || true
           git push --force origin version-patch-from-${{ steps.versions.outputs.current }}
 
       - name: Generate PR description
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 863b4e9ae7e2..8f02f2d0737c 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -62,8 +62,12 @@ jobs:
         run: |
           yarn install
 
+      - name: Cancel all release preparation runs
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:cancel-preparation-runs
+
       - name: Apply deferred version bump and commit
-        id: version-bump
         working-directory: .
         run: |
           CURRENT_VERSION=$(cat ./code/package.json | jq '.version')
@@ -122,12 +126,11 @@ jobs:
         run: git fetch --tags origin
 
       # when this is a patch release from main, label any patch PRs included in the release
-      # when this is a stable release from next, label ALL patch PRs found, as they will per definition be "patched" now
       - name: Label patch PRs as picked
-        if: github.ref_name == 'latest-release' || (steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease)
+        if: github.ref_name == 'latest-release'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn release:label-patches ${{ steps.target.outputs.target == 'next' && '--all' || '' }}
+        run: yarn release:label-patches
 
       - name: Create GitHub Release
         if: steps.publish-needed.outputs.published == 'false'
@@ -151,8 +154,20 @@ jobs:
           git merge ${{ github.ref_name }}
           git push origin ${{ steps.target.outputs.target }}
 
+      - name: Ensure `next` is a minor version ahead of `main`
+        if: steps.target.outputs.target == 'main'
+        run: |
+          git checkout next
+          git pull
+
+          yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}"
+
+          git add ..
+          git commit -m "Bump next to be one minor ahead of main [skip ci]"
+          git push origin next
+
       - name: Sync CHANGELOG.md from `main` to `next`
-        if: github.ref_name == 'latest-release'
+        if: steps.target.outputs.target == 'main'
         working-directory: .
         run: |
           git fetch origin next
@@ -160,7 +175,7 @@ jobs:
           git pull
           git checkout origin/main ./CHANGELOG.md
           git add ./CHANGELOG.md
-          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]"
+          git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" || true
           git push origin next
 
       - name: Sync version JSONs from `next-release` to `main`
@@ -176,10 +191,6 @@ jobs:
           git commit -m "Update $VERSION_FILE for v${{ steps.version.outputs.current-version }}"
           git push origin main
 
-      - name: Overwrite main with next
-        if: steps.target.outputs.target == 'next' && steps.is-prerelease.outputs.prerelease == 'false'
-        run: git push --force origin next:main
-
       - name: Report job failure to Discord
         if: failure()
         env:
diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
index 6c355ec1714b..650d40d3ff10 100644
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@@ -9,19 +9,18 @@ on:
 
 jobs:
   build:
-    name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
+    name: Core Unit Tests, ${{ matrix.os }}
     strategy:
       fail-fast: false
       matrix:
         os: [windows-latest]
-        node_version: [16]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
-      - name: Set node version to ${{ matrix.node_version }}
+      - name: Set node version
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node_version }}
+          node-version-file: '.nvmrc'
       - name: install and compile
         run: yarn task --task compile --start-from=auto --no-link
       - name: test
diff --git a/.nvmrc b/.nvmrc
index 59ea99ee63cb..4a58985bb483 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16.20
+18.18
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index cc8636b9d524..815d47e351b6 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,28 @@
+## 7.5.0-alpha.7
+
+- Angular: Allow loading standalone directives - [#24448](https://github.com/storybookjs/storybook/pull/24448), thanks [@osnoser1](https://github.com/osnoser1)!
+- Svelte: Fix docs generating when using `lang="ts"` or optional chaining - [#24096](https://github.com/storybookjs/storybook/pull/24096), thanks [@j3rem1e](https://github.com/j3rem1e)!
+- Vite: Support Vite 5 - [#24395](https://github.com/storybookjs/storybook/pull/24395), thanks [@IanVS](https://github.com/IanVS)!
+
+## 7.5.0-alpha.6
+
+- Angular: Introduce argsToTemplate for property and event Bindings - [#24434](https://github.com/storybookjs/storybook/pull/24434), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Controls: Fix select / multiselect when value contains multiple spaces - [#22334](https://github.com/storybookjs/storybook/pull/22334), thanks [@oxcened](https://github.com/oxcened)!
+- Next.js: Support rename font import - [#24406](https://github.com/storybookjs/storybook/pull/24406), thanks [@yoshi2no](https://github.com/yoshi2no)!
+- UI: Update ScrollArea with radix - [#24413](https://github.com/storybookjs/storybook/pull/24413), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- Web-components: Add Lit3 support - [#24437](https://github.com/storybookjs/storybook/pull/24437), thanks [@shilman](https://github.com/shilman)!
+
+## 7.5.0-alpha.5
+
+- Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)!
+- Angular: Fix Angular 15 support and add zone.js v0.14.x support - [#24367](https://github.com/storybookjs/storybook/pull/24367), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Core: Add class name to Storybook error name - [#24371](https://github.com/storybookjs/storybook/pull/24371), thanks [@yannbf](https://github.com/yannbf)!
+- ManagerAPI: Fix bug with story redirection when URL has partial storyId - [#24345](https://github.com/storybookjs/storybook/pull/24345), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Fix Image Context re-use via singleton - [#24146](https://github.com/storybookjs/storybook/pull/24146), thanks [@martinnabhan](https://github.com/martinnabhan)!
+- NextJS: Fix default next image loader when src has params - [#24187](https://github.com/storybookjs/storybook/pull/24187), thanks [@json-betsec](https://github.com/json-betsec)!
+- React: Upgrade `react-docgen` to 6.0.x and improve argTypes - [#23825](https://github.com/storybookjs/storybook/pull/23825), thanks [@shilman](https://github.com/shilman)!
+- Webpack: Display errors on build - [#24377](https://github.com/storybookjs/storybook/pull/24377), thanks [@yannbf](https://github.com/yannbf)!
+
 ## 7.5.0-alpha.4
 
 - CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!
diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
index 0997b757b6ea..d1c4eecdb849 100644
--- a/CONTRIBUTING/RELEASING.md
+++ b/CONTRIBUTING/RELEASING.md
@@ -8,8 +8,8 @@
 - [Introduction](#introduction)
   - [Branches](#branches)
 - [Release Pull Requests](#release-pull-requests)
-  - [Prereleases](#prereleases)
   - [Patch Releases](#patch-releases)
+  - [Non-patch Releases](#non-patch-releases)
   - [Publishing](#publishing)
 - [👉 How to Release](#-how-to-release)
   - [1. Find the Prepared Pull Request](#1-find-the-prepared-pull-request)
@@ -21,6 +21,8 @@
   - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish)
 - [Releasing Locally in an Emergency 🚨](#releasing-locally-in-an-emergency-)
 - [Canary Releases](#canary-releases)
+  - [With GitHub UI](#with-github-ui)
+  - [With the CLI](#with-the-cli)
 - [Versioning Scenarios](#versioning-scenarios)
   - [Prereleases - `7.1.0-alpha.12` -\> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13)
   - [Prerelease promotions - `7.1.0-alpha.13` -\> `7.1.0-beta.0`](#prerelease-promotions---710-alpha13---710-beta0)
@@ -31,7 +33,7 @@
   - [Prerelease of upcoming patch release - `7.0.20` -\> `7.0.21-alpha.0`](#prerelease-of-upcoming-patch-release---7020---7021-alpha0)
   - [Merges to `main` without versioning](#merges-to-main-without-versioning)
 - [FAQ](#faq)
-  - [When should I use the "patch" label?](#when-should-i-use-the-patch-label)
+  - [When should I use the "patch:yes" label?](#when-should-i-use-the-patchyes-label)
   - [How do I make changes to the release tooling/process?](#how-do-i-make-changes-to-the-release-toolingprocess)
   - [Why do I need to re-trigger workflows to update the changelog?](#why-do-i-need-to-re-trigger-workflows-to-update-the-changelog)
   - [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need)
@@ -43,19 +45,19 @@
 
 This document explains the release process for the Storybook monorepo. There are two types:
 
-1. Prereleases and major/minor releases - releasing any content that is on the `next` branch
+1. Non-patch releases - releasing any content that is on the `next` branch, either prereleases or stable releases
 2. Patch releases - picking any content from `next` to `main`, that needs to be patched back to the current stable minor release
 
 The release process is based on automatically created "Release Pull Requests", that when merged will trigger a new version to be released.
 
 A designated Releaser -- which may rotate between core team members -- will go through the release process in the current Release PR. This process is implemented with NodeJS scripts in [`scripts/release`](../scripts/release/) and three GitHub Actions workflows:
 
-- [Prepare Prerelease PR](../.github/workflows/prepare-prerelease.yml)
-- [Prepare Patch PR](../.github/workflows/prepare-patch-release.yml)
+- [Prepare `next` PR](../.github/workflows/prepare-non-patch-release.yml)
+- [Prepare patch PR](../.github/workflows/prepare-patch-release.yml)
 - [Publish](../.github/workflows/publish.yml)
 
 > **Note**
-> This document distinguishes between **patch** releases and **prereleases**. This is a simplification; stable major and minor releases work the same way as prereleases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`.
+> This document distinguishes between **patch** and **non-patch** releases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`.
 
 ### Branches
 
@@ -101,7 +103,7 @@ Two GitHub Actions workflows automatically create release pull requests, one for
 The high-level flow is:
 
 1. When a PR is merged to `next` (or a commit is pushed), both release pull requests are (re)generated.
-2. They create a new branch - `version-(patch|prerelease)-from-<CURRENT-VERSION>`.
+2. They create a new branch - `version-(patch|non-patch)-from-<CURRENT-VERSION>`.
 3. They calculate which version to bump to according to the version strategy.
 4. They update `CHANGELOG(.prerelease).md` with all changes detected.
 5. They commit everything.
@@ -115,62 +117,20 @@ A few key points to note in this flow:
 - The changelogs are committed during the preparation, but the packages are not version bumped and not published until later.
 - The release pull requests don't target their working branches (`next` and `main`), but rather `next-release` and `latest-release`.
 
-### Prereleases
-
-> **Note**
-> Workflow: [`prepare-prerelease.yml`](../.github/workflows/prepare-prerelease.yml)
-
-Prereleases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
-
-The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default.
-
-Prerelease PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared).
-
-The preparation workflow will create a new branch from `next`, called `version-prerelease-from-<CURRENT-PRERELEASE-VERSION>`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`.
-
-Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog.
-
-```mermaid
-%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%%
-gitGraph
-    commit
-    branch next-release
-    commit tag: "7.1.0-alpha.28"
-    checkout next
-    merge next-release
-    commit type: HIGHLIGHT id: "direct commit"
-    branch new-feature
-    commit
-    commit
-    checkout next
-    merge new-feature type: HIGHLIGHT
-    branch some-bugfix
-    commit
-    checkout next
-    merge some-bugfix type: HIGHLIGHT
-    branch version-prerelease-from-7.1.0-alpha.28
-    commit id: "write changelog"
-    checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.28
-    commit id: "bump versions" tag: "7.1.0-alpha.29"
-    checkout next
-    merge next-release
-```
-
 ### Patch Releases
 
 > **Note**
 > Workflow: [`prepare-patch-release.yml`](../.github/workflows/prepare-patch-release.yml)
 
-Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked.
+Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked.
 
-Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike prerelease preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
+Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`.
 
 The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release.
 
-Similar to the prerelease flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-<CURRENT-STABLE-VERSION>`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
+Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-<CURRENT-STABLE-VERSION>`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`.
 
-Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches.
+Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches.
 
 ```mermaid
 gitGraph
@@ -208,21 +168,62 @@ gitGraph
     merge latest-release
 ```
 
+### Non-patch Releases
+
+> **Note**
+> Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml)
+
+Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`.
+
+The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default.
+
+`next`-PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared).
+
+The preparation workflow will create a new branch from `next`, called `version-non-patch-from-<CURRENT-NEXT-VERSION>`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`.
+
+Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog.
+
+```mermaid
+%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%%
+gitGraph
+    commit
+    branch next-release
+    commit tag: "7.1.0-alpha.28"
+    checkout next
+    merge next-release
+    commit type: HIGHLIGHT id: "direct commit"
+    branch new-feature
+    commit
+    commit
+    checkout next
+    merge new-feature type: HIGHLIGHT
+    branch some-bugfix
+    commit
+    checkout next
+    merge some-bugfix type: HIGHLIGHT
+    branch version-non-patch-from-7.1.0-alpha.28
+    commit id: "write changelog"
+    checkout next-release
+    merge version-non-patch-from-7.1.0-alpha.28
+    commit id: "bump versions" tag: "7.1.0-alpha.29"
+    checkout next
+    merge next-release
+```
+
 ### Publishing
 
 > **Note**
 > Workflow: [`publish.yml`](../.github/workflows/publish.yml)
 
-When either a prerelease or a patch release branch is merged into `main` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
+When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks:
 
 1. Bump versions of all packages according to the plan from the prepared PRs
 2. Install dependencies and build all packages.
 3. Publish packages to npm.
-4. (If this is a patch release, add the "**picked**" label to all relevant pull requests.)
+4. (If this is a patch release, add the "**patch:done**" label to all relevant pull requests.)
 5. Create a new GitHub Release, including a version tag in the release branch (`latest-release` or `next-release`).
 6. Merge the release branch into the core branch (`main` or `next`).
 7. (If this is a patch release, copy the `CHANGELOG.md` changes from `main` to `next`.)
-8. (If this is [a promotion from a prerelease to a stable release](#minormajor-releases---710-rc2---710-or-800-rc3---800), force push `next` to `main`.)
 
 The publish workflow runs in the "release" GitHub environment, which has the npm token required to publish packages to the `@storybook` npm organization. For security reasons, this environment can only be accessed from the four "core" branches: `main`, `next`, `latest-release` and `next-release`.
 
@@ -244,7 +245,7 @@ The high-level workflow for a Releaser is:
 
 Look for the release pull request that has been prepared for the type of release you're about to release:
 
-- "Release: Prerelease `<NEXT-VERSION>`" for prereleases
+- "Release: Prerelease|Minor|Major `<NEXT-VERSION>`" for releases from `next`
 - "Release: Patch `<NEXT-VERSION>`" for patch releases
 - "Release: Merge patches to `main` (without version bump)" for patches without releases
 
@@ -266,7 +267,7 @@ It is important to verify that the release includes the right content. Key eleme
 
 For example, check if it's a breaking change that isn't allowed in a minor prerelease, or if it's a new feature in a patch release. If it's not suitable, revert the pull request and notify the author.
 
-Sometimes when doing a patch release, a pull request can have the "patch" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the patch label back again, so it will be part of the next release.
+Sometimes when doing a patch release, a pull request can have the "patch:yes" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch:yes" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the "patch:yes" label back again, so it will be part of the next release.
 
 2. Is the pull request title correct?
 
@@ -300,12 +301,12 @@ When triggering the workflows, always choose the `next` branch as the base, unle
 
 The workflows can be triggered here:
 
-- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml)
+- [Prepare next PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml)
 - [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml)
 
-Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Prereleases](#prereleases). When triggering the prerelease workflow manually, you can optionally add inputs:
+Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs:
 
-![Screenshot of triggering the prerelease workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
+![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png)
 
 See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs.
 
@@ -339,7 +340,7 @@ You can inspect the workflows to see what they are running and copy that, but he
 
 Before you start you should make sure that your working tree is clean and the repository is in a clean state by running `git clean -xdf`.
 
-1. Create a new branch from either `next` (prereleases) or `main` (patches)
+1. Create a new branch from either `next` or `main` (patches)
 2. Get all tags: `git fetch --tags origin`
 3. Install dependencies: `yarn task --task=install --start-from=install`
 4. `cd scripts`
@@ -375,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re
     4. `git add ./CHANGELOG.md`
     5. `git commit -m "Update CHANGELOG.md for v<NEXT_VERSION>"`
     6. `git push origin`
-19. (If prerelease) Sync `versions/next.json` from `next` to `main`
+19. (If non-patch release) Sync `versions/next.json` from `next` to `main`
     1. `git checkout main`
     2. `git pull`
     3. `git checkout origin/next ./docs/versions/next.json`
@@ -434,7 +435,7 @@ There are multiple types of releases that use the same principles, but are done
 
 ### Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`
 
-This is the default strategy for prereleases, there's nothing special needed to trigger this scenario.
+This is the default strategy for Non-patch releases, there's nothing special needed to trigger this scenario.
 
 ### Prerelease promotions - `7.1.0-alpha.13` -> `7.1.0-beta.0`
 
@@ -445,14 +446,12 @@ To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workf
 
 ### Minor/major releases - `7.1.0-rc.2` -> `7.1.0` or `8.0.0-rc.3` -> `8.0.0`
 
-To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose:
+To promote a prerelease to a stable reelase, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose:
 
-- Release type: Patch
+- Release type: Patch, Minor or Major
 - Prerelease ID: Leave empty
 
-The "Patch" release type ensures the current prerelease version gets promoted to a stable version without any major/minor/patch bumps.
-
-This scenario is special as it turns the `next` branch into a stable branch (until the next prerelease). Therefore, this will also force push `next` to `main`, to ensure that `main` contains the latest stable release. Consequently, the history for `main` is lost.
+This scenario is special as it will target `latest-release` instead of `next-release`, and thus merge into `main` when done, and not `next`. So it goes `next` -> `version-non-patch-from-<CURRENT-VERSION-ON_NEXT>` -> `latest-release` -> `main`.
 
 ### First prerelease of new major/minor - `7.1.0` -> `7.2.0-alpha.0` or `8.0.0-alpha.0`
 
@@ -481,13 +480,13 @@ As described in more details in [the Patch Releases section](#patch-releases), t
 
 ## FAQ
 
-### When should I use the "patch" label?
+### When should I use the "patch:yes" label?
 
-Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label?
+Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch:yes"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label?
 
-First of all, patches are only for fixes and minor improvements, and not completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release.
+First of all, patches are only for important and time-sensitive fixes, and not minor improvements or completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release.
 
-Second, any destabilizing changes shouldn't be patched back either. Breaking changes are reserved for major releases, but changes can be destabilizing without being strictly breaking, and those shouldn't be patched back either. An example is moving the settings panel in the manager to a completely different place, but with the same functionality. Many wouldn't consider this breaking because no usage will stop working because of this, but it can be considered a destabilizing change because user behavior have to change as a result of this.
+Second, PRs that changes the code in a big architectural way should ideally not be patched back either, because that makes merge conflicts more likely in the future.
 
 When in doubt ask the core team for their input.
 
@@ -497,12 +496,15 @@ The whole process is based on [GitHub Action workflows](../.github/workflows/) a
 
 The short answer to "how", is to make changes as a regular pull request that is also patched back to `main`.
 
-There's a longer answer too, but it's pretty confusing:
+<details>
+  <summary>There's a longer answer too, but it's pretty confusing</summary>
 
 The scripts run from either `main` or `next`, so if you're changing a release script, you must patch it back to `main` for it to have an effect on patch releases. If you need the change to take effect immediately, you must manually cherry pick it to `main`.
 
 For workflow file changes, they usually run from `next`, but patching them back is recommended for consistency. The "publish" workflow runs from `latest-release` and `next-release`, so you should always patch changes back for _that_. 🙃
 
+</details>
+
 ### Why do I need to re-trigger workflows to update the changelog?
 
 Changes to pull requests' titles, labels or even reverts won't be reflected in the release pull request. This is because the workflow only triggers on pushes to `next`, not when pull request meta data is changed.
@@ -536,7 +538,7 @@ If a pull request does not have any of the above labels at the time of release,
 
 This is most likely because `next` only contains [unreleasable changes](#which-changes-are-considered-releasable-and-what-does-it-mean), which causes the preparation workflow to cancel itself. That's because it doesn't make sense to prepare a new release if all the changes are unreleasable, as that wouldn't bump the version nor write a new changelog entry, so "releasing" it would just merge it back to `next` without any differences.
 
-You can always see the workflows and if they have been cancelled [here for prereleases](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml).
+You can always see the workflows and if they have been cancelled [here for non-patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml).
 
 ### Why do we need separate release branches?
 
@@ -558,11 +560,11 @@ gitGraph
     branch some-simultaneous-bugfix
     commit
     checkout next
-    branch version-prerelease-from-7.1.0-alpha.28
+    branch version-non-patch-from-7.1.0-alpha.28
     commit id
     checkout next
     merge some-simultaneous-bugfix type: HIGHLIGHT id: "whoops!"
-    merge version-prerelease-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29"
+    merge version-non-patch-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29"
 ```
 
 When publishing at the last commit with tag `v7.1.0-alpha.29`, it will publish whatever the content is at that point (all the square dots), which includes the "whoops!" commit from merging the bugfix. But the bugfix was never part of the release pull request because it got prepared before the bugfix was merged in.
@@ -582,19 +584,19 @@ gitGraph
     branch some-simultanous-bugfix
     commit
     checkout next
-    branch version-prerelease-from-7.1.0-alpha.28
+    branch version-non-patch-from-7.1.0-alpha.28
     commit id: "write changelog"
     checkout next
     merge some-simultanous-bugfix id: "whoops!"
     checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.28
+    merge version-non-patch-from-7.1.0-alpha.28
     commit id: "bump versions" tag: "v7.1.0-alpha.29"
     checkout next
     merge next-release
-    branch version-prerelease-from-7.1.0-alpha.29
+    branch version-non-patch-from-7.1.0-alpha.29
     commit id: "write changelog again"
     checkout next-release
-    merge version-prerelease-from-7.1.0-alpha.29
+    merge version-non-patch-from-7.1.0-alpha.29
     commit id: "bump versions again" tag: "v7.1.0-alpha.30"
     checkout next
     merge next-release
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 20df88c627d6..6621d6de5000 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index dda5650f3129..3dc2b4461afc 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 3fb06769672d..fe75629b31e9 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 829829c166b9..a099e1730f6b 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
index aabbda0e4d4c..812f66ebc0e3 100644
--- a/code/addons/controls/template/stories/basics.stories.ts
+++ b/code/addons/controls/template/stories/basics.stories.ts
@@ -26,8 +26,8 @@ export default {
       control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
     },
     inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
-    select: { control: { type: 'select', options: ['a', 'b', 'c'] } },
-    multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } },
+    select: { control: 'select', options: ['a', 'b', 'c', 'double  space'] },
+    multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double  space'] },
     range: { control: 'range' },
     rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
     text: { control: 'text' },
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 39294a7573b8..4f650989b51a 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index e2e95e6e04e3..015afccc0638 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index 1edd50d8d422..33240b29217c 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 22a9069a26a1..36a3a6489265 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 237b5c71bf4b..62dcd0a89340 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -91,7 +91,7 @@
     "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/jest": "next",
     "@storybook/testing-library": "next",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "formik": "^2.2.9",
     "typescript": "~4.9.3"
   },
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index f26d6bc8c8e9..70dd41fc32f1 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index dfbaeb62ac89..b16d8bc3751f 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 4048a81c373e..df93a5a67933 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 77bd3f840529..14f3d3e1c191 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
index 40c1efefff70..dcf764e843cd 100644
--- a/code/addons/storyshots-core/package.json
+++ b/code/addons/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md
index 2175c1d436d4..de7d4d801326 100644
--- a/code/addons/storyshots-puppeteer/README.md
+++ b/code/addons/storyshots-puppeteer/README.md
@@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options:
 - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`)
 - Have a static build of the storybook (for instance, using `npm run build-storybook`)
 
-Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
+Then you will need to reference the storybook URL (`http(s)://...`)
 
 ## _puppeteerTest_
 
@@ -72,21 +72,6 @@ initStoryshots({
 
 The above config will use _<https://my-specific-domain.com:9010>_ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
 
-You may also use a local static build of storybook if you do not want to run the webpack dev-server:
-
-```js
-import initStoryshots from '@storybook/addon-storyshots';
-import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
-
-initStoryshots({
-  suite: 'Puppeteer storyshots',
-  test: puppeteerTest({
-    storybookUrl: 'file:///path/to/my/storybook-static',
-    // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}'
-  }),
-});
-```
-
 ### Specifying options to _goto()_ (Puppeteer API)
 
 You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options)
diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json
index cad9d29cca7b..61d4d5d857d9 100644
--- a/code/addons/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index afc05fcb6e9b..8a7dc88b66c5 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
index 52c20f5dfeb9..94c5dc846336 100644
--- a/code/addons/themes/README.md
+++ b/code/addons/themes/README.md
@@ -2,7 +2,7 @@
 
 Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
 
-![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png)
+![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
 
 ## Usage
 
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 8dc2fdac1a59..928c0f92576d 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -114,6 +114,6 @@
     "unsupportedFrameworks": [
       "react-native"
     ],
-    "icon": ""
+    "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png"
   }
 }
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 225542096e83..6c7ec9f7912e 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index e351d612d53f..0da35956374c 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
index e588c64a0f9e..52272479d6b8 100644
--- a/code/builders/builder-manager/package.json
+++ b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 6e0cc80db781..9793c4e5984d 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "glob": "^10.0.0",
     "rollup": "^3.20.1",
     "slash": "^5.0.0",
@@ -72,7 +72,7 @@
   "peerDependencies": {
     "@preact/preset-vite": "*",
     "typescript": ">= 4.3.x",
-    "vite": "^3.0.0 || ^4.0.0",
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
     "vite-plugin-glimmerx": "*"
   },
   "peerDependenciesMeta": {
diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
index 0a75cc71b3a2..67da9f989692 100644
--- a/code/builders/builder-vite/src/build.ts
+++ b/code/builders/builder-vite/src/build.ts
@@ -1,10 +1,10 @@
-import { build as viteBuild, mergeConfig } from 'vite';
 import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 
 import { sanitizeEnvVars } from './envs';
 
 export async function build(options: Options) {
+  const { build: viteBuild, mergeConfig } = await import('vite');
   const { presets } = options;
 
   const config = await commonConfig(options, 'build');
@@ -21,6 +21,5 @@ export async function build(options: Options) {
   }).build;
 
   const finalConfig = await presets.apply('viteFinal', config, options);
-
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
 }
diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts
index 6a6328cf8f96..44c3163b1def 100644
--- a/code/builders/builder-vite/src/codegen-entries.ts
+++ b/code/builders/builder-vite/src/codegen-entries.ts
@@ -1,15 +1,19 @@
 import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
 import slash from 'slash';
-import { normalizePath } from 'vite';
 import { listStories } from './list-stories';
 
-const absoluteFilesToImport = (files: string[], name: string) =>
+const absoluteFilesToImport = async (
+  files: string[],
+  name: string,
+  normalizePath: (id: string) => string
+) =>
   files
     .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
     .join('\n');
 
 export async function generateVirtualStoryEntryCode(options: Options) {
+  const { normalizePath } = await import('vite');
   const storyEntries = await listStories(options);
   const resolveMap = storyEntries.reduce<Record<string, string>>(
     (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
@@ -18,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) {
   const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
 
   return `
-    ${absoluteFilesToImport(storyEntries, 'story')}
+    ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)}
 
     function loadable(key) {
       return {${modules}}[key];
diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts
index f81c4647f641..5df14d875f25 100644
--- a/code/builders/builder-vite/src/codegen-importfn-script.ts
+++ b/code/builders/builder-vite/src/codegen-importfn-script.ts
@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { normalizePath } from 'vite';
+
 import type { Options } from '@storybook/types';
 import { logger } from '@storybook/node-logger';
 
@@ -26,6 +26,7 @@ function toImportPath(relativePath: string) {
  * @param stories An array of absolute story paths.
  */
 async function toImportFn(stories: string[]) {
+  const { normalizePath } = await import('vite');
   const objectEntries = stories.map((file) => {
     const ext = path.extname(file);
     const relativePath = normalizePath(path.relative(process.cwd(), file));
diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts
index 746373c4c0f5..521952bff15a 100644
--- a/code/builders/builder-vite/src/list-stories.ts
+++ b/code/builders/builder-vite/src/list-stories.ts
@@ -4,9 +4,10 @@ import { glob } from 'glob';
 import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 
 import type { Options } from '@storybook/types';
-import { normalizePath } from 'vite';
 
 export async function listStories(options: Options) {
+  const { normalizePath } = await import('vite');
+
   return (
     await Promise.all(
       normalizeStories(await options.presets.apply('stories', [], options), {
diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts
index 43c64f34a7e4..ddb32c800403 100644
--- a/code/builders/builder-vite/src/optimizeDeps.ts
+++ b/code/builders/builder-vite/src/optimizeDeps.ts
@@ -1,5 +1,4 @@
 import * as path from 'path';
-import { normalizePath, resolveConfig } from 'vite';
 import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
 import type { Options } from '@storybook/types';
 import { listStories } from './list-stories';
@@ -128,6 +127,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<bo
 
 export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
   const { root = process.cwd() } = config;
+  const { normalizePath, resolveConfig } = await import('vite');
   const absoluteStories = await listStories(options);
   const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));
   // TODO: check if resolveConfig takes a lot of time, possible optimizations here
diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
index dd53ab4a4e56..1debc299aa99 100644
--- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
@@ -3,7 +3,6 @@ import findCacheDirectory from 'find-cache-dir';
 import { init, parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
 import { ensureFile, writeFile } from 'fs-extra';
-import { mergeAlias } from 'vite';
 import type { Alias, Plugin } from 'vite';
 
 const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
@@ -38,6 +37,8 @@ const replacementMap = new Map([
  */
 export async function externalGlobalsPlugin(externals: Record<string, string>) {
   await init;
+  const { mergeAlias } = await import('vite');
+
   return {
     name: 'storybook:external-globals-plugin',
     enforce: 'post',
diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
index 743043f7427c..621dae80e647 100644
--- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
@@ -1,32 +1,35 @@
 import { parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
-import { createFilter } from 'vite';
 
-const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/];
-const filter = createFilter(include);
+export async function injectExportOrderPlugin() {
+  const { createFilter } = await import('vite');
 
-export const injectExportOrderPlugin = {
-  name: 'storybook:inject-export-order-plugin',
-  // This should only run after the typescript has been transpiled
-  enforce: 'post',
-  async transform(code: string, id: string) {
-    if (!filter(id)) return undefined;
+  const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/];
+  const filter = createFilter(include);
 
-    // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object,
-    //  and run `await init;` once and then call `parse()` without `await`,
-    //  instead of calling `await parse()` every time.
-    const [, exports] = await parse(code);
+  return {
+    name: 'storybook:inject-export-order-plugin',
+    // This should only run after the typescript has been transpiled
+    enforce: 'post',
+    async transform(code: string, id: string) {
+      if (!filter(id)) return undefined;
 
-    if (exports.includes('__namedExportsOrder')) {
-      // user has defined named exports already
-      return undefined;
-    }
-    const s = new MagicString(code);
-    const orderedExports = exports.filter((e) => e !== 'default');
-    s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
-    return {
-      code: s.toString(),
-      map: s.generateMap({ hires: true, source: id }),
-    };
-  },
-};
+      // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object,
+      //  and run `await init;` once and then call `parse()` without `await`,
+      //  instead of calling `await parse()` every time.
+      const [, exports] = await parse(code);
+
+      if (exports.includes('__namedExportsOrder')) {
+        // user has defined named exports already
+        return undefined;
+      }
+      const s = new MagicString(code);
+      const orderedExports = exports.filter((e) => e !== 'default');
+      s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true, source: id }),
+      };
+    },
+  };
+}
diff --git a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts
index 46ca7045e6d5..c249fc523d1a 100644
--- a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts
+++ b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts
@@ -1,5 +1,4 @@
 import type { Plugin } from 'vite';
-import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 
 /**
@@ -7,7 +6,9 @@ import MagicString from 'magic-string';
  * as hmr boundaries, but vite has a bug which causes them to be treated as boundaries
  * (https://github.com/vitejs/vite/issues/9869).
  */
-export function stripStoryHMRBoundary(): Plugin {
+export async function stripStoryHMRBoundary(): Promise<Plugin> {
+  const { createFilter } = await import('vite');
+
   const filter = createFilter(/\.stories\.([tj])sx?$/);
   return {
     name: 'storybook:strip-hmr-boundary-plugin',
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index 75778971b26a..24db49249909 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -1,5 +1,4 @@
 import * as path from 'path';
-import { loadConfigFromFile, mergeConfig } from 'vite';
 import findCacheDirectory from 'find-cache-dir';
 import type {
   ConfigEnv,
@@ -41,6 +40,8 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
+  const { loadConfigFromFile, mergeConfig } = await import('vite');
+
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
   const projectRoot = path.resolve(options.configDir, '..');
@@ -80,8 +81,8 @@ export async function pluginConfig(options: Options) {
   const plugins = [
     codeGeneratorPlugin(options),
     await csfPlugin(options),
-    injectExportOrderPlugin,
-    stripStoryHMRBoundary(),
+    await injectExportOrderPlugin(),
+    await stripStoryHMRBoundary(),
     {
       name: 'storybook:allow-storybook-dir',
       enforce: 'post',
diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts
index 13489d8580e5..ce4631cabaed 100644
--- a/code/builders/builder-vite/src/vite-server.ts
+++ b/code/builders/builder-vite/src/vite-server.ts
@@ -1,5 +1,4 @@
 import type { Server } from 'http';
-import { createServer } from 'vite';
 import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
@@ -29,5 +28,6 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const finalConfig = await presets.apply('viteFinal', config, options);
 
+  const { createServer } = await import('vite');
   return createServer(await sanitizeEnvVars(options, finalConfig));
 }
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index a9402b286f33..14d610d90cf4 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -66,7 +66,7 @@
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@swc/core": "^1.3.82",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.0.0",
     "babel-plugin-named-exports-order": "^0.0.2",
diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json
index 5b5c38aac14d..81815919529c 100644
--- a/code/deprecated/addons/package.json
+++ b/code/deprecated/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json
index aa0b4152b062..2989b4e0d491 100644
--- a/code/deprecated/channel-postmessage/package.json
+++ b/code/deprecated/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json
index c0dcf7c19306..e86a69d95a33 100644
--- a/code/deprecated/channel-websocket/package.json
+++ b/code/deprecated/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json
index dfe7cc6c40d4..f98cb0bfd8e9 100644
--- a/code/deprecated/client-api/package.json
+++ b/code/deprecated/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json
index 40d57044f9b0..5f4b3e91ae22 100644
--- a/code/deprecated/core-client/package.json
+++ b/code/deprecated/core-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-client",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json
index 0fa3e479a599..739058f57b4c 100644
--- a/code/deprecated/manager-api-shim/package.json
+++ b/code/deprecated/manager-api-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Manager API (facade)",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json
index b5845b28acd9..c7313c8955e7 100644
--- a/code/deprecated/preview-web/package.json
+++ b/code/deprecated/preview-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-web",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json
index 2362d4bab5c7..9b71f7c27b85 100644
--- a/code/deprecated/store/package.json
+++ b/code/deprecated/store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
@@ -55,6 +55,5 @@
     ],
     "platform": "node",
     "shim": "@storybook/preview-api/dist/store"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+  }
 }
diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
index bcbf96019947..df376782aae8 100644
--- a/code/e2e-tests/addon-controls.spec.ts
+++ b/code/e2e-tests/addon-controls.spec.ts
@@ -70,4 +70,31 @@ test.describe('addon-controls', () => {
     const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue();
     await expect(label).toEqual('Hello world');
   });
+
+  test('should set select option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-select').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double  space');
+    await expect(page).toHaveURL(/.*select:double\+\+space.*/);
+  });
+
+  test('should set multiselect option when value contains double spaces', async ({ page }) => {
+    await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
+
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+    await sbPage.viewAddonPanel('Controls');
+    await sbPage.panelContent().locator('#control-multiSelect').selectOption('double  space');
+
+    await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue(
+      'double  space'
+    );
+
+    await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/);
+  });
 });
diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts
new file mode 100644
index 000000000000..007f1182c781
--- /dev/null
+++ b/code/e2e-tests/framework-svelte.spec.ts
@@ -0,0 +1,40 @@
+/* eslint-disable jest/no-disabled-tests */
+import { test, expect } from '@playwright/test';
+import process from 'process';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
+
+test.describe('Svelte', () => {
+  test.skip(
+    // eslint-disable-next-line jest/valid-title
+    !templateName?.includes('svelte'),
+    'Only run this test on Svelte'
+  );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('JS story has auto-generated args table', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs');
+    const root = sbPage.previewRoot();
+    const argsTable = root.locator('.docblock-argstable');
+    await expect(argsTable).toContainText('Rounds the button');
+  });
+
+  test('TS story has auto-generated args table', async ({ page }) => {
+    // eslint-disable-next-line jest/valid-title
+    test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates');
+    const sbPage = new SbPage(page);
+
+    await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs');
+    const root = sbPage.previewRoot();
+    const argsTable = root.locator('.docblock-argstable');
+    await expect(argsTable).toContainText('Rounds the button');
+  });
+});
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 50ecec42445c..7b340354946d 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -51,7 +51,7 @@
     "@storybook/preview-api": "workspace:*",
     "@storybook/telemetry": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts
index a33b1f4b9776..2c72b4d46962 100644
--- a/code/frameworks/angular/src/builders/build-storybook/index.ts
+++ b/code/frameworks/angular/src/builders/build-storybook/index.ts
@@ -49,6 +49,7 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'webpackStatsJson'
     | 'disableTelemetry'
     | 'debugWebpack'
+    | 'previewUrl'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
@@ -90,6 +91,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         debugWebpack,
         disableTelemetry,
         assets,
+        previewUrl,
       } = options;
 
       const standaloneOptions: StandaloneBuildOptions = {
@@ -111,6 +113,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         tsConfig,
         webpackStatsJson,
         debugWebpack,
+        previewUrl,
       };
 
       return standaloneOptions;
diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json
index 51f24c17a46a..958e6ea7cc1f 100644
--- a/code/frameworks/angular/src/builders/build-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/build-storybook/schema.json
@@ -67,6 +67,10 @@
       "description": "Write Webpack Stats JSON to disk",
       "default": false
     },
+    "previewUrl": {
+      "type": "string",
+      "description": "Disables the default storybook preview and lets you use your own"
+    },
     "styles": {
       "type": "array",
       "description": "Global styles to be included in the build.",
diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts
index cff33f886fb6..b9fabda386f7 100644
--- a/code/frameworks/angular/src/builders/start-storybook/index.ts
+++ b/code/frameworks/angular/src/builders/start-storybook/index.ts
@@ -54,6 +54,9 @@ export type StorybookBuilderOptions = JsonObject & {
     | 'open'
     | 'docs'
     | 'debugWebpack'
+    | 'webpackStatsJson'
+    | 'loglevel'
+    | 'previewUrl'
   >;
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
@@ -105,6 +108,9 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         initialPath,
         open,
         debugWebpack,
+        loglevel,
+        webpackStatsJson,
+        previewUrl,
       } = options;
 
       const standaloneOptions: StandaloneOptions = {
@@ -133,6 +139,9 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         initialPath,
         open,
         debugWebpack,
+        loglevel,
+        webpackStatsJson,
+        previewUrl,
       };
 
       return standaloneOptions;
diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json
index 78553109681c..d44d9c9f4f14 100644
--- a/code/frameworks/angular/src/builders/start-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/start-storybook/schema.json
@@ -128,6 +128,20 @@
     "initialPath": {
       "type": "string",
       "description": "URL path to be appended when visiting Storybook for the first time"
+    },
+    "webpackStatsJson": {
+      "type": "string",
+      "description": "Write Webpack Stats JSON to disk",
+      "default": false
+    },
+    "previewUrl": {
+      "type": "string",
+      "description": "Disables the default storybook preview and lets you use your own"
+    },
+    "loglevel": {
+      "type": "string",
+      "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+      "pattern": "(silly|verbose|info|warn|silent)"
     }
   },
   "additionalProperties": false,
diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts
index 45d2fb73e62f..4c8778cdc31a 100644
--- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts
+++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts
@@ -18,6 +18,7 @@ const TestComponent1 = Component({})(class {});
 const TestComponent2 = Component({})(class {});
 const StandaloneTestComponent = Component({ standalone: true })(class {});
 const TestDirective = Directive({})(class {});
+const StandaloneTestDirective = Directive({ standalone: true })(class {});
 const TestModuleWithDeclarations = NgModule({ declarations: [TestComponent1] })(class {});
 const TestModuleWithImportsAndProviders = NgModule({
   imports: [TestModuleWithDeclarations],
@@ -118,6 +119,20 @@ describe('PropertyExtractor', () => {
         StandaloneTestComponent,
       ]);
     });
+
+    it('should return standalone directives', () => {
+      const imports = extractImports(
+        {
+          imports: [TestModuleWithImportsAndProviders],
+        },
+        StandaloneTestDirective
+      );
+      expect(imports).toEqual([
+        CommonModule,
+        TestModuleWithImportsAndProviders,
+        StandaloneTestDirective,
+      ]);
+    });
   });
 
   describe('extractDeclarations', () => {
diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
index d8664259e158..e6db7384488f 100644
--- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
+++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
@@ -173,7 +173,7 @@ export class PropertyExtractor implements NgModuleMetadata {
     const isPipe = decorators.some((d) => this.isDecoratorInstanceOf(d, 'Pipe'));
 
     const isDeclarable = isComponent || isDirective || isPipe;
-    const isStandalone = isComponent && decorators.some((d) => d.standalone);
+    const isStandalone = (isComponent || isDirective) && decorators.some((d) => d.standalone);
 
     return { isDeclarable, isStandalone };
   };
diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts
new file mode 100644
index 000000000000..88db1208a6ee
--- /dev/null
+++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts
@@ -0,0 +1,102 @@
+import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path
+
+describe('argsToTemplate', () => {
+  it('should correctly convert args to template string and exclude undefined values', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: undefined,
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include properties from include option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should include non-undefined properties from include option', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should exclude properties from exclude option', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop3]="prop3"');
+  });
+
+  it('should exclude properties from exclude option and undefined properties', () => {
+    const args: Record<string, any> = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: undefined,
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      exclude: ['prop2'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1"');
+  });
+
+  it('should prioritize include over exclude when both options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+      prop3: 'value3',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {
+      include: ['prop1', 'prop2'],
+      exclude: ['prop2', 'prop3'],
+    };
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should work when neither include nor exclude options are given', () => {
+    const args = {
+      prop1: 'value1',
+      prop2: 'value2',
+    };
+    const options: ArgsToTemplateOptions<keyof typeof args> = {};
+    const result = argsToTemplate(args, options);
+    expect(result).toBe('[prop1]="prop1" [prop2]="prop2"');
+  });
+
+  it('should bind events correctly when value is a function', () => {
+    const args = { event1: () => {}, event2: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('(event1)="event1($event)" (event2)="event2($event)"');
+  });
+
+  it('should mix properties and events correctly', () => {
+    const args = { input: 'Value1', event1: () => {} };
+    const result = argsToTemplate(args, {});
+    expect(result).toEqual('[input]="input" (event1)="event1($event)"');
+  });
+});
diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts
new file mode 100644
index 000000000000..0072aa84743d
--- /dev/null
+++ b/code/frameworks/angular/src/client/argsToTemplate.ts
@@ -0,0 +1,74 @@
+/**
+ * Options for controlling the behavior of the argsToTemplate function.
+ *
+ * @template T The type of the keys in the target object.
+ */
+export interface ArgsToTemplateOptions<T> {
+  /**
+   * An array of keys to specifically include in the output.
+   * If provided, only the keys from this array will be included in the output,
+   * irrespective of the `exclude` option. Undefined values will still be excluded from the output.
+   */
+  include?: Array<T>;
+  /**
+   * An array of keys to specifically exclude from the output.
+   * If provided, these keys will be omitted from the output. This option is
+   * ignored if the `include` option is also provided
+   */
+  exclude?: Array<T>;
+}
+
+/**
+ * Converts an object of arguments to a string of property and event bindings and excludes undefined values.
+ * Why? Because Angular treats undefined values in property bindings as an actual value
+ * and does not apply the default value of the property as soon as the binding is set.
+ * This feels counter-intuitive and is a common source of bugs in stories.
+ * @example
+ * ```ts
+ * // component.ts
+ *ㅤ@Component({ selector: 'example' })
+ *  export class ExampleComponent {
+ *   ㅤ@Input() input1: string = 'Default Input1';
+ *   ㅤ@Input() input2: string = 'Default Input2';
+ *   ㅤ@Output() click = new EventEmitter();
+ *  }
+ *
+ * // component.stories.ts
+ * import { argsToTemplate } from '@storybook/angular';
+ * export const Input1: Story = {
+ *  render: (args) => ({
+ *    props: args,
+ *    // Problem1: <example [input1]="input1" [input2]="input2" (click)="click($event)"></example>
+ *    // This will set input2 to undefined and the internal default value will not be used.
+ *    // Problem2: <example [input1]="input1" (click)="click($event)"></example>
+ *    // The default value of input2 will be used, but it is not overridable by the user via controls.
+ *    // Solution: Now the controls will be applicable to both input1 and input2, and the default values will be used if the user does not override them.
+ *    template: `<example ${argsToTemplate(args)}"></example>`,
+ *  }),
+ *  args: {
+ *    // In this Story, we want to set the input1 property, and the internal default property of input2 should be used.
+ *    input1: 'Input 1',
+ *    click: { action: 'clicked' },
+ *  },
+ *};
+ * ```
+ */
+export function argsToTemplate<A extends Record<string, any>>(
+  args: A,
+  options: ArgsToTemplateOptions<keyof A> = {}
+) {
+  const includeSet = options.include ? new Set(options.include) : null;
+  const excludeSet = options.exclude ? new Set(options.exclude) : null;
+
+  return Object.entries(args)
+    .filter(([key]) => args[key] !== undefined)
+    .filter(([key]) => {
+      if (includeSet) return includeSet.has(key);
+      if (excludeSet) return !excludeSet.has(key);
+      return true;
+    })
+    .map(([key, value]) =>
+      typeof value === 'function' ? `(${key})="${key}($event)"` : `[${key}]="${key}"`
+    )
+    .join(' ');
+}
diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts
index bfc209efb4d4..2377678bda2e 100644
--- a/code/frameworks/angular/src/client/index.ts
+++ b/code/frameworks/angular/src/client/index.ts
@@ -10,6 +10,7 @@ export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
 
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
+export { argsToTemplate } from './argsToTemplate';
 
 // optimization: stop HMR propagation in webpack
 if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
index d23f3896359f..11dc4d7cd32d 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
@@ -1,24 +1,29 @@
-import { Args } from '@storybook/angular';
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
 import { DocButtonComponent } from './doc-button.component';
 
-export default {
+const meta: Meta<DocButtonComponent<any>> = {
   component: DocButtonComponent,
 };
 
-export const Basic = (args: Args) => ({
-  props: args,
-});
-Basic.args = { label: 'Args test', isDisabled: false };
-Basic.ArgTypes = {
-  theDefaultValue: {
-    table: {
-      defaultValue: { summary: 'Basic default value' },
+export default meta;
+
+type Story = StoryObj<DocButtonComponent<any>>;
+
+export const Basic: Story = {
+  args: { label: 'Args test', isDisabled: false },
+  argTypes: {
+    theDefaultValue: {
+      table: {
+        defaultValue: { summary: 'Basic default value' },
+      },
     },
   },
 };
 
-export const WithTemplate = (args: Args) => ({
-  props: args,
-  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
-});
-WithTemplate.args = { label: 'Template test', appearance: 'primary' };
+export const WithTemplate: Story = {
+  args: { label: 'Template test', appearance: 'primary' },
+  render: (args) => ({
+    props: args,
+    template: `<my-button ${argsToTemplate(args)}></my-button>`,
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
index b734b93bf40d..e949d8e88252 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocDirective } from './doc-directive.directive';
 
-export default {
+const meta: Meta<DocDirective> = {
   component: DocDirective,
 };
 
-const modules = {
-  declarations: [DocDirective],
-};
+export default meta;
+
+type Story = StoryObj<DocDirective>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocDirective],
+    },
+    template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
index eca5e10fb11d..7741bca9ba88 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocInjectableService } from './doc-injectable.service';
 
-export default {
+const meta: Meta<DocInjectableService> = {
   component: DocInjectableService,
 };
 
-const modules = {
-  provider: [DocInjectableService],
-};
+export default meta;
+
+type Story = StoryObj<DocInjectableService>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div><h1>DocInjectable</h1></div>',
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      providers: [DocInjectableService],
+    },
+    template: '<div><h1>DocInjectable</h1></div>',
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
index 6ab616f16ee2..018ab04a9951 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
@@ -1,14 +1,19 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { DocPipe } from './doc-pipe.pipe';
 
-export default {
+const meta: Meta<DocPipe> = {
   component: DocPipe,
 };
 
-const modules = {
-  declarations: [DocPipe],
-};
+export default meta;
+
+type Story = StoryObj<DocPipe>;
 
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
-});
+export const Basic: Story = {
+  render: () => ({
+    moduleMetadata: {
+      declarations: [DocPipe],
+    },
+    template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
index 228e2d7b9045..0396bae99acc 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
@@ -1,8 +1,8 @@
 import { FormsModule } from '@angular/forms';
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
-export default {
+const meta: Meta<CustomCvaComponent> = {
   // title: 'Basics / Angular forms / ControlValueAccessor',
   component: CustomCvaComponent,
   decorators: [
@@ -17,11 +17,16 @@ export default {
   ],
 } as Meta;
 
-export const SimpleInput: StoryFn = () => ({
-  props: {
-    ngModel: 'Type anything',
-    ngModelChange: () => {},
-  },
-});
+export default meta;
 
-SimpleInput.storyName = 'Simple input';
+type Story = StoryObj<CustomCvaComponent>;
+
+export const SimpleInput: Story = {
+  name: 'Simple input',
+  render: () => ({
+    props: {
+      ngModel: 'Type anything',
+      ngModelChange: () => {},
+    },
+  }),
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
index d935de5215d7..73894b83b34a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
@@ -1,8 +1,13 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { AttributeSelectorComponent } from './attribute-selector.component';
 
-export default {
+const meta: Meta<AttributeSelectorComponent> = {
   // title: 'Basics / Component / With Complex Selectors',
   component: AttributeSelectorComponent,
 };
 
-export const AttributeSelectors = {};
+export default meta;
+
+type Story = StoryObj<AttributeSelectorComponent>;
+
+export const AttributeSelectors: Story = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
index 647ca86d8d67..b79bd371baf3 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import {
   EnumsComponent,
   EnumNumeric,
@@ -6,19 +6,22 @@ import {
   EnumStringValues,
 } from './enums.component';
 
-export default {
+const meta: Meta<EnumsComponent> = {
   // title: 'Basics / Component / With Enum Types',
   component: EnumsComponent,
-} as Meta;
+};
+
+export default meta;
+
+type Story = StoryObj<EnumsComponent>;
 
-export const Basic: StoryFn = (args) => ({
-  props: args,
-});
-Basic.args = {
-  unionType: 'union a',
-  aliasedUnionType: 'Type Alias 1',
-  enumNumeric: EnumNumeric.FIRST,
-  enumNumericInitial: EnumNumericInitial.UNO,
-  enumStrings: EnumStringValues.PRIMARY,
-  enumAlias: EnumNumeric.FIRST,
+export const Basic: Story = {
+  args: {
+    unionType: 'Union A',
+    aliasedUnionType: 'Type Alias 1',
+    enumNumeric: EnumNumeric.FIRST,
+    enumNumericInitial: EnumNumericInitial.UNO,
+    enumStrings: EnumStringValues.PRIMARY,
+    enumAlias: EnumNumeric.FIRST,
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
index a206115f5de7..271e6a3fcc9d 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
@@ -1,12 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { BaseButtonComponent } from './base-button.component';
 
-export default {
+const meta: Meta<BaseButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: BaseButtonComponent,
 };
 
-export const BaseButton = () => ({
-  props: {
+export default meta;
+
+export const BaseButton: StoryObj<BaseButtonComponent> = {
+  args: {
     label: 'this is label',
   },
-});
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
index baefe65c4f58..bb5c5fb02bcb 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
@@ -1,13 +1,18 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { IconButtonComponent } from './icon-button.component';
 
-export default {
+const meta: Meta<IconButtonComponent> = {
   // title: 'Basics / Component / With Inheritance',
   component: IconButtonComponent,
 };
 
-export const IconButton = () => ({
-  props: {
+export default meta;
+
+type Story = StoryObj<IconButtonComponent>;
+
+export const IconButton: Story = {
+  args: {
     icon: 'this is icon',
     label: 'this is label',
   },
-});
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index 0512582aca6e..f8185f8eb80a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular';
+import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'sb-button',
@@ -17,7 +17,7 @@ class SbButtonComponent {
   color = '#5eadf5';
 }
 
-export default {
+const meta: Meta<SbButtonComponent> = {
   // title: 'Basics / Component / With ng-content / Button with different contents',
   // Implicitly declares the component to Angular
   // This will be the component described by the addon docs
@@ -35,24 +35,24 @@ export default {
   },
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<SbButtonComponent>;
+
 // By default storybook uses the default export component if no template or component is defined in the story
 // So Storybook nests the component twice because it is first added by the componentWrapperDecorator.
-export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({});
+export const AlwaysDefineTemplateOrComponent: Story = {};
 
-export const EmptyButton: StoryFn = () => ({
-  template: '',
-});
-
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args['content']}`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const EmptyButton: Story = {
+  render: () => ({
+    template: '',
+  }),
 };
-WithDynamicContentAndArgs.args = { content: 'My button text' };
 
-export const InH1: StoryFn = () => ({
-  template: 'My button in h1',
-});
-InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
-InH1.storyName = 'In <h1>';
+export const InH1: Story = {
+  render: () => ({
+    template: 'My button in h1',
+  }),
+  decorators: [componentWrapperDecorator((story) => `<h1>${story}</h1>`)],
+  name: 'In <h1>',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
index 13cc2eb550c5..71b0fe84df38 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { Meta, StoryFn } from '@storybook/angular/';
+import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-with-ng-content',
@@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/';
 })
 class WithNgContentComponent {}
 
-export default {
+const meta: Meta<WithNgContentComponent> = {
   // title: 'Basics / Component / With ng-content / Simple',
   component: WithNgContentComponent,
 } as Meta;
 
-export const OnlyComponent: StoryFn = () => ({});
+export default meta;
 
-export const Default: StoryFn = () => ({
-  template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
-});
+type Story = StoryObj<WithNgContentComponent & { content: string }>;
 
-export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
-});
-WithDynamicContentAndArgs.argTypes = {
-  content: { control: 'text' },
+export const OnlyComponent: Story = {};
+
+export const Default: Story = {
+  render: () => ({
+    template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
+  }),
+};
+
+export const WithDynamicContentAndArgs: Story = {
+  render: (args) => ({
+    template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
+  }),
+  args: { content: 'Default content' },
+  argTypes: {
+    content: { control: 'text' },
+  },
 };
-WithDynamicContentAndArgs.args = { content: 'Default content' };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
index b833424367bb..9ac53d2dde03 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
@@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
   }
 }
 
-export default {
+const meta: Meta<OnDestroyComponent> = {
   // title: 'Basics / Component / with ngOnDestroy',
   component: OnDestroyComponent,
   parameters: {
@@ -37,4 +37,8 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: StoryObj = {};
+export default meta;
+
+type Story = StoryObj<OnDestroyComponent>;
+
+export const SimpleComponent: Story = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
index 6ad452797bc2..cc672938a7f2 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
-export default {
+const meta: Meta<OnPushBoxComponent> = {
   // title: 'Basics / Component / With OnPush strategy',
   component: OnPushBoxComponent,
   argTypes: {
@@ -12,10 +12,12 @@ export default {
     word: 'The text',
     bgColor: '#FFF000',
   },
-} as Meta;
+};
 
-export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({
-  props: args,
-});
-ClassSpecifiedComponentWithOnPushAndArgs.storyName =
-  'Class-specified component with OnPush and Args';
+export default meta;
+
+type Story = StoryObj<OnPushBoxComponent>;
+
+export const ClassSpecifiedComponentWithOnPushAndArgs: Story = {
+  name: 'Class-specified component with OnPush and Args',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
index 6c8f9254208f..9a4a8e53c577 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
@@ -1,9 +1,9 @@
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
 
-export default {
+const meta: Meta<WithPipeComponent> = {
   // title: 'Basics / Component / With Pipes',
   component: WithPipeComponent,
   decorators: [
@@ -11,21 +11,26 @@ export default {
       declarations: [CustomPipePipe],
     }),
   ],
-} as Meta;
+};
 
-export const Simple: StoryFn = () => ({
-  props: {
-    field: 'foobar',
-  },
-});
+export default meta;
+
+type Story = StoryObj<WithPipeComponent>;
 
-export const WithArgsStory: StoryFn = (args) => ({
-  props: args,
-});
-WithArgsStory.storyName = 'With args';
-WithArgsStory.argTypes = {
-  field: { control: 'text' },
+export const Simple: Story = {
+  render: () => ({
+    props: {
+      field: 'foobar',
+    },
+  }),
 };
-WithArgsStory.args = {
-  field: 'Foo Bar',
+
+export const WithArgsStory: Story = {
+  name: 'With args',
+  argTypes: {
+    field: { control: 'text' },
+  },
+  args: {
+    field: 'Foo Bar',
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
index fea1bc95c15f..381c272fb96d 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
@@ -1,26 +1,30 @@
-import { Args } from '@storybook/angular';
+import { Args, Meta, StoryObj } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
-export default {
+const meta: Meta<DiComponent> = {
   // title: 'Basics / Component / With Provider',
   component: DiComponent,
 };
 
-export const InputsAndInjectDependencies = () => ({
-  props: {
-    title: 'Component dependencies',
-  },
-});
+export default meta;
 
-InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
+type Story = StoryObj<DiComponent>;
 
-export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
-  props: args,
-});
-InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
-InputsAndInjectDependenciesWithArgs.argTypes = {
-  title: { control: 'text' },
+export const InputsAndInjectDependencies: Story = {
+  render: () => ({
+    props: {
+      title: 'Component dependencies',
+    },
+  }),
+  name: 'inputs and inject dependencies',
 };
-InputsAndInjectDependenciesWithArgs.args = {
-  title: 'Component dependencies',
+
+export const InputsAndInjectDependenciesWithArgs: Story = {
+  name: 'inputs and inject dependencies with args',
+  argTypes: {
+    title: { control: 'text' },
+  },
+  args: {
+    title: 'Component dependencies',
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
index 0818ff28cc6f..c0cd88c09bc2 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
@@ -1,10 +1,15 @@
+import { Meta, StoryObj } from '@storybook/angular';
 import { StyledComponent } from './styled.component';
 
-export default {
+const meta: Meta = {
   // title: 'Basics / Component / With StyleUrls',
   component: StyledComponent,
 };
 
-export const ComponentWithStyles = () => ({});
+export default meta;
 
-ComponentWithStyles.storyName = 'Component with styles';
+type Story = StoryObj<StyledComponent>;
+
+export const ComponentWithStyles: Story = {
+  name: 'Component with styles',
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts
new file mode 100644
index 000000000000..2071a6db7738
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-template',
+  imports: [CommonModule],
+  template: `<div (click)="event($event)">
+    Label: {{ label }}
+    <br />
+    Label2: {{ label2 }}
+    <br />
+    <button (click)="inc()">+</button>
+  </div>`,
+  styles: [],
+  standalone: true,
+})
+export class Template {
+  @Input() label = 'default label';
+
+  @Input() label2 = 'default label2';
+
+  @Output() changed = new EventEmitter<string>();
+
+  inc() {
+    this.changed.emit('Increase');
+  }
+}
diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts
new file mode 100644
index 000000000000..55639870f262
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts
@@ -0,0 +1,24 @@
+import { Meta, StoryObj, argsToTemplate } from '@storybook/angular';
+import { Template } from './template.component';
+
+const meta: Meta<Template> = {
+  component: Template,
+};
+
+export default meta;
+
+type Story = StoryObj<Template>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<app-template ${argsToTemplate(args)}></app-template>`,
+  }),
+};
+
+export const SetOneInput: Story = {
+  ...Default,
+  args: {
+    label: 'Label Example 1',
+  },
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index beff6c157988..3c0327c64a71 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -1,8 +1,8 @@
 import { OnInit, Type, Component, Injector, Input } from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { Meta, componentWrapperDecorator, moduleMetadata, StoryObj } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
   component: WithoutSelectorComponent,
   decorators: [
@@ -12,6 +12,10 @@ export default {
   ],
 } as Meta;
 
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
 // Advanced example with custom *ngComponentOutlet
 
 @Component({
@@ -51,23 +55,22 @@ class NgComponentOutletWrapperComponent implements OnInit {
 
 // Live changing of args by controls does not work at the moment. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({
-  props: args,
-});
-WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet';
-WithCustomNgComponentOutletWrapper.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' };
-WithCustomNgComponentOutletWrapper.decorators = [
-  moduleMetadata({
-    declarations: [NgComponentOutletWrapperComponent],
-  }),
-  componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
-    name: args.name,
+export const WithCustomNgComponentOutletWrapper: Story = {
+  name: 'Custom wrapper *NgComponentOutlet',
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
+  },
+  args: { name: 'Color', color: 'green' },
+  decorators: [
+    moduleMetadata({
+      declarations: [NgComponentOutletWrapperComponent],
+    }),
+    componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
+      name: args.name,
 
-    color: args['color'],
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];
+      color: args['color'],
+      componentOutlet: WithoutSelectorComponent,
+    })),
+  ],
+};
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
deleted file mode 100644
index 5256c9de2894..000000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  AfterViewInit,
-  ComponentFactoryResolver,
-  Type,
-  Component,
-  Input,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
-
-import { WithoutSelectorComponent } from './without-selector.component';
-
-export default {
-  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
-  component: WithoutSelectorComponent,
-  decorators: [
-    moduleMetadata({
-      entryComponents: [WithoutSelectorComponent],
-    }),
-  ],
-} as Meta;
-
-// Advanced example with custom ComponentFactoryResolver
-
-@Component({ selector: 'component-factory-wrapper', template: '' })
-class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
-
-  @Input()
-  componentOutlet?: Type<unknown>;
-
-  @Input()
-  args: any;
-
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private componentFactoryResolver: ComponentFactoryResolver
-  ) {}
-
-  ngAfterViewInit() {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet!
-    );
-    const containerRef = this.viewContainerRef;
-    containerRef.clear();
-    const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance as any, this.args);
-  }
-}
-
-// Live changing of args by controls does not work at the moment. When changing args storybook does not fully
-// reload and therefore does not take into account the change of provider.
-export const WithComponentFactoryResolver: StoryFn = (args) => ({
-  props: args,
-});
-WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver';
-WithComponentFactoryResolver.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
-};
-WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' };
-WithComponentFactoryResolver.decorators = [
-  moduleMetadata({
-    declarations: [ComponentFactoryWrapperComponent],
-  }),
-  componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({
-    args,
-    componentOutlet: WithoutSelectorComponent,
-  })),
-];
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
index dec59310b0c3..a7f635252a69 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
@@ -1,7 +1,7 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryObj, Meta, moduleMetadata } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
-export default {
+const meta: Meta<WithoutSelectorComponent> = {
   // title: 'Basics / Component / without selector',
   component: WithoutSelectorComponent,
   decorators: [
@@ -11,20 +11,26 @@ export default {
   ],
 } as Meta;
 
-export const SimpleComponent: StoryFn = () => ({});
+export default meta;
+
+type Story = StoryObj<WithoutSelectorComponent>;
+
+export const SimpleComponent: Story = {};
 
 // Live changing of args by controls does not work for now. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
-  props: args,
-  moduleMetadata: {
-    providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
-    ],
+export const WithInjectionTokenAndArgs: StoryObj = {
+  render: (args) => ({
+    props: args,
+    moduleMetadata: {
+      providers: [
+        { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
+      ],
+    },
+  }),
+  argTypes: {
+    name: { control: 'text' },
+    color: { control: 'color' },
   },
-});
-WithInjectionTokenAndArgs.argTypes = {
-  name: { control: 'text' },
-  color: { control: 'color' },
+  args: { name: 'Color', color: 'red' },
 };
-WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' };
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
index 14e163e3b9d8..3c3f58851125 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts
@@ -1,23 +1,25 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipComponent } from './angular-src/chip.component';
 
-export default {
+const meta: Meta<ChipComponent> = {
   component: ChipComponent,
   decorators: [
     moduleMetadata({
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
+};
 
-export const Chip: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-Chip.args = {
-  displayText: 'Chip',
-};
-Chip.argTypes = {
-  removeClicked: { action: 'Remove icon clicked' },
+type Story = StoryObj<ChipComponent>;
+
+export const Chip: Story = {
+  args: {
+    displayText: 'Chip',
+  },
+  argTypes: {
+    removeClicked: { action: 'Remove icon clicked' },
+  },
 };
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
index 4777d60ccb5b..6902672b66b5 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
@@ -1,9 +1,9 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { CHIP_COLOR } from './angular-src/chip-color.token';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / forRoot() pattern',
   component: ChipsGroupComponent,
   decorators: [
@@ -27,24 +27,26 @@ export default {
     removeChipClick: { action: 'Remove chip' },
     removeAllChipsClick: { action: 'Remove all chips clicked' },
   },
-} as Meta;
+};
 
-const Template = (): StoryFn => (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Base = Template();
-Base.storyName = 'Chips group';
+type Story = StoryObj<ChipsGroupComponent>;
 
-export const WithCustomProvider = Template();
-WithCustomProvider.decorators = [
-  moduleMetadata({
-    providers: [
-      {
-        provide: CHIP_COLOR,
-        useValue: 'yellow',
-      },
-    ],
-  }),
-];
-WithCustomProvider.storyName = 'Chips group with overridden provider';
+export const Base: Story = {
+  name: 'Chips group',
+};
+
+export const WithCustomProvider: Story = {
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: CHIP_COLOR,
+          useValue: 'yellow',
+        },
+      ],
+    }),
+  ],
+  name: 'Chips group with overridden provider',
+};
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
index 936f27235df7..83c250fc0856 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
@@ -1,8 +1,8 @@
-import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { ChipsModule } from './angular-src/chips.module';
 import { ChipsGroupComponent } from './angular-src/chips-group.component';
 
-export default {
+const meta: Meta<ChipsGroupComponent> = {
   // title: 'Basics / NgModule / Module with multiple component',
   component: ChipsGroupComponent,
   decorators: [
@@ -10,26 +10,27 @@ export default {
       imports: [ChipsModule],
     }),
   ],
-} as Meta;
+};
 
-export const ChipsGroup: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-ChipsGroup.args = {
-  chips: [
-    {
-      id: 1,
-      text: 'Chip 1',
-    },
-    {
-      id: 2,
-      text: 'Chip 2',
-    },
-  ],
-};
+type Story = StoryObj<ChipsGroupComponent>;
 
-ChipsGroup.argTypes = {
-  removeChipClick: { action: 'Remove chip' },
-  removeAllChipsClick: { action: 'Remove all chips clicked' },
+export const ChipsGroup: Story = {
+  args: {
+    chips: [
+      {
+        id: 1,
+        text: 'Chip 1',
+      },
+      {
+        id: 2,
+        text: 'Chip 2',
+      },
+    ],
+  },
+  argTypes: {
+    removeChipClick: { action: 'Remove chip' },
+    removeAllChipsClick: { action: 'Remove all chips clicked' },
+  },
 };
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
index 0a69ddb34aba..78fa47cf8c00 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
@@ -1,10 +1,16 @@
 // your-component.stories.ts
 
-import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import {
+  Args,
+  Meta,
+  StoryObj,
+  componentWrapperDecorator,
+  moduleMetadata,
+} from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
-export default {
+const meta: Meta<ChildComponent> = {
   // title: 'Core / Decorators / ComponentWrapperDecorator',
   component: ChildComponent,
   decorators: [
@@ -14,72 +20,79 @@ export default {
   ],
   args: { childText: 'Child text', childPrivateText: 'Child private text' },
   argTypes: { onClickChild: { action: 'onClickChild' } },
-} as Meta;
+};
 
-export const WithTemplate = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
+export default meta;
 
-export const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
+type Story = StoryObj<ChildComponent>;
 
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
+export const WithTemplate: Story = {
+  render: (args: Args) => ({
+    template: `Child Template`,
+    props: args,
+  }),
+};
 
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
+export const WithComponent: Story = {};
 
-export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndProps.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, {
-    parentText: 'Parent text',
-    onClickParent: () => {
-      console.log('onClickParent');
+export const WithLegacyComponent: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+};
+
+export const WithComponentWrapperDecorator: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: args,
+  }),
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent),
+  ],
+};
+
+export const WithComponentWrapperDecoratorAndProps: Story = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
     },
   }),
-];
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, {
+      parentText: 'Parent text',
+      onClickParent: () => {
+        console.log('onClickParent');
+      },
+    }),
+  ],
+};
 
-export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
+export const WithComponentWrapperDecoratorAndArgs: StoryObj<{
+  parentText: string;
+  onClickParent: () => void;
+}> = {
+  render: (args: Args) => ({
+    component: ChildComponent,
+    props: {
+      ...args,
+    },
+  }),
+  argTypes: {
+    parentText: { control: { type: 'text' } },
+    onClickParent: { action: 'onClickParent' },
   },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
+  decorators: [
+    moduleMetadata({ declarations: [ParentComponent] }),
+    componentWrapperDecorator(ParentComponent, ({ args }) => ({
+      parentText: args.parentText,
+      onClickParent: args.onClickParent,
+    })),
+  ],
 };
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
 
 export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
index d49a6b4ef4f7..527b10a0082f 100644
--- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
+++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import { Component } from '@angular/core';
 
 @Component({
@@ -10,9 +10,13 @@ import { Component } from '@angular/core';
 })
 class ComponentWithWhitespace {}
 
-export default {
+const meta: Meta<ComponentWithWhitespace> = {
   // title: 'Core / Parameters / With Bootstrap Options',
   component: ComponentWithWhitespace,
-} as Meta;
+};
 
-export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
+export default meta;
+
+type Story = StoryObj<ComponentWithWhitespace>;
+
+export const WithPreserveWhitespaces: Story = {};
diff --git a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
index 2dc73b7ad3a0..32c5d1ebe296 100644
--- a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
+++ b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts
@@ -1,4 +1,4 @@
-import { moduleMetadata, Meta } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { APP_INITIALIZER } from '@angular/core';
 import { action } from '@storybook/addon-actions';
 import Button from '../../button.component';
@@ -27,7 +27,9 @@ const meta: Meta<Button> = {
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<Button>;
+
+export const Default: Story = {
   args: {
     text: 'Button',
   },
diff --git a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
index 24948e1af79d..f3cf0a9495af 100644
--- a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
+++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
@@ -1,14 +1,15 @@
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 import Button from '../../button.component';
 
-export default {
+const meta: Meta<Button> = {
   // title: 'Others / Issues / 12009 unknown component',
   component: Button,
-} as Meta;
+};
 
-const Template: StoryFn = (args) => ({
-  props: args,
-});
+export default meta;
 
-export const Basic = Template.bind({});
-Basic.args = { text: 'Unknown component' };
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {
+  args: { text: 'Unknown component' },
+};
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 7de04d5536d1..0ad38125fed5 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index dfddffd7886a..676aeac26706 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -57,7 +57,7 @@
     "magic-string": "^0.30.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3"
   },
   "engines": {
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 02d5ef123a63..5e1760b240b5 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -52,7 +52,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
     "@storybook/preset-html-webpack": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 3086efcb7d40..8cddccf89874 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -95,7 +95,7 @@
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/react": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
@@ -119,7 +119,7 @@
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
-    "next": "13.4.19",
+    "next": "13.5.4",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
   },
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index f5e72bc360d8..9d7c85d8c003 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -48,7 +48,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
     }),
   };
 
-  const newNextLinkBehavior = nextConfig.experimental?.newNextLinkBehavior;
+  const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;
 
   /**
    * In Next 13.0.0 - 13.0.5, the `newNextLinkBehavior` option now defaults to truthy (still
diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts
index 70ad2ece94e0..dd848087f3e3 100644
--- a/code/frameworks/nextjs/src/dependency-map.ts
+++ b/code/frameworks/nextjs/src/dependency-map.ts
@@ -6,17 +6,19 @@ const mapping: Record<string, Record<string, string>> = {
   '<11.1.0': {
     'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
   },
-  '>=11.1.0': {
+  '>=11.1.0 <13.5.0': {
     'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
   },
-  '>=13.5.0': {
-    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
-    'next/dist/shared/lib/head-manager-context':
-      'next/dist/shared/lib/head-manager-context.shared-runtime',
-    'next/dist/shared/lib/app-router-context':
-      'next/dist/shared/lib/app-router-context.shared-runtime',
-    'next/dist/shared/lib/hooks-client-context':
-      'next/dist/shared/lib/hooks-client-context.shared-runtime',
+  '>=13.0.2 <13.5.0': {
+    'next/dist/shared/lib/hooks-client-context.shared-runtime':
+      'next/dist/shared/lib/hooks-client-context',
+  },
+  '<13.5.0': {
+    'next/dist/shared/lib/router-context.shared-runtime': 'next/dist/shared/lib/router-context',
+    'next/dist/shared/lib/head-manager-context.shared-runtime':
+      'next/dist/shared/lib/head-manager-context',
+    'next/dist/shared/lib/app-router-context.shared-runtime':
+      'next/dist/shared/lib/app-router-context',
   },
 };
 
diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts
index f964f17022f7..5f588d8c8c2c 100644
--- a/code/frameworks/nextjs/src/font/babel/helpers.ts
+++ b/code/frameworks/nextjs/src/font/babel/helpers.ts
@@ -281,13 +281,16 @@ export function getVariableMetasBySpecifier(
         return undefined;
       }
 
+      if (!types.isIdentifier(declaration.init.callee)) {
+        return undefined;
+      }
+
       if (
-        (!types.isIdentifier(declaration.init.callee) ||
-          specifier.type !== 'ImportSpecifier' ||
+        (specifier.type !== 'ImportSpecifier' ||
           specifier.imported.type !== 'Identifier' ||
-          declaration.init.callee.name !== specifier.imported.name) &&
-        (!types.isIdentifier(declaration.init.callee) ||
-          specifier.type !== 'ImportDefaultSpecifier' ||
+          (declaration.init.callee.name !== specifier.imported.name &&
+            declaration.init.callee.name !== specifier.local.name)) &&
+        (specifier.type !== 'ImportDefaultSpecifier' ||
           declaration.init.callee.name !== specifier.local.name)
       ) {
         return undefined;
@@ -311,8 +314,15 @@ export function getVariableMetasBySpecifier(
 
       const identifierName = declaration.id.name;
       const properties = convertNodeToJSON(types, options);
-      const functionName = declaration.init.callee.name;
-
+      let functionName = declaration.init.callee.name;
+      if (
+        specifier.type === 'ImportSpecifier' &&
+        specifier.imported &&
+        specifier.imported.type === 'Identifier' &&
+        declaration.init.callee.name !== specifier.imported.name
+      ) {
+        functionName = specifier.imported.name;
+      }
       return { identifierName, properties, functionName };
     })
     .filter(isDefined);
diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts
index 45a0de5c8bb4..405d25b227cf 100644
--- a/code/frameworks/nextjs/src/font/babel/index.test.ts
+++ b/code/frameworks/nextjs/src/font/babel/index.test.ts
@@ -3,7 +3,7 @@ import { transform } from '@babel/core';
 import TransformFontImports from '.';
 
 const example = `
-import { Inter, Roboto } from 'next/font/google'
+import { Inter, Lora as FontLora, Roboto } from 'next/font/google'
 import localFont from 'next/font/local'
 
 const myFont = localFont({ src: './my-font.woff2' })
@@ -12,6 +12,10 @@ const roboto = Roboto({
   weight: '400',
 })
 
+const lora = FontLora({
+  weight: '400',
+})
+
 const inter = Inter({
   subsets: ['latin'],
 });
@@ -20,7 +24,7 @@ const randomObj = {}
 `;
 
 const exampleLegacy = `
-import { Inter, Roboto } from '@next/font/google'
+import { Inter, Lora as FontLora, Roboto } from '@next/font/google'
 import localFont from '@next/font/local'
 
 const myFont = localFont({ src: './my-font.woff2' })
@@ -29,6 +33,10 @@ const roboto = Roboto({
   weight: '400',
 })
 
+const lora = FontLora({
+  weight: '400',
+})
+
 const inter = Inter({
   subsets: ['latin'],
 });
@@ -40,6 +48,7 @@ it('should transform next/font AST properly', () => {
   const { code } = transform(example, { plugins: [TransformFontImports] })!;
   expect(code).toMatchInlineSnapshot(`
     "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
+    import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
     import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
     import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/local\\";
     const randomObj = {};"
@@ -50,6 +59,7 @@ it('should transform @next/font AST properly', () => {
   const { code } = transform(exampleLegacy, { plugins: [TransformFontImports] })!;
   expect(code).toMatchInlineSnapshot(`
     "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
+    import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
     import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
     import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/local\\";
     const randomObj = {};"
diff --git a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
index 6d8ab263f92c..45c3a4ab4c33 100644
--- a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
+++ b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
+import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context.shared-runtime';
 import initHeadManager from 'next/dist/client/head-manager';
 
 type HeadManagerValue = {
diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
index e25c2f1488b4..a7f0bd326f9b 100644
--- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
@@ -3,11 +3,11 @@ import type {
   LayoutRouterContext as TLayoutRouterContext,
   AppRouterContext as TAppRouterContext,
   GlobalLayoutRouterContext as TGlobalLayoutRouterContext,
-} from 'next/dist/shared/lib/app-router-context';
+} from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import type {
   PathnameContext as TPathnameContext,
   SearchParamsContext as TSearchParamsContext,
-} from 'next/dist/shared/lib/hooks-client-context';
+} from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
 import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import type { RouteParams } from './types';
 
@@ -25,12 +25,16 @@ let SearchParamsContext: typeof TSearchParamsContext;
 let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext;
 
 try {
-  AppRouterContext = require('next/dist/shared/lib/app-router-context').AppRouterContext;
-  LayoutRouterContext = require('next/dist/shared/lib/app-router-context').LayoutRouterContext;
-  PathnameContext = require('next/dist/shared/lib/hooks-client-context').PathnameContext;
-  SearchParamsContext = require('next/dist/shared/lib/hooks-client-context').SearchParamsContext;
+  AppRouterContext =
+    require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext;
+  LayoutRouterContext =
+    require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext;
+  PathnameContext =
+    require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext;
+  SearchParamsContext =
+    require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext;
   GlobalLayoutRouterContext =
-    require('next/dist/shared/lib/app-router-context').GlobalLayoutRouterContext;
+    require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext;
 } catch {
   AppRouterContext = React.Fragment as any;
   LayoutRouterContext = React.Fragment as any;
diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx
index c882e3bee5b3..e91819fde38e 100644
--- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/page-router-provider.tsx
@@ -1,5 +1,5 @@
 import type { Globals } from '@storybook/csf';
-import { RouterContext } from 'next/dist/shared/lib/router-context';
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 import React from 'react';
 import type { RouteParams } from './types';
 
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 3df266adecec..06b80a68b171 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -52,13 +52,13 @@
     "@storybook/preact": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
     "preact": ">=10",
-    "vite": "^3.0.0 || ^4.0.0"
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 8d4d7ecb9beb..adf5e9f96e96 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -51,7 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preact": "workspace:*",
     "@storybook/preset-preact-webpack": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "preact": "^10.5.13",
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 15026f5f0af8..d58236e38bc4 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,7 +47,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
@@ -56,14 +56,14 @@
     "react-docgen": "^6.0.2"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3",
     "vite": "^4.0.0"
   },
   "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"
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=16"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index e767d5e14b42..c3f3e95b7e22 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,7 +50,7 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "jest-specific-snapshot": "^8.0.0"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 3997eaffc5e2..aa1a438f0890 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,7 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-server-webpack": "workspace:*",
     "@storybook/server": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 5eabe2366d49..33d3b268f401 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -52,18 +52,19 @@
     "@storybook/svelte": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "magic-string": "^0.30.0",
+    "svelte-preprocess": "^5.0.4",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "svelte": "^4.0.0",
     "typescript": "~4.9.3",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
     "svelte": "^3.0.0 || ^4.0.0",
-    "vite": "^3.0.0 || ^4.0.0"
+    "vite": "^3.0.0 || ^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 b9e8ac5fa762..bce6ab3c1a00 100644
--- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
+++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
@@ -7,6 +7,23 @@ import type { 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';
+
+/*
+ * Patch sveltedoc-parser internal options.
+ * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87
+ */
+const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js');
+
+svelteDocParserOptions.getAstDefaultOptions = () => ({
+  range: true,
+  loc: true,
+  comment: true,
+  tokens: true,
+  ecmaVersion: 12,
+  sourceType: 'module',
+  ecmaFeatures: {},
+});
 
 // Most of the code here should probably be exported by @storybook/svelte and reused here.
 // See: https://github.com/storybookjs/storybook/blob/next/app/svelte/src/server/svelte-docgen-loader.ts
@@ -48,19 +65,43 @@ export function svelteDocgen(svelteOptions: Record<string, any> = {}): PluginOpt
   const include = /\.(svelte)$/;
   const filter = createFilter(include);
 
+  let docPreprocessOptions: Parameters<typeof preprocess>[1] | undefined;
+
   return {
     name: 'storybook:svelte-docgen-plugin',
     async transform(src: string, id: string) {
       if (!filter(id)) return undefined;
 
+      if (preprocessOptions && !docPreprocessOptions) {
+        /*
+         * We can't use vitePreprocess() for the documentation
+         * because it uses esbuild which removes jsdoc.
+         *
+         * By default, only typescript is transpiled, and style tags are removed.
+         *
+         * Note: these preprocessors are only used to make the component
+         * compatible to sveltedoc-parser (no ts), not to compile
+         * the component.
+         */
+        docPreprocessOptions = [replace([[/<style.+<\/style>/gims, '']])];
+
+        try {
+          const ts = require.resolve('typescript');
+          if (ts) {
+            docPreprocessOptions.unshift(typescript());
+          }
+        } catch {
+          // this will error in JavaScript-only projects, this is okay
+        }
+      }
+
       const resource = path.relative(cwd, id);
 
       let docOptions;
-      if (preprocessOptions) {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        const src = fs.readFileSync(resource).toString();
+      if (docPreprocessOptions) {
+        const rawSource = fs.readFileSync(resource).toString();
 
-        const { code: fileContent } = await preprocess(src, preprocessOptions, {
+        const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, {
           filename: resource,
         });
 
@@ -79,21 +120,24 @@ export function svelteDocgen(svelteOptions: Record<string, any> = {}): PluginOpt
 
       const s = new MagicString(src);
 
+      let componentDoc: any;
       try {
-        const componentDoc = await svelteDoc.parse(options);
-        // get filename for source content
-        const file = path.basename(resource);
-
-        componentDoc.name = path.basename(file);
-
-        const componentName = getNameFromFilename(resource);
-        s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`);
+        componentDoc = await svelteDoc.parse(options);
       } catch (error: any) {
+        componentDoc = { keywords: [], data: [] };
         if (logDocgen) {
           logger.error(error);
         }
       }
 
+      // get filename for source content
+      const file = path.basename(resource);
+
+      componentDoc.name = path.basename(file);
+
+      const componentName = getNameFromFilename(resource);
+      s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`);
+
       return {
         code: s.toString(),
         map: s.generateMap({ hires: true, source: id }),
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte
new file mode 100644
index 000000000000..cd00f38a3d57
--- /dev/null
+++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js
new file mode 100644
index 000000000000..f33428810ee9
--- /dev/null
+++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js
@@ -0,0 +1,12 @@
+import ButtonTypescript from './ButtonTypeScript.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/ts-docs',
+  component: ButtonTypescript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 97ca845f9087..a7fa23693625 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 8b9f808420b5..030b4ed9bcd9 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -55,7 +55,7 @@
     "@storybook/svelte-vite": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "^4.9.3",
     "vite": "^4.0.0"
   },
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte
new file mode 100644
index 000000000000..cd00f38a3d57
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  /**
+   * @component Button TypeScript
+   * @wrapper
+   */
+  import { global as globalThis } from '@storybook/global';
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
+
+  /**
+   * Rounds the button
+   */
+  export let primary: boolean = false;
+
+  /**
+   * Displays the count
+   */
+  export let count: number = 0;
+
+  /**
+   * Button text
+   * @slot
+   */
+  export let text: string = 'You clicked';
+
+  function handleClick(_event: MouseEvent) {
+    count += 1;
+  }
+</script>
+
+<h1>Button TypeScript</h1>
+
+<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
+
+<p>A little text to show this is a view.</p>
+<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
+<p>then wrapping the component up in a view</p>
+<p>made just for the story is the simplest way to achieve this.</p>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js
new file mode 100644
index 000000000000..f33428810ee9
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js
@@ -0,0 +1,12 @@
+import ButtonTypescript from './ButtonTypeScript.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/ts-docs',
+  component: ButtonTypescript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
index d081aa9f1c37..1af586ad2d98 100644
--- a/code/frameworks/vue-vite/package.json
+++ b/code/frameworks/vue-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -62,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",
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0",
     "vue": "^2.7.0"
   },
   "engines": {
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 2c6f6d8d6fc2..9b033c19fc5d 100644
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,7 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-vue-webpack": "workspace:*",
     "@storybook/vue": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 440d63740f21..36b46a2b0735 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -55,14 +55,14 @@
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3",
     "vite": "^4.0.0"
   },
   "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"
+    "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index cf035615f7b9..66e6840bc2b6 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,7 +51,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-vue3-webpack": "workspace:*",
     "@storybook/vue3": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "3.0.0",
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 1956f8b0047a..9293dae2aef3 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -54,7 +54,7 @@
     "magic-string": "^0.30.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 17b38ad48112..5834935be194 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
@@ -55,14 +55,14 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/preset-web-components-webpack": "workspace:*",
     "@storybook/web-components": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "lit": "2.3.1",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "lit": "^2.0.0",
+    "lit": "^2.0.0 || ^3.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 7108ca6958d9..44c7b5c036be 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 3802f4407bb8..8e4db4f3862b 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index de2d447d9f7a..56d41256bb1b 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index a089338f0950..30b9890a05cc 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
diff --git a/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts b/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts
index d86b266b6081..721aa49772c7 100644
--- a/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts
@@ -38,6 +38,11 @@ describe('nodejs-requirement fix', () => {
     await expect(check({})).resolves.toBeNull();
   });
 
+  it('skips when node >= 18.0.0', async () => {
+    mockNodeVersion('18.0.0');
+    await expect(check({})).resolves.toBeNull();
+  });
+
   it('prompts when node <= 16.0.0', async () => {
     mockNodeVersion('14.0.0');
     await expect(check({})).resolves.toEqual({ nodeVersion: '14.0.0' });
diff --git a/code/lib/cli/src/link.ts b/code/lib/cli/src/link.ts
index 3a61eb02a147..b00b04b8035e 100644
--- a/code/lib/cli/src/link.ts
+++ b/code/lib/cli/src/link.ts
@@ -105,7 +105,7 @@ export const link = async ({ target, local, start }: LinkOptions) => {
   }
 
   // ensure that linking is possible
-  await exec(`yarn add @types/node@16`, { cwd: reproDir });
+  await exec(`yarn add @types/node@18`, { cwd: reproDir });
 
   if (start) {
     logger.info(`Running ${reproName} storybook`);
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 69e858f1d14f..f9bc041d73f3 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -137,9 +137,20 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'nextjs/prerelease': {
+    name: 'Next.js Prerelease (Webpack | TypeScript)',
+    script:
+      'npx create-next-app@canary {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+    expected: {
+      framework: '@storybook/nextjs',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'react-vite/default-js': {
     name: 'React Latest (Vite | JavaScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template react',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template react',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -149,7 +160,7 @@ const baseTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Latest (Vite | TypeScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -204,7 +215,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue v3 (Vite | JavaScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -214,7 +225,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue v3 (Vite | TypeScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -246,7 +257,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Latest (Vite | JavaScript)',
     script:
-      'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -257,7 +268,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Latest (Vite | TypeScript)',
     script:
-      'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -267,7 +278,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Latest (Vite | JavaScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -277,7 +288,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Latest (Vite | TypeScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -296,8 +307,6 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
-    // TODO: Should be removed after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
-    inDevelopment: true,
   },
   'angular-cli/default-ts': {
     name: 'Angular CLI Latest (Webpack | TypeScript)',
@@ -346,7 +355,7 @@ const baseTemplates = {
   'lit-vite/default-js': {
     name: 'Lit Latest (Vite | JavaScript)',
     script:
-      'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -358,7 +367,7 @@ const baseTemplates = {
   'lit-vite/default-ts': {
     name: 'Lit Latest (Vite | TypeScript)',
     script:
-      'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -415,7 +424,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Latest (Vite | JavaScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -425,7 +434,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Latest (Vite | TypeScript)',
-    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts',
+    script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -586,8 +595,7 @@ export const merged: TemplateKey[] = [
 ];
 export const daily: TemplateKey[] = [
   ...merged,
-  // TODO: Should be re-added after we merge this PR: https://github.com/storybookjs/storybook/pull/24188
-  // 'angular-cli/prerelease',
+  'angular-cli/prerelease',
   'cra/default-js',
   'react-vite/default-js',
   'vue3-vite/default-js',
@@ -598,6 +606,7 @@ export const daily: TemplateKey[] = [
   'svelte-vite/default-js',
   'nextjs/12-js',
   'nextjs/default-js',
+  'nextjs/prerelease',
   'qwik-vite/default-ts',
   'preact-webpack5/default-js',
   'preact-vite/default-js',
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index ef712eb5df59..bd74e5679be9 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -1,97 +1,97 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.5.0-alpha.4',
-  '@storybook/addon-actions': '7.5.0-alpha.4',
-  '@storybook/addon-backgrounds': '7.5.0-alpha.4',
-  '@storybook/addon-controls': '7.5.0-alpha.4',
-  '@storybook/addon-docs': '7.5.0-alpha.4',
-  '@storybook/addon-essentials': '7.5.0-alpha.4',
-  '@storybook/addon-highlight': '7.5.0-alpha.4',
-  '@storybook/addon-interactions': '7.5.0-alpha.4',
-  '@storybook/addon-jest': '7.5.0-alpha.4',
-  '@storybook/addon-links': '7.5.0-alpha.4',
-  '@storybook/addon-mdx-gfm': '7.5.0-alpha.4',
-  '@storybook/addon-measure': '7.5.0-alpha.4',
-  '@storybook/addon-outline': '7.5.0-alpha.4',
-  '@storybook/addon-themes': '7.5.0-alpha.4',
-  '@storybook/addon-storyshots': '7.5.0-alpha.4',
-  '@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.4',
-  '@storybook/addon-storysource': '7.5.0-alpha.4',
-  '@storybook/addon-toolbars': '7.5.0-alpha.4',
-  '@storybook/addon-viewport': '7.5.0-alpha.4',
-  '@storybook/addons': '7.5.0-alpha.4',
-  '@storybook/angular': '7.5.0-alpha.4',
-  '@storybook/api': '7.5.0-alpha.4',
-  '@storybook/blocks': '7.5.0-alpha.4',
-  '@storybook/builder-manager': '7.5.0-alpha.4',
-  '@storybook/builder-vite': '7.5.0-alpha.4',
-  '@storybook/builder-webpack5': '7.5.0-alpha.4',
-  '@storybook/channel-postmessage': '7.5.0-alpha.4',
-  '@storybook/channel-websocket': '7.5.0-alpha.4',
-  '@storybook/channels': '7.5.0-alpha.4',
-  '@storybook/cli': '7.5.0-alpha.4',
-  '@storybook/client-api': '7.5.0-alpha.4',
-  '@storybook/client-logger': '7.5.0-alpha.4',
-  '@storybook/codemod': '7.5.0-alpha.4',
-  '@storybook/components': '7.5.0-alpha.4',
-  '@storybook/core-client': '7.5.0-alpha.4',
-  '@storybook/core-common': '7.5.0-alpha.4',
-  '@storybook/core-events': '7.5.0-alpha.4',
-  '@storybook/core-server': '7.5.0-alpha.4',
-  '@storybook/core-webpack': '7.5.0-alpha.4',
-  '@storybook/csf-plugin': '7.5.0-alpha.4',
-  '@storybook/csf-tools': '7.5.0-alpha.4',
-  '@storybook/docs-tools': '7.5.0-alpha.4',
-  '@storybook/ember': '7.5.0-alpha.4',
-  '@storybook/html': '7.5.0-alpha.4',
-  '@storybook/html-vite': '7.5.0-alpha.4',
-  '@storybook/html-webpack5': '7.5.0-alpha.4',
-  '@storybook/instrumenter': '7.5.0-alpha.4',
-  '@storybook/manager': '7.5.0-alpha.4',
-  '@storybook/manager-api': '7.5.0-alpha.4',
-  '@storybook/nextjs': '7.5.0-alpha.4',
-  '@storybook/node-logger': '7.5.0-alpha.4',
-  '@storybook/postinstall': '7.5.0-alpha.4',
-  '@storybook/preact': '7.5.0-alpha.4',
-  '@storybook/preact-vite': '7.5.0-alpha.4',
-  '@storybook/preact-webpack5': '7.5.0-alpha.4',
-  '@storybook/preset-create-react-app': '7.5.0-alpha.4',
-  '@storybook/preset-html-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-preact-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-react-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-server-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-svelte-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-vue-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-vue3-webpack': '7.5.0-alpha.4',
-  '@storybook/preset-web-components-webpack': '7.5.0-alpha.4',
-  '@storybook/preview': '7.5.0-alpha.4',
-  '@storybook/preview-api': '7.5.0-alpha.4',
-  '@storybook/preview-web': '7.5.0-alpha.4',
-  '@storybook/react': '7.5.0-alpha.4',
-  '@storybook/react-dom-shim': '7.5.0-alpha.4',
-  '@storybook/react-vite': '7.5.0-alpha.4',
-  '@storybook/react-webpack5': '7.5.0-alpha.4',
-  '@storybook/router': '7.5.0-alpha.4',
-  '@storybook/server': '7.5.0-alpha.4',
-  '@storybook/server-webpack5': '7.5.0-alpha.4',
-  '@storybook/source-loader': '7.5.0-alpha.4',
-  '@storybook/store': '7.5.0-alpha.4',
-  '@storybook/svelte': '7.5.0-alpha.4',
-  '@storybook/svelte-vite': '7.5.0-alpha.4',
-  '@storybook/svelte-webpack5': '7.5.0-alpha.4',
-  '@storybook/sveltekit': '7.5.0-alpha.4',
-  '@storybook/telemetry': '7.5.0-alpha.4',
-  '@storybook/theming': '7.5.0-alpha.4',
-  '@storybook/types': '7.5.0-alpha.4',
-  '@storybook/vue': '7.5.0-alpha.4',
-  '@storybook/vue-vite': '7.5.0-alpha.4',
-  '@storybook/vue-webpack5': '7.5.0-alpha.4',
-  '@storybook/vue3': '7.5.0-alpha.4',
-  '@storybook/vue3-vite': '7.5.0-alpha.4',
-  '@storybook/vue3-webpack5': '7.5.0-alpha.4',
-  '@storybook/web-components': '7.5.0-alpha.4',
-  '@storybook/web-components-vite': '7.5.0-alpha.4',
-  '@storybook/web-components-webpack5': '7.5.0-alpha.4',
-  sb: '7.5.0-alpha.4',
-  storybook: '7.5.0-alpha.4',
+  '@storybook/addon-a11y': '7.5.0-alpha.7',
+  '@storybook/addon-actions': '7.5.0-alpha.7',
+  '@storybook/addon-backgrounds': '7.5.0-alpha.7',
+  '@storybook/addon-controls': '7.5.0-alpha.7',
+  '@storybook/addon-docs': '7.5.0-alpha.7',
+  '@storybook/addon-essentials': '7.5.0-alpha.7',
+  '@storybook/addon-highlight': '7.5.0-alpha.7',
+  '@storybook/addon-interactions': '7.5.0-alpha.7',
+  '@storybook/addon-jest': '7.5.0-alpha.7',
+  '@storybook/addon-links': '7.5.0-alpha.7',
+  '@storybook/addon-mdx-gfm': '7.5.0-alpha.7',
+  '@storybook/addon-measure': '7.5.0-alpha.7',
+  '@storybook/addon-outline': '7.5.0-alpha.7',
+  '@storybook/addon-themes': '7.5.0-alpha.7',
+  '@storybook/addon-storyshots': '7.5.0-alpha.7',
+  '@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.7',
+  '@storybook/addon-storysource': '7.5.0-alpha.7',
+  '@storybook/addon-toolbars': '7.5.0-alpha.7',
+  '@storybook/addon-viewport': '7.5.0-alpha.7',
+  '@storybook/addons': '7.5.0-alpha.7',
+  '@storybook/angular': '7.5.0-alpha.7',
+  '@storybook/api': '7.5.0-alpha.7',
+  '@storybook/blocks': '7.5.0-alpha.7',
+  '@storybook/builder-manager': '7.5.0-alpha.7',
+  '@storybook/builder-vite': '7.5.0-alpha.7',
+  '@storybook/builder-webpack5': '7.5.0-alpha.7',
+  '@storybook/channel-postmessage': '7.5.0-alpha.7',
+  '@storybook/channel-websocket': '7.5.0-alpha.7',
+  '@storybook/channels': '7.5.0-alpha.7',
+  '@storybook/cli': '7.5.0-alpha.7',
+  '@storybook/client-api': '7.5.0-alpha.7',
+  '@storybook/client-logger': '7.5.0-alpha.7',
+  '@storybook/codemod': '7.5.0-alpha.7',
+  '@storybook/components': '7.5.0-alpha.7',
+  '@storybook/core-client': '7.5.0-alpha.7',
+  '@storybook/core-common': '7.5.0-alpha.7',
+  '@storybook/core-events': '7.5.0-alpha.7',
+  '@storybook/core-server': '7.5.0-alpha.7',
+  '@storybook/core-webpack': '7.5.0-alpha.7',
+  '@storybook/csf-plugin': '7.5.0-alpha.7',
+  '@storybook/csf-tools': '7.5.0-alpha.7',
+  '@storybook/docs-tools': '7.5.0-alpha.7',
+  '@storybook/ember': '7.5.0-alpha.7',
+  '@storybook/html': '7.5.0-alpha.7',
+  '@storybook/html-vite': '7.5.0-alpha.7',
+  '@storybook/html-webpack5': '7.5.0-alpha.7',
+  '@storybook/instrumenter': '7.5.0-alpha.7',
+  '@storybook/manager': '7.5.0-alpha.7',
+  '@storybook/manager-api': '7.5.0-alpha.7',
+  '@storybook/nextjs': '7.5.0-alpha.7',
+  '@storybook/node-logger': '7.5.0-alpha.7',
+  '@storybook/postinstall': '7.5.0-alpha.7',
+  '@storybook/preact': '7.5.0-alpha.7',
+  '@storybook/preact-vite': '7.5.0-alpha.7',
+  '@storybook/preact-webpack5': '7.5.0-alpha.7',
+  '@storybook/preset-create-react-app': '7.5.0-alpha.7',
+  '@storybook/preset-html-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-preact-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-react-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-server-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-svelte-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-vue-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-vue3-webpack': '7.5.0-alpha.7',
+  '@storybook/preset-web-components-webpack': '7.5.0-alpha.7',
+  '@storybook/preview': '7.5.0-alpha.7',
+  '@storybook/preview-api': '7.5.0-alpha.7',
+  '@storybook/preview-web': '7.5.0-alpha.7',
+  '@storybook/react': '7.5.0-alpha.7',
+  '@storybook/react-dom-shim': '7.5.0-alpha.7',
+  '@storybook/react-vite': '7.5.0-alpha.7',
+  '@storybook/react-webpack5': '7.5.0-alpha.7',
+  '@storybook/router': '7.5.0-alpha.7',
+  '@storybook/server': '7.5.0-alpha.7',
+  '@storybook/server-webpack5': '7.5.0-alpha.7',
+  '@storybook/source-loader': '7.5.0-alpha.7',
+  '@storybook/store': '7.5.0-alpha.7',
+  '@storybook/svelte': '7.5.0-alpha.7',
+  '@storybook/svelte-vite': '7.5.0-alpha.7',
+  '@storybook/svelte-webpack5': '7.5.0-alpha.7',
+  '@storybook/sveltekit': '7.5.0-alpha.7',
+  '@storybook/telemetry': '7.5.0-alpha.7',
+  '@storybook/theming': '7.5.0-alpha.7',
+  '@storybook/types': '7.5.0-alpha.7',
+  '@storybook/vue': '7.5.0-alpha.7',
+  '@storybook/vue-vite': '7.5.0-alpha.7',
+  '@storybook/vue-webpack5': '7.5.0-alpha.7',
+  '@storybook/vue3': '7.5.0-alpha.7',
+  '@storybook/vue3-vite': '7.5.0-alpha.7',
+  '@storybook/vue3-webpack5': '7.5.0-alpha.7',
+  '@storybook/web-components': '7.5.0-alpha.7',
+  '@storybook/web-components-vite': '7.5.0-alpha.7',
+  '@storybook/web-components-webpack5': '7.5.0-alpha.7',
+  sb: '7.5.0-alpha.7',
+  storybook: '7.5.0-alpha.7',
 };
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index f63b74e572f4..6bcc373cf785 100644
--- a/code/lib/client-logger/package.json
+++ b/code/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index fa8caf281dea..b0c7f9fa1ff3 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 29c09387e5fd..0840b622da45 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -48,7 +48,7 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",
     "@types/find-cache-dir": "^3.2.1",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/node-fetch": "^2.6.4",
     "@types/pretty-hrtime": "^1.0.0",
     "chalk": "^4.1.0",
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index dd9fbd3c7757..a4137dabd7a8 100644
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index fc62f70ccc6a..c897f1cad051 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -76,7 +76,7 @@
     "@storybook/telemetry": "workspace:*",
     "@storybook/types": "workspace:*",
     "@types/detect-port": "^1.3.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",
     "better-opn": "^3.0.2",
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index ca5739b08558..1c65fab2729c 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -47,7 +47,7 @@
     "@storybook/core-common": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 07483a79d5f7..752a492b81d1 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 27d9e30aaa7f..a4a6063e811d 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index d552f6bc6208..db1b6b9f9b29 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index b9d22eb8445f..b3020b8a4513 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 086a2a2fc55f..11ac88de71e6 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index e1a280d5aa14..6a5480bc1a32 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '7.5.0-alpha.4';
+export const version = '7.5.0-alpha.7';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index c3a2bfc8abe9..36196f5da917 100644
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json
index 93e9ef630ebc..aaa7687a0a46 100644
--- a/code/lib/postinstall/package.json
+++ b/code/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 9079669709e9..208d6a38ed7f 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index 47f22adf59bf..df178cfe2f3f 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 250b0cab82bd..28dab9ee7018 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 3e20f332cde8..7b1edff09752 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 8cf27fd7efef..8dba82f101da 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Source loader",
   "keywords": [
     "lib",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index 90aced13b741..29ae25176a58 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 47baae612c16..1cfa2a21790b 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -60,7 +60,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@types/fs-extra": "^11.0.1",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "deep-object-diff": "^1.1.0",
     "fs-extra": "^11.1.0",
     "polished": "^4.2.2",
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index c0a3fda13d64..297cc263719a 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@storybook/csf": "^0.1.0",
     "@types/fs-extra": "^11.0.1",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3"
   },
   "publishConfig": {
diff --git a/code/package.json b/code/package.json
index 7a14a389b3d7..4fb1d7bf7c80 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -205,7 +205,7 @@
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^11.0.1",
     "@types/lodash": "^4.14.167",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
@@ -288,7 +288,7 @@
   },
   "packageManager": "yarn@3.5.1",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "collective": {
     "type": "opencollective",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index ff11ebc6ac0d..b70e6d0731e5 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@storybook/node-logger": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 7169a9b7f06a..2a83beb68c6e 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-html-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "html-loader": "^3.1.0",
     "webpack": "5"
   },
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index 6a4df6a8d8ab..cde8cc5c89d8 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-preact-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -52,7 +52,7 @@
     "@babel/plugin-transform-react-jsx": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@storybook/core-webpack": "workspace:*",
-    "@types/node": "^16.0.0"
+    "@types/node": "^18.0.0"
   },
   "devDependencies": {
     "preact": "^10.5.13",
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 57ec0135a2ef..4a288e78c040 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
@@ -72,7 +72,7 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-react-docgen": "^4.2.1",
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 7998e916bdc1..f9b2f7b54b6c 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -58,7 +58,7 @@
     "@storybook/core-webpack": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/server": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "safe-identifier": "^0.4.1",
     "ts-dedent": "^2.0.0",
     "yaml-loader": "^0.8.0"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 99251c3a8a68..1d002e507851 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-svelte-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts
index 5267e73a317a..f83055132059 100644
--- a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts
+++ b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts
@@ -5,6 +5,22 @@ import * as fs from 'fs';
 import { preprocess } from 'svelte/compiler';
 import { logger } from '@storybook/node-logger';
 
+/*
+ * Patch sveltedoc-parser internal options.
+ * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87
+ */
+const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js');
+
+svelteDocParserOptions.getAstDefaultOptions = () => ({
+  range: true,
+  loc: true,
+  comment: true,
+  tokens: true,
+  ecmaVersion: 12,
+  sourceType: 'module',
+  ecmaFeatures: {},
+});
+
 // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
 // Copied because it is not exported from the compiler
 function getNameFromFilename(filename: string) {
@@ -73,27 +89,30 @@ export default async function svelteDocgen(this: any, source: string) {
 
   let docgen = '';
 
+  let componentDoc: any;
   try {
     // FIXME
     // @ts-expect-error (Converted from ts-ignore)
-    const componentDoc = await svelteDoc.parse(options);
+    componentDoc = await svelteDoc.parse(options);
+  } catch (error) {
+    componentDoc = { keywords: [], data: [] };
+    if (logDocgen) {
+      logger.error(error as any);
+    }
+  }
 
-    // get filename for source content
-    const file = path.basename(resource);
+  // get filename for source content
+  const file = path.basename(resource);
 
-    // populate filename in docgen
-    componentDoc.name = path.basename(file);
+  // populate filename in docgen
+  componentDoc.name = path.basename(file);
 
-    const componentName = getNameFromFilename(resource);
+  const componentName = getNameFromFilename(resource);
 
-    docgen = dedent`
+  docgen = dedent`
       ${componentName}.__docgen = ${JSON.stringify(componentDoc)};
     `;
-  } catch (error) {
-    if (logDocgen) {
-      logger.error(error as any);
-    }
-  }
+
   // inject __docgen prop in svelte component
   const output = source + docgen;
 
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index b1479512dedd..7c037ab0bf76 100644
--- a/code/presets/vue-webpack/package.json
+++ b/code/presets/vue-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-vue-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -61,7 +61,7 @@
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "ts-loader": "^9.2.8",
     "vue-docgen-api": "^4.44.23",
     "vue-docgen-loader": "^1.5.1",
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index b89f171428eb..b0a3fc6a3c55 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-vue3-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -61,7 +61,7 @@
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "ts-loader": "^9.2.8",
     "vue-docgen-api": "^4.46.0",
     "vue-docgen-loader": "^1.5.1",
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index 170535b14155..d4ee9d01bf1c 100644
--- a/code/presets/web-components-webpack/package.json
+++ b/code/presets/web-components-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-web-components-webpack",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
@@ -56,7 +56,7 @@
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.22.9",
     "@storybook/core-webpack": "workspace:*",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "babel-plugin-bundled-import-meta": "^0.3.1"
   },
@@ -65,7 +65,7 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "lit": "^2.0.0"
+    "lit": "^2.0.0 || ^3.0.0"
   },
   "engines": {
     "node": ">=16.0.0"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 3ea6ca17deae..09a2fffb163b 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index f49856e1cb95..13dd69ede325 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 75c51405d7e7..85237f73392f 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -62,7 +62,7 @@
     "@storybook/types": "workspace:*",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index e1b7a638cecb..3ebae5219f2f 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 329926365d73..1de80cd59153 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/template/stories/args.stories.js b/code/renderers/svelte/template/stories/args.stories.js
index f94637bbe56a..897fc46469da 100644
--- a/code/renderers/svelte/template/stories/args.stories.js
+++ b/code/renderers/svelte/template/stories/args.stories.js
@@ -7,7 +7,7 @@ import {
   STORY_RENDERED,
 } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 
 export default {
   component: ButtonView,
diff --git a/code/renderers/svelte/template/stories/js-docs.stories.js b/code/renderers/svelte/template/stories/js-docs.stories.js
new file mode 100644
index 000000000000..d2e37cc971d5
--- /dev/null
+++ b/code/renderers/svelte/template/stories/js-docs.stories.js
@@ -0,0 +1,11 @@
+import ButtonJavaScript from './views/ButtonJavaScript.svelte';
+
+export default {
+  component: ButtonJavaScript,
+  args: {
+    primary: true,
+  },
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/renderers/svelte/template/stories/slot-decorators.stories.js b/code/renderers/svelte/template/stories/slot-decorators.stories.js
index 759904403640..4b8095517faf 100644
--- a/code/renderers/svelte/template/stories/slot-decorators.stories.js
+++ b/code/renderers/svelte/template/stories/slot-decorators.stories.js
@@ -1,4 +1,4 @@
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
 import BorderDecoratorBlue from './views/BorderDecoratorBlue.svelte';
 import BorderDecoratorProps from './views/BorderDecoratorProps.svelte';
diff --git a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx b/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx
index 652714619c95..396812ea5737 100644
--- a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx
+++ b/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx
@@ -1,6 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ButtonView from './views/ButtonView.svelte';
+import ButtonView from './views/ButtonJavaScript.svelte';
 import BorderDecoratorRed from './views/BorderDecoratorRed.svelte';
 
 <Meta title="stories/renderers/svelte/svelte-mdx" />
diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonJavaScript.svelte
similarity index 92%
rename from code/renderers/svelte/template/stories/views/ButtonView.svelte
rename to code/renderers/svelte/template/stories/views/ButtonJavaScript.svelte
index 201981d8df35..23af7eaac0f0 100644
--- a/code/renderers/svelte/template/stories/views/ButtonView.svelte
+++ b/code/renderers/svelte/template/stories/views/ButtonJavaScript.svelte
@@ -4,7 +4,8 @@
    * @wrapper
    */
   import { global as globalThis } from '@storybook/global';
-  const Button = globalThis.Components.Button;
+  // @ts-ignore
+  const Button = globalThis.Components?.Button;
 
   /**
    * Rounds the button
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index 8f0adba6c632..3b17edfda74b 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Vue renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index db1f0e632e47..39a68272653f 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index c248bd3a41c4..d1594aa59627 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -64,14 +64,14 @@
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.2",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "cross-spawn": "^7.0.3",
     "lit": "2.3.1",
     "typescript": "~4.9.3",
     "web-component-analyzer": "^1.1.6"
   },
   "peerDependencies": {
-    "lit": "^2.0.0"
+    "lit": "^2.0.0 || ^3.0.0"
   },
   "engines": {
     "node": ">=16.0.0"
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index 060dc07626e3..34243ff5b989 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
index f033c131bd71..b05d58a4a3a7 100644
--- a/code/ui/blocks/src/controls/options/Select.tsx
+++ b/code/ui/blocks/src/controls/options/Select.tsx
@@ -110,7 +110,9 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
           {NO_SELECTION}
         </option>
         {Object.keys(options).map((key) => (
-          <option key={key}>{key}</option>
+          <option key={key} value={key}>
+            {key}
+          </option>
         ))}
       </OptionsSelect>
     </SelectWrapper>
@@ -131,7 +133,9 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
     <SelectWrapper>
       <OptionsSelect id={controlId} multiple value={selection} onChange={handleChange}>
         {Object.keys(options).map((key) => (
-          <option key={key}>{key}</option>
+          <option key={key} value={key}>
+            {key}
+          </option>
         ))}
       </OptionsSelect>
     </SelectWrapper>
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 0e9cc0dc42a4..adf41d2b5b05 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -73,12 +73,11 @@
   "devDependencies": {
     "@chromaui/addon-visual-tests": "^0.0.77",
     "@popperjs/core": "^2.6.0",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@storybook/icons": "^1.1.6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",
-    "overlayscrollbars": "2.2.1",
-    "overlayscrollbars-react": "^0.5.0",
     "polished": "^4.2.2",
     "prettier": "^2.8.0",
     "react-popper-tooltip": "^4.4.2",
diff --git a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx
deleted file mode 100644
index a7650a8f922f..000000000000
--- a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx
+++ /dev/null
@@ -1,497 +0,0 @@
-import React from 'react';
-import { Global } from '@storybook/theming';
-import type { Theme, CSSObject } from '@storybook/theming';
-
-export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) =>
-  ({
-    '.os-size-observer,\n.os-size-observer-listener': {
-      direction: 'inherit',
-      pointerEvents: 'none',
-      overflow: 'hidden',
-      visibility: 'hidden',
-      boxSizing: 'border-box',
-    },
-    '.os-size-observer,\n.os-size-observer-listener,\n.os-size-observer-listener-item,\n.os-size-observer-listener-item-final':
-      {
-        writingMode: 'horizontal-tb',
-        position: 'absolute',
-        left: '0',
-        top: '0',
-      },
-    '.os-size-observer': {
-      zIndex: -1,
-      contain: 'strict',
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'nowrap',
-      padding: 'inherit',
-      border: 'inherit',
-      boxSizing: 'inherit',
-      margin: '-133px',
-      top: '0',
-      right: '0',
-      bottom: '0',
-      left: '0',
-      transform: 'scale(0.1)',
-    },
-    '.os-size-observer::before': {
-      content: '""',
-      flex: 'none',
-      boxSizing: 'inherit',
-      padding: '10px',
-      width: '10px',
-      height: '10px',
-    },
-    '.os-size-observer-appear': {
-      animation: 'os-size-observer-appear-animation 1ms forwards',
-    },
-    '.os-size-observer-listener': {
-      boxSizing: 'border-box',
-      position: 'relative',
-      flex: 'auto',
-      padding: 'inherit',
-      border: 'inherit',
-      margin: '-133px',
-      transform: 'scale(10)',
-    },
-    '.os-size-observer-listener.ltr': { marginRight: '-266px', marginLeft: '0' },
-    '.os-size-observer-listener.rtl': { marginLeft: '-266px', marginRight: '0' },
-    '.os-size-observer-listener:empty::before': {
-      content: '""',
-      width: '100%',
-      height: '100%',
-    },
-    '.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item':
-      {
-        display: 'block',
-        position: 'relative',
-        padding: 'inherit',
-        border: 'inherit',
-        boxSizing: 'content-box',
-        flex: 'auto',
-      },
-    '.os-size-observer-listener-scroll': {
-      boxSizing: 'border-box',
-      display: 'flex',
-    },
-    '.os-size-observer-listener-item': {
-      right: '0',
-      bottom: '0',
-      overflow: 'hidden',
-      direction: 'ltr',
-      flex: 'none',
-    },
-    '.os-size-observer-listener-item-final': { transition: 'none' },
-    '@keyframes os-size-observer-appear-animation': {
-      from: { cursor: 'auto' },
-      to: { cursor: 'none' },
-    },
-    '.os-trinsic-observer': {
-      flex: 'none',
-      boxSizing: 'border-box',
-      position: 'relative',
-      maxWidth: '0px',
-      maxHeight: '1px',
-      padding: '0',
-      margin: '0',
-      border: 'none',
-      overflow: 'hidden',
-      zIndex: -1,
-      height: '0',
-      top: 'calc(100% + 1px)',
-      contain: 'strict',
-    },
-    '.os-trinsic-observer:not(:empty)': {
-      height: 'calc(100% + 1px)',
-      top: '-1px',
-    },
-    '.os-trinsic-observer:not(:empty) > .os-size-observer': {
-      width: '1000%',
-      height: '1000%',
-      minHeight: '1px',
-      minWidth: '1px',
-    },
-    '.os-environment': {
-      '--os-custom-prop': '-1',
-      position: 'fixed',
-      opacity: 0,
-      visibility: 'hidden',
-      overflow: 'scroll',
-      height: '200px',
-      width: '200px',
-      zIndex: 'var(--os-custom-prop)',
-    },
-    '.os-environment div': { width: '200%', height: '200%', margin: '10px 0' },
-    '.os-environment.os-environment-flexbox-glue': {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'nowrap',
-      height: 'auto',
-      width: 'auto',
-      minHeight: '200px',
-      minWidth: '200px',
-    },
-    '.os-environment.os-environment-flexbox-glue div': {
-      flex: 'auto',
-      width: 'auto',
-      height: 'auto',
-      maxHeight: '100%',
-      maxWidth: '100%',
-      margin: '0',
-    },
-    '.os-environment.os-environment-flexbox-glue-max': { maxHeight: '200px' },
-    '.os-environment.os-environment-flexbox-glue-max div': {
-      overflow: 'visible',
-    },
-    '.os-environment.os-environment-flexbox-glue-max div::before': {
-      content: '""',
-      display: 'block',
-      height: '999px',
-      width: '999px',
-    },
-    '.os-environment,\n[data-overlayscrollbars-viewport]': {
-      msOverflowStyle: 'scrollbar !important',
-    },
-    '[data-overlayscrollbars-initialize],\n[data-overlayscrollbars~=scrollbarHidden],\n[data-overlayscrollbars-viewport~=scrollbarHidden],\n.os-scrollbar-hidden.os-environment':
-      {
-        scrollbarWidth: 'none !important',
-      },
-    '[data-overlayscrollbars-initialize]::-webkit-scrollbar,\n[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner':
-      {
-        WebkitAppearance: 'none !important',
-        appearance: 'none !important',
-        display: 'none !important',
-        width: '0 !important',
-        height: '0 !important',
-      },
-    '[data-overlayscrollbars-initialize]': { overflow: 'auto' },
-    'html[data-overlayscrollbars],\nhtml.os-scrollbar-hidden,\nhtml.os-scrollbar-hidden > body': {
-      boxSizing: 'border-box',
-      margin: '0',
-      width: '100%',
-      height: '100%',
-    },
-    'html[data-overlayscrollbars] > body': { overflow: 'visible' },
-    '[data-overlayscrollbars~=host]': { position: 'relative' },
-    '[data-overlayscrollbars~=host],\n[data-overlayscrollbars-padding]': {
-      display: 'flex',
-      flexDirection: 'row !important',
-      flexWrap: 'nowrap !important',
-    },
-    '[data-overlayscrollbars-padding],\n[data-overlayscrollbars-viewport]': {
-      boxSizing: 'inherit',
-      position: 'relative',
-      flex: 'auto !important',
-      height: 'auto',
-      width: '100%',
-      padding: '0',
-      margin: '0',
-      border: 'none',
-      zIndex: 0,
-      overflow: 'hidden',
-    },
-    '[data-overlayscrollbars-viewport]': { '--os-vaw': '0', '--os-vah': '0' },
-    '[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before': {
-      content: '""',
-      position: 'absolute',
-      pointerEvents: 'none',
-      zIndex: -1,
-      minWidth: '1px',
-      minHeight: '1px',
-      width: 'var(--os-vaw)',
-      height: 'var(--os-vah)',
-    },
-    '[data-overlayscrollbars~=host],\n[data-overlayscrollbars~=viewport]': {
-      overflow: 'hidden',
-    },
-    '[data-overlayscrollbars~=overflowVisible],\n[data-overlayscrollbars-padding~=overflowVisible],\n[data-overlayscrollbars-viewport~=overflowVisible]':
-      {
-        overflow: 'visible',
-      },
-    '[data-overlayscrollbars-overflow-x=hidden]': {
-      overflowX: 'hidden',
-      overflowY: 'hidden',
-    },
-    '[data-overlayscrollbars-overflow-x=scroll]': { overflowX: 'scroll' },
-    '[data-overlayscrollbars-overflow-y=scroll]': { overflowY: 'scroll' },
-    '[data-overlayscrollbars~=scrollbarPressed],\n[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]':
-      {
-        scrollBehavior: 'auto !important',
-      },
-    '[data-overlayscrollbars-content]': { boxSizing: 'inherit' },
-    '[data-overlayscrollbars-grid],\n[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]':
-      {
-        display: 'grid',
-        gridTemplate: '1fr/1fr',
-      },
-    '[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport]':
-      {
-        height: 'auto !important',
-        width: 'auto !important',
-      },
-    '.os-scrollbar': {
-      contain: ['size layout', 'size layout style'],
-      transition:
-        'opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s',
-      pointerEvents: 'none',
-      position: 'absolute',
-      opacity: 0,
-      visibility: 'hidden',
-      '--os-size': '0',
-      '--os-padding-perpendicular': '0',
-      '--os-padding-axis': '0',
-      '--os-track-border-radius': '0',
-      '--os-track-bg': 'none',
-      '--os-track-bg-hover': 'none',
-      '--os-track-bg-active': 'none',
-      '--os-track-border': 'none',
-      '--os-track-border-hover': 'none',
-      '--os-track-border-active': 'none',
-      '--os-handle-border-radius': '0',
-      '--os-handle-bg': 'none',
-      '--os-handle-bg-hover': 'none',
-      '--os-handle-bg-active': 'none',
-      '--os-handle-border': 'none',
-      '--os-handle-border-hover': 'none',
-      '--os-handle-border-active': 'none',
-      '--os-handle-min-size': '33px',
-      '--os-handle-max-size': 'none',
-      '--os-handle-perpendicular-size': '100%',
-      '--os-handle-perpendicular-size-hover': '100%',
-      '--os-handle-perpendicular-size-active': '100%',
-      '--os-handle-interactive-area-offset': '0',
-    },
-    'body > .os-scrollbar': { position: 'fixed', zIndex: 99999 },
-    '.os-scrollbar-transitionless': { transition: 'none' },
-    '.os-scrollbar-track': {
-      position: 'relative',
-      direction: 'ltr !important',
-      padding: '0 !important',
-      border: 'none !important',
-    },
-    '.os-scrollbar-handle': { position: 'absolute' },
-    '.os-scrollbar-track,\n.os-scrollbar-handle': {
-      pointerEvents: 'none',
-      width: '100%',
-      height: '100%',
-    },
-    '.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,\n.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle':
-      {
-        pointerEvents: 'auto',
-        touchAction: 'none',
-      },
-    '.os-scrollbar-horizontal': {
-      bottom: '0',
-      left: '0',
-      padding: 'var(--os-padding-perpendicular) var(--os-padding-axis)',
-      right: 'var(--os-size)',
-      height: 'var(--os-size)',
-    },
-    '.os-scrollbar-vertical': {
-      top: '0',
-      right: '0',
-      padding: 'var(--os-padding-axis) var(--os-padding-perpendicular)',
-      bottom: 'var(--os-size)',
-      width: 'var(--os-size)',
-    },
-    '.os-scrollbar-rtl.os-scrollbar-horizontal': { right: '0' },
-    '.os-scrollbar-rtl.os-scrollbar-vertical': { right: 'auto', left: '0' },
-    '.os-scrollbar-visible,\n.os-scrollbar-interaction.os-scrollbar-visible': {
-      opacity: 1,
-      visibility: 'visible',
-    },
-    '.os-scrollbar-auto-hidden': { opacity: 0, visibility: 'hidden' },
-    '.os-scrollbar-unusable,\n.os-scrollbar-unusable *,\n.os-scrollbar-wheel,\n.os-scrollbar-wheel *':
-      {
-        pointerEvents: 'none !important',
-      },
-    '.os-scrollbar-unusable .os-scrollbar-handle': { opacity: '0 !important' },
-    '.os-scrollbar-horizontal .os-scrollbar-handle': {
-      bottom: '0',
-      minWidth: 'var(--os-handle-min-size)',
-      maxWidth: 'var(--os-handle-max-size)',
-      height: 'var(--os-handle-perpendicular-size)',
-      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s',
-    },
-    '.os-scrollbar-vertical .os-scrollbar-handle': {
-      right: '0',
-      minHeight: 'var(--os-handle-min-size)',
-      maxHeight: 'var(--os-handle-max-size)',
-      width: 'var(--os-handle-perpendicular-size)',
-      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s',
-    },
-    '.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle': {
-      right: 'auto',
-      left: '0',
-    },
-    '.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl':
-      {
-        left: '0',
-        right: '0',
-      },
-    '.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl':
-      {
-        top: '0',
-        bottom: '0',
-      },
-    '.os-scrollbar .os-scrollbar-track': {
-      border: 'var(--os-track-border)',
-      borderRadius: 'var(--os-track-border-radius)',
-      background: 'var(--os-track-bg)',
-      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s',
-    },
-    '.os-scrollbar .os-scrollbar-track:hover': {
-      border: 'var(--os-track-border-hover)',
-      background: 'var(--os-track-bg-hover)',
-    },
-    '.os-scrollbar .os-scrollbar-track:active': {
-      border: 'var(--os-track-border-active)',
-      background: 'var(--os-track-bg-active)',
-    },
-    '.os-scrollbar .os-scrollbar-handle': {
-      border: 'var(--os-handle-border)',
-      borderRadius: 'var(--os-handle-border-radius)',
-      background: theme.textMutedColor,
-      opacity: 0.5,
-    },
-    '.os-scrollbar .os-scrollbar-handle:before': {
-      content: '""',
-      position: 'absolute',
-      left: '0',
-      right: '0',
-      top: '0',
-      bottom: '0',
-      display: 'block',
-    },
-    '.os-scrollbar .os-scrollbar-handle:hover': {
-      border: 'var(--os-handle-border-hover)',
-      opacity: 0.6,
-    },
-    '.os-scrollbar .os-scrollbar-handle:active': {
-      border: 'var(--os-handle-border-active)',
-      background: 'var(--os-handle-bg-active)',
-    },
-    '.os-scrollbar-horizontal.os-scrollbar-rtl': {
-      left: 'var(--os-size)',
-      right: '0',
-    },
-    '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
-      top: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
-      bottom: 'calc(var(--os-padding-perpendicular) * -1)',
-    },
-    '.os-scrollbar-horizontal:hover .os-scrollbar-handle': {
-      height: 'var(--os-handle-perpendicular-size-hover)',
-    },
-    '.os-scrollbar-horizontal:active .os-scrollbar-handle': {
-      height: 'var(--os-handle-perpendicular-size-active)',
-    },
-    '.os-scrollbar-vertical .os-scrollbar-handle:before': {
-      left: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
-      right: 'calc(var(--os-padding-perpendicular) * -1)',
-    },
-    '.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': {
-      right:
-        'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
-      left: 'calc(var(--os-padding-perpendicular) * -1)',
-    },
-    '.os-scrollbar-vertical:hover .os-scrollbar-handle': {
-      width: 'var(--os-handle-perpendicular-size-hover)',
-    },
-    '.os-scrollbar-vertical:active .os-scrollbar-handle': {
-      width: 'var(--os-handle-perpendicular-size-active)',
-    },
-    '[data-overlayscrollbars~=updating] > .os-scrollbar,\n.os-theme-none.os-scrollbar': {
-      display: 'none !important',
-    },
-    '.os-theme-dark,\n.os-theme-light': {
-      boxSizing: 'border-box',
-      '--os-size': '10px',
-      '--os-padding-perpendicular': '2px',
-      '--os-padding-axis': '2px',
-      '--os-track-border-radius': '10px',
-      '--os-handle-interactive-area-offset': '4px',
-      '--os-handle-border-radius': '10px',
-    },
-    '.os-theme-dark': {
-      '--os-handle-bg': 'rgba(0, 0, 0, 0.44)',
-      '--os-handle-bg-hover': 'rgba(0, 0, 0, 0.55)',
-      '--os-handle-bg-active': 'rgba(0, 0, 0, 0.66)',
-    },
-    '.os-theme-light': {
-      '--os-handle-bg': 'rgba(255, 255, 255, 0.44)',
-      '--os-handle-bg-hover': 'rgba(255, 255, 255, 0.55)',
-      '--os-handle-bg-active': 'rgba(255, 255, 255, 0.66)',
-    },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle':
-      {
-        borderRadius: '10px',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track':
-      {
-        borderRadius: '10px',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal':
-      {
-        padding: '2px 2px',
-        right: '10px',
-        height: '10px',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl':
-      {
-        left: '10px',
-        right: '0',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle':
-      {
-        minWidth: '33px',
-        maxWidth: 'none',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before':
-      {
-        top: 'calc((\n                2px + 4px\n              ) * -1)',
-        bottom: 'calc(2px * -1)',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical':
-      {
-        padding: '2px 2px',
-        bottom: '10px',
-        width: '10px',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle':
-      {
-        minHeight: '33px',
-        maxHeight: 'none',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before':
-      {
-        left: 'calc((\n                2px + 4px\n              ) * -1)',
-        right: 'calc(2px * -1)',
-      },
-    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before':
-      {
-        right: 'calc((\n              2px + 4px\n            ) * -1)',
-        left: 'calc(2px * -1)',
-      },
-    '.os-no-css-vars.os-theme-dark .os-scrollbar-handle': {
-      background: 'rgba(0, 0, 0, 0.44)',
-    },
-    '.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle': {
-      background: 'rgba(0, 0, 0, 0.55)',
-    },
-    '.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle': {
-      background: 'rgba(0, 0, 0, 0.66)',
-    },
-    '.os-no-css-vars.os-theme-light .os-scrollbar-handle': {
-      background: 'rgba(255, 255, 255, 0.44)',
-    },
-    '.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle': {
-      background: 'rgba(255, 255, 255, 0.55)',
-    },
-    '.os-no-css-vars.os-theme-light:active .os-scrollbar-handle': {
-      background: 'rgba(255, 255, 255, 0.66)',
-    },
-  } as any as CSSObject);
-
-const GlobalScrollAreaStyles = () => <Global styles={getScrollAreaStyles} />;
-
-export default GlobalScrollAreaStyles;
diff --git a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx
deleted file mode 100644
index c5043032448c..000000000000
--- a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
-
-export const OverlayScrollbars = OverlayScrollbarsComponent;
-
-export default OverlayScrollbarsComponent;
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx
index e4a7a09e7dc2..59eabd84925d 100644
--- a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx
+++ b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx
@@ -84,3 +84,29 @@ export const WithOuterBorder = () => (
     />
   </ScrollArea>
 );
+
+export const CustomOffset = () => (
+  <ScrollArea horizontal vertical offset={20}>
+    {list((i) => (
+      <Fragment key={i}>
+        {list((ii) => (
+          <Block key={ii}>{ii * i}</Block>
+        ))}
+        <br />
+      </Fragment>
+    ))}
+  </ScrollArea>
+);
+
+export const CustomSize = () => (
+  <ScrollArea horizontal vertical scrollbarSize={20}>
+    {list((i) => (
+      <Fragment key={i}>
+        {list((ii) => (
+          <Block key={ii}>{ii * i}</Block>
+        ))}
+        <br />
+      </Fragment>
+    ))}
+  </ScrollArea>
+);
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
index 51a0f5786679..3bb523dddcda 100644
--- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
@@ -1,34 +1,112 @@
 import type { FC } from 'react';
-import React, { lazy, Suspense } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
-
-const GlobalScrollAreaStyles = lazy(() => import('./GlobalScrollAreaStyles'));
-const OverlayScrollbars = lazy(() => import('./OverlayScrollbars'));
-
-const Scroller: FC<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
-  <Suspense fallback={<div {...props} />}>
-    <GlobalScrollAreaStyles />
-    <OverlayScrollbars
-      defer
-      options={{ scrollbars: { autoHide: 'leave', visibility: 'auto' } }}
-      {...props}
-    />
-  </Suspense>
-);
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 export interface ScrollAreaProps {
   children?: React.ReactNode;
   horizontal?: boolean;
   vertical?: boolean;
   className?: string;
+  offset?: number;
+  scrollbarSize?: number;
 }
 
-export const ScrollArea: FC<ScrollAreaProps> = styled(Scroller)<ScrollAreaProps>(
-  ({ vertical }) => (!vertical ? { overflowY: 'hidden' } : { overflowY: 'auto', height: '100%' }),
-  ({ horizontal }) => (!horizontal ? { overflowX: 'hidden' } : { overflowX: 'auto', width: '100%' })
+const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarsize: number; offset: number }>(
+  ({ scrollbarsize, offset }) => ({
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    '--scrollbar-size': `${scrollbarsize + offset}px`,
+    '--radix-scroll-area-thumb-width': `${scrollbarsize}px`,
+  })
 );
 
-ScrollArea.defaultProps = {
-  horizontal: false,
-  vertical: false,
-};
+const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({
+  width: '100%',
+  height: '100%',
+});
+
+const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{
+  offset: number;
+  horizontal: string;
+  vertical: string;
+}>(({ offset, horizontal, vertical }) => ({
+  display: 'flex',
+  userSelect: 'none', // ensures no selection
+  touchAction: 'none', // disable browser handling of all panning and zooming gestures on touch devices
+  background: 'transparent',
+  transition: 'all 0.2s ease-out',
+  borderRadius: 'var(--scrollbar-size)',
+
+  '&[data-orientation="vertical"]': {
+    width: 'var(--scrollbar-size)',
+    paddingRight: offset,
+    marginTop: offset,
+    marginBottom: horizontal === 'true' && vertical === 'true' ? 0 : offset,
+  },
+  '&[data-orientation="horizontal"]': {
+    flexDirection: 'column',
+    height: 'var(--scrollbar-size)',
+    paddingBottom: offset,
+    marginLeft: offset,
+    marginRight: horizontal === 'true' && vertical === 'true' ? 0 : offset,
+  },
+}));
+
+const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
+  flex: 1,
+  background: theme.textMutedColor,
+  opacity: 0.5,
+  borderRadius: `var(--scrollbar-size)`,
+  position: 'relative',
+  transition: 'opacity 0.2s ease-out',
+
+  '&:hover': { opacity: 0.8 },
+
+  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%,-50%)',
+    width: '100%',
+    height: '100%',
+    minWidth: 44,
+    minHeight: 44,
+  },
+}));
+
+export const ScrollArea: FC<ScrollAreaProps> = ({
+  children,
+  horizontal = false,
+  vertical = false,
+  offset = 2,
+  scrollbarSize = 6,
+}) => (
+  <ScrollAreaRoot scrollbarsize={scrollbarSize} offset={offset}>
+    <ScrollAreaViewport>{children}</ScrollAreaViewport>
+    {horizontal && (
+      <ScrollAreaScrollbar
+        orientation="horizontal"
+        offset={offset}
+        horizontal={horizontal.toString()}
+        vertical={vertical.toString()}
+      >
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    )}
+    {vertical && (
+      <ScrollAreaScrollbar
+        orientation="vertical"
+        offset={offset}
+        horizontal={horizontal.toString()}
+        vertical={vertical.toString()}
+      >
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    )}
+    {horizontal && vertical && <ScrollAreaPrimitive.Corner />}
+  </ScrollAreaRoot>
+);
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 9a13dc094783..a223a04a2cad 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "7.5.0-alpha.4",
+  "version": "7.5.0-alpha.7",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx
index d9d03217db38..c8c71ae659cd 100644
--- a/code/ui/manager/src/components/sidebar/Search.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.tsx
@@ -85,6 +85,8 @@ const Input = styled.input(({ theme }) => ({
   fontFamily: 'inherit',
   transition: 'all 150ms',
   color: theme.color.defaultText,
+  width: '100%',
+
   '&:focus, &:active': {
     outline: 0,
     borderColor: theme.color.secondary,
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 23aacc19f099..072603211c21 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -53,15 +53,6 @@ const Bottom = styled.div(({ theme }) => ({
   },
 }));
 
-const CustomScrollArea = styled(ScrollArea)({
-  '&&&&& .os-scrollbar-handle:before': {
-    left: -12,
-  },
-  '&&&&& .os-scrollbar-vertical': {
-    right: 5,
-  },
-});
-
 const Swap = React.memo(function Swap({
   children,
   condition,
@@ -130,7 +121,7 @@ export const Sidebar = React.memo(function Sidebar({
 
   return (
     <Container className="container sidebar-container">
-      <CustomScrollArea vertical>
+      <ScrollArea vertical offset={8}>
         <Top row={1.6}>
           <Heading
             className="sidebar-header"
@@ -177,7 +168,7 @@ export const Sidebar = React.memo(function Sidebar({
             )}
           </Search>
         </Top>
-      </CustomScrollArea>
+      </ScrollArea>
       {isLoading ? null : (
         <Bottom>
           {bottom.map(({ id, render: Render }) => (
diff --git a/code/yarn.lock b/code/yarn.lock
index 3ec46c6397a8..79e6c42a6ce8 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -3731,9 +3731,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1":
-  version: 0.2.1
-  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1"
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0":
+  version: 0.3.0
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0"
   dependencies:
     glob: ^7.2.0
     glob-promise: ^4.2.0
@@ -3741,11 +3741,11 @@ __metadata:
     react-docgen-typescript: ^2.2.2
   peerDependencies:
     typescript: ">= 4.3.x"
-    vite: ^3.0.0 || ^4.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 506fea864748cce273d19c628c69ef529c4ec4b3d3a5f0d8fb9ab430dc45a0155a2ac52881410f5a475ddb6c34bc8a344b64f4edd9f738c02d43275e991906ee
+  checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0
   languageName: node
   linkType: hard
 
@@ -3973,72 +3973,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/env@npm:13.4.19"
-  checksum: 0d9cb76fedcde6f8116c5f029d999cccaf929c9eb8c55daf1d38ae223a80113abae28834e537b26b81731d84ed14fd5231301b2126cd7d9097a7e175dd79bf59
+"@next/env@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/env@npm:13.5.4"
+  checksum: 69c013047371bde6c4dc6d03ec77140059bd4e3db38c1991a8aa8a9c8ce4d1370b98a141145a6f60e23f32ce97a3040b448bfd0455b0d9e5ba6efda8df33c89f
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-darwin-arm64@npm:13.4.19"
+"@next/swc-darwin-arm64@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-darwin-arm64@npm:13.5.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-darwin-x64@npm:13.4.19"
+"@next/swc-darwin-x64@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-darwin-x64@npm:13.5.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-linux-arm64-gnu@npm:13.4.19"
+"@next/swc-linux-arm64-gnu@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-linux-arm64-gnu@npm:13.5.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-linux-arm64-musl@npm:13.4.19"
+"@next/swc-linux-arm64-musl@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-linux-arm64-musl@npm:13.5.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-linux-x64-gnu@npm:13.4.19"
+"@next/swc-linux-x64-gnu@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-linux-x64-gnu@npm:13.5.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-linux-x64-musl@npm:13.4.19"
+"@next/swc-linux-x64-musl@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-linux-x64-musl@npm:13.5.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-win32-arm64-msvc@npm:13.4.19"
+"@next/swc-win32-arm64-msvc@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-win32-arm64-msvc@npm:13.5.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-win32-ia32-msvc@npm:13.4.19"
+"@next/swc-win32-ia32-msvc@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-win32-ia32-msvc@npm:13.5.4"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:13.4.19":
-  version: 13.4.19
-  resolution: "@next/swc-win32-x64-msvc@npm:13.4.19"
+"@next/swc-win32-x64-msvc@npm:13.5.4":
+  version: 13.5.4
+  resolution: "@next/swc-win32-x64-msvc@npm:13.5.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -5234,6 +5234,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 90780618b265fe794a8f1ddaa5bfd3c71a1127fa79330a14d32722e6265b44452a9dd36efe4e769129d33e57f979f6b8713e2cbf2e2755326aa3b0f337185b6e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-primitive@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-primitive@npm:1.0.3"
@@ -5282,6 +5303,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-scroll-area@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-scroll-area@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/number": 1.0.1
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-direction": 1.0.1
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-use-callback-ref": 1.0.1
+    "@radix-ui/react-use-layout-effect": 1.0.1
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: a08818aeeb15920a02e708699a8bdc85c26eab0579ab741129b464a799b5d9a04f81810a2d200f1cf4aef03452067770e87b0f81593a689350fcd7e51819e4cb
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-select@npm:^1.2.2":
   version: 1.2.2
   resolution: "@radix-ui/react-select@npm:1.2.2"
@@ -5952,7 +6001,7 @@ __metadata:
     "@storybook/testing-library": next
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     formik: ^2.2.9
     jest-mock: ^27.0.6
     polished: ^4.2.2
@@ -6334,7 +6383,7 @@ __metadata:
     "@storybook/telemetry": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": ^6.0.2
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
     "@types/semver": ^7.3.4
@@ -6502,7 +6551,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/express": ^4.17.13
     "@types/find-cache-dir": ^3.2.1
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     browser-assert: ^1.2.1
     es-module-lexer: ^0.9.3
     express: ^4.17.3
@@ -6517,7 +6566,7 @@ __metadata:
   peerDependencies:
     "@preact/preset-vite": "*"
     typescript: ">= 4.3.x"
-    vite: ^3.0.0 || ^4.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
     vite-plugin-glimmerx: "*"
   peerDependenciesMeta:
     "@preact/preset-vite":
@@ -6543,7 +6592,7 @@ __metadata:
     "@storybook/preview": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@swc/core": ^1.3.82
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
     "@types/terser-webpack-plugin": ^5.2.0
@@ -6744,6 +6793,7 @@ __metadata:
   dependencies:
     "@chromaui/addon-visual-tests": ^0.0.77
     "@popperjs/core": ^2.6.0
+    "@radix-ui/react-scroll-area": ^1.0.5
     "@radix-ui/react-select": ^1.2.2
     "@radix-ui/react-toolbar": ^1.0.4
     "@storybook/client-logger": "workspace:*"
@@ -6756,8 +6806,6 @@ __metadata:
     "@types/util-deprecate": ^1.0.0
     css: ^3.0.0
     memoizerific: ^1.11.3
-    overlayscrollbars: 2.2.1
-    overlayscrollbars-react: ^0.5.0
     polished: ^4.2.2
     prettier: ^2.8.0
     react-popper-tooltip: ^4.4.2
@@ -6792,7 +6840,7 @@ __metadata:
     "@types/find-cache-dir": ^3.2.1
     "@types/fs-extra": ^11.0.1
     "@types/mock-fs": ^4.13.1
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/node-fetch": ^2.6.4
     "@types/picomatch": ^2.3.0
     "@types/pretty-hrtime": ^1.0.0
@@ -6851,7 +6899,7 @@ __metadata:
     "@types/compression": ^1.7.0
     "@types/detect-port": ^1.3.0
     "@types/ip": ^1.1.0
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
@@ -6894,7 +6942,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
     webpack: 5
@@ -7059,7 +7107,7 @@ __metadata:
     "@storybook/html": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-web": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     magic-string: ^0.30.0
     typescript: ~4.9.3
   languageName: unknown
@@ -7074,7 +7122,7 @@ __metadata:
     "@storybook/global": ^5.0.0
     "@storybook/html": "workspace:*"
     "@storybook/preset-html-webpack": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     typescript: ~4.9.3
   peerDependencies:
     "@babel/core": "*"
@@ -7269,13 +7317,13 @@ __metadata:
     "@types/babel__core": ^7
     "@types/babel__plugin-transform-runtime": ^7
     "@types/babel__preset-env": ^7
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     css-loader: ^6.7.3
     find-up: ^5.0.0
     fs-extra: ^11.1.0
     image-size: ^1.0.0
     loader-utils: ^3.2.0
-    next: 13.4.19
+    next: 13.5.4
     node-polyfill-webpack-plugin: ^2.0.1
     pnp-webpack-plugin: ^1.7.0
     postcss: ^8.4.21
@@ -7339,12 +7387,12 @@ __metadata:
     "@preact/preset-vite": ^2.0.0
     "@storybook/builder-vite": "workspace:*"
     "@storybook/preact": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
     preact: ">=10"
-    vite: ^3.0.0 || ^4.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -7356,7 +7404,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preact": "workspace:*"
     "@storybook/preset-preact-webpack": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
   peerDependencies:
@@ -7392,7 +7440,7 @@ __metadata:
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@storybook/types": "workspace:*"
     "@types/babel__core": ^7.1.7
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     babel-plugin-react-docgen: ^4.1.0
     pnp-webpack-plugin: ^1.7.0
     semver: ^7.3.5
@@ -7408,7 +7456,7 @@ __metadata:
   resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack"
   dependencies:
     "@storybook/core-webpack": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     html-loader: ^3.1.0
     typescript: ~4.9.3
     webpack: 5
@@ -7424,7 +7472,7 @@ __metadata:
     "@babel/plugin-transform-react-jsx": ^7.22.5
     "@babel/preset-typescript": ^7.22.5
     "@storybook/core-webpack": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
   peerDependencies:
@@ -7445,7 +7493,7 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/react": "workspace:*"
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/semver": ^7.3.4
     babel-plugin-add-react-displayname: ^0.0.5
     babel-plugin-react-docgen: ^4.2.1
@@ -7474,7 +7522,7 @@ __metadata:
     "@storybook/core-webpack": "workspace:*"
     "@storybook/global": ^5.0.0
     "@storybook/server": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     fs-extra: ^11.1.0
     jest-specific-snapshot: ^8.0.0
     safe-identifier: ^0.4.1
@@ -7509,7 +7557,7 @@ __metadata:
   dependencies:
     "@storybook/core-webpack": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     ts-loader: ^9.2.8
     typescript: ~4.9.3
     vue: ^2.6.12
@@ -7534,7 +7582,7 @@ __metadata:
   dependencies:
     "@storybook/core-webpack": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@vue/compiler-sfc": ^3.2.33
     ts-loader: ^9.2.8
     typescript: ~4.9.3
@@ -7559,13 +7607,13 @@ __metadata:
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.22.9
     "@storybook/core-webpack": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
     babel-plugin-bundled-import-meta: ^0.3.1
     lit: 2.3.1
     typescript: ~4.9.3
   peerDependencies:
-    lit: ^2.0.0
+    lit: ^2.0.0 || ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -7652,11 +7700,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-vite@workspace:frameworks/react-vite"
   dependencies:
-    "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
+    "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0
     "@rollup/pluginutils": ^5.0.2
     "@storybook/builder-vite": "workspace:*"
     "@storybook/react": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@vitejs/plugin-react": ^3.0.1
     magic-string: ^0.30.0
     react-docgen: ^6.0.2
@@ -7665,7 +7713,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
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -7676,7 +7724,7 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/preset-react-webpack": "workspace:*"
     "@storybook/react": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     jest-specific-snapshot: ^8.0.0
   peerDependencies:
     "@babel/core": ^7.22.0
@@ -7705,7 +7753,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/escodegen": ^0.0.6
     "@types/estree": ^0.0.51
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/util-deprecate": ^1.0.0
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
@@ -7848,7 +7896,7 @@ __metadata:
     "@types/express": ^4.17.11
     "@types/fs-extra": ^11.0.1
     "@types/lodash": ^4.14.167
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
     "@types/semver": ^7.3.4
@@ -7950,7 +7998,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-server-webpack": "workspace:*"
     "@storybook/server": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -8010,16 +8058,17 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/svelte": "workspace:*"
     "@sveltejs/vite-plugin-svelte": ^2.4.2
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     magic-string: ^0.30.0
     svelte: ^4.0.0
+    svelte-preprocess: ^5.0.4
     sveltedoc-parser: ^4.2.1
     ts-dedent: ^2.2.0
     typescript: ~4.9.3
     vite: ^4.0.0
   peerDependencies:
     svelte: ^3.0.0 || ^4.0.0
-    vite: ^3.0.0 || ^4.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -8072,7 +8121,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/svelte": "workspace:*"
     "@storybook/svelte-vite": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     typescript: ^4.9.3
     vite: ^4.0.0
   peerDependencies:
@@ -8137,7 +8186,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/global": ^5.0.0
     "@types/fs-extra": ^11.0.1
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     deep-object-diff: ^1.1.0
     fs-extra: ^11.1.0
     memoizerific: ^1.11.3
@@ -8159,7 +8208,7 @@ __metadata:
     "@types/babel__core": ^7.0.0
     "@types/express": ^4.7.0
     "@types/fs-extra": ^11.0.1
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     file-system-cache: 2.3.0
     typescript: ~4.9.3
   languageName: unknown
@@ -8181,7 +8230,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
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
     vue: ^2.7.0
   languageName: unknown
   linkType: soft
@@ -8194,7 +8243,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-vue-webpack": "workspace:*"
     "@storybook/vue": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     typescript: ~4.9.3
     vue: ^2.6.12
     vue-loader: ^15.7.0
@@ -8218,7 +8267,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/vue3": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@vitejs/plugin-vue": ^4.0.0
     magic-string: ^0.30.0
     typescript: ~4.9.3
@@ -8227,7 +8276,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
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -8239,7 +8288,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-vue3-webpack": "workspace:*"
     "@storybook/vue3": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@vue/compiler-sfc": 3.0.0
     typescript: ~4.9.3
     vue: 3.0.0
@@ -8313,7 +8362,7 @@ __metadata:
     "@storybook/core-server": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/web-components": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     magic-string: ^0.30.0
     typescript: ~4.9.3
   peerDependencies:
@@ -8331,11 +8380,11 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-web-components-webpack": "workspace:*"
     "@storybook/web-components": "workspace:*"
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     lit: 2.3.1
     typescript: ~4.9.3
   peerDependencies:
-    lit: ^2.0.0
+    lit: ^2.0.0 || ^3.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
@@ -8353,7 +8402,7 @@ __metadata:
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": ^6.0.2
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     cross-spawn: ^7.0.3
     lit: 2.3.1
     tiny-invariant: ^1.3.1
@@ -8361,7 +8410,7 @@ __metadata:
     typescript: ~4.9.3
     web-component-analyzer: ^1.1.6
   peerDependencies:
-    lit: ^2.0.0
+    lit: ^2.0.0 || ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -8641,12 +8690,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.1":
-  version: 0.5.1
-  resolution: "@swc/helpers@npm:0.5.1"
+"@swc/helpers@npm:0.5.2":
+  version: 0.5.2
+  resolution: "@swc/helpers@npm:0.5.2"
   dependencies:
     tslib: ^2.4.0
-  checksum: 2e2272c8278351670e1daf27cc634ace793afb378dcc85be2800d30a7b4d3afad37707371ead2a6d96662fa30294da678d66cdc4dc7f3e698bd8e111235c60fc
+  checksum: b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164
   languageName: node
   linkType: hard
 
@@ -9453,10 +9502,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^16.0.0":
-  version: 16.18.57
-  resolution: "@types/node@npm:16.18.57"
-  checksum: 191cfb12fde8c882f1d982a07302f7b87cda7b93ec227b0607f908f3b3b11c5ff96bbed613f370818ea60a8a98140962b193324bdadff679bd5ca75d04407e60
+"@types/node@npm:^18.0.0":
+  version: 18.18.4
+  resolution: "@types/node@npm:18.18.4"
+  checksum: 17891f8b8fd107813eaea0dce58d2008173f3c90df4f5998da3d01d6b225e9908922156ac83240b0230d3813f1a29b5f7e065a2aa993285af062e3a3779f88dd
   languageName: node
   linkType: hard
 
@@ -23793,7 +23842,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.4, nanoid@npm:^3.3.6":
+"nanoid@npm:^3.3.6":
   version: 3.3.6
   resolution: "nanoid@npm:3.3.6"
   bin:
@@ -23888,27 +23937,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:13.4.19":
-  version: 13.4.19
-  resolution: "next@npm:13.4.19"
+"next@npm:13.5.4":
+  version: 13.5.4
+  resolution: "next@npm:13.5.4"
   dependencies:
-    "@next/env": 13.4.19
-    "@next/swc-darwin-arm64": 13.4.19
-    "@next/swc-darwin-x64": 13.4.19
-    "@next/swc-linux-arm64-gnu": 13.4.19
-    "@next/swc-linux-arm64-musl": 13.4.19
-    "@next/swc-linux-x64-gnu": 13.4.19
-    "@next/swc-linux-x64-musl": 13.4.19
-    "@next/swc-win32-arm64-msvc": 13.4.19
-    "@next/swc-win32-ia32-msvc": 13.4.19
-    "@next/swc-win32-x64-msvc": 13.4.19
-    "@swc/helpers": 0.5.1
+    "@next/env": 13.5.4
+    "@next/swc-darwin-arm64": 13.5.4
+    "@next/swc-darwin-x64": 13.5.4
+    "@next/swc-linux-arm64-gnu": 13.5.4
+    "@next/swc-linux-arm64-musl": 13.5.4
+    "@next/swc-linux-x64-gnu": 13.5.4
+    "@next/swc-linux-x64-musl": 13.5.4
+    "@next/swc-win32-arm64-msvc": 13.5.4
+    "@next/swc-win32-ia32-msvc": 13.5.4
+    "@next/swc-win32-x64-msvc": 13.5.4
+    "@swc/helpers": 0.5.2
     busboy: 1.6.0
     caniuse-lite: ^1.0.30001406
-    postcss: 8.4.14
+    postcss: 8.4.31
     styled-jsx: 5.1.1
     watchpack: 2.4.0
-    zod: 3.21.4
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
     react: ^18.2.0
@@ -23940,7 +23988,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 557fd15a52220f003ec88a79f51de41c5bb9cda5294944985f31ce45e75f98dd3caf902896d8419d96cc81596976671e953391b1eb3707757d261e362a242310
+  checksum: 0b0bc7fa42844859a0444a79122a48b5e65116c30ce077a3edaaecd7cee1d7925214a659391ae6ecf8dc612869a7a646ab3a1a8aa12d074ff17e3f18c53a2621
   languageName: node
   linkType: hard
 
@@ -24976,23 +25024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"overlayscrollbars-react@npm:^0.5.0":
-  version: 0.5.2
-  resolution: "overlayscrollbars-react@npm:0.5.2"
-  peerDependencies:
-    overlayscrollbars: ^2.0.0
-    react: ">=16.8.0"
-  checksum: 56e8df609f589cd38c97408d743ebd9112047c60da340c8f121b10418beabd1b5411396f4c1fd27b46dd0e663e7675ae72df1c531feb1e3f6bf1342dbafa21ef
-  languageName: node
-  linkType: hard
-
-"overlayscrollbars@npm:2.2.1":
-  version: 2.2.1
-  resolution: "overlayscrollbars@npm:2.2.1"
-  checksum: 718dd563ee17a8c92a54f0b67989806edadd5b999e36d2ab322e7813b369d1cf0198d7267ca42ca9e879023f0658825e2b050d2845e751d876285d1d3549cb5e
-  languageName: node
-  linkType: hard
-
 "override-require@npm:^1.1.1":
   version: 1.1.1
   resolution: "override-require@npm:1.1.1"
@@ -26065,25 +26096,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.14":
-  version: 8.4.14
-  resolution: "postcss@npm:8.4.14"
+"postcss@npm:8.4.27":
+  version: 8.4.27
+  resolution: "postcss@npm:8.4.27"
   dependencies:
-    nanoid: ^3.3.4
+    nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 2a4cfa28e2f1bfd358313501f7771bd596e494487c7b735c492e2f8b1faf493d24fcb43e2e6ad825863fc65a77abb949ca8f228602ae46a022f02dc812c4ac8b
+  checksum: 41a0476e05cb97514ff8d75e4ff9fdcf778f22b2e0d25b7028f219cd408e01d3c4f50459d4a1cd9a430d8ef08202c881374a4fa4ea6009f4a135a07315d606e5
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.27":
-  version: 8.4.27
-  resolution: "postcss@npm:8.4.27"
+"postcss@npm:8.4.31, postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
   dependencies:
     nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 41a0476e05cb97514ff8d75e4ff9fdcf778f22b2e0d25b7028f219cd408e01d3c4f50459d4a1cd9a430d8ef08202c881374a4fa4ea6009f4a135a07315d606e5
+  checksum: 748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf
   languageName: node
   linkType: hard
 
@@ -26097,17 +26128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27":
-  version: 8.4.31
-  resolution: "postcss@npm:8.4.31"
-  dependencies:
-    nanoid: ^3.3.6
-    picocolors: ^1.0.0
-    source-map-js: ^1.0.2
-  checksum: 748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf
-  languageName: node
-  linkType: hard
-
 "preact-render-to-string@npm:^5.1.19":
   version: 5.2.6
   resolution: "preact-render-to-string@npm:5.2.6"
@@ -33284,13 +33304,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:3.21.4":
-  version: 3.21.4
-  resolution: "zod@npm:3.21.4"
-  checksum: 161e8cf7aea38a99244d65da4a9477d9d966f6a533e503feaa20ff7968a9691065c38c6f1eab5cbbdc8374142fff4a05c9cacb8479803ab50ab6a6ca80e5d624
-  languageName: node
-  linkType: hard
-
 "zone.js@npm:^0.13.0":
   version: 0.13.3
   resolution: "zone.js@npm:0.13.3"
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index e0317f634c8d..21337442dd23 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -15,6 +15,13 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github
 
 ```shell
 git clone https://github.com/your-username/storybook.git
+cd storybook
+```
+
+Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [Corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook.
+
+```shell
+corepack enable
 ```
 
 ## Run your first sandbox
diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md
index c1f8222a9885..190cfe1e84f8 100644
--- a/docs/essentials/highlight.md
+++ b/docs/essentials/highlight.md
@@ -52,6 +52,12 @@ Out of the box, Storybook automatically removes highlighted elements when transi
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+ℹ️  The `emit` function derived from the `useChannel` API hook creates a communication channel in Storybook's UI to listen for events and update the UI accordingly. The Highlight addon uses this channel to listen to custom events and update the highlighted elements (if any) accordingly.
+
+</div>
+
 ## Customize style
 
 By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
@@ -70,4 +76,4 @@ By default, the addon applies a standard style to the highlighted elements you'v
   ]}
 />
 
-<!-- prettier-ignore-end -->
+<!-- prettier-ignore-end -->
\ No newline at end of file
diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
index 76e7798c81fc..9af82cee3503 100644
--- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -2,6 +2,7 @@
 // Button.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
 
 import { action } from '@storybook/addon-actions';
 
@@ -17,7 +18,13 @@ type Story = StoryObj<Button>;
 export const Text: Story = {
   render: (args) => ({
     props: args,
-    template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
+    // The argsToTemplate helper function converts the args to property and event bindings.
+    // You could also write the template in plain HTML and bind to the component's inputs and outputs yourself:
+    // <storybook-button ["label"]="label" (onClick)="onClick($event)">
+    // We don't recommend the latter since it can conflict with how Storybook applies arguments via its controls addon.
+    // Binding to the component's inputs and outputs yourself will conflict with default values set inside the component's class.
+    // In edge-case scenarios, you may need to define the template yourself, though.
+    template: `<storybook-button ${argsToTemplate(args)}></storybook-button>`,
   }),
   args: {
     label: 'Hello',
diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx
index 7d8159824699..e721c3886cd4 100644
--- a/docs/snippets/angular/button-story-click-handler.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler.ts.mdx
@@ -20,6 +20,7 @@ export const Text: Story = {
       label: 'Button',
       onClick: action('clicked'),
     },
+    template: `<storybook-button [label]="label" (onClick)="onClick($event)"></storybook-button>`,
   }),
 };
 ```
diff --git a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
index 7894bbf57045..603291c742a6 100644
--- a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { moduleMetadata } from '@storybook/angular';
+import { moduleMetadata, argsToTemplate } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -26,14 +26,15 @@ type Story = StoryObj<MyComponent>;
 
 // This story uses a render function to fully control how the component renders.
 export const Example: Story = {
-  render: () => ({
+  render: (args) => ({
+    props: args,
     template: `
       <app-layout>
         <header>
           <h1>Example</h1>
         </header>
         <article>
-          <app-my-component></app-my-component>
+          <app-my-component ${argsToTemplate(args)}></app-my-component>
         </article>
       </app-layout>
     `,
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index 63ac7f3309cc..54e1896d9205 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -2,6 +2,7 @@
 // Page.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
+import { argsToTemplate } from '@storybook/angular';
 
 import { Page } from './page.component';
 
@@ -12,7 +13,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
   render: ({ footer, ...args }) => ({
     props: args,
     template: `
-      <storybook-page>
+      <storybook-page ${argsToTemplate(args)}>
         <ng-container footer>${footer}</ng-container>
       </storybook-page>`,
   }),
diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx
index c064b7ae6cf6..8b1c055636a9 100644
--- a/docs/snippets/common/chromatic-github-action.js.mdx
+++ b/docs/snippets/common/chromatic-github-action.js.mdx
@@ -15,8 +15,14 @@ jobs:
     # Job steps
     steps:
       - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
       - run: yarn
-        #👇 Adds Chromatic as a step in the workflow
+      #👇 Adds Chromatic as a step in the workflow
       - uses: chromaui/action@v1
         # Options required for Chromatic's GitHub Action
         with:
diff --git a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx
index 000ccf44ba14..40443a0e7f67 100644
--- a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx
+++ b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
       - name: Install dependencies
         run: yarn
       - name: Install Playwright
diff --git a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx
index ff965af6f45d..b79f70920e43 100644
--- a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx
+++ b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx
@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
       - name: Install dependencies
         run: yarn
       - name: Install Playwright
diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
index c1e3bc64d80f..8d63bbf2ed9f 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.story.js|jsx
+// MyComponent.stories.js|jsx
 
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx
index f693a660cf14..86957338d89e 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx
@@ -1,5 +1,5 @@
 ```tsx
-// MyComponent.story.ts|tsx
+// MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
 
diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
index ee42d9ce9fd2..f93e8cb280f3 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
@@ -1,5 +1,5 @@
 ```tsx
-// MyComponent.story.ts|tsx
+// MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
 
diff --git a/docs/versions/next.json b/docs/versions/next.json
index e6e5140c4079..292505dea3d1 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.5.0-alpha.4","info":{"plain":"- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!\n- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!\n- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!\n- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!"}}
+{"version":"7.5.0-alpha.7","info":{"plain":"- Angular: Allow loading standalone directives - [#24448](https://github.com/storybookjs/storybook/pull/24448), thanks [@osnoser1](https://github.com/osnoser1)!\n- Svelte: Fix docs generating when using `lang=\\\"ts\\\"` or optional chaining - [#24096](https://github.com/storybookjs/storybook/pull/24096), thanks [@j3rem1e](https://github.com/j3rem1e)!\n- Vite: Support Vite 5 - [#24395](https://github.com/storybookjs/storybook/pull/24395), thanks [@IanVS](https://github.com/IanVS)!"}}
diff --git a/scripts/.babelrc.js b/scripts/.babelrc.js
index 508d8180dc10..31016fd42625 100644
--- a/scripts/.babelrc.js
+++ b/scripts/.babelrc.js
@@ -9,7 +9,7 @@ module.exports = {
         shippedProposals: true,
         useBuiltIns: 'usage',
         corejs: '3',
-        targets: { node: '16' },
+        targets: { node: '18' },
       },
     ],
   ],
diff --git a/scripts/package.json b/scripts/package.json
index 8a1ace601a4d..b6020c436390 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -13,6 +13,8 @@
     "lint:js:cmd": "cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:package": "sort-package-json",
     "migrate-docs": "node --require esbuild-register ./ts-to-ts49.ts",
+    "release:cancel-preparation-runs": "ts-node --swc ./release/cancel-preparation-runs.ts",
+    "release:ensure-next-ahead": "ts-node --swc ./release/ensure-next-ahead.ts",
     "release:generate-pr-description": "ts-node --swc ./release/generate-pr-description.ts",
     "release:get-changelog-from-file": "ts-node --swc ./release/get-changelog-from-file.ts",
     "release:get-current-version": "ts-node --swc ./release/get-current-version.ts",
@@ -73,6 +75,7 @@
     "@jest/globals": "^29.3.1",
     "@nx/workspace": "16.2.1",
     "@octokit/graphql": "^5.0.5",
+    "@octokit/request": "^8.1.2",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "next",
     "@storybook/linter-config": "^3.1.2",
@@ -90,7 +93,7 @@
     "@types/fs-extra": "^11.0.1",
     "@types/http-server": "^0.12.1",
     "@types/lodash": "^4",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/prettier": "^2",
     "@types/pretty-hrtime": "^1.0.0",
@@ -200,6 +203,6 @@
   },
   "packageManager": "yarn@3.3.0",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   }
 }
diff --git a/scripts/release/__tests__/cancel-preparation-runs.test.ts b/scripts/release/__tests__/cancel-preparation-runs.test.ts
new file mode 100644
index 000000000000..aaf8cdbec718
--- /dev/null
+++ b/scripts/release/__tests__/cancel-preparation-runs.test.ts
@@ -0,0 +1,107 @@
+/* eslint-disable global-require */
+/* eslint-disable no-underscore-dangle */
+import {
+  PREPARE_NON_PATCH_WORKFLOW_PATH,
+  PREPARE_PATCH_WORKFLOW_PATH,
+  run as cancelPreparationWorkflows,
+} from '../cancel-preparation-runs';
+import * as github_ from '../utils/github-client';
+
+jest.mock('../utils/github-client');
+
+const github = jest.mocked(github_);
+
+jest.spyOn(console, 'log').mockImplementation(() => {});
+jest.spyOn(console, 'warn').mockImplementation(() => {});
+jest.spyOn(console, 'error').mockImplementation(() => {});
+
+describe('Cancel preparation runs', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    github.githubRestClient.mockImplementation(((route: string, options: any) => {
+      switch (route) {
+        case 'GET /repos/{owner}/{repo}/actions/workflows':
+          return {
+            data: {
+              workflows: [
+                {
+                  id: 1,
+                  path: PREPARE_PATCH_WORKFLOW_PATH,
+                },
+                {
+                  id: 2,
+                  path: PREPARE_NON_PATCH_WORKFLOW_PATH,
+                },
+              ],
+            },
+          };
+        case 'GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs':
+          return {
+            data: {
+              workflow_runs: [
+                {
+                  id: options.workflow_id === 1 ? 100 : 200,
+                  status: 'in_progress',
+                },
+                {
+                  id: options.workflow_id === 1 ? 150 : 250,
+                  status: 'completed',
+                },
+              ],
+            },
+          };
+        case 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel':
+          return undefined; // success
+        default:
+          throw new Error(`Unexpected route: ${route}`);
+      }
+    }) as any);
+  });
+
+  it('should fail early when no GH_TOKEN is set', async () => {
+    delete process.env.GH_TOKEN;
+    await expect(cancelPreparationWorkflows()).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"GH_TOKEN environment variable must be set, exiting."`
+    );
+  });
+
+  it('should cancel all running preparation workflows in GitHub', async () => {
+    process.env.GH_TOKEN = 'MY_SECRET';
+
+    await expect(cancelPreparationWorkflows()).resolves.toBeUndefined();
+
+    expect(github.githubRestClient).toHaveBeenCalledTimes(5);
+    expect(github.githubRestClient).toHaveBeenCalledWith(
+      'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel',
+      {
+        owner: 'storybookjs',
+        repo: 'storybook',
+        run_id: 100,
+      }
+    );
+    expect(github.githubRestClient).toHaveBeenCalledWith(
+      'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel',
+      {
+        owner: 'storybookjs',
+        repo: 'storybook',
+        run_id: 200,
+      }
+    );
+    expect(github.githubRestClient).not.toHaveBeenCalledWith(
+      'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel',
+      {
+        owner: 'storybookjs',
+        repo: 'storybook',
+        run_id: 150,
+      }
+    );
+    expect(github.githubRestClient).not.toHaveBeenCalledWith(
+      'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel',
+      {
+        owner: 'storybookjs',
+        repo: 'storybook',
+        run_id: 250,
+      }
+    );
+  });
+});
diff --git a/scripts/release/__tests__/ensure-next-ahead.test.ts b/scripts/release/__tests__/ensure-next-ahead.test.ts
new file mode 100644
index 000000000000..0b192d39b106
--- /dev/null
+++ b/scripts/release/__tests__/ensure-next-ahead.test.ts
@@ -0,0 +1,85 @@
+/* eslint-disable global-require */
+/* eslint-disable no-underscore-dangle */
+import path from 'path';
+import { run as ensureNextAhead } from '../ensure-next-ahead';
+import * as gitClient_ from '../utils/git-client';
+import * as bumpVersion_ from '../version';
+
+jest.mock('../utils/git-client', () => jest.requireActual('jest-mock-extended').mockDeep());
+const gitClient = jest.mocked(gitClient_);
+
+// eslint-disable-next-line jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../code/__mocks__/fs-extra'));
+const fsExtra = require('fs-extra');
+
+jest.mock('../version', () => jest.requireActual('jest-mock-extended').mockDeep());
+const bumpVersion = jest.mocked(bumpVersion_);
+
+jest.spyOn(console, 'log').mockImplementation(() => {});
+jest.spyOn(console, 'warn').mockImplementation(() => {});
+jest.spyOn(console, 'error').mockImplementation(() => {});
+
+const CODE_PACKAGE_JSON_PATH = path.join(__dirname, '..', '..', '..', 'code', 'package.json');
+
+describe('Ensure next ahead', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    gitClient.git.status.mockResolvedValue({ current: 'next' } as any);
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0' }),
+    });
+  });
+
+  it('should throw when main-version is missing', async () => {
+    await expect(ensureNextAhead({})).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "code": "invalid_type",
+          "expected": "string",
+          "received": "undefined",
+          "path": [
+            "mainVersion"
+          ],
+          "message": "Required"
+        }
+      ]"
+    `);
+  });
+
+  it('should throw when main-version is not a semver string', async () => {
+    await expect(ensureNextAhead({ mainVersion: '200' })).rejects
+      .toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "code": "custom",
+          "message": "main-version must be a valid semver version string like '7.4.2'.",
+          "path": []
+        }
+      ]"
+    `);
+  });
+
+  it('should not bump version when next is already ahead of main', async () => {
+    await expect(ensureNextAhead({ mainVersion: '1.0.0' })).resolves.toBeUndefined();
+    expect(bumpVersion.run).not.toHaveBeenCalled();
+  });
+
+  it('should bump version to 3.1.0-alpha.0 when main is 3.0.0 and next is 2.0.0', async () => {
+    await expect(ensureNextAhead({ mainVersion: '3.0.0' })).resolves.toBeUndefined();
+    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '3.1.0-alpha.0' });
+  });
+
+  it('should bump version to 2.1.0-alpha.0 when main and next are both 2.0.0', async () => {
+    await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined();
+    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' });
+  });
+
+  it('should bump version to 2.1.0-alpha.0 when main is 2.0.0 and and next is 2.0.0-rc.10', async () => {
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0-rc.10' }),
+    });
+
+    await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined();
+    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' });
+  });
+});
diff --git a/scripts/release/__tests__/generate-pr-description.test.ts b/scripts/release/__tests__/generate-pr-description.test.ts
index b0f1bbe89db5..50aa5de8e019 100644
--- a/scripts/release/__tests__/generate-pr-description.test.ts
+++ b/scripts/release/__tests__/generate-pr-description.test.ts
@@ -15,6 +15,7 @@ describe('Generate PR Description', () => {
       labels: ['bug', 'build', 'other label', 'patch:yes'],
       commit: 'abc123',
       pull: 42,
+      state: 'MERGED',
       links: {
         commit: '[abc123](https://github.com/storybookjs/storybook/commit/abc123)',
         pull: '[#42](https://github.com/storybookjs/storybook/pull/42)',
@@ -26,6 +27,7 @@ describe('Generate PR Description', () => {
       id: null,
       user: 'storybook-bot',
       pull: null,
+      state: null,
       commit: '012b58140c3606efeacbe99c0c410624b0a1ed1f',
       title: 'Bump version on `next`: preminor (alpha) from 7.2.0 to 7.3.0-alpha.0',
       labels: null,
@@ -41,6 +43,7 @@ describe('Generate PR Description', () => {
       user: 'shilman',
       title: 'Some title for a "direct commit"',
       labels: null,
+      state: null,
       commit: '22bb11',
       pull: null,
       links: {
@@ -55,6 +58,7 @@ describe('Generate PR Description', () => {
       title: 'Another PR `title` for docs',
       labels: ['another label', 'documentation', 'patch:yes'],
       commit: 'ddd222',
+      state: 'MERGED',
       pull: 11,
       links: {
         commit: '[ddd222](https://github.com/storybookjs/storybook/commit/ddd222)',
@@ -69,6 +73,7 @@ describe('Generate PR Description', () => {
       labels: ['feature request', 'other label'],
       commit: 'wow1337',
       pull: 48,
+      state: 'MERGED',
       links: {
         commit: '[wow1337](https://github.com/storybookjs/storybook/commit/wow1337)',
         pull: '[#48](https://github.com/storybookjs/storybook/pull/48)',
@@ -81,6 +86,7 @@ describe('Generate PR Description', () => {
       title: 'Some PR title with a missing label',
       labels: ['incorrect label', 'other label'],
       commit: 'bad999',
+      state: 'MERGED',
       pull: 77,
       links: {
         commit: '[bad999](https://github.com/storybookjs/storybook/commit/bad999)',
@@ -213,7 +219,7 @@ For each pull request below, you need to either manually cherry pick it, or disc
 
         - [ ] [#42](https://github.com/storybookjs/storybook/pull/42): \\\`git cherry-pick -m1 -x abc123\\\`
 
-        If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected.
+        If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected.
 
         Feel free to manually commit any changes necessary to this branch **after** you\\'ve done the last re-generation, following the [Make Manual Changes](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING/RELEASING.md#5-make-manual-changes) section in the docs, *especially* if you\\'re making changes to the changelog.
 
@@ -340,7 +346,7 @@ For each pull request below, you need to either manually cherry pick it, or disc
 
 
 
-        If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected.
+        If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected.
 
         Feel free to manually commit any changes necessary to this branch **after** you\\'ve done the last re-generation, following the [Make Manual Changes](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING/RELEASING.md#5-make-manual-changes) section in the docs, *especially* if you\\'re making changes to the changelog.
 
diff --git a/scripts/release/__tests__/is-pr-frozen.test.ts b/scripts/release/__tests__/is-pr-frozen.test.ts
index 63747a863ddf..00331e0555cd 100644
--- a/scripts/release/__tests__/is-pr-frozen.test.ts
+++ b/scripts/release/__tests__/is-pr-frozen.test.ts
@@ -26,6 +26,7 @@ describe('isPrFrozen', () => {
   it('should return true when PR is frozen', async () => {
     getPullInfoFromCommit.mockResolvedValue({
       labels: ['freeze'],
+      state: 'OPEN',
     });
     await expect(isPrFrozen({ patch: false })).resolves.toBe(true);
   });
@@ -33,6 +34,15 @@ describe('isPrFrozen', () => {
   it('should return false when PR is not frozen', async () => {
     getPullInfoFromCommit.mockResolvedValue({
       labels: [],
+      state: 'OPEN',
+    });
+    await expect(isPrFrozen({ patch: false })).resolves.toBe(false);
+  });
+
+  it('should return false when PR is closed', async () => {
+    getPullInfoFromCommit.mockResolvedValue({
+      labels: ['freeze'],
+      state: 'CLOSED',
     });
     await expect(isPrFrozen({ patch: false })).resolves.toBe(false);
   });
@@ -54,7 +64,7 @@ describe('isPrFrozen', () => {
     });
     await isPrFrozen({ patch: false });
 
-    expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-prerelease-from-1.0.0', {
+    expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-non-patch-from-1.0.0', {
       '--depth': 1,
     });
   });
diff --git a/scripts/release/__tests__/label-patches.test.ts b/scripts/release/__tests__/label-patches.test.ts
index d98abc7eb763..d43290a1828c 100644
--- a/scripts/release/__tests__/label-patches.test.ts
+++ b/scripts/release/__tests__/label-patches.test.ts
@@ -58,6 +58,7 @@ const pullInfoMock = {
   commit: '930b47f011f750c44a1782267d698ccdd3c04da3',
   title: 'Legal: Fix license',
   labels: ['documentation', 'patch:yes', 'patch:done'],
+  state: 'MERGED',
   links: {
     commit:
       '[`930b47f011f750c44a1782267d698ccdd3c04da3`](https://github.com/storybookjs/storybook/commit/930b47f011f750c44a1782267d698ccdd3c04da3)',
diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts
new file mode 100644
index 000000000000..630bfb4847b3
--- /dev/null
+++ b/scripts/release/cancel-preparation-runs.ts
@@ -0,0 +1,107 @@
+/**
+ * This script cancels all running preparation workflows in GitHub.
+ * It will fetch all active runs for the preparation workflows, and cancel them.
+ */
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import dedent from 'ts-dedent';
+import { githubRestClient } from './utils/github-client';
+
+program
+  .name('cancel-preparation-workflows')
+  .description('cancel all running preparation workflows in GitHub');
+
+export const PREPARE_PATCH_WORKFLOW_PATH = '.github/workflows/prepare-patch-release.yml';
+export const PREPARE_NON_PATCH_WORKFLOW_PATH = '.github/workflows/prepare-non-patch-release.yml';
+
+export const run = async () => {
+  if (!process.env.GH_TOKEN) {
+    throw new Error('GH_TOKEN environment variable must be set, exiting.');
+  }
+
+  console.log(`🔎 Looking for workflows to cancel...`);
+  const allWorkflows = await githubRestClient('GET /repos/{owner}/{repo}/actions/workflows', {
+    owner: 'storybookjs',
+    repo: 'storybook',
+  });
+
+  const preparePatchWorkflowId = allWorkflows.data.workflows.find(
+    ({ path }) => path === PREPARE_PATCH_WORKFLOW_PATH
+  )?.id;
+  const prepareNonPatchWorkflowId = allWorkflows.data.workflows.find(
+    ({ path }) => path === PREPARE_NON_PATCH_WORKFLOW_PATH
+  )?.id;
+
+  console.log(`Found workflow IDs for the preparation workflows:
+    ${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${chalk.green(preparePatchWorkflowId)}
+    ${chalk.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${chalk.green(prepareNonPatchWorkflowId)}`);
+
+  if (!preparePatchWorkflowId || !prepareNonPatchWorkflowId) {
+    throw new Error(dedent`🚨 Could not find workflow IDs for the preparation workflows
+    - Looked for paths: "${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${chalk.blue(
+      PREPARE_NON_PATCH_WORKFLOW_PATH
+    )}", are they still correct?
+    - Found workflows:
+      ${JSON.stringify(allWorkflows.data.workflows, null, 2)}`);
+  }
+
+  console.log('🔍 Fetching patch and non-patch runs for preparation workflows...');
+  const [patchRuns, nonPatchRuns] = await Promise.all([
+    githubRestClient('GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs', {
+      owner: 'storybookjs',
+      repo: 'storybook',
+      workflow_id: preparePatchWorkflowId,
+    }),
+    githubRestClient('GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs', {
+      owner: 'storybookjs',
+      repo: 'storybook',
+      workflow_id: prepareNonPatchWorkflowId,
+    }),
+  ]);
+  console.log('✅ Successfully fetched patch and non-patch runs for preparation workflows.');
+
+  const runsToCancel = patchRuns.data.workflow_runs
+    .concat(nonPatchRuns.data.workflow_runs)
+    .filter(({ status }) =>
+      ['in_progress', 'pending', 'queued', 'requested', 'waiting'].includes(status)
+    );
+
+  if (runsToCancel.length === 0) {
+    console.log('👍 No runs to cancel.');
+    return;
+  }
+
+  console.log(`🔍 Found ${runsToCancel.length} runs to cancel. Cancelling them now:
+    ${runsToCancel
+      .map((r) => `${chalk.green(r.path)} - ${chalk.green(r.id)}: ${chalk.blue(r.status)}`)
+      .join('\n    ')}`);
+
+  const result = await Promise.allSettled(
+    runsToCancel.map((r) =>
+      githubRestClient('POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', {
+        owner: 'storybookjs',
+        repo: 'storybook',
+        run_id: r.id,
+      })
+    )
+  );
+
+  if (result.some((r) => r.status === 'rejected')) {
+    console.warn('⚠️ Some runs could not be cancelled:');
+    result.forEach((r, index) => {
+      if (r.status === 'rejected') {
+        console.warn(`Run ID: ${runsToCancel[index].id} - Reason: ${r.reason}`);
+      }
+    });
+  } else {
+    console.log('✅ Successfully cancelled all preparation runs.');
+  }
+};
+
+if (require.main === module) {
+  run().catch((err) => {
+    console.error(err);
+    // this is non-critical work, so we don't want to fail the CI build if this fails
+  });
+}
diff --git a/scripts/release/ensure-next-ahead.ts b/scripts/release/ensure-next-ahead.ts
new file mode 100644
index 000000000000..1aa32bfd932c
--- /dev/null
+++ b/scripts/release/ensure-next-ahead.ts
@@ -0,0 +1,101 @@
+/**
+ * This script ensures that next is always one minor ahead of main.
+ * This is needed when releasing a stable from next.
+ * Next will be at eg. 7.4.0-alpha.4, and main will be at 7.3.0.
+ * Then we release 7.4.0 by merging next to latest-release to main.
+ * We then ensure here that next is bumped to 7.5.0-alpha.0 - without releasing it.
+ * If this is a patch release bumping main to 7.3.1, next will not be touched because it's already ahead.
+ */
+
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import path from 'path';
+import program from 'commander';
+import semver from 'semver';
+import { z } from 'zod';
+import { readJson } from 'fs-extra';
+import { run as bumpVersion } from './version';
+import { git } from './utils/git-client';
+
+program
+  .name('ensure-next-ahead')
+  .description('ensure the "next" branch is always a minor version ahead of "main"')
+  .requiredOption('-M, --main-version <mainVersion>', 'The version currently on the "main" branch');
+
+const optionsSchema = z
+  .object({
+    mainVersion: z.string(),
+  })
+  .refine((schema) => semver.valid(schema.mainVersion), {
+    message: "main-version must be a valid semver version string like '7.4.2'.",
+  });
+
+type Options = {
+  mainVersion: string;
+};
+
+const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
+const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
+
+const validateOptions = (options: { [key: string]: any }): options is Options => {
+  optionsSchema.parse(options);
+  return true;
+};
+
+const getCurrentVersion = async () => {
+  const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
+  console.log(`📐 Current version of Storybook is ${chalk.green(version)}`);
+  return version;
+};
+
+export const run = async (options: unknown) => {
+  if (!validateOptions(options)) {
+    return;
+  }
+  const { mainVersion } = options;
+
+  const { current: currentGitBranch } = await git.status();
+
+  if (currentGitBranch !== 'next') {
+    console.warn(
+      `🚧 The current branch is not "next" but "${currentGitBranch}", this only really makes sense to run on the "next" branch.`
+    );
+  }
+
+  // Get the current version from code/package.json
+  const currentNextVersion = await getCurrentVersion();
+  if (semver.gt(currentNextVersion, mainVersion)) {
+    console.log(
+      `✅ The version on next (${chalk.green(
+        currentNextVersion
+      )}) is already ahead of the version on main (${chalk.green(mainVersion)}), no action needed.`
+    );
+    return;
+  }
+
+  const nextNextVersion = `${semver.inc(mainVersion, 'minor')}-alpha.0`;
+
+  console.log(
+    `🤜 The version on next (${chalk.green(
+      currentNextVersion
+    )}) is behind the version on main (${chalk.green(mainVersion)}), bumping to ${chalk.blue(
+      nextNextVersion
+    )}...`
+  );
+
+  await bumpVersion({ exact: nextNextVersion });
+
+  console.log(
+    `✅ bumped all versions to ${chalk.green(
+      nextNextVersion
+    )}, remember to commit and push to next.`
+  );
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
index 16a6928e994f..d437e8dc87bc 100644
--- a/scripts/release/generate-pr-description.ts
+++ b/scripts/release/generate-pr-description.ts
@@ -18,7 +18,7 @@ program
     'Which version to generate changelog from, eg. "7.0.7". Defaults to the version at code/package.json'
   )
   .option('-N, --next-version <version>', 'Which version to generate changelog to, eg. "7.0.8"')
-  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch" label')
+  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch:yes" label')
   .option(
     '-M, --manual-cherry-picks <commits>',
     'A stringified JSON array of commit hashes, of patch PRs that needs to be cherry-picked manually'
@@ -52,6 +52,7 @@ const CHANGE_TITLES_TO_IGNORE = [
   /\[ci skip\]/i,
   /^Update CHANGELOG\.md for.*/i,
   /^Release: (Pre)?(Patch|Minor|Major|Release).*\d+$/i,
+  /^Update \.\/docs\/versions/,
 ];
 
 export const mapToChangelist = ({
@@ -65,7 +66,7 @@ export const mapToChangelist = ({
     .filter((change) => {
       // eslint-disable-next-line no-restricted-syntax
       for (const titleToIgnore of CHANGE_TITLES_TO_IGNORE) {
-        if (change.title.match(titleToIgnore)) {
+        if (change.title?.match(titleToIgnore)) {
           return false;
         }
       }
@@ -90,7 +91,7 @@ export const mapToChangelist = ({
         )[0] || 'unknown') as keyof typeof LABELS_BY_IMPORTANCE;
 
       return `- [ ] **${LABELS_BY_IMPORTANCE[label]}**: ${change.title} ${change.links.pull}${
-        !unpickedPatches && change.labels.includes('patch:yes') ? ' (will also be patched)' : ''
+        !unpickedPatches && change.labels?.includes('patch:yes') ? ' (will also be patched)' : ''
       }`;
     })
     .join('\n');
@@ -141,7 +142,9 @@ export const generateReleaseDescription = ({
   changelogText: string;
   manualCherryPicks?: string;
 }): string => {
-  const workflow = semver.prerelease(nextVersion) ? 'prepare-prerelease' : 'prepare-patch-release';
+  const workflow = semver.prerelease(nextVersion)
+    ? 'prepare-non-patch-release'
+    : 'prepare-patch-release';
   const workflowUrl = `https://github.com/storybookjs/storybook/actions/workflows/${workflow}.yml`;
 
   return (
diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts
index 70289b5369d8..e81610a451b9 100644
--- a/scripts/release/is-pr-frozen.ts
+++ b/scripts/release/is-pr-frozen.ts
@@ -12,7 +12,7 @@ program
   .description(
     'returns true if the versioning pull request associated with the current branch has the "freeze" label'
   )
-  .option('-P, --patch', 'Look for patch PR instead of prerelease PR', false)
+  .option('-H, --patch', 'Look for patch PR instead of next PR', false)
   .option('-V, --verbose', 'Enable verbose logging', false);
 
 const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
@@ -46,7 +46,7 @@ export const run = async (options: unknown) => {
   const { verbose, patch } = options as { verbose?: boolean; patch?: boolean };
 
   const version = await getCurrentVersion();
-  const branch = `version-${patch ? 'patch' : 'prerelease'}-from-${version}`;
+  const branch = `version-${patch ? 'patch' : 'non-patch'}-from-${version}`;
 
   console.log(`💬 Determining if pull request from branch '${chalk.blue(branch)}' is frozen`);
 
@@ -78,6 +78,14 @@ export const run = async (options: unknown) => {
   console.log(`🔍 Found pull request:
   ${JSON.stringify(pullRequest, null, 2)}`);
 
+  if (pullRequest.state !== 'OPEN') {
+    console.log('❌ The pull request is already closed, ignoring it');
+    if (process.env.GITHUB_ACTIONS === 'true') {
+      setOutput('frozen', false);
+    }
+    return false;
+  }
+
   const isFrozen = pullRequest.labels?.includes('freeze');
   if (process.env.GITHUB_ACTIONS === 'true') {
     setOutput('frozen', isFrozen);
diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts
index eab1743dcc7b..9d3169d78c8a 100644
--- a/scripts/release/pick-patches.ts
+++ b/scripts/release/pick-patches.ts
@@ -80,6 +80,7 @@ export const run = async (_: unknown) => {
   }
 
   if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('pr-count', JSON.stringify(patchPRs.length));
     setOutput('failed-cherry-picks', JSON.stringify(failedCherryPicks));
   }
 };
diff --git a/scripts/release/utils/get-changes.ts b/scripts/release/utils/get-changes.ts
index 1ad2a0759198..416ea624fb50 100644
--- a/scripts/release/utils/get-changes.ts
+++ b/scripts/release/utils/get-changes.ts
@@ -53,7 +53,7 @@ export const getFromCommit = async (from?: string | undefined, verbose?: boolean
       console.log(`🔍 No 'from' specified, found latest tag: ${chalk.blue(latest)}`);
     }
   }
-  const commit = await getCommitAt(actualFrom, verbose);
+  const commit = await getCommitAt(actualFrom!, verbose);
   if (verbose) {
     console.log(`🔍 Found 'from' commit: ${chalk.blue(commit)}`);
   }
diff --git a/scripts/release/utils/get-github-info.ts b/scripts/release/utils/get-github-info.ts
index 6bd7126aec04..bdfe995a9001 100644
--- a/scripts/release/utils/get-github-info.ts
+++ b/scripts/release/utils/get-github-info.ts
@@ -40,6 +40,7 @@ function makeQuery(repos: ReposWithCommitsAndPRsToFetch) {
                 number
                 id
                 title
+                state
                 url
                 mergedAt
                 labels(first: 50) {
@@ -63,6 +64,7 @@ function makeQuery(repos: ReposWithCommitsAndPRsToFetch) {
                   : `pr__${data.pull}: pullRequest(number: ${data.pull}) {
                     url
                     title
+                    state
                     author {
                       login
                       url
@@ -161,11 +163,12 @@ export type PullRequestInfo = {
   user: string | null;
   id: string | null;
   title: string | null;
+  state: string | null;
   commit: string | null;
   pull: number | null;
   labels: string[] | null;
   links: {
-    commit: string;
+    commit: string | null;
     pull: string | null;
     user: string | null;
   };
@@ -197,6 +200,7 @@ export async function getPullInfoFromCommit(request: {
       pull: null,
       commit: request.commit,
       title: null,
+      state: null,
       labels: null,
       links: {
         commit: request.commit,
@@ -205,10 +209,7 @@ export async function getPullInfoFromCommit(request: {
       },
     };
   }
-  let user = null;
-  if (data.author && data.author.user) {
-    user = data.author.user;
-  }
+  let user = data?.author?.user || null;
 
   const associatedPullRequest =
     data.associatedPullRequests &&
@@ -245,6 +246,7 @@ export async function getPullInfoFromCommit(request: {
     pull: associatedPullRequest ? associatedPullRequest.number : null,
     commit: request.commit,
     title: associatedPullRequest ? associatedPullRequest.title : null,
+    state: associatedPullRequest ? associatedPullRequest.state : null,
     labels: associatedPullRequest
       ? (associatedPullRequest.labels.nodes || []).map((label: { name: string }) => label.name)
       : null,
@@ -287,6 +289,7 @@ export async function getPullInfoFromPullRequest(request: {
     pull: request.pull,
     commit: commit ? commit.oid : null,
     title: title || null,
+    state: data?.state || null,
     labels: data ? (data.labels.nodes || []).map((label: { name: string }) => label.name) : null,
     links: {
       commit: commit ? `[\`${commit.oid}\`](${commit.commitUrl})` : null,
diff --git a/scripts/release/utils/github-client.ts b/scripts/release/utils/github-client.ts
index 646ba1003986..e81991414bf9 100644
--- a/scripts/release/utils/github-client.ts
+++ b/scripts/release/utils/github-client.ts
@@ -1,6 +1,8 @@
 /* eslint-disable no-console */
 import type { GraphQlQueryResponseData } from '@octokit/graphql';
 import { graphql } from '@octokit/graphql';
+import { request } from '@octokit/request';
+import fetch from 'node-fetch';
 
 export interface PullRequest {
   number: number;
@@ -14,6 +16,13 @@ export const githubGraphQlClient = graphql.defaults({
   headers: { authorization: `token ${process.env.GH_TOKEN}` },
 });
 
+export const githubRestClient = request.defaults({
+  request: {
+    fetch,
+  },
+  headers: { authorization: `token ${process.env.GH_TOKEN}`, 'X-GitHub-Api-Version': '2022-11-28' },
+});
+
 export async function getUnpickedPRs(
   baseBranch: string,
   verbose?: boolean
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 19568a9f4a70..504a13091f02 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -2531,6 +2531,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/endpoint@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "@octokit/endpoint@npm:9.0.1"
+  dependencies:
+    "@octokit/types": ^12.0.0
+    is-plain-object: ^5.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 757505b1cd634bcd7b71a18c8fe07dfda47790598ddd0d9d13f47d68713070f49953a672ac40ec39787defc2a7e07d08dca97756def7b907118f8f8d4c653f5c
+  languageName: node
+  linkType: hard
+
 "@octokit/graphql@npm:^4.3.1, @octokit/graphql@npm:^4.5.8":
   version: 4.8.0
   resolution: "@octokit/graphql@npm:4.8.0"
@@ -2567,6 +2578,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/openapi-types@npm:^19.0.0":
+  version: 19.0.0
+  resolution: "@octokit/openapi-types@npm:19.0.0"
+  checksum: 8270e0a224bbef6d1c82396cda873a3528111cb25a772184b39e1fbada4e6433b41c5f4634ecf204e8a2816a802048197e0132b7615b579fab217f7c1e29545b
+  languageName: node
+  linkType: hard
+
 "@octokit/plugin-paginate-rest@npm:^2.16.8, @octokit/plugin-paginate-rest@npm:^2.2.0":
   version: 2.21.3
   resolution: "@octokit/plugin-paginate-rest@npm:2.21.3"
@@ -2631,6 +2649,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/request-error@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "@octokit/request-error@npm:5.0.1"
+  dependencies:
+    "@octokit/types": ^12.0.0
+    deprecation: ^2.0.0
+    once: ^1.4.0
+  checksum: e72a4627120de345b54876a1f007664095e5be9d624fce2e14fccf7668cd8f5e4929d444d8fc085d48e1fb5cd548538453974aab129a669101110d6679dce6c6
+  languageName: node
+  linkType: hard
+
 "@octokit/request@npm:^5.4.0, @octokit/request@npm:^5.6.0, @octokit/request@npm:^5.6.3":
   version: 5.6.3
   resolution: "@octokit/request@npm:5.6.3"
@@ -2659,6 +2688,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/request@npm:^8.1.2":
+  version: 8.1.2
+  resolution: "@octokit/request@npm:8.1.2"
+  dependencies:
+    "@octokit/endpoint": ^9.0.0
+    "@octokit/request-error": ^5.0.0
+    "@octokit/types": ^12.0.0
+    is-plain-object: ^5.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 49219eb71b856acecc8268f05a7a7d074488f9eaeb59439f5c8872e5b4555a4e6c0cf0ebcadf0983466f88957e74c27765f582e473b0dd89b453274501f0dc37
+  languageName: node
+  linkType: hard
+
 "@octokit/rest@npm:^16.43.0 || ^17.11.0 || ^18.12.0, @octokit/rest@npm:^18.12.0":
   version: 18.12.0
   resolution: "@octokit/rest@npm:18.12.0"
@@ -2683,6 +2725,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/types@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "@octokit/types@npm:12.0.0"
+  dependencies:
+    "@octokit/openapi-types": ^19.0.0
+  checksum: 6e5b68f8855775638db53244348d2ca07896d36a15aad41d3cb652fafaa1b307c3b6222319174dd5716accd9076e101da838b82f988a7c380a8e9d188e3aadf1
+  languageName: node
+  linkType: hard
+
 "@octokit/types@npm:^4.1.6":
   version: 4.1.10
   resolution: "@octokit/types@npm:4.1.10"
@@ -2901,6 +2952,7 @@ __metadata:
     "@jest/globals": ^29.3.1
     "@nx/workspace": 16.2.1
     "@octokit/graphql": ^5.0.5
+    "@octokit/request": ^8.1.2
     "@storybook/eslint-config-storybook": ^3.1.2
     "@storybook/jest": next
     "@storybook/linter-config": ^3.1.2
@@ -2918,7 +2970,7 @@ __metadata:
     "@types/fs-extra": ^11.0.1
     "@types/http-server": ^0.12.1
     "@types/lodash": ^4
-    "@types/node": ^16.0.0
+    "@types/node": ^18.0.0
     "@types/node-fetch": ^2.5.7
     "@types/prettier": ^2
     "@types/pretty-hrtime": ^1.0.0
@@ -3659,7 +3711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^16.0.0":
+"@types/node@npm:*, @types/node@npm:>= 8":
   version: 16.18.50
   resolution: "@types/node@npm:16.18.50"
   checksum: 4fc76918cc4e09d6cf087b385a1e2283580b1a88518f309764365cbdbdc28cdf48a77a5615ac4ce28dccee078b3da79442a032cc8aa312406943754144938cdb