diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9d3354c453ca..42f40b70bfc2 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -43,7 +43,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.32.3-focal
+      - image: mcr.microsoft.com/playwright:v1.35.0-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
diff --git a/.github/workflows/canary-release-pr.WIP b/.github/workflows/canary-release-pr.WIP
new file mode 100644
index 000000000000..0c5948948959
--- /dev/null
+++ b/.github/workflows/canary-release-pr.WIP
@@ -0,0 +1,88 @@
+name: Publish canary release of PR
+run-name: 'Canary release: PR #${{ github.event.pull_request.number }} at ${{ github.sha }}'
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - next
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+permissions:
+  pull-requests: write
+
+jobs:
+  release-canary:
+    name: Release canary version
+    runs-on: ubuntu-latest
+    environment: canary-release
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install dependencies
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Set version
+        id: version
+        run: |
+          SHORT_SHA=$(git rev-parse --short ${{ github.sha }})
+          yarn release:version --release-type prerelease --pre-id pr-${{ github.event.pull_request.number }}-$SHORT_SHA --verbose
+
+      - name: Publish v${{ steps.version.outputs.next-version }}
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn release:publish --tag pr-${{ github.event.pull_request.number }} --verbose
+
+      - name: Create comment on PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }}\
+            --repo "${{github.repository }}"\
+            --body "🚀 This pull request has been published as version \`${{ steps.version.outputs.next-version }}\` and with the tag \`pr-${{ github.event.pull_request.number }}\`.
+          [You can see it on the npm registry here](https://npmjs.com/package/@storybook/cli/v/${{ steps.version.outputs.next-version }})".
+
+      - name: Create failing comment on PR
+        if: failure()
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }}\
+            --repo "${{github.repository }}"\
+            --body "Failed to publish canary version of this pul request. See the failed workflow run at See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+
+      # - name: Report failure to Discord
+      #   if: failure()
+      #   env:
+      #     DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+      #   uses: Ilshidur/action-discord@master
+      #   with:
+      #     args: 'The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
diff --git a/.github/workflows/check-release-tasks.yml b/.github/workflows/check-release-tasks.yml
new file mode 100644
index 000000000000..4848ae35f07e
--- /dev/null
+++ b/.github/workflows/check-release-tasks.yml
@@ -0,0 +1,19 @@
+name: Check release tasks
+run-name: 'Check tasks for "${{ github.event.pull_request.title }}" PR'
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+    branches:
+      - 'latest-release'
+      - 'next-release'
+
+jobs:
+  task-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: chromaui/task-completed-checker-action@main
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
diff --git a/.github/workflows/danger-js.yml b/.github/workflows/danger-js.yml
index edeb4aaad03a..40b6466fd0c9 100644
--- a/.github/workflows/danger-js.yml
+++ b/.github/workflows/danger-js.yml
@@ -1,6 +1,6 @@
 on:
   pull_request:
-    types: [opened, synchronize, reopened, labeled, unlabeled]
+    types: [opened, synchronize, reopened, labeled, unlabeled, edited]
 
 name: Danger JS
 jobs:
@@ -13,7 +13,7 @@ jobs:
           node-version: '16'
       - uses: actions/checkout@v3
       - name: Danger JS
-        uses: danger/danger-js@10.9.0
+        uses: danger/danger-js@11.2.6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml
new file mode 100644
index 000000000000..d5a8ca655af6
--- /dev/null
+++ b/.github/workflows/prepare-patch-release.yml
@@ -0,0 +1,175 @@
+name: Prepare patch PR
+run-name: Prepare patch PR, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - next
+  workflow_dispatch:
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  prepare-patch-pull-request:
+    name: Prepare patch pull request
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v3
+        with:
+          ref: main
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install Dependencies
+        working-directory: .
+        run: |
+          yarn task --task=install
+
+      - name: Check if pull request is frozen
+        if: github.event_name != 'workflow_dispatch'
+        id: check-frozen
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:is-pr-frozen
+
+      - name: Cancel when frozen
+        if: steps.check-frozen.outputs.frozen == 'true' && github.event_name != 'workflow_dispatch'
+        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: Check for unreleased changes
+        id: unreleased-changes
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:unreleased-changes-exists --unpicked-patches
+
+      - name: Fetch next branch
+        run:
+          # depth needs to be set to a high enough number that it will contain all the merge commits to cherry-pick
+          # as of May 2023, the whole repo had 55K commits
+          git fetch --depth=2000 origin next
+
+      - name: Pick patches
+        id: pick-patches
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          yarn release:pick-patches
+
+      - name: Bump version
+        id: bump-version
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        run: |
+          yarn release:version --release-type patch --verbose
+
+      # We need the current version to set the branch name, even when not bumping the version
+      - name: Get current version
+        id: current-version
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        run: |
+          yarn release:get-current-version --verbose
+
+      - name: Set version output
+        id: versions
+        run: |
+          echo "current=${{ steps.bump-version.outputs.current-version || steps.current-version.outputs.current-version }}" >> "$GITHUB_OUTPUT"
+          echo "next=${{ steps.bump-version.outputs.next-version || steps.current-version.outputs.current-version }}" >> "$GITHUB_OUTPUT"
+
+      - name: Write changelog
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          yarn release:write-changelog ${{ steps.versions.outputs.next }} --unpicked-patches --verbose
+
+      - name: 'Commit changes to branch: version-patch-from-${{ steps.versions.outputs.current }}'
+        working-directory: .
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -b version-patch-from-${{ steps.versions.outputs.current }}
+          git add .
+          git commit -m "Bump version from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" || true
+          git push --force origin version-patch-from-${{ steps.versions.outputs.current }}
+
+      - name: Generate PR description
+        id: description
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:generate-pr-description --unpicked-patches --manual-cherry-picks='${{ steps.pick-patches.outputs.failed-cherry-picks }}' ${{ steps.unreleased-changes.outputs.has-changes-to-release == 'true' && format('{0}={1} {2}={3}', '--current-version', steps.versions.outputs.current, '--next-version', steps.versions.outputs.next) || '' }} --verbose
+
+      - name: Create or update pull request with release
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`main\`: patch from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`main\`: patch from ${{ steps.versions.outputs.current }} to ${{ steps.versions.outputs.next }}" \
+              --base latest-release \
+              --head version-patch-from-${{ steps.versions.outputs.current }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Create or update pull request without release
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}"\
+              --title "Merge patches to \`main\`" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}"\
+              --title "Merge patches to \`main\`" \
+              --base latest-release \
+              --head version-patch-from-${{ steps.versions.outputs.current }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.versions.outputs.current }} to v${{ steps.versions.outputs.next }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
diff --git a/.github/workflows/prepare-prerelease.yml b/.github/workflows/prepare-prerelease.yml
new file mode 100644
index 000000000000..932c4b31f64f
--- /dev/null
+++ b/.github/workflows/prepare-prerelease.yml
@@ -0,0 +1,159 @@
+name: Prepare prerelease PR
+run-name: Prepare prerelease PR, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - next
+  workflow_dispatch:
+    inputs:
+      release-type:
+        description: 'Which release type to use for bumping the version'
+        required: true
+        default: 'prerelease'
+        type: choice
+        options:
+          - prerelease
+          - prepatch
+          - preminor
+          - premajor
+          - patch
+          - minor
+          - major
+      pre-id:
+        description: For prerelease versions, what prerelease identifier to use, eg. 'alpha', 'beta', 'rc'
+        required: false
+        type: string
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+concurrency:
+  group: ${{ github.workflow }}
+  cancel-in-progress: true
+
+jobs:
+  prepare-prerelease-pull-request:
+    name: Prepare prerelease pull request
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout next
+        uses: actions/checkout@v3
+        with:
+          ref: next
+          # this needs to be set to a high enough number that it will contain the last version tag
+          # as of May 2023, the whole repo had 55K commits
+          fetch-depth: 10000
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install Dependencies
+        working-directory: .
+        run: |
+          yarn task --task=install
+
+      - name: Check if pull request is frozen
+        if: github.event_name != 'workflow_dispatch'
+        id: check-frozen
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:is-pr-frozen
+
+      - name: Cancel when frozen
+        if: steps.check-frozen.outputs.frozen == 'true' && github.event_name != 'workflow_dispatch'
+        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 }}
+
+      # tags are needed to get changes and changelog generation
+      - name: Fetch git tags
+        run: git fetch --tags origin
+
+      - name: Check for unreleased changes
+        id: unreleased-changes
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:unreleased-changes-exists
+
+      - name: Cancel when no release necessary
+        if: steps.unreleased-changes.outputs.has-changes-to-release == 'false'
+        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
+        id: bump-version
+        run: |
+          yarn release:version --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose
+
+      - 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 }}'
+        working-directory: .
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+          git add .
+          git commit -m "Bump version from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" || true
+          git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }}
+
+      - name: Generate PR description
+        id: description
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:generate-pr-description --current-version ${{ steps.bump-version.outputs.current-version }} --next-version ${{ steps.bump-version.outputs.next-version }} --verbose
+
+      - name: Create or update pull request
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then
+            gh pr edit \
+              --repo "${{github.repository }}" \
+              --title "Bump version on \`next\`: ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('({0})', inputs.pre-id) }} from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" \
+              --body "${{ steps.description.outputs.description }}"
+          else
+            gh pr create \
+              --repo "${{github.repository }}"\
+              --title "Bump version on \`next\`: ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('({0})', inputs.pre-id) }} from ${{ steps.bump-version.outputs.current-version }} to ${{ steps.bump-version.outputs.next-version }}" \
+              --base next-release \
+              --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \
+              --body "${{ steps.description.outputs.description }}"
+          fi
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.bump-version.outputs.current-version }} to v${{ steps.bump-version.outputs.next-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 000000000000..c6c92b600c2d
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,136 @@
+name: Publish
+run-name: Publish new version on ${{ github.ref_name }}, triggered by ${{ github.triggering_actor }}
+
+on:
+  push:
+    branches:
+      - latest-release
+      - next-release
+
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+
+jobs:
+  publish:
+    name: Publish new version
+    runs-on: ubuntu-latest
+    environment: release
+    defaults:
+      run:
+        working-directory: scripts
+    steps:
+      - name: Checkout ${{ github.ref_name }}
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 100
+          token: ${{ secrets.GH_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.yarn/berry/cache
+          key: yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+          restore-keys: |
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}-${{ hashFiles('code/yarn.lock') }}
+            yarn-v1-${{ hashFiles('scripts/yarn.lock') }}
+            yarn-v1
+
+      - name: Install script dependencies
+        run: |
+          yarn install
+
+      - name: Get current version
+        id: version
+        run: yarn release:get-current-version
+
+      - name: Check if publish is needed
+        id: publish-needed
+        run: yarn release:is-version-published ${{ steps.version.outputs.current-version }}
+
+      - name: Check release vs prerelease
+        if: steps.publish-needed.outputs.published == 'false'
+        id: is-prerelease
+        run: yarn release:is-prerelease
+
+      - name: Install code dependencies
+        if: steps.publish-needed.outputs.published == 'false'
+        working-directory: .
+        run: yarn task --task=install --start-from=install
+
+      - name: Publish
+        if: steps.publish-needed.outputs.published == 'false'
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn release:publish --tag ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next' || 'latest' }} --verbose
+
+      - name: Get target branch
+        id: target
+        run: echo "target=${{ github.ref_name == 'next-release' && 'next' || 'main' }}" >> $GITHUB_OUTPUT
+
+      - name: Get changelog for ${{ steps.version.outputs.current-version }}
+        if: steps.publish-needed.outputs.published == 'false'
+        id: changelog
+        run: yarn release:get-changelog-from-file ${{ steps.version.outputs.current-version }}
+
+      # tags are needed to get list of patches to label as picked
+      - name: Fetch git tags
+        if: github.ref_name == 'main-release'
+        run: git fetch --tags origin
+
+      - name: Label patch PRs as picked
+        if: github.ref_name == 'main-release'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: yarn release:label-patches
+
+      - name: Create GitHub Release
+        if: steps.publish-needed.outputs.published == 'false'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release create \
+          v${{ steps.version.outputs.current-version }} \
+            --repo "${{ github.repository }}" \
+            --target ${{ github.ref_name }} \
+            --title "v${{ steps.version.outputs.current-version }}" \
+            --notes "${{ steps.changelog.outputs.changelog }}" \
+            ${{ steps.is-prerelease.outputs.prerelease == 'true' && '--prerelease' || '' }}
+
+      - name: Merge ${{ github.ref_name }} into ${{ steps.target.outputs.target }}
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git fetch origin ${{ steps.target.outputs.target }}
+          git checkout ${{ steps.target.outputs.target }}
+          git merge ${{ github.ref_name }}
+          git push origin ${{ steps.target.outputs.target }}
+
+      # Force push from next to main if it is not a prerelease, and this release is from next-release
+      # This happens when eg. next has been tracking 7.1.0-alpha.X, and now we want to release 7.1.0
+      # This will keep release-next, next and main all tracking v7.1.0
+      # - name: Force push ${{ steps.target.outputs.target }} to main
+      #   if: steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease
+      #   run: |
+      #     git push --force origin ${{ steps.target.outputs.target }}:main
+
+      - name: Report job failure to Discord
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'The GitHub Action for publishing version ${{ steps.version.outputs.current-version }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
diff --git a/.github/workflows/trigger-circle-ci-workflow.yml b/.github/workflows/trigger-circle-ci-workflow.yml
index a54a57743175..78de059ad4e3 100644
--- a/.github/workflows/trigger-circle-ci-workflow.yml
+++ b/.github/workflows/trigger-circle-ci-workflow.yml
@@ -9,6 +9,8 @@ on:
     branches:
       - next
       - main
+      - version-prerelease-from-**
+      - version-patch-from-**
 
 jobs:
   get-branch:
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 2bc71525011c..05080224265e 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -2,4 +2,10 @@ installStatePath: ./.yarn/root-install-state.gz
 
 nodeLinker: node-modules
 
+npmPublishAccess: public
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
 yarnPath: .yarn/releases/yarn-3.4.1.cjs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e67161964a7..940682e25a50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## 7.0.21
+
+- Angular: Fix 16.1 compatibility - [#23064](https://github.com/storybookjs/storybook/pull/23064), thanks [@ndelangen](https://github.com/ndelangen)!
+- Angular: Fix ivy preset - [#23070](https://github.com/storybookjs/storybook/pull/23070), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: Improve steps in storybook init - [#22502](https://github.com/storybookjs/storybook/pull/22502), thanks [@yannbf](https://github.com/yannbf)!
+- CLI: Skip builder selection for react native - [#23042](https://github.com/storybookjs/storybook/pull/23042), thanks [@dannyhw](https://github.com/dannyhw)!
+- Core: Fix `builder-manager` adding multiple dashes to relative path - [#22974](https://github.com/storybookjs/storybook/pull/22974), thanks [@MarioCadenas](https://github.com/MarioCadenas)!
+- Core: Improve `of={...}` DocBlock error in story index - [#22782](https://github.com/storybookjs/storybook/pull/22782), thanks [@shilman](https://github.com/shilman)!
+- Dependencies: Set vue-component-type-helpers to latest - [#23015](https://github.com/storybookjs/storybook/pull/23015), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vue3: Fix source decorator to generate correct story code  - [#22518](https://github.com/storybookjs/storybook/pull/22518), thanks [@chakAs3](https://github.com/chakAs3)!
+- Web-components: Fix custom-elements order of property application - [#19183](https://github.com/storybookjs/storybook/pull/19183), thanks [@sonntag-philipp](https://github.com/sonntag-philipp)!
+
 ## 7.0.20 (June 8, 2023)
 
 #### Bug Fixes
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/MIGRATION.md b/MIGRATION.md
index e75f6916a032..9cc1a10178fe 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1247,6 +1247,111 @@ You can get the same result by setting [the parameter `parameters.docs.source.fo
 
 ### 7.0 Addon authors changes
 
+#### New Addons API
+
+Storybook 7 adds 2 new packages for addon authors to use: `@storybook/preview-api` and `@storybook/manager-api`.
+These 2 packages replace `@storybook/addons`.
+
+When adding addons to storybook, you can (for example) add panels:
+
+```js
+import { addons } from '@storybook/manager-api';
+
+addons.addPanel('my-panel', {
+  title: 'My Panel',
+  render: ({ active, key }) => <div>My Panel</div>,
+});
+```
+
+Note that this before would import `addons` from `@storybook/addons`, but now it imports `{ addons }` from `@storybook/manager-api`.
+The `addons` export is now a named export only, there's no default export anymore, so make sure to update this usage.
+
+The package `@storybook/addons` is still available, but it's only for backwards compatibility. It's not recommended to use it anymore.
+
+It's also been used by addon creators to gain access to a few APIs like `makeDecorator`.
+These APIs are now available in `@storybook/preview-api`.
+
+Storybook users have had access to a few storybook-lifecycle hooks such as `useChannel`, `useParameter`, `useStorybookState`;
+when these hooks are used in panels, they should be imported from `@storybook/manager-api`.
+When these hooks are used in decorators/stories, they should be imported from `@storybook/preview-api`.
+
+Storybook 7 includes `@storybook/addons` shim package that provides the old API and calls the new API under the hood.
+This backwards compatibility will be removed in a future release of storybook.
+
+Here's an example of using the new API:
+The `@storybook/preview-api` is used here, because the `useEffect` hook is used in a decorator.
+
+```js
+import { useEffect, makeDecorator } from '@storybook/preview-api';
+
+export const withMyAddon = makeDecorator({
+  name: 'withMyAddon',
+  parameterName: 'myAddon',
+  wrapper: (getStory) => {
+    useEffect(() => {
+      // do something with the options
+    }, []);
+    return getStory(context);
+  },
+});
+```
+
+##### Specific instructions for addon creators
+
+If you're an addon creator, you'll have to update your addon to use the new APIs.
+
+That means you'll have to release a breaking release of your addon to make it compatible with Storybook 7.
+It should no longer depend on `@storybook/addons`, but instead on `@storybook/preview-api` and/or `@storybook/manager-api`.
+
+You might also depend (and use) these packages in your addon's decorators: `@storybook/store`, `@storybook/preview-web`, `@storybook/core-client`, `@storybook/client-api`; these have all been consolidated into `@storybook/preview-api`.
+So if you use any of these packages, please import what you need from `@storybook/preview-api` instead.
+
+Storybook 7 will prepare manager-code for the browser using ESbuild (before it was using a combination of webpack + babel).
+This is a very important change, though it will not affect most addons.
+It means that when creating custom addons, particularly custom addons within the repo in which they are consumed,
+you will need to be aware that this code is not passed though babel, and thus will not use your babel config.
+This can result in errors if you are using experimental JS features in your addon code, not supported yet by ESbuild,
+or using babel dependent features such as Component selectors in Emotion.
+
+ESbuild also places some constraints on things you can import into your addon's manager code: only woff2 files are supported, and not all image file types are supported.
+Here's the [list](https://github.com/storybookjs/storybook/blob/next/code/builders/builder-manager/src/index.ts#L53-L70) of supported file types.
+
+This is not configurable.
+
+If this is a problem for your addon, you need to pre-compile your addon's manager code to ensure it works.
+
+If you addon also introduces preview code (such a decorators) it will be passed though whatever builder + config the user has configured for their project; this hasn't changed.
+
+In both the preview and manager code it's good to remember [Storybook now targets modern browser only](#modern-browser-support).
+
+The package `@storybook/components` contain a lot of components useful for building addons.
+Some of these addons have been moved to a new package `@storybook/blocks`.
+These components were moved: `ColorControl`, `ColorPalette`, `ArgsTable`, `ArgRow`, `TabbedArgsTable`, `SectionRow`, `Source`, `Code`.
+
+##### Specific instructions for addon users
+
+All of storybook's core addons have been updated and are ready to use with Storybook 7.
+
+We're working with the community to update the most popular addons.
+But if you're using an addon that hasn't been updated yet, it might not work.
+
+It's possible for example for older addons to use APIs that are no longer available in Storybook 7.
+Your addon might not show upside of the storybook (manager) UI, or storybook might fail to start entirely.
+
+When this happens to you please open an issue on the addon's repo, and ask the addon author to update their addon to be compatible with Storybook 7.
+It's also useful for the storybook team to know which addons are not yet compatible, so please open an issue on the storybook repo as well; particularly if the addon is popular and causes a critical failure.
+
+Here's a list of popular addons that are known not to be compatible with Storybook 7 yet:
+
+- [ ] [storybook-addon-jsx](https://github.com/storybookjs/addon-jsx)
+- [ ] [storybook-addon-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode)
+
+Though storybook should de-duplicate storybook packages, storybook CLI's `upgrade` command will warn you when you have multiple storybook-dependencies, because it is a possibility that this causes addons/storybook to not work, so when running into issues, please run this:
+
+```
+npx sb upgrade
+```
+
 #### register.js removed
 
 In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs)
diff --git a/code/__mocks__/fs-extra.js b/code/__mocks__/fs-extra.js
index 8ec82c844bd6..a29315078944 100644
--- a/code/__mocks__/fs-extra.js
+++ b/code/__mocks__/fs-extra.js
@@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
 const readFile = async (filePath) => mockFiles[filePath];
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = (filePath) => !!mockFiles[filePath];
+const readJson = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const lstatSync = (filePath) => ({
   isFile: () => !!mockFiles[filePath],
@@ -24,6 +25,7 @@ const lstatSync = (filePath) => ({
 fs.__setMockFiles = __setMockFiles;
 fs.readFile = readFile;
 fs.readFileSync = readFileSync;
+fs.readJson = readJson;
 fs.readJsonSync = readJsonSync;
 fs.existsSync = existsSync;
 fs.lstatSync = lstatSync;
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 5ae2a36828c7..b7b6b8e6e329 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -63,16 +63,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/addon-highlight": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "axe-core": "^4.2.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index fcd2ef612a66..2aa90463ab29 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -80,14 +80,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 8f8198096e45..7c274dd7c980 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -76,14 +76,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 5d778087040e..c2c9fc6f883b 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -68,15 +68,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/blocks": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/blocks": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index e3ee1d152b17..70689f08e5b1 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -101,19 +101,19 @@
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/blocks": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/csf-plugin": "7.0.20",
-    "@storybook/csf-tools": "7.0.20",
+    "@storybook/blocks": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/csf-plugin": "7.0.21",
+    "@storybook/csf-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/postinstall": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/react-dom-shim": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/postinstall": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/react-dom-shim": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "fs-extra": "^11.1.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index c573b0d8b93e..e83815e307d4 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -119,23 +119,23 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "7.0.20",
-    "@storybook/addon-backgrounds": "7.0.20",
-    "@storybook/addon-controls": "7.0.20",
-    "@storybook/addon-docs": "7.0.20",
-    "@storybook/addon-highlight": "7.0.20",
-    "@storybook/addon-measure": "7.0.20",
-    "@storybook/addon-outline": "7.0.20",
-    "@storybook/addon-toolbars": "7.0.20",
-    "@storybook/addon-viewport": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
+    "@storybook/addon-actions": "7.0.21",
+    "@storybook/addon-backgrounds": "7.0.21",
+    "@storybook/addon-controls": "7.0.21",
+    "@storybook/addon-docs": "7.0.21",
+    "@storybook/addon-highlight": "7.0.21",
+    "@storybook/addon-measure": "7.0.21",
+    "@storybook/addon-outline": "7.0.21",
+    "@storybook/addon-toolbars": "7.0.21",
+    "@storybook/addon-viewport": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/vue": "7.0.20",
+    "@storybook/vue": "7.0.21",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index d791a87fdb0c..a8abccfe6c1d 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
@@ -51,7 +51,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/node-logger": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
     "remark-gfm": "^3.0.1",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 6a78b4dad225..ea3a82096936 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
@@ -61,9 +61,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-events": "7.0.20",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/preview-api": "7.0.21"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index af081ba049e8..5e589ac38428 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -72,16 +72,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/instrumenter": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/instrumenter": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index e912093bf379..e281743318f0 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -70,13 +70,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
     "react-resize-detector": "^7.1.2",
     "upath": "^1.2.0"
   },
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 08e8f02f93a7..5b3a169d14d9 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -80,14 +80,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/router": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/router": "7.0.21",
+    "@storybook/types": "7.0.21",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index b94505b7bd57..a3f952bd4e63 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -75,13 +75,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20"
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index e68a14d9ac94..d0d545928a45 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -78,13 +78,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
index d6fd218ac0db..3f05bf94dcd8 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.0.20",
+  "version": "7.0.21",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -37,12 +37,12 @@
   "dependencies": {
     "@jest/transform": "^29.3.1",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/client-api": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-webpack": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/glob": "^7.1.3",
     "@types/jest-specific-snapshot": "^0.5.6",
     "glob": "^8.1.0",
@@ -57,11 +57,11 @@
     "@angular/core": "^13.3.6",
     "@angular/platform-browser-dynamic": "^13.3.6",
     "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.20",
-    "@storybook/angular": "7.0.20",
-    "@storybook/react": "7.0.20",
-    "@storybook/vue": "7.0.20",
-    "@storybook/vue3": "7.0.20",
+    "@storybook/addon-docs": "7.0.21",
+    "@storybook/angular": "7.0.21",
+    "@storybook/react": "7.0.21",
+    "@storybook/vue": "7.0.21",
+    "@storybook/vue3": "7.0.21",
     "babel-loader": "^9.1.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json
index 765ff3709d4f..60353d22ffaa 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.0.20",
+  "version": "7.0.21",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -36,8 +36,8 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "^0.1.0",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/jest-image-snapshot": "^5.1.0",
     "jest-image-snapshot": "^6.0.0"
   },
@@ -49,7 +49,7 @@
     "rimraf": "^3.0.2"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.20",
+    "@storybook/addon-storyshots": "7.0.21",
     "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index 31ed317bf36a..32d1325ed160 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -53,13 +53,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/router": "7.0.20",
-    "@storybook/source-loader": "7.0.20",
-    "@storybook/theming": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/router": "7.0.21",
+    "@storybook/source-loader": "7.0.21",
+    "@storybook/theming": "7.0.21",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^15.5.0"
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 74cda4b938db..5832c1d9eded 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -68,11 +68,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 6b1b28b76e40..56433dba236d 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -73,13 +73,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.7.2"
   },
diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts
index 18d72e112646..ec96a3bd93ea 100644
--- a/code/e2e-tests/addon-viewport.spec.ts
+++ b/code/e2e-tests/addon-viewport.spec.ts
@@ -20,4 +20,24 @@ test.describe('addon-viewport', () => {
     // Check that Button story is still displayed
     await expect(sbPage.previewRoot()).toContainText('Button');
   });
+
+  test('iframe width should be changed when a mobile viewport is selected', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    // Click on viewport button and select small mobile
+    await sbPage.navigateToStory('example/button', 'primary');
+
+    // Measure the original dimensions of previewRoot
+    const originalDimensions = await sbPage.getCanvasBodyElement().boundingBox();
+    await expect(originalDimensions?.width).toBeDefined();
+
+    await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1');
+
+    // Measure the adjusted dimensions of previewRoot after clicking the mobile item.
+    const adjustedDimensions = await sbPage.getCanvasBodyElement().boundingBox();
+    await expect(adjustedDimensions?.width).toBeDefined();
+
+    // Compare the two widths
+    await expect(adjustedDimensions?.width).not.toBe(originalDimensions?.width);
+  });
 });
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index c064dd080d1f..798200de166c 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,21 +36,21 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/cli": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/cli": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-events": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/core-webpack": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/telemetry": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/telemetry": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js
index feb510df501f..76d05ff55e72 100644
--- a/code/frameworks/angular/src/server/angular-cli-webpack.js
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.js
@@ -1,19 +1,48 @@
+/* eslint-disable global-require */
 // Private angular devkit stuff
 const {
   generateI18nBrowserWebpackConfigFromContext,
 } = require('@angular-devkit/build-angular/src/utils/webpack-browser-config');
-const {
-  getCommonConfig,
-  getStylesConfig,
-  getDevServerConfig,
-  getTypeScriptConfig,
-} = require('@angular-devkit/build-angular/src/webpack/configs');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { filterOutStylingRules } = require('./utils/filter-out-styling-rules');
 const {
   default: StorybookNormalizeAngularEntryPlugin,
 } = require('./plugins/storybook-normalize-angular-entry-plugin');
 
+const getAngularWebpackUtils = () => {
+  try {
+    // Angular < 16.1.0
+    const {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    } = require('@angular-devkit/build-angular/src/webpack/configs');
+
+    return {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    };
+  } catch (e) {
+    // Angular > 16.1.0
+    const {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
+
+    return {
+      getCommonConfig,
+      getStylesConfig,
+      getDevServerConfig,
+      getTypeScriptConfig,
+    };
+  }
+};
+
 /**
  * Extract webpack config from angular-cli 13.x.x
  * ⚠️ This file is in JavaScript to not use TypeScript. Because current storybook TypeScript version is not compatible with Angular CLI.
@@ -26,6 +55,8 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
   /**
    * Get angular-cli Webpack config
    */
+  const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
+    getAngularWebpackUtils();
   const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
     {
       // Default options
diff --git a/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts b/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts
index 5d22cf4210cc..987df7f78005 100644
--- a/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-ivy.ts
@@ -1,5 +1,4 @@
 import { Configuration } from 'webpack';
-import { VERSION } from '@angular/core';
 import * as path from 'path';
 import { Preset } from '@storybook/types';
 
@@ -50,6 +49,7 @@ export const runNgcc = async () => {
 };
 
 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
+  const { VERSION } = await loadEsmModule<typeof import('@angular/core')>('@angular/core');
   const framework = await options.presets.apply<Preset>('framework');
   const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;
   const isAngular16OrNewer = parseInt(VERSION.major, 10) >= 16;
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 09c95456da2b..fcfd3ea2f2c0 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
@@ -31,12 +31,12 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index e845b98e2908..422906d9d338 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,15 +47,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.20",
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channel-websocket": "7.0.20",
-    "@storybook/client-api": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/html": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-web": "7.0.20",
+    "@storybook/addons": "7.0.21",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channel-websocket": "7.0.21",
+    "@storybook/client-api": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/html": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-web": "7.0.21",
     "magic-string": "^0.27.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 36efc70d1026..bd60af0382bc 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,11 +47,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/html": "7.0.20",
-    "@storybook/preset-html-webpack": "7.0.20",
+    "@storybook/html": "7.0.21",
+    "@storybook/preset-html-webpack": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index d02403ddbcdc..7b8e997536cc 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -70,13 +70,13 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/runtime": "^7.21.0",
-    "@storybook/addon-actions": "7.0.20",
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preset-react-webpack": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/react": "7.0.20",
+    "@storybook/addon-actions": "7.0.21",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preset-react-webpack": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/react": "7.0.21",
     "@types/node": "^16.0.0",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 54b679fe245e..cececb239995 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,8 +47,8 @@
   },
   "dependencies": {
     "@preact/preset-vite": "^2.0.0",
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/preact": "7.0.20"
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/preact": "7.0.21"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 40f4419cedfd..8634f2a8cd0b 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preact": "7.0.20",
-    "@storybook/preset-preact-webpack": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preact": "7.0.21",
+    "@storybook/preset-preact-webpack": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index bc8cb349f461..571763db4cc6 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,8 +49,8 @@
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
     "@rollup/pluginutils": "^4.2.0",
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/react": "7.0.20",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/react": "7.0.21",
     "@vitejs/plugin-react": "^3.0.1",
     "ast-types": "^0.14.2",
     "magic-string": "^0.27.0",
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 141630953668..4d7dd7d9935d 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,9 +47,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/preset-react-webpack": "7.0.20",
-    "@storybook/react": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/preset-react-webpack": "7.0.21",
+    "@storybook/react": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 750e0814535d..3f709f758d4e 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preset-server-webpack": "7.0.20",
-    "@storybook/server": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preset-server-webpack": "7.0.21",
+    "@storybook/server": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 6c24f356f0e1..56cb73648605 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,9 +47,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/svelte": "7.0.20",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/svelte": "7.0.21",
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "magic-string": "^0.27.0",
     "svelte": "^3.0.0",
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 05455c331ad7..7709ed3dfa5f 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preset-svelte-webpack": "7.0.20",
-    "@storybook/svelte": "7.0.20"
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preset-svelte-webpack": "7.0.21",
+    "@storybook/svelte": "7.0.21"
   },
   "devDependencies": {
     "svelte": "^3.48.0",
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 78932c2c46cc..e4e1a94eafa4 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -50,9 +50,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/svelte": "7.0.20",
-    "@storybook/svelte-vite": "7.0.20"
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/svelte": "7.0.21",
+    "@storybook/svelte-vite": "7.0.21"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
index d05bd52d21f2..0aee8864ce56 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/vue": "7.0.20",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/vue": "7.0.21",
     "magic-string": "^0.27.0",
     "vue-docgen-api": "^4.40.0"
   },
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 7946b8f9a8cf..be52b71dcd88 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preset-vue-webpack": "7.0.20",
-    "@storybook/vue": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preset-vue-webpack": "7.0.21",
+    "@storybook/vue": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 8f7a32ef9118..89f50bb14095 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,9 +47,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/vue3": "7.0.20",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/vue3": "7.0.21",
     "@vitejs/plugin-vue": "^4.0.0",
     "magic-string": "^0.27.0",
     "vue-docgen-api": "^4.40.0"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 88d72b12f1bb..accbb9e49b5e 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preset-vue3-webpack": "7.0.20",
-    "@storybook/vue3": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preset-vue3-webpack": "7.0.21",
+    "@storybook/vue3": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 118437cea04d..d69e9e109f87 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -47,10 +47,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/web-components": "7.0.20",
+    "@storybook/builder-vite": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/web-components": "7.0.21",
     "magic-string": "^0.27.0"
   },
   "devDependencies": {
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 502a7f9a8092..4d61524316c1 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
@@ -51,10 +51,10 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.20.2",
-    "@storybook/builder-webpack5": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preset-web-components-webpack": "7.0.20",
-    "@storybook/web-components": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preset-web-components-webpack": "7.0.21",
+    "@storybook/web-components": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json
index a2433f0d8104..e5545a34bc75 100644
--- a/code/lib/addons/package.json
+++ b/code/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -44,9 +44,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20"
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json
index fae08bddff2e..4d9fb6347882 100644
--- a/code/lib/builder-manager/package.json
+++ b/code/lib/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/manager": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/manager": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
     "@types/ejs": "^3.1.1",
     "@types/find-cache-dir": "^3.2.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
diff --git a/code/lib/builder-manager/src/utils/managerEntries.ts b/code/lib/builder-manager/src/utils/managerEntries.ts
index c6ac46a0a242..51413bfb852e 100644
--- a/code/lib/builder-manager/src/utils/managerEntries.ts
+++ b/code/lib/builder-manager/src/utils/managerEntries.ts
@@ -4,7 +4,12 @@ import { join, parse, relative, sep } from 'node:path';
 import slash from 'slash';
 
 const sanitizeBase = (path: string) => {
-  return path.replaceAll('.', '').replaceAll('@', '').replaceAll(sep, '-').replaceAll('/', '-');
+  return path
+    .replaceAll('.', '')
+    .replaceAll('@', '')
+    .replaceAll(sep, '-')
+    .replaceAll('/', '-')
+    .replaceAll(new RegExp(/^(-)+/g), '');
 };
 
 const sanitizeFinal = (path: string) => {
diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json
index 300a66c48d82..ab21bfc805d8 100644
--- a/code/lib/builder-vite/package.json
+++ b/code/lib/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/builder-vite/#readme",
   "bugs": {
@@ -42,16 +42,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channel-websocket": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/csf-plugin": "7.0.20",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channel-websocket": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/csf-plugin": "7.0.21",
     "@storybook/mdx2-csf": "^1.0.0",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^0.9.3",
     "express": "^4.17.3",
diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json
index aecf81747cc2..7cd70e8c5c25 100644
--- a/code/lib/builder-webpack5/package.json
+++ b/code/lib/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -56,25 +56,25 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addons": "7.0.20",
-    "@storybook/api": "7.0.20",
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channel-websocket": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-api": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/addons": "7.0.21",
+    "@storybook/api": "7.0.21",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channel-websocket": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-api": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-events": "7.0.21",
+    "@storybook/core-webpack": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/router": "7.0.20",
-    "@storybook/store": "7.0.20",
-    "@storybook/theming": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/router": "7.0.21",
+    "@storybook/store": "7.0.21",
+    "@storybook/theming": "7.0.21",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.0.0",
diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json
index c02ebf4d6589..53063e427d3e 100644
--- a/code/lib/channel-postmessage/package.json
+++ b/code/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -43,9 +43,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
     "qs": "^6.10.0",
     "telejson": "^7.0.3"
diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json
index 2de10981aee4..4c7433515e7d 100644
--- a/code/lib/channel-websocket/package.json
+++ b/code/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -43,8 +43,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
     "@storybook/global": "^5.0.0",
     "telejson": "^7.0.3"
   },
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 87a81299dd1b..548cd974ef96 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index ae89b4b0a13d..258a81d34924 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -21,7 +21,7 @@
   "license": "MIT",
   "bin": "./index.js",
   "dependencies": {
-    "@storybook/cli": "7.0.20"
+    "@storybook/cli": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index f057162242f1..b8229d3075b7 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -24,7 +24,7 @@
     "storybook": "./index.js"
   },
   "dependencies": {
-    "@storybook/cli": "7.0.20"
+    "@storybook/cli": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 03c86bde8a68..5f168829ac1c 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -57,13 +57,13 @@
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@ndelangen/get-tarball": "^3.0.7",
-    "@storybook/codemod": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-server": "7.0.20",
-    "@storybook/csf-tools": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/telemetry": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/codemod": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/csf-tools": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/telemetry": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/semver": "^7.3.4",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
@@ -95,7 +95,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.20",
+    "@storybook/client-api": "7.0.21",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts
index 8f8271ad8e4d..f6306ad45ec1 100644
--- a/code/lib/cli/src/detect.ts
+++ b/code/lib/cli/src/detect.ts
@@ -131,6 +131,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
       return CoreBuilder.Vite;
     case ProjectType.REACT_SCRIPTS:
     case ProjectType.ANGULAR:
+    case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something
     case ProjectType.NEXTJS:
       return CoreBuilder.Webpack5;
     default:
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 999c533f0025..512e6dca5c9b 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -277,17 +277,17 @@ export async function baseGenerator(
     );
   }
 
-  const packages = [
+  const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
     ...frameworkPackages,
     ...addonPackages,
     ...extraPackages,
-  ]
-    .filter(Boolean)
-    .filter(
-      (packageToInstall) => !installedDependencies.has(getPackageDetails(packageToInstall)[0])
-    );
+  ].filter(Boolean);
+
+  const packages = [...new Set(allPackages)].filter(
+    (packageToInstall) => !installedDependencies.has(getPackageDetails(packageToInstall)[0])
+  );
 
   logger.log();
   const versionedPackagesSpinner = ora({
@@ -299,30 +299,6 @@ export async function baseGenerator(
   );
   versionedPackagesSpinner.succeed();
 
-  await fse.ensureDir(`./${storybookConfigFolder}`);
-
-  if (addMainFile) {
-    await configureMain({
-      framework: { name: frameworkInclude, options: options.framework || {} },
-      storybookConfigFolder,
-      docs: { autodocs: 'tag' },
-      addons: pnp ? addons.map(wrapForPnp) : addons,
-      extensions,
-      language,
-      ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null),
-      ...extraMain,
-      ...(type !== 'framework'
-        ? {
-            core: {
-              builder: builderInclude,
-            },
-          }
-        : {}),
-    });
-  }
-
-  await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language, rendererId });
-
   const depsToInstall = [...versionedPackages];
 
   // Add basic babel config for a select few frameworks that need it, if they do not have a babel config file already
@@ -385,6 +361,30 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
+  await fse.ensureDir(`./${storybookConfigFolder}`);
+
+  if (addMainFile) {
+    await configureMain({
+      framework: { name: frameworkInclude, options: options.framework || {} },
+      storybookConfigFolder,
+      docs: { autodocs: 'tag' },
+      addons: pnp ? addons.map(wrapForPnp) : addons,
+      extensions,
+      language,
+      ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null),
+      ...extraMain,
+      ...(type !== 'framework'
+        ? {
+            core: {
+              builder: builderInclude,
+            },
+          }
+        : {}),
+    });
+  }
+
+  await configurePreview({ frameworkPreviewParts, storybookConfigFolder, language, rendererId });
+
   if (addScripts) {
     await stopIfExiting(async () =>
       packageManager.addStorybookCommandInScripts({
diff --git a/code/lib/cli/src/repro-generators/scripts.ts b/code/lib/cli/src/repro-generators/scripts.ts
index f47050163209..184f899bead5 100644
--- a/code/lib/cli/src/repro-generators/scripts.ts
+++ b/code/lib/cli/src/repro-generators/scripts.ts
@@ -148,7 +148,7 @@ const configureYarn2ForE2E = async ({ cwd }: Options) => {
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const command = [
     // ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
-    `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6001/" } }'`,
+    `yarn config set npmRegistryServer http://localhost:6001/`,
     // Some required magic to be able to fetch deps from local registry
     `yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
     // Disable fallback mode to make sure everything is required correctly
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 5d4322423639..d46c57786f95 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -1,96 +1,96 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.0.20',
-  '@storybook/addon-actions': '7.0.20',
-  '@storybook/addon-backgrounds': '7.0.20',
-  '@storybook/addon-controls': '7.0.20',
-  '@storybook/addon-docs': '7.0.20',
-  '@storybook/addon-essentials': '7.0.20',
-  '@storybook/addon-highlight': '7.0.20',
-  '@storybook/addon-interactions': '7.0.20',
-  '@storybook/addon-jest': '7.0.20',
-  '@storybook/addon-links': '7.0.20',
-  '@storybook/addon-mdx-gfm': '7.0.20',
-  '@storybook/addon-measure': '7.0.20',
-  '@storybook/addon-outline': '7.0.20',
-  '@storybook/addon-storyshots': '7.0.20',
-  '@storybook/addon-storyshots-puppeteer': '7.0.20',
-  '@storybook/addon-storysource': '7.0.20',
-  '@storybook/addon-toolbars': '7.0.20',
-  '@storybook/addon-viewport': '7.0.20',
-  '@storybook/addons': '7.0.20',
-  '@storybook/angular': '7.0.20',
-  '@storybook/api': '7.0.20',
-  '@storybook/blocks': '7.0.20',
-  '@storybook/builder-manager': '7.0.20',
-  '@storybook/builder-vite': '7.0.20',
-  '@storybook/builder-webpack5': '7.0.20',
-  '@storybook/channel-postmessage': '7.0.20',
-  '@storybook/channel-websocket': '7.0.20',
-  '@storybook/channels': '7.0.20',
-  '@storybook/cli': '7.0.20',
-  '@storybook/client-api': '7.0.20',
-  '@storybook/client-logger': '7.0.20',
-  '@storybook/codemod': '7.0.20',
-  '@storybook/components': '7.0.20',
-  '@storybook/core-client': '7.0.20',
-  '@storybook/core-common': '7.0.20',
-  '@storybook/core-events': '7.0.20',
-  '@storybook/core-server': '7.0.20',
-  '@storybook/core-webpack': '7.0.20',
-  '@storybook/csf-plugin': '7.0.20',
-  '@storybook/csf-tools': '7.0.20',
-  '@storybook/docs-tools': '7.0.20',
-  '@storybook/ember': '7.0.20',
-  '@storybook/html': '7.0.20',
-  '@storybook/html-vite': '7.0.20',
-  '@storybook/html-webpack5': '7.0.20',
-  '@storybook/instrumenter': '7.0.20',
-  '@storybook/manager': '7.0.20',
-  '@storybook/manager-api': '7.0.20',
-  '@storybook/nextjs': '7.0.20',
-  '@storybook/node-logger': '7.0.20',
-  '@storybook/postinstall': '7.0.20',
-  '@storybook/preact': '7.0.20',
-  '@storybook/preact-vite': '7.0.20',
-  '@storybook/preact-webpack5': '7.0.20',
-  '@storybook/preset-create-react-app': '7.0.20',
-  '@storybook/preset-html-webpack': '7.0.20',
-  '@storybook/preset-preact-webpack': '7.0.20',
-  '@storybook/preset-react-webpack': '7.0.20',
-  '@storybook/preset-server-webpack': '7.0.20',
-  '@storybook/preset-svelte-webpack': '7.0.20',
-  '@storybook/preset-vue-webpack': '7.0.20',
-  '@storybook/preset-vue3-webpack': '7.0.20',
-  '@storybook/preset-web-components-webpack': '7.0.20',
-  '@storybook/preview': '7.0.20',
-  '@storybook/preview-api': '7.0.20',
-  '@storybook/preview-web': '7.0.20',
-  '@storybook/react': '7.0.20',
-  '@storybook/react-dom-shim': '7.0.20',
-  '@storybook/react-vite': '7.0.20',
-  '@storybook/react-webpack5': '7.0.20',
-  '@storybook/router': '7.0.20',
-  '@storybook/server': '7.0.20',
-  '@storybook/server-webpack5': '7.0.20',
-  '@storybook/source-loader': '7.0.20',
-  '@storybook/store': '7.0.20',
-  '@storybook/svelte': '7.0.20',
-  '@storybook/svelte-vite': '7.0.20',
-  '@storybook/svelte-webpack5': '7.0.20',
-  '@storybook/sveltekit': '7.0.20',
-  '@storybook/telemetry': '7.0.20',
-  '@storybook/theming': '7.0.20',
-  '@storybook/types': '7.0.20',
-  '@storybook/vue': '7.0.20',
-  '@storybook/vue-vite': '7.0.20',
-  '@storybook/vue-webpack5': '7.0.20',
-  '@storybook/vue3': '7.0.20',
-  '@storybook/vue3-vite': '7.0.20',
-  '@storybook/vue3-webpack5': '7.0.20',
-  '@storybook/web-components': '7.0.20',
-  '@storybook/web-components-vite': '7.0.20',
-  '@storybook/web-components-webpack5': '7.0.20',
-  sb: '7.0.20',
-  storybook: '7.0.20',
+  '@storybook/addon-a11y': '7.0.21',
+  '@storybook/addon-actions': '7.0.21',
+  '@storybook/addon-backgrounds': '7.0.21',
+  '@storybook/addon-controls': '7.0.21',
+  '@storybook/addon-docs': '7.0.21',
+  '@storybook/addon-essentials': '7.0.21',
+  '@storybook/addon-highlight': '7.0.21',
+  '@storybook/addon-interactions': '7.0.21',
+  '@storybook/addon-jest': '7.0.21',
+  '@storybook/addon-links': '7.0.21',
+  '@storybook/addon-mdx-gfm': '7.0.21',
+  '@storybook/addon-measure': '7.0.21',
+  '@storybook/addon-outline': '7.0.21',
+  '@storybook/addon-storyshots': '7.0.21',
+  '@storybook/addon-storyshots-puppeteer': '7.0.21',
+  '@storybook/addon-storysource': '7.0.21',
+  '@storybook/addon-toolbars': '7.0.21',
+  '@storybook/addon-viewport': '7.0.21',
+  '@storybook/addons': '7.0.21',
+  '@storybook/angular': '7.0.21',
+  '@storybook/api': '7.0.21',
+  '@storybook/blocks': '7.0.21',
+  '@storybook/builder-manager': '7.0.21',
+  '@storybook/builder-vite': '7.0.21',
+  '@storybook/builder-webpack5': '7.0.21',
+  '@storybook/channel-postmessage': '7.0.21',
+  '@storybook/channel-websocket': '7.0.21',
+  '@storybook/channels': '7.0.21',
+  '@storybook/cli': '7.0.21',
+  '@storybook/client-api': '7.0.21',
+  '@storybook/client-logger': '7.0.21',
+  '@storybook/codemod': '7.0.21',
+  '@storybook/components': '7.0.21',
+  '@storybook/core-client': '7.0.21',
+  '@storybook/core-common': '7.0.21',
+  '@storybook/core-events': '7.0.21',
+  '@storybook/core-server': '7.0.21',
+  '@storybook/core-webpack': '7.0.21',
+  '@storybook/csf-plugin': '7.0.21',
+  '@storybook/csf-tools': '7.0.21',
+  '@storybook/docs-tools': '7.0.21',
+  '@storybook/ember': '7.0.21',
+  '@storybook/html': '7.0.21',
+  '@storybook/html-vite': '7.0.21',
+  '@storybook/html-webpack5': '7.0.21',
+  '@storybook/instrumenter': '7.0.21',
+  '@storybook/manager': '7.0.21',
+  '@storybook/manager-api': '7.0.21',
+  '@storybook/nextjs': '7.0.21',
+  '@storybook/node-logger': '7.0.21',
+  '@storybook/postinstall': '7.0.21',
+  '@storybook/preact': '7.0.21',
+  '@storybook/preact-vite': '7.0.21',
+  '@storybook/preact-webpack5': '7.0.21',
+  '@storybook/preset-create-react-app': '7.0.21',
+  '@storybook/preset-html-webpack': '7.0.21',
+  '@storybook/preset-preact-webpack': '7.0.21',
+  '@storybook/preset-react-webpack': '7.0.21',
+  '@storybook/preset-server-webpack': '7.0.21',
+  '@storybook/preset-svelte-webpack': '7.0.21',
+  '@storybook/preset-vue-webpack': '7.0.21',
+  '@storybook/preset-vue3-webpack': '7.0.21',
+  '@storybook/preset-web-components-webpack': '7.0.21',
+  '@storybook/preview': '7.0.21',
+  '@storybook/preview-api': '7.0.21',
+  '@storybook/preview-web': '7.0.21',
+  '@storybook/react': '7.0.21',
+  '@storybook/react-dom-shim': '7.0.21',
+  '@storybook/react-vite': '7.0.21',
+  '@storybook/react-webpack5': '7.0.21',
+  '@storybook/router': '7.0.21',
+  '@storybook/server': '7.0.21',
+  '@storybook/server-webpack5': '7.0.21',
+  '@storybook/source-loader': '7.0.21',
+  '@storybook/store': '7.0.21',
+  '@storybook/svelte': '7.0.21',
+  '@storybook/svelte-vite': '7.0.21',
+  '@storybook/svelte-webpack5': '7.0.21',
+  '@storybook/sveltekit': '7.0.21',
+  '@storybook/telemetry': '7.0.21',
+  '@storybook/theming': '7.0.21',
+  '@storybook/types': '7.0.21',
+  '@storybook/vue': '7.0.21',
+  '@storybook/vue-vite': '7.0.21',
+  '@storybook/vue-webpack5': '7.0.21',
+  '@storybook/vue3': '7.0.21',
+  '@storybook/vue3-vite': '7.0.21',
+  '@storybook/vue3-webpack5': '7.0.21',
+  '@storybook/web-components': '7.0.21',
+  '@storybook/web-components-vite': '7.0.21',
+  '@storybook/web-components-webpack5': '7.0.21',
+  sb: '7.0.21',
+  storybook: '7.0.21',
 };
diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json
index 482ecae72cb3..7963d6b77e4d 100644
--- a/code/lib/client-api/package.json
+++ b/code/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -42,8 +42,8 @@
     "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index f5384c19702c..10ae95ac110d 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.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 5842b23a08a9..313734561d12 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -49,9 +49,9 @@
     "@babel/preset-env": "~7.21.0",
     "@babel/types": "~7.21.2",
     "@storybook/csf": "^0.1.0",
-    "@storybook/csf-tools": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/csf-tools": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/types": "7.0.21",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
     "jscodeshift": "^0.14.0",
diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json
index 8cbf579d6b9b..010737621903 100644
--- a/code/lib/core-client/package.json
+++ b/code/lib/core-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-client",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -35,8 +35,8 @@
     "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index b8f47c908d6d..e709df86e886 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -43,8 +43,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/node": "^16.0.0",
     "@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 2e39167fa5d3..7332fc993dac 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.0.20",
+  "version": "7.0.21",
   "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 6aa158bdccb4..dfb90947e2ef 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -56,18 +56,18 @@
   "dependencies": {
     "@aw-web-design/x-default-browser": "1.4.88",
     "@discoveryjs/json-ext": "^0.5.3",
-    "@storybook/builder-manager": "7.0.20",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/builder-manager": "7.0.21",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/csf": "^0.1.0",
-    "@storybook/csf-tools": "7.0.20",
+    "@storybook/csf-tools": "7.0.21",
     "@storybook/docs-mdx": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/telemetry": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/telemetry": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/detect-port": "^1.3.0",
     "@types/node": "^16.0.0",
     "@types/node-fetch": "^2.5.7",
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 10be481c22d5..734e0025a096 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -43,9 +43,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-common": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/node": "^16.0.0",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 9fab83cea03d..3dea8b58e94f 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.0.20",
+  "version": "7.0.21",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
@@ -43,7 +43,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf-tools": "7.0.20",
+    "@storybook/csf-tools": "7.0.21",
     "unplugin": "^0.10.2"
   },
   "devDependencies": {
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 4c4220cc3d3a..5d979a0890da 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.0.20",
+  "version": "7.0.21",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
@@ -46,7 +46,7 @@
     "@babel/traverse": "~7.21.2",
     "@babel/types": "~7.21.2",
     "@storybook/csf": "^0.1.0",
-    "@storybook/types": "7.0.20",
+    "@storybook/types": "7.0.21",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.1",
     "ts-dedent": "^2.0.0"
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index 27f3832945ed..a62d6e39fd45 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.0.20",
+  "version": "7.0.21",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/core-common": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/core-common": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/doctrine": "^0.0.3",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 8686055a8445..13e9b112898d 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -43,11 +43,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/preview-api": "7.0.21"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
diff --git a/code/lib/manager-api-shim/package.json b/code/lib/manager-api-shim/package.json
index 0756e4a799cf..4c58db46d2c6 100644
--- a/code/lib/manager-api-shim/package.json
+++ b/code/lib/manager-api-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Manager API (facade)",
   "keywords": [
     "storybook"
@@ -42,8 +42,8 @@
     "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/manager-api": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/manager-api": "7.0.21"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 194123ec420f..53fc8a885c5f 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.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
@@ -42,14 +42,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/router": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/router": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "memoizerific": "^1.11.3",
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index ccdc13153a3d..a833a6556b6f 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '7.0.20';
+export const version = '7.0.21';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index e7d7730cb303..82cf1634aa7f 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.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json
index b4f93fd7ea71..7a913aa22bd0 100644
--- a/code/lib/postinstall/package.json
+++ b/code/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index bbe0743761ca..cca19c236b72 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.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -67,13 +67,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/types": "7.0.20",
+    "@storybook/types": "7.0.21",
     "@types/qs": "^6.9.5",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
@@ -85,7 +85,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^26.6.2",
-    "@storybook/core-common": "7.0.20",
+    "@storybook/core-common": "7.0.21",
     "ansi-to-html": "^0.6.11",
     "react": "^16.14.0",
     "slash": "^5.0.0"
diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json
index 7d7949bbb6a3..8407ca84e40e 100644
--- a/code/lib/preview-web/package.json
+++ b/code/lib/preview-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-web",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,8 +42,8 @@
     "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index 51f2964a29e8..9a7cad075b5f 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -55,12 +55,12 @@
     "prep": "../../../scripts/prepare/esm-bundle.ts"
   },
   "devDependencies": {
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channel-websocket": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channel-websocket": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-events": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
     "typescript": "~4.9.3"
   },
   "publishConfig": {
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 658ffa3f7944..71b1f31687f5 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.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -53,7 +53,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "devDependencies": {
-    "@storybook/types": "7.0.20",
+    "@storybook/types": "7.0.21",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index cb04c13dccf4..4be5a3e7e9db 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -48,7 +48,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0"
   },
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index ea0fdf184fc6..5608cd221aa5 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.0.20",
+  "version": "7.0.21",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@storybook/csf": "^0.1.0",
-    "@storybook/types": "7.0.20",
+    "@storybook/types": "7.0.21",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",
     "prettier": "^2.8.0"
diff --git a/code/lib/store/package.json b/code/lib/store/package.json
index af3cb072526b..b879ff940425 100644
--- a/code/lib/store/package.json
+++ b/code/lib/store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,8 +42,8 @@
     "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/preview-api": "7.0.20"
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/preview-api": "7.0.21"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index 5f8c207ea359..5b2445d92622 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
@@ -43,8 +43,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-common": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-common": "7.0.21",
     "chalk": "^4.1.0",
     "detect-package-manager": "^2.0.1",
     "fetch-retry": "^5.0.2",
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 1a317eb332df..0fe7803f134f 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-    "@storybook/client-logger": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
     "@storybook/global": "^5.0.0",
     "memoizerific": "^1.11.3"
   },
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index ed76f1017f43..705c99519d29 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
@@ -43,7 +43,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
+    "@storybook/channels": "7.0.21",
     "@types/babel__core": "^7.0.0",
     "@types/express": "^4.7.0",
     "file-system-cache": "^2.0.0"
diff --git a/code/package.json b/code/package.json
index 8a75fcfe5b67..d593bd18e904 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -78,13 +78,14 @@
     "defaults"
   ],
   "resolutions": {
-    "@playwright/test": "1.32.3",
+    "@playwright/test": "1.35.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "esbuild": "^0.17.0",
     "eslint": "^8.28.0",
-    "playwright": "1.32.3",
+    "playwright": "1.35.0",
+    "playwright-core": "1.35.0",
     "serialize-javascript": "^3.1.0"
   },
   "dependencies": {
@@ -99,7 +100,7 @@
     "@nrwl/cli": "^15.4.5",
     "@nrwl/nx-cloud": "^15.0.2",
     "@nrwl/workspace": "^15.4.5",
-    "@playwright/test": "1.32.3",
+    "@playwright/test": "^1.35.0",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
@@ -245,7 +246,6 @@
     "lodash": "^4.17.21",
     "node-gyp": "^8.4.0",
     "nx": "^15.4.5",
-    "playwright": "1.32.3",
     "prettier": "2.8.0",
     "process": "^0.11.10",
     "raf": "^3.4.1",
@@ -325,10 +325,6 @@
       [
         "dependencies",
         "Dependency Upgrades"
-      ],
-      [
-        "other",
-        "Other"
       ]
     ]
   }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index d45ecdad1472..3c432db97670 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
@@ -50,14 +50,14 @@
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
-    "@storybook/types": "7.0.20",
+    "@storybook/types": "7.0.21",
     "@types/babel__core": "^7.1.7",
     "babel-plugin-react-docgen": "^4.1.0",
     "pnp-webpack-plugin": "^1.7.0",
     "semver": "^7.3.5"
   },
   "devDependencies": {
-    "@storybook/node-logger": "7.0.20",
+    "@storybook/node-logger": "7.0.21",
     "@types/node": "^16.0.0",
     "typescript": "~4.9.3"
   },
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 4b0407ca6980..3d04150de1b3 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -48,7 +48,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
     "@types/node": "^16.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 c1d7793930ad..eda3d7ca99a2 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -50,7 +50,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.21.0",
     "@babel/preset-typescript": "^7.21.0",
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
     "@types/node": "^16.0.0"
   },
   "devDependencies": {
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index c583464defb5..8fa467807366 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
@@ -66,10 +66,10 @@
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
-    "@storybook/react": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
+    "@storybook/react": "7.0.21",
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
     "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index ad5d6acc8f86..50e3baebce7f 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -53,10 +53,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-server": "7.0.20",
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/core-server": "7.0.21",
+    "@storybook/core-webpack": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/server": "7.0.20",
+    "@storybook/server": "7.0.21",
     "@types/node": "^16.0.0",
     "safe-identifier": "^0.4.1",
     "ts-dedent": "^2.0.0",
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 13fe8ebf0283..131c8a8eae75 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -63,8 +63,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/node-logger": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
+    "@storybook/node-logger": "7.0.21",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index 840c5a17e2e8..92a4ff795975 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -58,8 +58,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@types/node": "^16.0.0",
     "ts-loader": "^9.2.8",
     "vue-docgen-api": "^4.44.23",
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 372d63c70f7f..2989161d9efc 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -58,8 +58,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@types/node": "^16.0.0",
     "ts-loader": "^9.2.8",
     "vue-docgen-api": "^4.46.0",
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index e2a254a54095..f934e8ab0996 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
@@ -54,7 +54,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.20.2",
-    "@storybook/core-webpack": "7.0.20",
+    "@storybook/core-webpack": "7.0.21",
     "@types/node": "^16.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "babel-plugin-bundled-import-meta": "^0.3.1"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index d89ffb7abca0..34c8e2a98eb8 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -48,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index a4b6895221b5..22ff4faede7a 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
@@ -48,10 +48,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.0.20",
+    "@storybook/core-client": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index eb5c2b148bf5..2814488746af 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -52,13 +52,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/react-dom-shim": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/react-dom-shim": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^16.0.0",
diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
index 21eb492d30e7..f2b29752c276 100644
--- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx
+++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import mapValues from 'lodash/mapValues.js';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
+import type { StoryObj } from '@storybook/react';
 import type { Args, Parameters, StoryContext } from '@storybook/types';
 import { inferControls } from '@storybook/preview-api';
 import { ThemeProvider, themes, convert } from '@storybook/theming';
 
+import { within } from '@storybook/testing-library';
 import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input';
 import { component as TsFunctionComponentInlineDefaultsComponent } from './docgen-components/ts-function-component-inline-defaults/input';
 import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input';
@@ -76,6 +78,27 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo
 
 export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
 
-export const TsTypes = { parameters: { component: TsTypesComponent } };
+const addChromaticIgnore = async (element: HTMLElement) => {
+  const row = element.parentElement?.parentElement;
+  if (row?.nodeName === 'TR') {
+    row.setAttribute('data-chromatic', 'ignore');
+  } else {
+    throw new Error('the DOM structure changed, please update this test');
+  }
+};
+
+export const TsTypes: StoryObj = {
+  parameters: { component: TsTypesComponent },
+  play: async ({ canvasElement }) => {
+    // This play function's sole purpose is to add a "chromatic ignore" region to flaky rows.
+    const canvas = within(canvasElement);
+    const funcCell = await canvas.findByText('funcWithArgsAndReturns');
+    addChromaticIgnore(funcCell);
+    const namedNumericCell = await canvas.findByText('namedNumericLiteralUnion');
+    addChromaticIgnore(namedNumericCell);
+    const inlinedNumericCell = await canvas.findByText('inlinedNumericLiteralUnion');
+    addChromaticIgnore(inlinedNumericCell);
+  },
+};
 
 export const TsHtml = { parameters: { component: TsHtmlComponent } };
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 7a803eecee7e..7779e219bc5b 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
@@ -53,11 +53,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.0.20",
+    "@storybook/core-client": "7.0.21",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.1.0",
     "ts-dedent": "^2.0.0",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index be4bb6d3ef64..973cc308a284 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
@@ -52,13 +52,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/core-events": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/core-events": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "sveltedoc-parser": "^4.2.1",
     "type-fest": "2.19.0"
   },
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index ac891b97e3c4..5ae8db74ad72 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Vue renderer",
   "keywords": [
     "storybook"
@@ -48,12 +48,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "2.19.0"
   },
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index c6c213af57bb..a44780aa5235 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -48,14 +48,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "2.19.0",
-    "vue-component-type-helpers": "^1.6.5"
+    "vue-component-type-helpers": "latest"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 12e98f532605..47d9417e79c9 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.0.20",
+  "version": "7.0.21",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -51,13 +51,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/core-client": "7.0.20",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/core-client": "7.0.21",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/types": "7.0.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
index 127bc8704a4a..7f1b194d16b6 100644
--- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
+++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -84,7 +84,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "boolean",
     },
   },
   "backSide": Object {
@@ -126,7 +126,7 @@ Object {
     "name": "header",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "\\"Your Message\\"",
       },
@@ -152,7 +152,7 @@ Object {
     "name": "rows",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "[]",
       },
diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts
index 66743bfdd7a8..c60d23bfe1ea 100644
--- a/code/renderers/web-components/src/docs/custom-elements.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.ts
@@ -39,8 +39,19 @@ interface Declaration {
 }
 
 function mapItem(item: TagItem, category: string): InputType {
-  const type =
-    category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
+  let type;
+  switch (category) {
+    case 'attributes':
+    case 'properties':
+      type = { name: item.type?.text || item.type };
+      break;
+    case 'slots':
+      type = { name: 'string' };
+      break;
+    default:
+      type = { name: 'void' };
+      break;
+  }
 
   return {
     name: item.name,
@@ -137,13 +148,13 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes, 'attributes'),
-      ...mapData(metaData.members, 'properties'),
-      ...mapData(metaData.properties, 'properties'),
-      ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css custom properties'),
-      ...mapData(metaData.cssParts, 'css shadow parts'),
+      ...mapData(metaData.members ?? [], 'properties'),
+      ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
+      ...mapData(metaData.events ?? [], 'events'),
+      ...mapData(metaData.slots ?? [], 'slots'),
+      ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
+      ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
     }
   );
 };
diff --git a/code/renderers/web-components/template/stories/custom-elements.json b/code/renderers/web-components/template/stories/custom-elements.json
index 7389e1bab99b..6bdc06ce7a23 100644
--- a/code/renderers/web-components/template/stories/custom-elements.json
+++ b/code/renderers/web-components/template/stories/custom-elements.json
@@ -51,8 +51,8 @@
           ],
           "slots": [
             {
-              "description": "This is an unnamed slot (the default slot)",
-              "name": ""
+              "name": "prefix",
+              "description": "Label prefix"
             }
           ],
           "members": [
diff --git a/code/renderers/web-components/template/stories/demo-wc-card.stories.js b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
index 0e5dd11f3e68..193a961c6bce 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card.stories.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
@@ -3,14 +3,22 @@ import './demo-wc-card';
 
 export default {
   component: 'demo-wc-card',
+  render: ({ backSide, header, rows, prefix }) =>
+    html`
+      <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+        ><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
+      >
+    `,
 };
 
-const Template = ({ backSide, header, rows }) =>
-  html`
-    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
-      >A simple card</demo-wc-card
-    >
-  `;
+export const Front = {
+  args: { backSide: false, header: undefined, rows: [] },
+};
+
+export const Back = {
+  args: { backSide: true, header: undefined, rows: [] },
+};
 
-export const Front = Template.bind({});
-Front.args = { backSide: false, header: undefined, rows: [] };
+export const Prefix = {
+  args: { backSide: false, prefix: 'prefix:', header: 'my header', rows: [] },
+};
diff --git a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
index 89e29d06fc92..4c8cee3a7c6c 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
@@ -69,7 +69,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">${this.header}</div>
+        <div class="header"><slot name="prefix"></slot> ${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0
diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
index ed08e0fd9886..7c52ad023776 100644
--- a/code/ui/.storybook/preview.tsx
+++ b/code/ui/.storybook/preview.tsx
@@ -64,18 +64,19 @@ const ThemeStack = styled.div(
 const PlayFnNotice = styled.div(
   {
     position: 'absolute',
-    bottom: '1rem',
-    right: '1rem',
-    border: '1px solid #ccc',
-    borderRadius: '5px',
-    padding: '1rem',
-    fontSize: '12px',
+    top: 0,
+    left: 0,
+    width: '100%',
+    borderBottom: '1px solid #ccc',
+    padding: '3px 8px',
+    fontSize: '10px',
+    fontWeight: 'bold',
     '> *': {
       display: 'block',
     },
   },
   ({ theme }) => ({
-    background: theme.background.content,
+    background: '#fffbd9',
     color: theme.color.defaultText,
   })
 );
@@ -219,10 +220,15 @@ export const decorators = [
             <Global styles={createReset} />
             <ThemedSetRoot />
             {!parameters.theme && isChromatic() && playFunction && (
-              <PlayFnNotice>
-                <span>Detected play function.</span>
-                <span>Rendering in a single theme</span>
-              </PlayFnNotice>
+              <>
+                <PlayFnNotice>
+                  <span>
+                    Detected play function in Chromatic. Rendering only light theme to avoid
+                    multiple play functions in the same story.
+                  </span>
+                </PlayFnNotice>
+                <div style={{ marginBottom: 20 }} />
+              </>
             )}
             <StoryFn />
           </ThemeProvider>
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index 031db785e98b..072e9f66b6c5 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -43,17 +43,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/csf": "^0.1.0",
-    "@storybook/docs-tools": "7.0.20",
+    "@storybook/docs-tools": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/preview-api": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/preview-api": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@types/lodash": "^4.14.167",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
@@ -67,7 +67,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.20",
+    "@storybook/addon-actions": "7.0.21",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/code/ui/blocks/src/blocks/DocsPage.stories.tsx b/code/ui/blocks/src/blocks/DocsPage.stories.tsx
index b65768ef1f3d..e0e0daf53722 100644
--- a/code/ui/blocks/src/blocks/DocsPage.stories.tsx
+++ b/code/ui/blocks/src/blocks/DocsPage.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
 import { DocsPage } from './DocsPage';
 
 const meta = {
@@ -16,8 +17,20 @@ export const Default: Story = {
   parameters: {
     relativeCsfPaths: ['../examples/Button.stories'],
   },
+  play: async ({ canvasElement }) => {
+    // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row.
+    const canvas = within(canvasElement);
+    const sizeCell = await canvas.findByText('How large should the button be?');
+    const sizeRow = sizeCell.parentElement?.parentElement?.parentElement;
+    if (sizeRow?.nodeName === 'TR') {
+      sizeRow.setAttribute('data-chromatic', 'ignore');
+    } else {
+      throw new Error('the DOM structure changed, please update this test');
+    }
+  },
 };
 export const SingleStory: Story = {
+  ...Default,
   parameters: {
     relativeCsfPaths: ['../examples/DocsPageParameters.stories'],
   },
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index dc22c8de2acf..7872dc025628 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -48,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.20",
+    "@storybook/client-logger": "7.0.21",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "memoizerific": "^1.11.3",
     "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 4e2434e52370..3f1fc6fa8a45 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "7.0.20",
+  "version": "7.0.21",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -51,19 +51,19 @@
   },
   "devDependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/addons": "7.0.20",
-    "@storybook/api": "7.0.20",
-    "@storybook/channel-postmessage": "7.0.20",
-    "@storybook/channel-websocket": "7.0.20",
-    "@storybook/channels": "7.0.20",
-    "@storybook/client-logger": "7.0.20",
-    "@storybook/components": "7.0.20",
-    "@storybook/core-events": "7.0.20",
+    "@storybook/addons": "7.0.21",
+    "@storybook/api": "7.0.21",
+    "@storybook/channel-postmessage": "7.0.21",
+    "@storybook/channel-websocket": "7.0.21",
+    "@storybook/channels": "7.0.21",
+    "@storybook/client-logger": "7.0.21",
+    "@storybook/components": "7.0.21",
+    "@storybook/core-events": "7.0.21",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.20",
-    "@storybook/router": "7.0.20",
-    "@storybook/theming": "7.0.20",
-    "@storybook/types": "7.0.20",
+    "@storybook/manager-api": "7.0.21",
+    "@storybook/router": "7.0.21",
+    "@storybook/theming": "7.0.21",
+    "@storybook/types": "7.0.21",
     "@testing-library/react": "^11.2.2",
     "@types/semver": "^7.3.4",
     "copy-to-clipboard": "^3.3.1",
diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx
index fc87fd64d17e..48e2696d3306 100644
--- a/code/ui/manager/src/components/layout/app.mockdata.tsx
+++ b/code/ui/manager/src/components/layout/app.mockdata.tsx
@@ -105,6 +105,7 @@ class PlaceholderClock extends Component<{ color: string }, { count: number }> {
     return (
       <PlaceholderBlock color={color}>
         <h2
+          data-chromatic="ignore"
           style={{
             position: 'absolute',
             bottom: 0,
diff --git a/code/yarn.lock b/code/yarn.lock
index 25988accfbf2..8fe4b59816fa 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4593,19 +4593,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.32.3":
-  version: 1.32.3
-  resolution: "@playwright/test@npm:1.32.3"
+"@playwright/test@npm:1.35.0":
+  version: 1.35.0
+  resolution: "@playwright/test@npm:1.35.0"
   dependencies:
     "@types/node": "*"
     fsevents: 2.3.2
-    playwright-core: 1.32.3
+    playwright-core: 1.35.0
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: d09e4135c868b4067f45b8c297d02b0d8ddb8298657c942a06c72f3d9a3236af94586718dc7590693dbb31ea4b8fcceeb8a1e8811072f2add7d952c5c9129df3
+  checksum: 77594d876632e9ce8a33851fed0a9ffe1034ca216811a3b5c3925c371eddb20ceb6848f3e9b10234a025dcf7be979cddcd0285ad627ad30afbc0cf246ab74c4d
   languageName: node
   linkType: hard
 
@@ -4843,16 +4843,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
   dependencies:
-    "@storybook/addon-highlight": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/addon-highlight": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@testing-library/react": ^11.2.2
     axe-core: ^4.2.0
     lodash: ^4.17.21
@@ -4870,18 +4870,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@7.0.20, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@7.0.21, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@workspace:addons/actions"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/lodash": ^4.14.167
     "@types/uuid": ^9.0.1
     dequal: ^2.0.2
@@ -4904,18 +4904,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@7.0.20, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@7.0.21, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -4930,19 +4930,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@7.0.20, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@7.0.21, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@workspace:addons/controls"
   dependencies:
-    "@storybook/blocks": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/manager-api": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/blocks": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/manager-api": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -4956,7 +4956,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@7.0.20, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@7.0.21, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
@@ -4964,19 +4964,19 @@ __metadata:
     "@babel/plugin-transform-react-jsx": ^7.19.0
     "@jest/transform": ^29.3.1
     "@mdx-js/react": ^2.1.5
-    "@storybook/blocks": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/csf-plugin": 7.0.20
-    "@storybook/csf-tools": 7.0.20
+    "@storybook/blocks": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/csf-plugin": 7.0.21
+    "@storybook/csf-tools": 7.0.21
     "@storybook/global": ^5.0.0
     "@storybook/mdx2-csf": ^1.0.0
-    "@storybook/node-logger": 7.0.20
-    "@storybook/postinstall": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/react-dom-shim": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/node-logger": 7.0.21
+    "@storybook/postinstall": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/react-dom-shim": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     fs-extra: ^11.1.0
     react: ^16.14.0
     react-dom: ^16.8.0
@@ -4994,20 +4994,20 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-essentials@workspace:addons/essentials"
   dependencies:
-    "@storybook/addon-actions": 7.0.20
-    "@storybook/addon-backgrounds": 7.0.20
-    "@storybook/addon-controls": 7.0.20
-    "@storybook/addon-docs": 7.0.20
-    "@storybook/addon-highlight": 7.0.20
-    "@storybook/addon-measure": 7.0.20
-    "@storybook/addon-outline": 7.0.20
-    "@storybook/addon-toolbars": 7.0.20
-    "@storybook/addon-viewport": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/manager-api": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/vue": 7.0.20
+    "@storybook/addon-actions": 7.0.21
+    "@storybook/addon-backgrounds": 7.0.21
+    "@storybook/addon-controls": 7.0.21
+    "@storybook/addon-docs": 7.0.21
+    "@storybook/addon-highlight": 7.0.21
+    "@storybook/addon-measure": 7.0.21
+    "@storybook/addon-outline": 7.0.21
+    "@storybook/addon-toolbars": 7.0.21
+    "@storybook/addon-viewport": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/manager-api": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/vue": 7.0.21
     ts-dedent: ^2.0.0
     typescript: ^4.9.3
   peerDependencies:
@@ -5016,13 +5016,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-highlight@7.0.20, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
+"@storybook/addon-highlight@7.0.21, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-highlight@workspace:addons/highlight"
   dependencies:
-    "@storybook/core-events": 7.0.20
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
+    "@storybook/preview-api": 7.0.21
     "@types/webpack-env": ^1.16.0
     typescript: ~4.9.3
   languageName: unknown
@@ -5033,18 +5033,18 @@ __metadata:
   resolution: "@storybook/addon-interactions@workspace:addons/interactions"
   dependencies:
     "@devtools-ds/object-inspector": ^1.1.2
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 7.0.20
+    "@storybook/instrumenter": 7.0.21
     "@storybook/jest": ^0.1.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
     "@storybook/testing-library": ^0.1.0
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/node": ^16.0.0
     formik: ^2.2.9
     jest-mock: ^27.0.6
@@ -5066,13 +5066,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-jest@workspace:addons/jest"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
     react-resize-detector: ^7.1.2
     typescript: ~4.9.3
     upath: ^1.2.0
@@ -5091,14 +5091,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@workspace:addons/links"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/router": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/router": 7.0.21
+    "@storybook/types": 7.0.21
     fs-extra: ^11.1.0
     prop-types: ^15.7.2
     ts-dedent: ^2.0.0
@@ -5118,24 +5118,24 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-mdx-gfm@workspace:addons/gfm"
   dependencies:
-    "@storybook/node-logger": 7.0.20
+    "@storybook/node-logger": 7.0.21
     remark-gfm: ^3.0.1
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@7.0.20, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
+"@storybook/addon-measure@7.0.21, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-measure@workspace:addons/measure"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5148,17 +5148,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-outline@7.0.20, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
+"@storybook/addon-outline@7.0.21, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-outline@workspace:addons/outline"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -5178,8 +5178,8 @@ __metadata:
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
     "@storybook/csf": ^0.1.0
-    "@storybook/node-logger": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/node-logger": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/jest-image-snapshot": ^5.1.0
     "@types/puppeteer": ^5.4.0
     enzyme: ^3.11.0
@@ -5188,7 +5188,7 @@ __metadata:
     puppeteer: ^2.0.0 || ^3.0.0
     rimraf: ^3.0.2
   peerDependencies:
-    "@storybook/addon-storyshots": 7.0.20
+    "@storybook/addon-storyshots": 7.0.21
     puppeteer: ">=2.0.0"
   peerDependenciesMeta:
     puppeteer:
@@ -5204,18 +5204,18 @@ __metadata:
     "@angular/platform-browser-dynamic": ^13.3.6
     "@emotion/jest": ^11.8.0
     "@jest/transform": ^29.3.1
-    "@storybook/addon-docs": 7.0.20
-    "@storybook/angular": 7.0.20
+    "@storybook/addon-docs": 7.0.21
+    "@storybook/angular": 7.0.21
     "@storybook/babel-plugin-require-context-hook": 1.0.1
-    "@storybook/client-api": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/client-api": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-webpack": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/react": 7.0.20
-    "@storybook/types": 7.0.20
-    "@storybook/vue": 7.0.20
-    "@storybook/vue3": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/react": 7.0.21
+    "@storybook/types": 7.0.21
+    "@storybook/vue": 7.0.21
+    "@storybook/vue3": 7.0.21
     "@types/glob": ^7.1.3
     "@types/jest-specific-snapshot": ^0.5.6
     babel-loader: ^9.1.2
@@ -5289,13 +5289,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@workspace:addons/storysource"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/router": 7.0.20
-    "@storybook/source-loader": 7.0.20
-    "@storybook/theming": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/router": 7.0.21
+    "@storybook/source-loader": 7.0.21
+    "@storybook/theming": 7.0.21
     "@types/react": ^16.14.34
     "@types/react-syntax-highlighter": 11.0.5
     estraverse: ^5.2.0
@@ -5313,15 +5313,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-toolbars@7.0.20, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@7.0.21, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-toolbars@workspace:addons/toolbars"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5334,17 +5334,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@7.0.20, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@7.0.21, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@workspace:addons/viewport"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
     typescript: ~4.9.3
@@ -5359,20 +5359,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@7.0.20, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@7.0.21, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
   version: 0.0.0-use.local
   resolution: "@storybook/addons@workspace:lib/addons"
   dependencies:
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/angular@7.0.20, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
+"@storybook/angular@7.0.21, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:frameworks/angular"
   dependencies:
@@ -5388,21 +5388,21 @@ __metadata:
     "@angular/forms": ^16.0.0-rc.4
     "@angular/platform-browser": ^16.0.0-rc.4
     "@angular/platform-browser-dynamic": ^16.0.0-rc.4
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/cli": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-client": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-events": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/core-webpack": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/cli": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-client": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-events": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/core-webpack": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/telemetry": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/telemetry": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/node": ^16.0.0
     "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
@@ -5450,12 +5450,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@7.0.20, @storybook/api@workspace:*, @storybook/api@workspace:lib/manager-api-shim":
+"@storybook/api@7.0.21, @storybook/api@workspace:*, @storybook/api@workspace:lib/manager-api-shim":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/manager-api-shim"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/manager-api": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/manager-api": 7.0.21
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5499,22 +5499,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@7.0.20, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks":
+"@storybook/blocks@7.0.21, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks":
   version: 0.0.0-use.local
   resolution: "@storybook/blocks@workspace:ui/blocks"
   dependencies:
-    "@storybook/addon-actions": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/addon-actions": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/csf": ^0.1.0
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/color-convert": ^2.0.0
     "@types/lodash": ^4.14.167
     color-convert: ^2.0.1
@@ -5533,14 +5533,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-manager@7.0.20, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:lib/builder-manager":
+"@storybook/builder-manager@7.0.21, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:lib/builder-manager":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-manager@workspace:lib/builder-manager"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": ^2.1.2
-    "@storybook/core-common": 7.0.20
-    "@storybook/manager": 7.0.20
-    "@storybook/node-logger": 7.0.20
+    "@storybook/core-common": 7.0.21
+    "@storybook/manager": 7.0.21
+    "@storybook/node-logger": 7.0.21
     "@types/ejs": ^3.1.1
     "@types/find-cache-dir": ^3.2.1
     "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10
@@ -5558,20 +5558,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-vite@7.0.20, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:lib/builder-vite":
+"@storybook/builder-vite@7.0.21, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:lib/builder-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:lib/builder-vite"
   dependencies:
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channel-websocket": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/csf-plugin": 7.0.20
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channel-websocket": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/csf-plugin": 7.0.21
     "@storybook/mdx2-csf": ^1.0.0
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/express": ^4.17.13
     "@types/node": ^16.0.0
     browser-assert: ^1.2.1
@@ -5602,30 +5602,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@7.0.20, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@7.0.21, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 7.0.20
-    "@storybook/api": 7.0.20
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channel-websocket": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-api": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-events": 7.0.20
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/addons": 7.0.21
+    "@storybook/api": 7.0.21
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channel-websocket": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-api": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-events": 7.0.21
+    "@storybook/core-webpack": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/router": 7.0.20
-    "@storybook/store": 7.0.20
-    "@storybook/theming": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/router": 7.0.21
+    "@storybook/store": 7.0.21
+    "@storybook/theming": 7.0.21
     "@types/node": ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
@@ -5666,13 +5666,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@7.0.20, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@7.0.21, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage"
   dependencies:
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
     qs: ^6.10.0
     telejson: ^7.0.3
@@ -5680,19 +5680,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-websocket@7.0.20, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
+"@storybook/channel-websocket@7.0.21, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket"
   dependencies:
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
     "@storybook/global": ^5.0.0
     telejson: ^7.0.3
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@7.0.20, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@7.0.21, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
@@ -5700,21 +5700,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/cli@7.0.20, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@7.0.21, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
   dependencies:
     "@babel/core": ^7.20.2
     "@babel/preset-env": ^7.20.2
     "@ndelangen/get-tarball": ^3.0.7
-    "@storybook/client-api": 7.0.20
-    "@storybook/codemod": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/csf-tools": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/telemetry": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/client-api": 7.0.21
+    "@storybook/codemod": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/csf-tools": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/telemetry": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/cross-spawn": ^6.0.2
     "@types/prompts": ^2.0.9
     "@types/puppeteer-core": ^2.1.0
@@ -5757,16 +5757,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@7.0.20, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@7.0.21, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@workspace:lib/client-api"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@7.0.20, @storybook/client-logger@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@7.0.21, @storybook/client-logger@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/client-logger@workspace:lib/client-logger"
   dependencies:
@@ -5775,7 +5775,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/codemod@7.0.20, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/codemod@7.0.21, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
@@ -5783,9 +5783,9 @@ __metadata:
     "@babel/preset-env": ~7.21.0
     "@babel/types": ~7.21.2
     "@storybook/csf": ^0.1.0
-    "@storybook/csf-tools": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/csf-tools": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/jscodeshift": ^0.11.6
     ansi-regex: ^5.0.1
     cross-spawn: ^7.0.3
@@ -5810,16 +5810,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@7.0.20, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
+"@storybook/components@7.0.21, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:ui/components"
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 7.0.20
+    "@storybook/client-logger": 7.0.21
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
     "@types/util-deprecate": ^1.0.0
@@ -5841,21 +5841,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-client@7.0.20, @storybook/core-client@workspace:*, @storybook/core-client@workspace:lib/core-client":
+"@storybook/core-client@7.0.21, @storybook/core-client@workspace:*, @storybook/core-client@workspace:lib/core-client":
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@workspace:lib/core-client"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@7.0.20, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@7.0.21, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common":
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
-    "@storybook/node-logger": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/node-logger": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/mock-fs": ^4.13.1
     "@types/node": ^16.0.0
     "@types/picomatch": ^2.3.0
@@ -5882,7 +5882,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@7.0.20, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@7.0.21, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:lib/core-events"
   dependencies:
@@ -5890,24 +5890,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-server@7.0.20, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@7.0.21, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
     "@aw-web-design/x-default-browser": 1.4.88
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-manager": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/builder-manager": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/csf": ^0.1.0
-    "@storybook/csf-tools": 7.0.20
+    "@storybook/csf-tools": 7.0.21
     "@storybook/docs-mdx": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/manager": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/telemetry": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/telemetry": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/compression": ^1.7.0
     "@types/detect-port": ^1.3.0
     "@types/ip": ^1.1.0
@@ -5947,13 +5947,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-webpack@7.0.20, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack":
+"@storybook/core-webpack@7.0.21, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/core-webpack@workspace:lib/core-webpack"
   dependencies:
-    "@storybook/core-common": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/core-common": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/node": ^16.0.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -5961,17 +5961,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-plugin@7.0.20, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin":
+"@storybook/csf-plugin@7.0.21, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-plugin@workspace:lib/csf-plugin"
   dependencies:
-    "@storybook/csf-tools": 7.0.20
+    "@storybook/csf-tools": 7.0.21
     typescript: ~4.9.3
     unplugin: ^0.10.2
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@7.0.20, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@7.0.21, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
   dependencies:
@@ -5980,7 +5980,7 @@ __metadata:
     "@babel/traverse": ~7.21.2
     "@babel/types": ~7.21.2
     "@storybook/csf": ^0.1.0
-    "@storybook/types": 7.0.20
+    "@storybook/types": 7.0.21
     "@types/fs-extra": ^11.0.1
     "@types/js-yaml": ^3.12.6
     fs-extra: ^11.1.0
@@ -6016,14 +6016,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@7.0.20, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
+"@storybook/docs-tools@7.0.21, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/docs-tools@workspace:lib/docs-tools"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/core-common": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/core-common": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/doctrine": ^0.0.3
     doctrine: ^3.0.0
     jest-specific-snapshot: ^7.0.0
@@ -6037,12 +6037,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/ember@workspace:frameworks/ember"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     ember-source: ~3.28.1
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -6086,15 +6086,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html-vite@workspace:frameworks/html-vite"
   dependencies:
-    "@storybook/addons": 7.0.20
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channel-websocket": 7.0.20
-    "@storybook/client-api": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/html": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preview-web": 7.0.20
+    "@storybook/addons": 7.0.21
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channel-websocket": 7.0.21
+    "@storybook/client-api": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/html": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preview-web": 7.0.21
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
     typescript: ~4.9.3
@@ -6105,11 +6105,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/html": 7.0.20
-    "@storybook/preset-html-webpack": 7.0.20
+    "@storybook/html": 7.0.21
+    "@storybook/preset-html-webpack": 7.0.21
     "@types/node": ^16.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -6119,15 +6119,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/html@7.0.20, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
+"@storybook/html@7.0.21, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:renderers/html"
   dependencies:
-    "@storybook/core-client": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/core-client": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -6135,15 +6135,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@7.0.20, @storybook/instrumenter@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@7.0.21, @storybook/instrumenter@^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
   version: 0.0.0-use.local
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
+    "@storybook/preview-api": 7.0.21
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
@@ -6187,19 +6187,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@7.0.20, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api":
+"@storybook/manager-api@7.0.21, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api":
   version: 0.0.0-use.local
   resolution: "@storybook/manager-api@workspace:lib/manager-api"
   dependencies:
     "@jest/globals": ^29.3.1
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/router": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/router": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/lodash": ^4.14.167
     "@types/qs": ^6
     dequal: ^2.0.2
@@ -6218,24 +6218,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/manager@7.0.20, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager":
+"@storybook/manager@7.0.21, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager":
   version: 0.0.0-use.local
   resolution: "@storybook/manager@workspace:ui/manager"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": ^2.1.2
-    "@storybook/addons": 7.0.20
-    "@storybook/api": 7.0.20
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channel-websocket": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/components": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/addons": 7.0.21
+    "@storybook/api": 7.0.21
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channel-websocket": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/components": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/router": 7.0.20
-    "@storybook/theming": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/router": 7.0.21
+    "@storybook/theming": 7.0.21
+    "@storybook/types": 7.0.21
     "@testing-library/react": ^11.2.2
     "@types/semver": ^7.3.4
     copy-to-clipboard: ^3.3.1
@@ -6285,13 +6285,13 @@ __metadata:
     "@babel/preset-typescript": ^7.21.0
     "@babel/runtime": ^7.21.0
     "@babel/types": ^7.20.5
-    "@storybook/addon-actions": 7.0.20
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/preset-react-webpack": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/react": 7.0.20
+    "@storybook/addon-actions": 7.0.21
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/preset-react-webpack": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/react": 7.0.21
     "@types/babel__core": ^7
     "@types/babel__plugin-transform-runtime": ^7
     "@types/babel__preset-env": ^7
@@ -6337,7 +6337,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/node-logger@7.0.20, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@7.0.21, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/node-logger@workspace:lib/node-logger"
   dependencies:
@@ -6350,7 +6350,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/postinstall@7.0.20, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@7.0.21, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
@@ -6366,8 +6366,8 @@ __metadata:
   resolution: "@storybook/preact-vite@workspace:frameworks/preact-vite"
   dependencies:
     "@preact/preset-vite": ^2.0.0
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/preact": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/preact": 7.0.21
     "@types/node": ^16.0.0
     typescript: ~4.9.3
     vite: ^4.0.0
@@ -6381,10 +6381,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preact-webpack5@workspace:frameworks/preact-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preact": 7.0.20
-    "@storybook/preset-preact-webpack": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preact": 7.0.21
+    "@storybook/preset-preact-webpack": 7.0.21
     "@types/node": ^16.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
@@ -6396,14 +6396,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@7.0.20, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
+"@storybook/preact@7.0.21, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
   version: 0.0.0-use.local
   resolution: "@storybook/preact@workspace:renderers/preact"
   dependencies:
-    "@storybook/core-client": 7.0.20
+    "@storybook/core-client": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     preact: ^10.5.13
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -6417,9 +6417,9 @@ __metadata:
   resolution: "@storybook/preset-create-react-app@workspace:presets/create-react-app"
   dependencies:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
-    "@storybook/node-logger": 7.0.20
+    "@storybook/node-logger": 7.0.21
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
-    "@storybook/types": 7.0.20
+    "@storybook/types": 7.0.21
     "@types/babel__core": ^7.1.7
     "@types/node": ^16.0.0
     babel-plugin-react-docgen: ^4.1.0
@@ -6432,11 +6432,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-html-webpack@7.0.20, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
+"@storybook/preset-html-webpack@7.0.21, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/core-webpack": 7.0.21
     "@types/node": ^16.0.0
     html-loader: ^3.1.0
     typescript: ~4.9.3
@@ -6446,13 +6446,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-preact-webpack@7.0.20, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack":
+"@storybook/preset-preact-webpack@7.0.21, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.21.0
     "@babel/preset-typescript": ^7.21.0
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/core-webpack": 7.0.21
     "@types/node": ^16.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
@@ -6462,17 +6462,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-react-webpack@7.0.20, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack":
+"@storybook/preset-react-webpack@7.0.21, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack"
   dependencies:
     "@babel/preset-flow": ^7.18.6
     "@babel/preset-react": ^7.18.6
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.5
-    "@storybook/core-webpack": 7.0.20
-    "@storybook/docs-tools": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/react": 7.0.20
+    "@storybook/core-webpack": 7.0.21
+    "@storybook/docs-tools": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/react": 7.0.21
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@types/node": ^16.0.0
     "@types/semver": ^7.3.4
@@ -6495,14 +6495,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-server-webpack@7.0.20, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack":
+"@storybook/preset-server-webpack@7.0.21, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-server-webpack@workspace:presets/server-webpack"
   dependencies:
-    "@storybook/core-server": 7.0.20
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/core-server": 7.0.21
+    "@storybook/core-webpack": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/server": 7.0.20
+    "@storybook/server": 7.0.21
     "@types/node": ^16.0.0
     fs-extra: ^11.1.0
     jest-specific-snapshot: ^7.0.0
@@ -6514,12 +6514,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-svelte-webpack@7.0.20, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack":
+"@storybook/preset-svelte-webpack@7.0.21, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.0.20
-    "@storybook/node-logger": 7.0.20
+    "@storybook/core-webpack": 7.0.21
+    "@storybook/node-logger": 7.0.21
     svelte: ^3.31.2
     svelte-loader: ^3.1.2
     sveltedoc-parser: ^4.2.1
@@ -6532,12 +6532,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue-webpack@7.0.20, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack":
+"@storybook/preset-vue-webpack@7.0.21, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-vue-webpack@workspace:presets/vue-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/core-webpack": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@types/node": ^16.0.0
     ts-loader: ^9.2.8
     typescript: ~4.9.3
@@ -6557,12 +6557,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue3-webpack@7.0.20, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack":
+"@storybook/preset-vue3-webpack@7.0.21, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-vue3-webpack@workspace:presets/vue3-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/core-webpack": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@types/node": ^16.0.0
     "@vue/compiler-sfc": ^3.2.33
     ts-loader: ^9.2.8
@@ -6580,14 +6580,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-web-components-webpack@7.0.20, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack":
+"@storybook/preset-web-components-webpack@7.0.21, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack"
   dependencies:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.20.2
-    "@storybook/core-webpack": 7.0.20
+    "@storybook/core-webpack": 7.0.21
     "@types/node": ^16.0.0
     babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
     babel-plugin-bundled-import-meta: ^0.3.1
@@ -6598,19 +6598,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-api@7.0.20, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api":
+"@storybook/preview-api@7.0.21, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-api@workspace:lib/preview-api"
   dependencies:
     "@jest/globals": ^26.6.2
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-events": 7.0.20
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-events": 7.0.21
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/types": 7.0.20
+    "@storybook/types": 7.0.21
     "@types/qs": ^6.9.5
     ansi-to-html: ^0.6.11
     dequal: ^2.0.2
@@ -6625,25 +6625,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-web@7.0.20, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@7.0.21, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:lib/preview-web"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
   languageName: unknown
   linkType: soft
 
-"@storybook/preview@7.0.20, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview":
+"@storybook/preview@7.0.21, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview":
   version: 0.0.0-use.local
   resolution: "@storybook/preview@workspace:lib/preview"
   dependencies:
-    "@storybook/channel-postmessage": 7.0.20
-    "@storybook/channel-websocket": 7.0.20
-    "@storybook/channels": 7.0.20
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-events": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/channel-postmessage": 7.0.21
+    "@storybook/channel-websocket": 7.0.21
+    "@storybook/channels": 7.0.21
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-events": 7.0.21
+    "@storybook/preview-api": 7.0.21
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
@@ -6666,11 +6666,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@7.0.20, @storybook/react-dom-shim@workspace:lib/react-dom-shim":
+"@storybook/react-dom-shim@7.0.21, @storybook/react-dom-shim@workspace:lib/react-dom-shim":
   version: 0.0.0-use.local
   resolution: "@storybook/react-dom-shim@workspace:lib/react-dom-shim"
   dependencies:
-    "@storybook/types": 7.0.20
+    "@storybook/types": 7.0.21
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6684,8 +6684,8 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@rollup/pluginutils": ^4.2.0
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/react": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/react": 7.0.21
     "@types/node": ^16.0.0
     "@vitejs/plugin-react": ^3.0.1
     ast-types: ^0.14.2
@@ -6704,9 +6704,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-webpack5@workspace:frameworks/react-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/preset-react-webpack": 7.0.20
-    "@storybook/react": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/preset-react-webpack": 7.0.21
+    "@storybook/react": 7.0.21
     "@types/node": ^16.0.0
     jest-specific-snapshot: ^7.0.0
     typescript: ~4.9.3
@@ -6722,18 +6722,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/react@7.0.20, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
+"@storybook/react@7.0.21, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:renderers/react"
   dependencies:
     "@babel/core": ^7.20.2
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-client": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-client": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/react-dom-shim": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/react-dom-shim": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/escodegen": ^0.0.6
     "@types/estree": ^0.0.51
     "@types/node": ^16.0.0
@@ -6777,7 +6777,7 @@ __metadata:
     "@nrwl/cli": ^15.4.5
     "@nrwl/nx-cloud": ^15.0.2
     "@nrwl/workspace": ^15.4.5
-    "@playwright/test": 1.32.3
+    "@playwright/test": ^1.35.0
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -6923,7 +6923,6 @@ __metadata:
     lodash: ^4.17.21
     node-gyp: ^8.4.0
     nx: ^15.4.5
-    playwright: 1.32.3
     prettier: 2.8.0
     process: ^0.11.10
     raf: ^3.4.1
@@ -6957,11 +6956,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@7.0.20, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@7.0.21, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:lib/router"
   dependencies:
-    "@storybook/client-logger": 7.0.20
+    "@storybook/client-logger": 7.0.21
     "@storybook/global": ^5.0.0
     dequal: ^2.0.2
     lodash: ^4.17.21
@@ -6980,10 +6979,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server-webpack5@workspace:frameworks/server-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preset-server-webpack": 7.0.20
-    "@storybook/server": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preset-server-webpack": 7.0.21
+    "@storybook/server": 7.0.21
     "@types/node": ^16.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -6992,15 +6991,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/server@7.0.20, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
+"@storybook/server@7.0.21, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/core-client": 7.0.20
+    "@storybook/core-client": 7.0.21
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/fs-extra": ^11.0.1
     fs-extra: ^11.1.0
     ts-dedent: ^2.0.0
@@ -7009,12 +7008,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@7.0.20, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@7.0.21, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
     "@storybook/csf": ^0.1.0
-    "@storybook/types": 7.0.20
+    "@storybook/types": 7.0.21
     estraverse: ^5.2.0
     jest-specific-snapshot: ^7.0.0
     lodash: ^4.17.21
@@ -7026,22 +7025,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/store@7.0.20, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
+"@storybook/store@7.0.21, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
   version: 0.0.0-use.local
   resolution: "@storybook/store@workspace:lib/store"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/preview-api": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/preview-api": 7.0.21
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte-vite@7.0.20, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
+"@storybook/svelte-vite@7.0.21, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite"
   dependencies:
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/svelte": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/svelte": 7.0.21
     "@sveltejs/vite-plugin-svelte": ^2.0.0
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
@@ -7061,10 +7060,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preset-svelte-webpack": 7.0.20
-    "@storybook/svelte": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preset-svelte-webpack": 7.0.21
+    "@storybook/svelte": 7.0.21
     svelte: ^3.48.0
     svelte-loader: ^3.1.2
     typescript: ~4.9.3
@@ -7077,17 +7076,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@7.0.20, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
+"@storybook/svelte@7.0.21, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:renderers/svelte"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-client": 7.0.20
-    "@storybook/core-events": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-client": 7.0.21
+    "@storybook/core-events": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     expect-type: ^0.14.2
     svelte: ^3.31.2
     svelte-check: ^2.9.2
@@ -7103,9 +7102,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit"
   dependencies:
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/svelte": 7.0.20
-    "@storybook/svelte-vite": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/svelte": 7.0.21
+    "@storybook/svelte-vite": 7.0.21
     "@types/node": ^16.0.0
     typescript: ^4.9.3
     vite: ^4.0.0
@@ -7114,12 +7113,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/telemetry@7.0.20, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
+"@storybook/telemetry@7.0.21, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
   version: 0.0.0-use.local
   resolution: "@storybook/telemetry@workspace:lib/telemetry"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-common": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-common": 7.0.21
     chalk: ^4.1.0
     detect-package-manager: ^2.0.1
     fetch-retry: ^5.0.2
@@ -7144,7 +7143,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@7.0.20, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@7.0.21, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
@@ -7153,7 +7152,7 @@ __metadata:
     "@emotion/react": ^11.10.4
     "@emotion/styled": ^11.10.4
     "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
-    "@storybook/client-logger": 7.0.20
+    "@storybook/client-logger": 7.0.21
     "@storybook/global": ^5.0.0
     "@types/fs-extra": ^11.0.1
     "@types/node": ^16.0.0
@@ -7169,11 +7168,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/types@7.0.20, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
+"@storybook/types@7.0.21, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
-    "@storybook/channels": 7.0.20
+    "@storybook/channels": 7.0.21
     "@storybook/csf": ^0.1.0
     "@types/babel__core": ^7.0.0
     "@types/express": ^4.7.0
@@ -7187,10 +7186,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
   dependencies:
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/vue": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/vue": 7.0.21
     magic-string: ^0.27.0
     typescript: ~4.9.3
     vite: ^4.0.0
@@ -7208,10 +7207,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preset-vue-webpack": 7.0.20
-    "@storybook/vue": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preset-vue-webpack": 7.0.21
+    "@storybook/vue": 7.0.21
     "@types/node": ^16.0.0
     typescript: ~4.9.3
     vue: ^2.6.12
@@ -7233,9 +7232,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite"
   dependencies:
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/vue3": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/vue3": 7.0.21
     "@types/node": ^16.0.0
     "@vitejs/plugin-vue": ^4.0.0
     magic-string: ^0.27.0
@@ -7253,10 +7252,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-webpack5@workspace:frameworks/vue3-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preset-vue3-webpack": 7.0.20
-    "@storybook/vue3": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preset-vue3-webpack": 7.0.21
+    "@storybook/vue3": 7.0.21
     "@types/node": ^16.0.0
     "@vue/compiler-sfc": 3.0.0
     typescript: ~4.9.3
@@ -7271,39 +7270,39 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@7.0.20, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3":
+"@storybook/vue3@7.0.21, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3@workspace:renderers/vue3"
   dependencies:
     "@digitak/esrun": ^3.2.2
-    "@storybook/core-client": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/core-client": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/prettier": 2.7.2
     "@vue/vue3-jest": 29
     ts-dedent: ^2.0.0
     type-fest: 2.19.0
     typescript: ~4.9.3
     vue: ^3.2.47
-    vue-component-type-helpers: ^1.6.5
+    vue-component-type-helpers: latest
     vue-tsc: ^1.2.0
   peerDependencies:
     vue: ^3.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@7.0.20, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
+"@storybook/vue@7.0.21, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
   version: 0.0.0-use.local
   resolution: "@storybook/vue@workspace:renderers/vue"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-client": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-client": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     ts-dedent: ^2.0.0
     type-fest: 2.19.0
     typescript: ~4.9.3
@@ -7324,10 +7323,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite"
   dependencies:
-    "@storybook/builder-vite": 7.0.20
-    "@storybook/core-server": 7.0.20
-    "@storybook/node-logger": 7.0.20
-    "@storybook/web-components": 7.0.20
+    "@storybook/builder-vite": 7.0.21
+    "@storybook/core-server": 7.0.21
+    "@storybook/node-logger": 7.0.21
+    "@storybook/web-components": 7.0.21
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
     typescript: ~4.9.3
@@ -7342,10 +7341,10 @@ __metadata:
   resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5"
   dependencies:
     "@babel/preset-env": ^7.20.2
-    "@storybook/builder-webpack5": 7.0.20
-    "@storybook/core-common": 7.0.20
-    "@storybook/preset-web-components-webpack": 7.0.20
-    "@storybook/web-components": 7.0.20
+    "@storybook/builder-webpack5": 7.0.21
+    "@storybook/core-common": 7.0.21
+    "@storybook/preset-web-components-webpack": 7.0.21
+    "@storybook/web-components": 7.0.21
     "@types/node": ^16.0.0
     lit: 2.3.1
     typescript: ~4.9.3
@@ -7356,17 +7355,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/web-components@7.0.20, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components":
+"@storybook/web-components@7.0.21, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components":
   version: 0.0.0-use.local
   resolution: "@storybook/web-components@workspace:renderers/web-components"
   dependencies:
-    "@storybook/client-logger": 7.0.20
-    "@storybook/core-client": 7.0.20
-    "@storybook/docs-tools": 7.0.20
+    "@storybook/client-logger": 7.0.21
+    "@storybook/core-client": 7.0.21
+    "@storybook/docs-tools": 7.0.21
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.0.20
-    "@storybook/preview-api": 7.0.20
-    "@storybook/types": 7.0.20
+    "@storybook/manager-api": 7.0.21
+    "@storybook/preview-api": 7.0.21
+    "@storybook/types": 7.0.21
     "@types/cross-spawn": ^6.0.2
     "@types/node": ^16.0.0
     cross-spawn: ^7.0.3
@@ -24527,23 +24526,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.32.3":
-  version: 1.32.3
-  resolution: "playwright-core@npm:1.32.3"
+"playwright-core@npm:1.35.0":
+  version: 1.35.0
+  resolution: "playwright-core@npm:1.35.0"
   bin:
-    playwright: cli.js
-  checksum: 8b94feb15084813607abac69ef3d4f78b345bcc89e322706e62c203b79e74096caf499ce4cd4103b1bfc853f17a9ff0573f636dc0ee88f56a5cb6ed18ce55f06
+    playwright-core: cli.js
+  checksum: 157257f0950190903d75ff6af70258fe1b1c6bf44f144a063428a594c09b4631d4c151ff65e28e1d9fc13edd8bd51c4720a7d87fc755c2afba47f41919bf5875
   languageName: node
   linkType: hard
 
-"playwright@npm:1.32.3":
-  version: 1.32.3
-  resolution: "playwright@npm:1.32.3"
+"playwright@npm:1.35.0":
+  version: 1.35.0
+  resolution: "playwright@npm:1.35.0"
   dependencies:
-    playwright-core: 1.32.3
+    playwright-core: 1.35.0
   bin:
     playwright: cli.js
-  checksum: 26a3a8897d1a41cd5d001859521ee44b3ac21618e638d3b2a58615672b2f325a6cdeb614dabc6b120999d8874f260c9786683644b13fe07476d4a3a47fcfff1f
+  checksum: efe6a7c74fff1fe30b952e3d80a6da42779579174ae4ced83e24ebd07d9388f0a43d5188106f08874e645128e27b020c0c8e118948d607328d37a38b20c57c19
   languageName: node
   linkType: hard
 
@@ -27284,7 +27283,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 7.0.20
+    "@storybook/cli": 7.0.21
   bin:
     sb: ./index.js
   languageName: unknown
@@ -28261,7 +28260,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 7.0.20
+    "@storybook/cli": 7.0.21
   bin:
     sb: ./index.js
     storybook: ./index.js
@@ -30776,10 +30775,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-component-type-helpers@npm:^1.6.5":
-  version: 1.7.8
-  resolution: "vue-component-type-helpers@npm:1.7.8"
-  checksum: 82560704241cad12858e197593b18398bfd43c0319b93f0102723975b392a6319bcd9a5912859ebef0a26965d2301836252713af7e0cfe71a0312237ad64ca16
+"vue-component-type-helpers@npm:latest":
+  version: 1.6.5
+  resolution: "vue-component-type-helpers@npm:1.6.5"
+  checksum: 205d520c05e53d1cc6f53fe920c64b4c6883249cbfe15026fcda250980bf4ddfc004292e0c9ecaa7fcf983bd143482ffbc4191e0b84f6d3f996a0a07ca3396c4
   languageName: node
   linkType: hard
 
diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md
new file mode 100644
index 000000000000..cff029e9fc32
--- /dev/null
+++ b/docs/api/arg-types.md
@@ -0,0 +1,500 @@
+---
+title: 'ArgTypes'
+---
+
+ArgTypes specify the behavior of [args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can accept and provide information about args that are not explicitly set (i.e., [description](#description)).
+
+You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the [controls addon](../essentials/controls.md) to render a color picker, you could specify the `'color'` [control type](#control).
+
+The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-block-argtypes.md) ([`Controls`](./doc-block-controls.md) is similar). Each row in the table corresponds to a single argType and the current value of that arg.
+
+![ArgTypes table](./doc-block-argtypes.png)
+
+## Automatic argType inference
+
+If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](../writing-stories/introduction#default-export) of the CSF file.
+
+To do so, Storybook uses various static analysis tools depending on your framework.
+
+| Framework     | Static analysis tool                                                                                                                          |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| React         | [react-docgen](https://github.com/reactjs/react-docgen) or [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) |
+| Vue           | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api)                                       |
+| Angular       | [compodoc](https://compodoc.app/)                                                                                                             |
+| WebComponents | [custom-element.json](https://github.com/webcomponents/custom-elements-json)                                                                  |
+| Ember         | [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components)                                                  |
+
+The data structure of `argTypes` is designed to match the output of the these tools. Properties specified manually will override what is inferred.
+
+## Manually specifying argTypes
+
+For most Storybook projects, argTypes are [automatically inferred](#automatic-argtype-inference) from your components. Any argTypes specified manually will override the inferred values.
+
+ArgTypes are most often specified at the meta (component) level, in the [default export](../writing-stories/introduction#default-export) of the CSF file:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-in-meta.ts.mdx',
+    'web-components/arg-types-in-meta.js.mdx',
+    'web-components/arg-types-in-meta.ts.mdx',
+    'common/arg-types-in-meta.js.mdx',
+    'common/arg-types-in-meta.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+They can apply to all stories when specified at the project (global) level, in the `preview.js|ts` configuration file:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/arg-types-in-preview.js.mdx',
+    'common/arg-types-in-preview.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Or they can apply only to a [specific story](../writing-stories/introduction#defining-stories):
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-in-story.ts.mdx',
+    'web-components/arg-types-in-story.js.mdx',
+    'web-components/arg-types-in-story.ts.mdx',
+    'common/arg-types-in-story.js.mdx',
+    'common/arg-types-in-story.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## `argTypes`
+
+Type:
+
+```ts
+{
+  [key: string]: {
+    control?: ControlType | { type: ControlType; /* See below for more */ };
+    description?: string;
+    if?: Conditional;
+    mapping?: { [key: string]: { [option: string]: any } };
+    name?: string;
+    options?: string[];
+    table?: {
+      category?: string;
+      defaultValue?: { summary: string; detail?: string };
+      subcategory?: string;
+      type?: { summary?: string; detail?: string };
+    },
+    type?: SBType | SBScalarType['name'];
+  }
+}
+```
+
+You configure argTypes using an object with keys matching the name of args. The value of each key is an object with the following properties:
+
+### `control`
+
+Type:
+
+```ts
+| ControlType
+| {
+    type: ControlType,
+    accept?: string;
+    labels?: { [option: string]: string };
+    max?: number;
+    min?: number;
+    presetColors?: string[];
+    step?: number;
+  }
+```
+
+Default:
+
+1. `'select'`, if [`options`](#options) are specified
+2. Else, inferred from [`type`](#type)
+3. Else, `'object'`
+
+Specify the behavior of the [controls addon](../essentials/controls.md) for the arg. If you specify a string, it's used as the [`type`](#controltype) of the control. If you specify an object, you can provide additional configuration.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-control.ts.mdx',
+    'web-components/arg-types-control.js.mdx',
+    'web-components/arg-types-control.ts.mdx',
+    'common/arg-types-control.js.mdx',
+    'common/arg-types-control.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### `control.type`
+
+Type: `ControlType | null`
+
+Default: [Inferred](#automatic-argtype-inference); `'select'`, if [`options`](#options) are specified; falling back to `'object'`
+
+Specifies the type of control used to change the arg value with the [controls addon](../essentials/controls.md). Here are the available types, `ControlType`, grouped by the type of data they handle:
+
+| Data&nbsp;type | ControlType      | Description                                                                                                                                                                            |
+| -------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **array**      | `'object'`       | Provides a JSON-based editor to handle the values of the array. Also allows editing in raw mode.<br/> `{ control: 'object' }`                                                          |
+| **boolean**    | `'boolean'`      | Provides a toggle for switching between possible states.<br/> `{ control: 'boolean' }`                                                                                                 |
+| **enum**       | `'check'`        | Provides a set of stacked checkboxes for selecting multiple options.<br/> `{ control: 'check', options: ['email', 'phone', 'mail'] }`                                                  |
+|                | `'inline-check'` | Provides a set of inlined checkboxes for selecting multiple options.<br/> `{ control: 'inline-check', options: ['email', 'phone', 'mail'] }`                                           |
+|                | `'radio'`        | Provides a set of stacked radio buttons based on the available options.<br/> `{ control: 'radio', options: ['email', 'phone', 'mail'] }`                                               |
+|                | `'inline-radio'` | Provides a set of inlined radio buttons based on the available options.<br/> `{ control: 'inline-radio', options: ['email', 'phone', 'mail'] }`                                        |
+|                | `'select'`       | Provides a select to choose a single value from the options.<br/> `{ control: 'select', options: [20, 30, 40, 50] }`                                                                   |
+|                | `'multi-select'` | Provides a select to choose multiple values from the options.<br/> `{ control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }`                                                 |
+| **number**     | `'number'`       | Provides a numeric input to include the range of all possible values.<br/> `{ control: { type: 'number', min:1, max:30, step: 2 } }`                                                   |
+|                | `'range'`        | Provides a range slider to include all possible values.<br/> `{ control: { type: 'range', min: 1, max: 30, step: 3 } }`                                                                |
+| **object**     | `'file'`         | Provides a file input that returns an array of URLs. Can be further customized to accept specific file types.<br/> `{ control: { type: 'file', accept: '.png' } }`                     |
+|                | `'object'`       | Provides a JSON-based editor to handle the object's values. Also allows editing in raw mode.<br/> `{ control: 'object' }`                                                              |
+| **string**     | `'color'`        | Provides a color picker to choose color values. Can be additionally configured to include a set of color presets.<br/> `{ control: { type: 'color', presetColors: ['red', 'green']} }` |
+|                | `'date'`         | Provides a datepicker to choose a date.<br /> `{ control: 'date' }`                                                                                                                    |
+|                | `'text'`         | Provides a freeform text input.<br/> `{ control: 'text' }`                                                                                                                             |
+
+<div class="aside">
+
+💡 The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object.
+
+</div>
+
+#### `control.accept`
+
+Type: `string`
+
+When `type` is `'file'`, you can specify the file types that are accepted. The value should be a string of comma-separated MIME types.
+
+#### `control.labels`
+
+Type: `{ [option: string]: string }`
+
+Map [`options`](#options) to labels. `labels` doesn't have to be exhaustive. If an option is not in the object's keys, it's used verbatim.
+
+#### `control.max`
+
+Type: `number`
+
+When `type` is `'number'` or `'range'`, sets the maximum allowed value.
+
+#### `control.min`
+
+Type: `number`
+
+When `type` is `'number'` or `'range'`, sets the minimum allowed value.
+
+#### `control.presetColors`
+
+Type: `string[]`
+
+When `type` is `'color'`, defines the set of colors that are available in addition to the general color picker. The values in the array should be valid CSS color values.
+
+#### `control.step`
+
+Type: `number`
+
+When `type` is `'number'` or `'range'`, sets the granularity allowed when incrementing/decrementing the value.
+
+### `description`
+
+Type: `string`
+
+Default: [Inferred](#automatic-argtype-inference)
+
+Describe the arg. (If you intend to describe the type of the arg, you should use [`table.type`](#tabletype), instead.)
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-description.ts.mdx',
+    'web-components/arg-types-description.js.mdx',
+    'web-components/arg-types-description.ts.mdx',
+    'common/arg-types-description.js.mdx',
+    'common/arg-types-description.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### `if`
+
+Type:
+
+```ts
+{
+  [predicateType: 'arg' | 'global']: string;
+  eq?: any;
+  exists?: boolean;
+  neq?: any;
+  truthy?: boolean;
+}
+```
+
+Conditionally render an argType based on the value of another [arg](../writing-stories/args.md) or [global](../essentials/toolbars-and-globals.md).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-if.ts.mdx',
+    'web-components/arg-types-if.js.mdx',
+    'web-components/arg-types-if.ts.mdx',
+    'common/arg-types-if.js.mdx',
+    'common/arg-types-if.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### `mapping`
+
+Type: `{ [key: string]: { [option: string]: any } }`
+
+Map [`options`](#options) to values.
+
+When dealing with non-primitive values, you'll notice that you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story).
+
+`mapping` doesn't have to be exhaustive. If the currently selected option is not listed, it's used verbatim. Can be used with [`control.labels`](#labels).
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-mapping.ts.mdx',
+    'web-components/arg-types-mapping.js.mdx',
+    'web-components/arg-types-mapping.ts.mdx',
+    'common/arg-types-mapping.js.mdx',
+    'common/arg-types-mapping.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### `name`
+
+Type: `string`
+
+The `argTypes` object uses the name of the arg as the key. By default, that key is used when displaying the argType in Storybook. You can override the displayed name by specifying a `name` property.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-name.ts.mdx',
+    'web-components/arg-types-name.js.mdx',
+    'web-components/arg-types-name.ts.mdx',
+    'common/arg-types-name.js.mdx',
+    'common/arg-types-name.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+
+💡 Be careful renaming args in this way. Users of the component you're documenting will not be able to use the documented name as a property of your component and the actual name will not displayed.
+
+For this reason, the `name` property is best used when defining an `argType` that is only used for documentation purposes and not an actual property of the component. For example, when [providing argTypes for each property of an object](https://stackblitz.com/edit/github-uplqzp?file=src/stories/Button.stories.tsx).
+
+</div>
+
+### `options`
+
+Type: `string[]`
+
+Default: [Inferred](#automatic-argtype-inference)
+
+If the arg accepts a finite set of values, you can specify them with `options`. If those values are [complex](../essentials/controls#dealing-with-complex-values), like JSX elements, you can use [`mapping`](#mapping) to map them to string values. You can use [`control.labels`](#labels) to provide custom labels for the options.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-options.ts.mdx',
+    'web-components/arg-types-options.js.mdx',
+    'web-components/arg-types-options.ts.mdx',
+    'common/arg-types-options.js.mdx',
+    'common/arg-types-options.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### `table`
+
+Type:
+
+```ts
+{
+  category?: string;
+  defaultValue?: {
+    detail?: string;
+    summary: string;
+  };
+  subcategory?: string;
+  type?: {
+    detail?: string;
+    summary: string;
+  };
+}
+```
+
+Default: [Inferred](#automatic-argtype-inference)
+
+Specify how the arg is documented in the [`ArgTypes` doc block](./doc-block-argtypes.md), [`Controls` doc block](./doc-block-controls.md), and [Controls addon panel](../essentials/controls.md).
+
+<!-- prettier-ignore-start -->
+
+ <CodeSnippets
+  paths={[
+    'angular/arg-types-table.ts.mdx',
+    'web-components/arg-types-table.js.mdx',
+    'web-components/arg-types-table.ts.mdx',
+    'common/arg-types-table.js.mdx',
+    'common/arg-types-table.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### `table.category`
+
+Type: `string`
+
+Default: [Inferred](#automatic-argtype-inference), in some frameworks
+
+Display the argType under a category heading, with the label specified by `category`.
+
+#### `table.defaultValue`
+
+Type: `{ detail?: string; summary: string }`
+
+Default: [Inferred](#automatic-argtype-inference)
+
+The documented default value of the argType. `summary` is typically used for the value itself, while `detail` is used for additional information.
+
+#### `table.subcategory`
+
+Type: `string`
+
+Display the argType under a subcategory heading (which displays under the [`category`] heading), with the label specified by `subcategory`.
+
+#### `table.type`
+
+Type: `{ detail?: string; summary: string }`
+
+Default: Inferred from [`type`](#type)
+
+The documented type of the argType. `summary` is typically used for the type itself, while `detail` is used for additional information.
+
+If you need to specify the actual, semantic type, you should use [`type`](#type), instead.
+
+### `type`
+
+Type: `'boolean' | 'function' | 'number' | 'string' | 'symbol' | SBType`
+
+The full type of `SBType` is:
+
+<details>
+<summary>SBType</summary>
+
+```ts
+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}
+
+type SBScalarType = SBBaseType & {
+  name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+
+type SBArrayType = SBBaseType & {
+  name: 'array';
+  value: SBType;
+};
+type SBObjectType = SBBaseType & {
+  name: 'object';
+  value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+  name: 'enum';
+  value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+  name: 'intersection';
+  value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+  name: 'union';
+  value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+  name: 'other';
+  value: string;
+};
+
+type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
+```
+
+</details>
+
+Default: [Inferred](#automatic-argtype-inference)
+
+Specifies the semantic type of the argType. When an argType is [inferred](#automatic-argtype-inference), the information from the various tools is summarized in this property, which is then used to infer other properties, like [`control`](#control) and [`table.type`](#tabletype).
+
+If you only need to specify the documented type, you should use [`table.type`](#tabletype), instead.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-type.ts.mdx',
+    'web-components/arg-types-type.js.mdx',
+    'web-components/arg-types-type.ts.mdx',
+    'common/arg-types-type.js.mdx',
+    'common/arg-types-type.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+### `defaultValue` (deprecated)
+
+Type: `any`
+
+Define the default value of the argType. Deprecated in favor of defining the [`arg`](../writing-stories/args.md) value directly.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/arg-types-default-value.ts.mdx',
+    'web-components/arg-types-default-value.js.mdx',
+    'web-components/arg-types-default-value.ts.mdx',
+    'common/arg-types-default-value.js.mdx',
+    'common/arg-types-default-value.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md
deleted file mode 100644
index da1c1927e683..000000000000
--- a/docs/api/argtypes.md
+++ /dev/null
@@ -1,216 +0,0 @@
----
-title: 'ArgTypes'
----
-
-ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not explicitly set (i.e., not required).
-
-You can also use argTypes to “annotate” args with information used by addons that make use of those args. For instance, to instruct the controls addon to render a color, you could choose a string-valued arg.
-
-The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-block-argtypes.md) ([`Controls`](./doc-block-controls.md) is similar). Each row in the table corresponds to a single argType and the current value of that arg.
-
-![Storybook inferring automatically the argType](./doc-block-argtypes.png)
-
-## Automatic argType inference
-
-If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](./csf.md#default-export) of the CSF file.
-
-To do so, Storybook uses various static analysis tools depending on your framework.
-
-- React
-  - [react-docgen](https://github.com/reactjs/react-docgen)
-  - [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript)
-- Vue
-  - [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api)
-- Angular
-  - [compodoc](https://compodoc.app/)
-- WebComponents
-  - [custom-element.json](https://github.com/webcomponents/custom-elements-json)
-- Ember
-  - [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components)
-
-The format of the generated argType will look something like this:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-generated-argtypes.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-This ArgTypes data structure, name, type, defaultValue, and description are standard fields in all ArgTypes (analogous to PropTypes in React). The table and control fields are addon-specific annotations. So, for example, the table annotation provides extra information to customize how the label gets rendered, and the control annotation includes additional information for the control editing the property.
-
-## Manual specification
-
-If you want more control over the args table or any other aspect of using argTypes, you can overwrite the generated argTypes for your component on a per-arg basis. For instance, with the above-inferred argTypes and the following default export:
-
-<div class="aside">
-💡 As with other Storybook properties (e.g., args, decorators), you can also override ArgTypes per story basis.
-</div>
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'angular/storybook-customize-argtypes.ts.mdx',
-    'web-components/storybook-customize-argtypes.js.mdx',
-    'web-components/storybook-customize-argtypes.ts.mdx',
-    'common/storybook-customize-argtypes.js.mdx',
-    'common/storybook-customize-argtypes.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-The `values.description`, `table.type`, and `controls.type` are merged into the defaults extracted by Storybook. The final merged values would be:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-merged-argtypes.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-In particular, this would render a row with a modified description, a type display with a dropdown that shows the detail, and no control.
-
-### Available properties
-
-Here's an explanation of each available property:
-
-| Property                     | Description                                                                                                                                                                                        |
-| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `name`                       | The name of the property. <br/> `argTypes: { label: { name: 'Something' } }`                                                                                                                       |
-| `type.name`                  | Sets a type for the property. <br/> `argTypes: { label: { type: { name: 'number' } } }`                                                                                                            |
-| `type.required`              | Sets the property as optional or required. <br/> `argTypes: { label: { type: { required: true } }`                                                                                                 |
-| `description`                | Sets a Markdown description for the property. <br/> `argTypes: { label: { description: 'Something' } }`                                                                                            |
-| `table.type.summary`         | Provide a short version of the type. <br/> `argTypes: { label: { table: { type: { summary: 'a short summary' } }}}`                                                                                |
-| `table.type.detail`          | Provides an extended version of the type. <br/> `argTypes: { label: { table: { type: { detail: 'something' } }}}`                                                                                  |
-| `table.defaultValue.summary` | Provide a short version of the default value. <br/> `argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}`                                                                   |
-| `table.defaultValue.detail`  | Provides a longer version of the default value. <br/> `argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}`                                                                    |
-| `control`                    | Associates a control for the property. <br/> `argTypes: { label: { control: { type: 'text'} } }` <br/>Read the [Essentials documentation](../essentials/controls.md) to learn more about controls. |
-
-#### Shorthands
-
-<div class="aside">
-
-💡 The `@storybook/addon-docs` provide a shorthand for common tasks:
-
-- `type: 'number'` is shorthand for type: { name: 'number' }
-- `control: 'radio'` is shorthand for control: { type: 'radio' }
-
-</div>
-
-### Grouping
-
-You can also manually specify groups to organize related `argTypes` into categories or even subcategories. Based on the following component implementation:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/button-implementation.js.mdx',
-    'react/button-implementation.ts.mdx',
-    'angular/button-implementation.ts.mdx',
-    'vue/button-implementation.2.js.mdx',
-    'vue/button-implementation.2.ts.mdx',
-    'vue/button-implementation.3.js.mdx',
-    'vue/button-implementation.3.ts.mdx',
-    'svelte/button-implementation.js.mdx',
-    'web-components/button-implementation.js.mdx',
-    'web-components/button-implementation.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-You could group similar properties for better organization and structure. Using the table below as a reference:
-
-| Field               | Category |
-| :------------------ | :------: |
-| **backgroundColor** |  Colors  |
-| **primary**         |  Colors  |
-| **label**           |   Text   |
-| **onClick**         |  Events  |
-| **size**            |  Sizes   |
-
-Results in the following change into your story and UI.
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'angular/button-story-argtypes-with-categories.ts.mdx',
-    'web-components/button-story-argtypes-with-categories.js.mdx',
-    'web-components/button-story-argtypes-with-categories.ts.mdx',
-    'common/button-story-argtypes-with-categories.js.mdx',
-    'common/button-story-argtypes-with-categories.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-![button story with args grouped into categories](./button-args-grouped-categories.png)
-
-You can also extend the formula above and introduce subcategories, allowing better structuring and organization. Using the table below as a reference leads to the following change to your story and UI:
-
-| Field               | Category |   Subcategory   |
-| :------------------ | :------: | :-------------: |
-| **backgroundColor** |  Colors  |  Button colors  |
-| **primary**         |  Colors  |  Button style   |
-| **label**           |   Text   | Button contents |
-| **onClick**         |  Events  |  Button Events  |
-| **size**            |  Sizes   |                 |
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'angular/button-story-argtypes-with-subcategories.ts.mdx',
-    'web-components/button-story-argtypes-with-subcategories.js.mdx',
-    'web-components/button-story-argtypes-with-subcategories.ts.mdx',
-    'common/button-story-argtypes-with-subcategories.js.mdx',
-    'common/button-story-argtypes-with-subcategories.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-![button story with args grouped into categories](./button-args-grouped-subcategories.png)
-
-#### Global `argTypes`
-
-You can also define arg types at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `argTypes` key in your `preview.js`:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/button-story-project-args-theme.js.mdx',
-    'common/button-story-project-args-theme.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-<div class="aside">
-💡 If you define a global arg type for a story that does not have that arg (e.g. if there is no corresponding global arg definition), then the arg type will have no effect.
-</div>
-
-#### Using argTypes in addons
-
-If you want to access the argTypes of the current component inside an addon, you can use the `useArgTypes` hook from the `@storybook/manager-api` package:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'common/storybook-argtypes-with-addon.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
diff --git a/docs/api/doc-block-controls.md b/docs/api/doc-block-controls.md
index e9824ee7e9d8..133ceed32c1c 100644
--- a/docs/api/doc-block-controls.md
+++ b/docs/api/doc-block-controls.md
@@ -10,6 +10,12 @@ The `Controls` block can be used to show a dynamic table of args for a given sto
 
 </div>
 
+<div class="aside">
+
+⚠️ The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../essentials/controls.md) (included in [`@storybook/addon-essentials`](../essentials/introduction.md)).
+
+</div>
+
 ![Screenshot of Controls block](./doc-block-controls.png)
 
 <!-- prettier-ignore-start -->
@@ -66,6 +72,12 @@ The example above applied the parameter at the [component](../writing-stories/pa
 
 </details>
 
+<div class="aside">
+
+💡 This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the [Controls addon docs](../essentials/controls.md). To configure individual controls, you can specify [argTypes](./arg-types.md#control) for each.
+
+</div>
+
 ### `exclude`
 
 Type: `string[] | RegExp`
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
index 2f617dc6a87f..a66b94b7ac67 100644
--- a/docs/migration-guide.md
+++ b/docs/migration-guide.md
@@ -6,19 +6,16 @@ Storybook 7 is our first major release in over 2 years. A lot has changed during
 
 ## Major breaking changes
 
-The rest of this guide will help you upgrade successfully, either automatically or manually. But first, we’ve accumulated a lot of breaking changes in Storybook 7. Here are the most impactful changes you should know about before you go further:
+The rest of this guide will help you upgrade successfully, either automatically or manually. But first, we’ve accumulated a lot of [breaking changes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#70-breaking-changes) in Storybook 7. Here are the most impactful changes you should know about before you go further:
 
 - [Webpack4 support discontinued](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued)
 - [IE11 support discontinued](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#modern-browser-support)
 - [Minimum supported version of node is 16](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-support-for-node-15-and-below)
 - [Babel mode v7 exclusively](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively)
+- [Start and build CLI binaries removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed)
 - [Some community addons might not work yet](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#specific-instructions-for-addon-users)
-- Storybook CLI changes:
-  - [Start and build binaries removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed)
-  - [`DLL` flags removed](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-dll-flags)
-  - [`use-npm` flag deprecated](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cli-option---use-npm-deprecated)
 
-If any of these apply to your project, please read through the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) before continuing. If these are hard requirements, you should probably stick with Storybook 6.x.
+If any of these apply to your project, please read through the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700) before continuing. If any of these new requirements or changes do not fit your project, you should probably stick with Storybook 6.x.
 
 ## Automatic upgrade
 
diff --git a/docs/snippets/angular/arg-types-control.ts.mdx b/docs/snippets/angular/arg-types-control.ts.mdx
new file mode 100644
index 000000000000..94f8365e086e
--- /dev/null
+++ b/docs/snippets/angular/arg-types-control.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-default-value.ts.mdx b/docs/snippets/angular/arg-types-default-value.ts.mdx
new file mode 100644
index 000000000000..41e3d3987501
--- /dev/null
+++ b/docs/snippets/angular/arg-types-default-value.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-description.ts.mdx b/docs/snippets/angular/arg-types-description.ts.mdx
new file mode 100644
index 000000000000..154c1b1f4a6b
--- /dev/null
+++ b/docs/snippets/angular/arg-types-description.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-if.ts.mdx b/docs/snippets/angular/arg-types-if.ts.mdx
new file mode 100644
index 000000000000..d1887b8bfbcd
--- /dev/null
+++ b/docs/snippets/angular/arg-types-if.ts.mdx
@@ -0,0 +1,40 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-in-meta.ts.mdx b/docs/snippets/angular/arg-types-in-meta.ts.mdx
new file mode 100644
index 000000000000..1cc7933b518a
--- /dev/null
+++ b/docs/snippets/angular/arg-types-in-meta.ts.mdx
@@ -0,0 +1,20 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/storybook-customize-argtypes.ts.mdx b/docs/snippets/angular/arg-types-in-story.ts.mdx
similarity index 52%
rename from docs/snippets/angular/storybook-customize-argtypes.ts.mdx
rename to docs/snippets/angular/arg-types-in-story.ts.mdx
index bf7aaa3253c5..ae446e2d4a13 100644
--- a/docs/snippets/angular/storybook-customize-argtypes.ts.mdx
+++ b/docs/snippets/angular/arg-types-in-story.ts.mdx
@@ -7,21 +7,19 @@ import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
   argTypes: {
+    // 👇 This story expects a label arg
     label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
+      control: 'text',
+      description: 'Overwritten description',
     },
   },
 };
-
-export default meta;
 ```
diff --git a/docs/snippets/angular/my-component-argtypes-with-mapping.ts.mdx b/docs/snippets/angular/arg-types-mapping.ts.mdx
similarity index 65%
rename from docs/snippets/angular/my-component-argtypes-with-mapping.ts.mdx
rename to docs/snippets/angular/arg-types-mapping.ts.mdx
index caebe23e1870..0a3fc9d135dd 100644
--- a/docs/snippets/angular/my-component-argtypes-with-mapping.ts.mdx
+++ b/docs/snippets/angular/arg-types-mapping.ts.mdx
@@ -1,12 +1,12 @@
 ```ts
-// MyComponent.stories.ts
+// Example.stories.ts
 
 import type { Meta } from '@storybook/angular';
 
-import { MyComponent } from './MyComponent';
+import { Example } from './Example';
 
-const meta: Meta<MyComponent> = {
-  component: MyComponent,
+const meta: Meta<Example> = {
+  component: Example,
   argTypes: {
     label: {
       options: ['Normal', 'Bold', 'Italic'],
diff --git a/docs/snippets/angular/arg-types-name.ts.mdx b/docs/snippets/angular/arg-types-name.ts.mdx
new file mode 100644
index 000000000000..8cc989fd70e0
--- /dev/null
+++ b/docs/snippets/angular/arg-types-name.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-options.ts.mdx b/docs/snippets/angular/arg-types-options.ts.mdx
new file mode 100644
index 000000000000..733fb12c9697
--- /dev/null
+++ b/docs/snippets/angular/arg-types-options.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-table.ts.mdx b/docs/snippets/angular/arg-types-table.ts.mdx
new file mode 100644
index 000000000000..60492389fb10
--- /dev/null
+++ b/docs/snippets/angular/arg-types-table.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/arg-types-type.ts.mdx b/docs/snippets/angular/arg-types-type.ts.mdx
new file mode 100644
index 000000000000..6ab986e41331
--- /dev/null
+++ b/docs/snippets/angular/arg-types-type.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/angular';
+
+import { Example } from './Example';
+
+const meta: Meta<Example> = {
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-control.js.mdx b/docs/snippets/common/arg-types-control.js.mdx
new file mode 100644
index 000000000000..a290da32894f
--- /dev/null
+++ b/docs/snippets/common/arg-types-control.js.mdx
@@ -0,0 +1,19 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-control.ts-4-9.mdx b/docs/snippets/common/arg-types-control.ts-4-9.mdx
new file mode 100644
index 000000000000..298cad744000
--- /dev/null
+++ b/docs/snippets/common/arg-types-control.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-control.ts.mdx b/docs/snippets/common/arg-types-control.ts.mdx
new file mode 100644
index 000000000000..861d1626c6d4
--- /dev/null
+++ b/docs/snippets/common/arg-types-control.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-default-value.js.mdx b/docs/snippets/common/arg-types-default-value.js.mdx
new file mode 100644
index 000000000000..a5425e8bc1b9
--- /dev/null
+++ b/docs/snippets/common/arg-types-default-value.js.mdx
@@ -0,0 +1,19 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-default-value.ts-4-9.mdx b/docs/snippets/common/arg-types-default-value.ts-4-9.mdx
new file mode 100644
index 000000000000..43735e92669a
--- /dev/null
+++ b/docs/snippets/common/arg-types-default-value.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-default-value.ts.mdx b/docs/snippets/common/arg-types-default-value.ts.mdx
new file mode 100644
index 000000000000..4ec1f545818b
--- /dev/null
+++ b/docs/snippets/common/arg-types-default-value.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-description.js.mdx b/docs/snippets/common/arg-types-description.js.mdx
new file mode 100644
index 000000000000..11165006392c
--- /dev/null
+++ b/docs/snippets/common/arg-types-description.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-description.ts-4-9.mdx b/docs/snippets/common/arg-types-description.ts-4-9.mdx
new file mode 100644
index 000000000000..fb8f7d10aabd
--- /dev/null
+++ b/docs/snippets/common/arg-types-description.ts-4-9.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-description.ts.mdx b/docs/snippets/common/arg-types-description.ts.mdx
new file mode 100644
index 000000000000..4155fe0a89f2
--- /dev/null
+++ b/docs/snippets/common/arg-types-description.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-if.js.mdx b/docs/snippets/common/arg-types-if.js.mdx
new file mode 100644
index 000000000000..f834be56ac41
--- /dev/null
+++ b/docs/snippets/common/arg-types-if.js.mdx
@@ -0,0 +1,36 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-if.ts-4-9.mdx b/docs/snippets/common/arg-types-if.ts-4-9.mdx
new file mode 100644
index 000000000000..fb63efe55432
--- /dev/null
+++ b/docs/snippets/common/arg-types-if.ts-4-9.mdx
@@ -0,0 +1,41 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-if.ts.mdx b/docs/snippets/common/arg-types-if.ts.mdx
new file mode 100644
index 000000000000..bd67a9378d87
--- /dev/null
+++ b/docs/snippets/common/arg-types-if.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-in-meta.js.mdx b/docs/snippets/common/arg-types-in-meta.js.mdx
new file mode 100644
index 000000000000..025114c0f95d
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-meta.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-in-meta.ts-4-9.mdx b/docs/snippets/common/arg-types-in-meta.ts-4-9.mdx
new file mode 100644
index 000000000000..f6a96b71e2a4
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-meta.ts-4-9.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-in-meta.ts.mdx b/docs/snippets/common/arg-types-in-meta.ts.mdx
new file mode 100644
index 000000000000..3e101399982c
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-meta.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-in-preview.js.mdx b/docs/snippets/common/arg-types-in-preview.js.mdx
new file mode 100644
index 000000000000..f46bef228315
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-preview.js.mdx
@@ -0,0 +1,13 @@
+```js
+// .storybook/preview.js
+
+export default {
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-in-preview.ts-4-9.mdx b/docs/snippets/common/arg-types-in-preview.ts-4-9.mdx
new file mode 100644
index 000000000000..f144c23a2b9d
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-preview.ts-4-9.mdx
@@ -0,0 +1,18 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Preview } from '@storybook/your-renderer';
+
+const preview = {
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+} satisfies Preview;
+
+export default preview;
+```
diff --git a/docs/snippets/common/arg-types-in-preview.ts.mdx b/docs/snippets/common/arg-types-in-preview.ts.mdx
new file mode 100644
index 000000000000..9cc7597fb82b
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-preview.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  argTypes: {
+    // 👇 All stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+
+export default preview;
+```
diff --git a/docs/snippets/common/arg-types-in-story.js.mdx b/docs/snippets/common/arg-types-in-story.js.mdx
new file mode 100644
index 000000000000..cfb95d6416a8
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-story.js.mdx
@@ -0,0 +1,19 @@
+```js
+// Button.stories.js|jsx
+
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Basic = {
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-in-story.ts-4-9.mdx b/docs/snippets/common/arg-types-in-story.ts-4-9.mdx
new file mode 100644
index 000000000000..3164c0dceaaf
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-story.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof Meta>;
+
+export const Basic = {
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+} satisfies Story;
+```
diff --git a/docs/snippets/common/arg-types-in-story.ts.mdx b/docs/snippets/common/arg-types-in-story.ts.mdx
new file mode 100644
index 000000000000..c0f5641a257c
--- /dev/null
+++ b/docs/snippets/common/arg-types-in-story.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx b/docs/snippets/common/arg-types-mapping.js.mdx
similarity index 66%
rename from docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
rename to docs/snippets/common/arg-types-mapping.js.mdx
index ed09f61b71d9..742b30fe4194 100644
--- a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
+++ b/docs/snippets/common/arg-types-mapping.js.mdx
@@ -1,10 +1,10 @@
 ```js
-// MyComponent.stories.js|jsx
+// Example.stories.js|jsx
 
-import { MyComponent } from './MyComponent';
+import { Example } from './Example';
 
 export default {
-  component: MyComponent,
+  component: Example,
   argTypes: {
     label: {
       options: ['Normal', 'Bold', 'Italic'],
diff --git a/docs/snippets/common/arg-types-mapping.ts-4-9.mdx b/docs/snippets/common/arg-types-mapping.ts-4-9.mdx
new file mode 100644
index 000000000000..83a452e84c2d
--- /dev/null
+++ b/docs/snippets/common/arg-types-mapping.ts-4-9.mdx
@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    label: {
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-mapping.ts.mdx b/docs/snippets/common/arg-types-mapping.ts.mdx
new file mode 100644
index 000000000000..3c3898eeb9e0
--- /dev/null
+++ b/docs/snippets/common/arg-types-mapping.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    label: {
+      options: ['Normal', 'Bold', 'Italic'],
+      mapping: {
+        Bold: <b>Bold</b>,
+        Italic: <i>Italic</i>,
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-name.js.mdx b/docs/snippets/common/arg-types-name.js.mdx
new file mode 100644
index 000000000000..245814b881dd
--- /dev/null
+++ b/docs/snippets/common/arg-types-name.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-name.ts-4-9.mdx b/docs/snippets/common/arg-types-name.ts-4-9.mdx
new file mode 100644
index 000000000000..8210f31618a7
--- /dev/null
+++ b/docs/snippets/common/arg-types-name.ts-4-9.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-name.ts.mdx b/docs/snippets/common/arg-types-name.ts.mdx
new file mode 100644
index 000000000000..80083a4de4b4
--- /dev/null
+++ b/docs/snippets/common/arg-types-name.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-options.js.mdx b/docs/snippets/common/arg-types-options.js.mdx
new file mode 100644
index 000000000000..80922b2c82a8
--- /dev/null
+++ b/docs/snippets/common/arg-types-options.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-options.ts-4-9.mdx b/docs/snippets/common/arg-types-options.ts-4-9.mdx
new file mode 100644
index 000000000000..98845d54c0a9
--- /dev/null
+++ b/docs/snippets/common/arg-types-options.ts-4-9.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-options.ts.mdx b/docs/snippets/common/arg-types-options.ts.mdx
new file mode 100644
index 000000000000..1b1c904106dc
--- /dev/null
+++ b/docs/snippets/common/arg-types-options.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-table.js.mdx b/docs/snippets/common/arg-types-table.js.mdx
new file mode 100644
index 000000000000..0c4bbf404445
--- /dev/null
+++ b/docs/snippets/common/arg-types-table.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-table.ts-4-9.mdx b/docs/snippets/common/arg-types-table.ts-4-9.mdx
new file mode 100644
index 000000000000..0ba400c1ea6d
--- /dev/null
+++ b/docs/snippets/common/arg-types-table.ts-4-9.mdx
@@ -0,0 +1,22 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-table.ts.mdx b/docs/snippets/common/arg-types-table.ts.mdx
new file mode 100644
index 000000000000..adcd3dc19fba
--- /dev/null
+++ b/docs/snippets/common/arg-types-table.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-type.js.mdx b/docs/snippets/common/arg-types-type.js.mdx
new file mode 100644
index 000000000000..1ead0022bee7
--- /dev/null
+++ b/docs/snippets/common/arg-types-type.js.mdx
@@ -0,0 +1,12 @@
+```js
+// Example.stories.js|jsx
+
+import { Example } from './Example';
+
+export default {
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+};
+```
diff --git a/docs/snippets/common/arg-types-type.ts-4-9.mdx b/docs/snippets/common/arg-types-type.ts-4-9.mdx
new file mode 100644
index 000000000000..ae9382c8dd84
--- /dev/null
+++ b/docs/snippets/common/arg-types-type.ts-4-9.mdx
@@ -0,0 +1,17 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta = {
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+} satisfies Meta<typeof Example>;
+
+export default meta;
+```
diff --git a/docs/snippets/common/arg-types-type.ts.mdx b/docs/snippets/common/arg-types-type.ts.mdx
new file mode 100644
index 000000000000..c0d8c6834428
--- /dev/null
+++ b/docs/snippets/common/arg-types-type.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Example.stories.ts|tsx
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import type { Meta } from '@storybook/your-renderer';
+
+import { Example } from './Example';
+
+const meta: Meta<typeof Example> = {
+  component: Example,
+  argTypes: {
+    value: { type: 'number' },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/button-story-project-args-theme.js.mdx b/docs/snippets/common/button-story-project-args-theme.js.mdx
deleted file mode 100644
index ff852cd2da40..000000000000
--- a/docs/snippets/common/button-story-project-args-theme.js.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-```js
-// .storybook/preview.js
-
-export default {
-  // All stories expect a theme arg
-  argTypes: { theme: { control: 'select', options: ['light', 'dark'] } },
-
-  // The default value of the theme arg to all stories
-  args: { theme: 'light' },
-};
-```
diff --git a/docs/snippets/common/button-story-project-args-theme.ts.mdx b/docs/snippets/common/button-story-project-args-theme.ts.mdx
deleted file mode 100644
index d9f6529a08d7..000000000000
--- a/docs/snippets/common/button-story-project-args-theme.ts.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-```ts
-// .storybook/preview.ts
-
-// Replace your-framework with the framework you are using (e.g., react, vue3)
-import { Preview } from '@storybook/your-framework';
-
-const preview: Preview = {
-  // All stories expect a theme arg
-  argTypes: { theme: { control: 'select', options: ['light', 'dark'] } },
-
-  // The default value of the theme arg to all stories
-  args: { theme: 'light' },
-};
-
-export default preview;
-```
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.ts-4-9.mdx b/docs/snippets/common/my-component-argtypes-with-mapping.ts-4-9.mdx
deleted file mode 100644
index 27202b6f7afb..000000000000
--- a/docs/snippets/common/my-component-argtypes-with-mapping.ts-4-9.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// MyComponent.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
-
-import { MyComponent } from './MyComponent';
-
-const meta = {
-  component: MyComponent,
-  argTypes: {
-    label: {
-      options: ['Normal', 'Bold', 'Italic'],
-      mapping: {
-        Bold: <b>Bold</b>,
-        Italic: <i>Italic</i>,
-      },
-    },
-  },
-} satisfies Meta<typeof MyComponent>;
-
-export default meta;
-```
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.ts.mdx b/docs/snippets/common/my-component-argtypes-with-mapping.ts.mdx
deleted file mode 100644
index dd42272fb922..000000000000
--- a/docs/snippets/common/my-component-argtypes-with-mapping.ts.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```ts
-// MyComponent.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
-
-import { MyComponent } from './MyComponent';
-
-const meta: Meta<typeof MyComponent> = {
-  component: MyComponent,
-  argTypes: {
-    label: {
-      options: ['Normal', 'Bold', 'Italic'],
-      mapping: {
-        Bold: <b>Bold</b>,
-        Italic: <i>Italic</i>,
-      },
-    },
-  },
-};
-
-export default meta;
-```
diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx
deleted file mode 100644
index ae298e455b32..000000000000
--- a/docs/snippets/common/storybook-customize-argtypes.js.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-```js
-// Button.stories.js|jsx
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  argTypes: {
-    label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-};
-```
diff --git a/docs/snippets/common/storybook-customize-argtypes.ts-4-9.mdx b/docs/snippets/common/storybook-customize-argtypes.ts-4-9.mdx
deleted file mode 100644
index 10b2cc747299..000000000000
--- a/docs/snippets/common/storybook-customize-argtypes.ts-4-9.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  argTypes: {
-    label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-```
diff --git a/docs/snippets/common/storybook-customize-argtypes.ts.mdx b/docs/snippets/common/storybook-customize-argtypes.ts.mdx
deleted file mode 100644
index 07b58fdd841a..000000000000
--- a/docs/snippets/common/storybook-customize-argtypes.ts.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-// Replace your-framework with the name of your framework
-import type { Meta } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  argTypes: {
-    label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-};
-
-export default meta;
-```
diff --git a/docs/snippets/web-components/arg-types-control.js.mdx b/docs/snippets/web-components/arg-types-control.js.mdx
new file mode 100644
index 000000000000..caa3f03d85dc
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-control.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-control.ts.mdx b/docs/snippets/web-components/arg-types-control.ts.mdx
new file mode 100644
index 000000000000..7c989cd85cb4
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-control.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 100,
+        step: 10,
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-default-value.js.mdx b/docs/snippets/web-components/arg-types-default-value.js.mdx
new file mode 100644
index 000000000000..731f6b020070
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-default-value.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-default-value.ts.mdx b/docs/snippets/web-components/arg-types-default-value.ts.mdx
new file mode 100644
index 000000000000..225ba930e756
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-default-value.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      // ❌ Deprecated
+      defaultValue: 0,
+    },
+  },
+  // ✅ Do this instead
+  args: {
+    value: 0,
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-description.js.mdx b/docs/snippets/web-components/arg-types-description.js.mdx
new file mode 100644
index 000000000000..54dd87327e3e
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-description.js.mdx
@@ -0,0 +1,12 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-description.ts.mdx b/docs/snippets/web-components/arg-types-description.ts.mdx
new file mode 100644
index 000000000000..6ee86c3b3f0e
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-description.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      description: 'The value of the slider',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-if.js.mdx b/docs/snippets/web-components/arg-types-if.js.mdx
new file mode 100644
index 000000000000..2b0f86869835
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-if.js.mdx
@@ -0,0 +1,34 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-if.ts.mdx b/docs/snippets/web-components/arg-types-if.ts.mdx
new file mode 100644
index 000000000000..80d27cf5b83a
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-if.ts.mdx
@@ -0,0 +1,38 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    parent: { control: 'select', options: ['one', 'two', 'three'] },
+
+    // 👇 Only shown when `parent` arg exists
+    parentExists: { if: { arg: 'parent', exists: true } },
+
+    // 👇 Only shown when `parent` arg does not exist
+    parentDoesNotExist: { if: { arg: 'parent', exists: false } },
+
+    // 👇 Only shown when `parent` arg value is truthy
+    parentIsTruthy: { if: { arg: 'parent' } },
+    parentIsTruthyVerbose: { if: { arg: 'parent', truthy: true } },
+
+    // 👇 Only shown when `parent` arg value is not truthy
+    parentIsNotTruthy: { if: { arg: 'parent', truthy: false } },
+
+    // 👇 Only shown when `parent` arg value is 'three'
+    parentIsEqToValue: { if: { arg: 'parent', eq: 'three' } },
+
+    // 👇 Only shown when `parent` arg value is not 'three'
+    parentIsNotEqToValue: { if: { arg: 'parent', neq: 'three' } },
+
+    // Each of the above can also be conditional on the value of a globalType, e.g.:
+
+    // 👇 Only shown when `theme` global exists
+    parentExists: { if: { global: 'theme', exists: true } },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-in-meta.js.mdx b/docs/snippets/web-components/arg-types-in-meta.js.mdx
new file mode 100644
index 000000000000..93d451489497
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-in-meta.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+
+export default {
+  component: 'demo-button',
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-in-meta.ts.mdx b/docs/snippets/web-components/arg-types-in-meta.ts.mdx
new file mode 100644
index 000000000000..bb5fa78b9461
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-in-meta.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-button',
+  argTypes: {
+    // 👇 All Button stories expect a label arg
+    label: {
+      control: 'string',
+      description: 'Overwritten description',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-in-story.js.mdx b/docs/snippets/web-components/arg-types-in-story.js.mdx
new file mode 100644
index 000000000000..b42be873c969
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-in-story.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Button.stories.js
+
+export default {
+  component: 'demo-button',
+};
+
+export const Basic = {
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-in-story.ts.mdx b/docs/snippets/web-components/arg-types-in-story.ts.mdx
new file mode 100644
index 000000000000..8c7eef9efacd
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-in-story.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-button',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  argTypes: {
+    // 👇 This story expects a label arg
+    label: {
+      control: 'text',
+      description: 'Overwritten description',
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/my-component-argtypes-with-mapping.js.mdx b/docs/snippets/web-components/arg-types-mapping.js.mdx
similarity index 80%
rename from docs/snippets/web-components/my-component-argtypes-with-mapping.js.mdx
rename to docs/snippets/web-components/arg-types-mapping.js.mdx
index b1b985b895ad..65b296831f75 100644
--- a/docs/snippets/web-components/my-component-argtypes-with-mapping.js.mdx
+++ b/docs/snippets/web-components/arg-types-mapping.js.mdx
@@ -1,10 +1,10 @@
 ```js
-// MyComponent.stories.js
+// Example.stories.js
 
 import { html } from 'lit';
 
 export default {
-  component: 'demo-my-component',
+  component: 'demo-example',
   argTypes: {
     label: {
       options: ['Normal', 'Bold', 'Italic'],
diff --git a/docs/snippets/web-components/my-component-argtypes-with-mapping.ts.mdx b/docs/snippets/web-components/arg-types-mapping.ts.mdx
similarity index 84%
rename from docs/snippets/web-components/my-component-argtypes-with-mapping.ts.mdx
rename to docs/snippets/web-components/arg-types-mapping.ts.mdx
index d64b21f8d461..1f8bdc9f48f2 100644
--- a/docs/snippets/web-components/my-component-argtypes-with-mapping.ts.mdx
+++ b/docs/snippets/web-components/arg-types-mapping.ts.mdx
@@ -1,12 +1,12 @@
 ```ts
-// MyComponent.stories.ts
+// Example.stories.ts
 
 import type { Meta } from '@storybook/web-components';
 
 import { html } from 'lit';
 
 const meta: Meta = {
-  component: 'demo-my-component',
+  component: 'demo-example',
   argTypes: {
     label: {
       options: ['Normal', 'Bold', 'Italic'],
diff --git a/docs/snippets/web-components/arg-types-name.js.mdx b/docs/snippets/web-components/arg-types-name.js.mdx
new file mode 100644
index 000000000000..a87c2fdf2704
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-name.js.mdx
@@ -0,0 +1,12 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-name.ts.mdx b/docs/snippets/web-components/arg-types-name.ts.mdx
new file mode 100644
index 000000000000..117ee4dc2c4b
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-name.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    actualArgName: {
+      name: 'Friendly name',
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-options.js.mdx b/docs/snippets/web-components/arg-types-options.js.mdx
new file mode 100644
index 000000000000..a49ccacc9fc4
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-options.js.mdx
@@ -0,0 +1,12 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-options.ts.mdx b/docs/snippets/web-components/arg-types-options.ts.mdx
new file mode 100644
index 000000000000..912c035dd30d
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-options.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    icon: {
+      options: ['arrow-up', 'arrow-down', 'loading'],
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-table.js.mdx b/docs/snippets/web-components/arg-types-table.js.mdx
new file mode 100644
index 000000000000..a891b937c8ec
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-table.js.mdx
@@ -0,0 +1,15 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-table.ts.mdx b/docs/snippets/web-components/arg-types-table.ts.mdx
new file mode 100644
index 000000000000..0756a77f4d9e
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-table.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    value: {
+      table: {
+        defaultValue: { summary: 0 },
+        type: { summary: 'number' },
+      },
+    },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/arg-types-type.js.mdx b/docs/snippets/web-components/arg-types-type.js.mdx
new file mode 100644
index 000000000000..4254ebee1df5
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-type.js.mdx
@@ -0,0 +1,10 @@
+```js
+// Example.stories.js
+
+export default {
+  component: 'demo-example',
+  argTypes: {
+    value: { type: 'number' },
+  },
+};
+```
diff --git a/docs/snippets/web-components/arg-types-type.ts.mdx b/docs/snippets/web-components/arg-types-type.ts.mdx
new file mode 100644
index 000000000000..c4b25ec2ba27
--- /dev/null
+++ b/docs/snippets/web-components/arg-types-type.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// Example.stories.ts
+
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-example',
+  argTypes: {
+    value: { type: 'number' },
+  },
+};
+
+export default meta;
+```
diff --git a/docs/snippets/web-components/storybook-customize-argtypes.js.mdx b/docs/snippets/web-components/storybook-customize-argtypes.js.mdx
deleted file mode 100644
index 2697016c0587..000000000000
--- a/docs/snippets/web-components/storybook-customize-argtypes.js.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-```js
-// Button.stories.js
-
-export default {
-  component: 'demo-button',
-  argTypes: {
-    label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-};
-```
diff --git a/docs/snippets/web-components/storybook-customize-argtypes.ts.mdx b/docs/snippets/web-components/storybook-customize-argtypes.ts.mdx
deleted file mode 100644
index 49f2e9e5d6de..000000000000
--- a/docs/snippets/web-components/storybook-customize-argtypes.ts.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta } from '@storybook/web-components';
-
-const meta: Meta = {
-  component: 'demo-button',
-  argTypes: {
-    label: {
-      description: 'overwritten description',
-      table: {
-        type: {
-          summary: 'something short',
-          detail: 'something really really long',
-        },
-      },
-      control: {
-        type: null,
-      },
-    },
-  },
-};
-
-export default meta;
-```
diff --git a/docs/toc.js b/docs/toc.js
index 78eed62e7e41..94175272cbd9 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -556,6 +556,16 @@ module.exports = {
             },
           ],
         },
+        {
+          pathSegment: 'arg-types',
+          title: 'ArgTypes',
+          type: 'link',
+        },
+        {
+          pathSegment: 'csf',
+          title: 'Component Story Format (CSF)',
+          type: 'link',
+        },
         {
           title: 'Doc blocks',
           pathSegment: '',
@@ -648,23 +658,6 @@ module.exports = {
             },
           ],
         },
-        {
-          title: 'Stories',
-          pathSegment: '',
-          type: 'menu',
-          children: [
-            {
-              pathSegment: 'csf',
-              title: 'Component Story Format',
-              type: 'link',
-            },
-            {
-              pathSegment: 'argtypes',
-              title: 'ArgTypes',
-              type: 'link',
-            },
-          ],
-        },
         {
           pathSegment: 'new-frameworks',
           title: 'Frameworks',
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index de3a1ef8f35b..4d3a53652ff7 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -215,11 +215,11 @@ Complex values such as JSX elements cannot be serialized to the manager (e.g., t
 
 <CodeSnippets
   paths={[
-    'angular/my-component-argtypes-with-mapping.ts.mdx',
-    'web-components/my-component-argtypes-with-mapping.js.mdx',
-    'web-components/my-component-argtypes-with-mapping.ts.mdx',
-    'common/my-component-argtypes-with-mapping.js.mdx',
-    'common/my-component-argtypes-with-mapping.ts.mdx',
+    'angular/arg-types-mapping.ts.mdx',
+    'web-components/arg-types-mapping.js.mdx',
+    'web-components/arg-types-mapping.ts.mdx',
+    'common/arg-types-mapping.js.mdx',
+    'common/arg-types-mapping.ts.mdx',
   ]}
 />
 
diff --git a/scripts/__mocks__/simple-git.js b/scripts/__mocks__/simple-git.js
new file mode 100644
index 000000000000..89fa9f23c7b1
--- /dev/null
+++ b/scripts/__mocks__/simple-git.js
@@ -0,0 +1,18 @@
+/* eslint-disable no-underscore-dangle */
+const mod = jest.createMockFromModule('simple-git');
+
+mod.__getRemotes = jest
+  .fn()
+  .mockReturnValue([{ name: 'origin', refs: { fetch: 'origin', push: 'origin' } }]);
+mod.__fetch = jest.fn();
+mod.__revparse = jest.fn().mockResolvedValue('mockedGitCommitHash');
+
+mod.simpleGit = () => {
+  return {
+    getRemotes: mod.__getRemotes,
+    fetch: mod.__fetch,
+    revparse: mod.__revparse,
+  };
+};
+
+module.exports = mod;
diff --git a/scripts/__mocks__/uuid.ts b/scripts/__mocks__/uuid.ts
new file mode 100644
index 000000000000..bd6e08f5a6eb
--- /dev/null
+++ b/scripts/__mocks__/uuid.ts
@@ -0,0 +1,8 @@
+const { v5 } = jest.requireActual('uuid');
+
+let seed = 0;
+
+export const v4 = () => {
+  seed += 1;
+  return v5(seed.toString(), '6c7fda6d-f92f-4bd2-9d4d-da26a59196a6');
+};
diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts
index 8d04e2c28472..1d80df10e0da 100644
--- a/scripts/dangerfile.ts
+++ b/scripts/dangerfile.ts
@@ -49,7 +49,24 @@ const checkRequiredLabels = (labels: string[]) => {
   }
 };
 
+const checkPrTitle = (title: string) => {
+  const match = title.match(/^[A-Z].+:\s[A-Z].+$/);
+  if (!match) {
+    fail(
+      `PR title must be in the format of "Area: Summary", With both Area and Summary starting with a capital letter
+Good examples:
+- "Docs: Describe Canvas Doc Block"
+- "Svelte: Support Svelte v4"
+Bad examples:
+- "add new api docs"
+- "fix: Svelte 4 support"
+- "Vue: improve docs"`
+    );
+  }
+};
+
 if (prLogConfig) {
   const { labels } = danger.github.issue;
   checkRequiredLabels(labels.map((l) => l.name));
+  checkPrTitle(danger.github.pr.title);
 }
diff --git a/scripts/package.json b/scripts/package.json
index 8558f0614b40..3b43bff37bfa 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -11,10 +11,24 @@
     "lint:js": "yarn lint:js:cmd .  --quiet",
     "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: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",
+    "release:get-version-changelog": "ts-node --swc ./release/get-version-changelog.ts",
+    "release:is-pr-frozen": "ts-node --swc ./release/is-pr-frozen.ts",
+    "release:is-prerelease": "ts-node --swc ./release/is-prerelease.ts",
+    "release:is-version-published": "ts-node --swc ./release/is-version-published.ts",
+    "release:label-patches": "ts-node --swc ./release/label-patches.ts",
+    "release:pick-patches": "ts-node --swc ./release/pick-patches.ts",
+    "release:publish": "ts-node --swc ./release/publish.ts",
+    "release:unreleased-changes-exists": "ts-node --swc ./release/unreleased-changes-exists.ts",
+    "release:version": "ts-node --swc ./release/version.ts",
+    "release:write-changelog": "ts-node --swc ./release/write-changelog.ts",
+    "strict-ts": "node --require esbuild-register ./strict-ts.ts",
     "task": "ts-node --swc ./task.ts",
-    "upgrade": "ts-node --swc ./task.ts",
     "test": "jest --config ./jest.config.js",
-    "migrate-docs": "node --require esbuild-register ./ts-to-ts49.ts"
+    "upgrade": "ts-node --swc ./task.ts"
   },
   "husky": {
     "hooks": {
@@ -38,6 +52,7 @@
     "serialize-javascript": "^3.1.0"
   },
   "dependencies": {
+    "@actions/core": "^1.10.0",
     "@babel/core": "^7.20.2",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.20.7",
@@ -55,6 +70,7 @@
     "@nrwl/cli": "^15.4.5",
     "@nrwl/nx-cloud": "^15.0.2",
     "@nrwl/workspace": "^15.4.5",
+    "@octokit/graphql": "^5.0.5",
     "@storybook/eslint-config-storybook": "^3.1.2",
     "@storybook/jest": "^0.1.0",
     "@storybook/linter-config": "^3.1.2",
@@ -78,9 +94,11 @@
     "@types/semver": "^7.3.4",
     "@types/serve-static": "^1.13.8",
     "@types/shelljs": "^0.8.7",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "ansi-regex": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^9.1.2",
     "boxen": "^5.1.2",
@@ -89,7 +107,8 @@
     "commander": "^6.2.1",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
-    "danger": "^10.6.2",
+    "danger": "^11.2.6",
+    "dataloader": "^2.2.2",
     "detect-port": "^1.3.0",
     "ejs": "^3.1.8",
     "ejs-lint": "^2.0.0",
@@ -113,9 +132,11 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-image-snapshot": "^6.0.0",
     "jest-junit": "^14.0.1",
+    "jest-mock-extended": "^3.0.4",
     "jest-os-detection": "^1.3.1",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.2.1",
+    "json5": "^2.2.3",
     "junit-xml": "^1.2.0",
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
@@ -124,7 +145,9 @@
     "node-gyp": "^8.4.0",
     "npmlog": "^5.0.1",
     "nx": "^15.4.5",
+    "ora": "^5.4.1",
     "p-limit": "^3.1.0",
+    "p-retry": "^5.1.2",
     "prettier": "^2.8.0",
     "pretty-hrtime": "^1.0.0",
     "process": "^0.11.10",
@@ -140,6 +163,7 @@
     "semver": "^7.3.7",
     "serve-static": "^1.14.1",
     "shelljs": "^0.8.5",
+    "simple-git": "^3.18.0",
     "slash": "^3.0.0",
     "sort-package-json": "^1.48.1",
     "tempy": "^1.0.0",
@@ -150,8 +174,10 @@
     "type-fest": "^3.4.0",
     "typescript": "~4.9.3",
     "util": "^0.12.4",
-    "wait-on": "^5.2.1",
+    "uuid": "^9.0.0",
+    "wait-on": "^7.0.1",
     "window-size": "^1.1.1",
+    "zod": "^3.21.4",
     "zx": "^7.0.3"
   },
   "optionalDependencies": {
diff --git a/scripts/release/__tests__/generate-pr-description.test.ts b/scripts/release/__tests__/generate-pr-description.test.ts
new file mode 100644
index 000000000000..b84c7a5d8dae
--- /dev/null
+++ b/scripts/release/__tests__/generate-pr-description.test.ts
@@ -0,0 +1,391 @@
+import {
+  generateReleaseDescription,
+  generateNonReleaseDescription,
+  mapToChangelist,
+  mapCherryPicksToTodo,
+} from '../generate-pr-description';
+import type { Change } from '../utils/get-changes';
+
+describe('Generate PR Description', () => {
+  const changes: Change[] = [
+    {
+      user: 'JReinhold',
+      title: 'Some PR title for a bug',
+      labels: ['bug', 'build', 'other label', 'patch'],
+      commit: 'abc123',
+      pull: '42',
+      links: {
+        commit: '[abc123](https://github.com/storybookjs/storybook/commit/abc123)',
+        pull: '[#42](https://github.com/storybookjs/storybook/pull/42)',
+        user: '[@JReinhold](https://github.com/JReinhold)',
+      },
+    },
+    {
+      // this Bump version commit should be ignored
+      user: 'github-actions[bot]',
+      pull: null,
+      commit: '012b58140c3606efeacbe99c0c410624b0a1ed1f',
+      title: 'Bump version on `next`: preminor (alpha) from 7.2.0 to 7.3.0-alpha.0',
+      labels: null,
+      links: {
+        commit:
+          '[`012b58140c3606efeacbe99c0c410624b0a1ed1f`](https://github.com/storybookjs/storybook/commit/012b58140c3606efeacbe99c0c410624b0a1ed1f)',
+        pull: null,
+        user: '[@github-actions[bot]](https://github.com/github-actions%5Bbot%5D)',
+      },
+    },
+    {
+      user: 'shilman',
+      title: 'Some title for a "direct commit"',
+      labels: null,
+      commit: '22bb11',
+      pull: null,
+      links: {
+        commit: '[22bb11](https://github.com/storybookjs/storybook/commit/22bb11)',
+        pull: null,
+        user: '[@shilman](https://github.com/shilman)',
+      },
+    },
+    {
+      user: 'shilman',
+      title: 'Another PR `title` for docs',
+      labels: ['another label', 'documentation', 'patch'],
+      commit: 'ddd222',
+      pull: '11',
+      links: {
+        commit: '[ddd222](https://github.com/storybookjs/storybook/commit/ddd222)',
+        pull: '[#11](https://github.com/storybookjs/storybook/pull/11)',
+        user: '[@shilman](https://github.com/shilman)',
+      },
+    },
+    {
+      user: 'JReinhold',
+      title: "Some PR title for a 'new' feature",
+      labels: ['feature request', 'other label'],
+      commit: 'wow1337',
+      pull: '48',
+      links: {
+        commit: '[wow1337](https://github.com/storybookjs/storybook/commit/wow1337)',
+        pull: '[#48](https://github.com/storybookjs/storybook/pull/48)',
+        user: '[@JReinhold](https://github.com/JReinhold)',
+      },
+    },
+    {
+      user: 'JReinhold',
+      title: 'Some PR title with a missing label',
+      labels: ['incorrect label', 'other label'],
+      commit: 'bad999',
+      pull: '77',
+      links: {
+        commit: '[bad999](https://github.com/storybookjs/storybook/commit/bad999)',
+        pull: '[#77](https://github.com/storybookjs/storybook/pull/77)',
+        user: '[@JReinhold](https://github.com/JReinhold)',
+      },
+    },
+  ];
+  describe('mapToChangelist', () => {
+    it('should return a correct string for releases', () => {
+      expect(mapToChangelist({ changes, isRelease: true })).toMatchInlineSnapshot(`
+        "- **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Direct commit**: Some title for a "direct commit" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        	- [ ] The change is appropriate for the version bump
+        - **📝 Documentation**: Another PR \`title\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **✨ Feature Request**: Some PR title for a 'new' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **❔ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct"
+      `);
+    });
+    it('should return a correct string for non-releases', () => {
+      expect(mapToChangelist({ changes, isRelease: false })).toMatchInlineSnapshot(`
+        "- **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        - **⚠️ Direct commit**: Some title for a "direct commit" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        - **📝 Documentation**: Another PR \`title\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        - **✨ Feature Request**: Some PR title for a 'new' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        - **❔ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)"
+      `);
+    });
+  });
+
+  describe('mapCherryPicksToTodo', () => {
+    it('should return a correct string for releases', () => {
+      expect(mapCherryPicksToTodo({ changes, commits: ['abc123'] })).toMatchInlineSnapshot(`
+        "## 🍒 Manual cherry picking needed!
+
+        The following pull requests could not be cherry-picked automatically because it resulted in merge conflicts.
+        For each pull request below, you need to either manually cherry pick it, or discard it by removing the "patch" label from the PR and re-generate this PR.
+
+        - [ ] [#42](https://github.com/storybookjs/storybook/pull/42): \`git cherry-pick -m1 -x abc123\`"
+      `);
+    });
+  });
+
+  describe('description generator', () => {
+    const changeList = `- **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+\t- [ ] The change is appropriate for the version bump
+\t- [ ] The PR is labeled correctly
+\t- [ ] The PR title is correct
+- **⚠️ Direct commit**: Some title for a \\"direct commit\\" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+\t- [ ] The change is appropriate for the version bump
+- **📝 Documentation**: Another PR \\\`title\\\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+\t- [ ] The change is appropriate for the version bump
+\t- [ ] The PR is labeled correctly
+\t- [ ] The PR title is correct
+- **✨ Feature Request**: Some PR title for a \\'new\\' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+\t- [ ] The change is appropriate for the version bump
+\t- [ ] The PR is labeled correctly
+\t- [ ] The PR title is correct
+- **⚠️ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+\t- [ ] The change is appropriate for the version bump
+\t- [ ] The PR is labeled correctly
+\t- [ ] The PR title is correct`;
+
+    const manualCherryPicks = `## 🍒 Manual cherry picking needed!
+
+The following pull requests could not be cherry-picked automatically because it resulted in merge conflicts.
+For each pull request below, you need to either manually cherry pick it, or discard it by removing the "patch" label from the PR and re-generate this PR.
+
+- [ ] [#42](https://github.com/storybookjs/storybook/pull/42): \`git cherry-pick -m1 -x abc123\``;
+
+    it('should return a correct string with cherry picks for releases', () => {
+      const changelogText = `## 7.1.0-alpha.11
+
+- Some PR \`title\` for a bug [#42](https://github.com/storybookjs/storybook/pull/42), thanks [@JReinhold](https://github.com/JReinhold)
+- Some PR 'title' for a feature request [#48](https://github.com/storybookjs/storybook/pull/48), thanks [@JReinhold](https://github.com/JReinhold)
+- Antoher PR "title" for maintainance [#49](https://github.com/storybookjs/storybook/pull/49), thanks [@JReinhold](https://github.com/JReinhold)`;
+      expect(
+        generateReleaseDescription({
+          currentVersion: '7.1.0-alpha.10',
+          nextVersion: '7.1.0-alpha.11',
+          changeList,
+          changelogText,
+          manualCherryPicks,
+        })
+      ).toMatchInlineSnapshot(`
+        "This is an automated pull request that bumps the version from \\\`7.1.0-alpha.10\\\` to \\\`7.1.0-alpha.11\\\`.
+        Once this pull request is merged, it will trigger a new release of version \\\`7.1.0-alpha.11\\\`.
+        If you\\'re not a core maintainer with permissions to release you can ignore this pull request.
+
+        ## To do
+
+        Before merging the PR, there are a few QA steps to go through:
+
+        - [ ] Add the \\"freeze\\" label to this PR, to ensure it doesn\\'t get automatically forced pushed by new changes.
+
+        And for each change below:
+
+        1. Ensure the change is appropriate for the version bump. E.g. patch release should only contain patches, not new or de-stabilizing features. If a change is not appropriate, revert the PR.
+        2. Ensure the PR is labeled correctly with one of: \\"BREAKING CHANGE\\", \\"feature request\\", \\"bug\\", \\"maintenance\\", \\"dependencies\\", \\"documentation\\", \\"build\\", \\"unknown\\".
+        3. Ensure the PR title is correct, and follows the format \\"[Area]: [Summary]\\", e.g. *\\"React: Fix hooks in CSF3 render functions\\"*. If it is not correct, change the title in the PR.
+            - Areas include: React, Vue, Core, Docs, Controls, etc.
+            - First word of summary indicates the type: “Add”, “Fix”, “Upgrade”, etc.
+            - The entire title should fit on a line
+
+        This is a list of all the PRs merged and commits pushed directly to \\\`next\\\`, that will be part of this release:
+
+        - **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Direct commit**: Some title for a \\\\"direct commit\\\\" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        	- [ ] The change is appropriate for the version bump
+        - **📝 Documentation**: Another PR \\\\\`title\\\\\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **✨ Feature Request**: Some PR title for a \\\\'new\\\\' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+
+        ## 🍒 Manual cherry picking needed!
+
+        The following pull requests could not be cherry-picked automatically because it resulted in merge conflicts.
+        For each pull request below, you need to either manually cherry pick it, or discard it by removing the \\"patch\\" label from the PR and re-generate this PR.
+
+        - [ ] [#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.
+
+        When everything above is done:
+        - [ ] Merge this PR
+        - [ ] [Follow the publish workflow run and see it finishes succesfully](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)
+
+        ---
+
+        # Generated changelog
+
+        ## 7.1.0-alpha.11
+
+        - Some PR \\\`title\\\` for a bug [#42](https://github.com/storybookjs/storybook/pull/42), thanks [@ JReinhold](https://github.com/JReinhold)
+        - Some PR \\'title\\' for a feature request [#48](https://github.com/storybookjs/storybook/pull/48), thanks [@ JReinhold](https://github.com/JReinhold)
+        - Antoher PR \\"title\\" for maintainance [#49](https://github.com/storybookjs/storybook/pull/49), thanks [@ JReinhold](https://github.com/JReinhold)"
+      `);
+    });
+
+    it('should return a correct string for non-releases with cherry picks', () => {
+      expect(generateNonReleaseDescription(changeList, manualCherryPicks)).toMatchInlineSnapshot(`
+        "This is an automated pull request. None of the changes requires a version bump, they are only internal or documentation related. Merging this PR will not trigger a new release, but documentation will be updated.
+        If you\\'re not a core maintainer with permissions to release you can ignore this pull request.
+
+        This is a list of all the PRs merged and commits pushed directly to \\\`next\\\` since the last release:
+
+        - **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Direct commit**: Some title for a \\\\"direct commit\\\\" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        	- [ ] The change is appropriate for the version bump
+        - **📝 Documentation**: Another PR \\\\\`title\\\\\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **✨ Feature Request**: Some PR title for a \\\\'new\\\\' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+
+        ## 🍒 Manual cherry picking needed!
+
+        The following pull requests could not be cherry-picked automatically because it resulted in merge conflicts.
+        For each pull request below, you need to either manually cherry pick it, or discard it by removing the \\"patch\\" label from the PR and re-generate this PR.
+
+        - [ ] [#42](https://github.com/storybookjs/storybook/pull/42): \\\`git cherry-pick -m1 -x abc123\\\`
+
+        If you\\'ve made any changes (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.
+
+        When everything above is done:
+        - [ ] Merge this PR
+        - [ ] [Approve the publish workflow run](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)"
+      `);
+    });
+
+    it('should return a correct string without cherry picks for releases', () => {
+      const changelogText = `## 7.1.0-alpha.11
+
+- Some PR \`title\` for a bug [#42](https://github.com/storybookjs/storybook/pull/42), thanks [@JReinhold](https://github.com/JReinhold)
+- Some PR 'title' for a feature request [#48](https://github.com/storybookjs/storybook/pull/48), thanks [@JReinhold](https://github.com/JReinhold)
+- Antoher PR "title" for maintainance [#49](https://github.com/storybookjs/storybook/pull/49), thanks [@JReinhold](https://github.com/JReinhold)`;
+      expect(
+        generateReleaseDescription({
+          currentVersion: '7.1.0-alpha.10',
+          nextVersion: '7.1.0-alpha.11',
+          changeList,
+          changelogText,
+        })
+      ).toMatchInlineSnapshot(`
+        "This is an automated pull request that bumps the version from \\\`7.1.0-alpha.10\\\` to \\\`7.1.0-alpha.11\\\`.
+        Once this pull request is merged, it will trigger a new release of version \\\`7.1.0-alpha.11\\\`.
+        If you\\'re not a core maintainer with permissions to release you can ignore this pull request.
+
+        ## To do
+
+        Before merging the PR, there are a few QA steps to go through:
+
+        - [ ] Add the \\"freeze\\" label to this PR, to ensure it doesn\\'t get automatically forced pushed by new changes.
+
+        And for each change below:
+
+        1. Ensure the change is appropriate for the version bump. E.g. patch release should only contain patches, not new or de-stabilizing features. If a change is not appropriate, revert the PR.
+        2. Ensure the PR is labeled correctly with one of: \\"BREAKING CHANGE\\", \\"feature request\\", \\"bug\\", \\"maintenance\\", \\"dependencies\\", \\"documentation\\", \\"build\\", \\"unknown\\".
+        3. Ensure the PR title is correct, and follows the format \\"[Area]: [Summary]\\", e.g. *\\"React: Fix hooks in CSF3 render functions\\"*. If it is not correct, change the title in the PR.
+            - Areas include: React, Vue, Core, Docs, Controls, etc.
+            - First word of summary indicates the type: “Add”, “Fix”, “Upgrade”, etc.
+            - The entire title should fit on a line
+
+        This is a list of all the PRs merged and commits pushed directly to \\\`next\\\`, that will be part of this release:
+
+        - **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Direct commit**: Some title for a \\\\"direct commit\\\\" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        	- [ ] The change is appropriate for the version bump
+        - **📝 Documentation**: Another PR \\\\\`title\\\\\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **✨ Feature Request**: Some PR title for a \\\\'new\\\\' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+
+
+
+        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.
+
+        When everything above is done:
+        - [ ] Merge this PR
+        - [ ] [Follow the publish workflow run and see it finishes succesfully](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)
+
+        ---
+
+        # Generated changelog
+
+        ## 7.1.0-alpha.11
+
+        - Some PR \\\`title\\\` for a bug [#42](https://github.com/storybookjs/storybook/pull/42), thanks [@ JReinhold](https://github.com/JReinhold)
+        - Some PR \\'title\\' for a feature request [#48](https://github.com/storybookjs/storybook/pull/48), thanks [@ JReinhold](https://github.com/JReinhold)
+        - Antoher PR \\"title\\" for maintainance [#49](https://github.com/storybookjs/storybook/pull/49), thanks [@ JReinhold](https://github.com/JReinhold)"
+      `);
+    });
+
+    it('should return a correct string for non-releases without cherry picks', () => {
+      expect(generateNonReleaseDescription(changeList)).toMatchInlineSnapshot(`
+        "This is an automated pull request. None of the changes requires a version bump, they are only internal or documentation related. Merging this PR will not trigger a new release, but documentation will be updated.
+        If you\\'re not a core maintainer with permissions to release you can ignore this pull request.
+
+        This is a list of all the PRs merged and commits pushed directly to \\\`next\\\` since the last release:
+
+        - **🐛 Bug**: Some PR title for a bug [#42](https://github.com/storybookjs/storybook/pull/42)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Direct commit**: Some title for a \\\\"direct commit\\\\" [22bb11](https://github.com/storybookjs/storybook/commit/22bb11)
+        	- [ ] The change is appropriate for the version bump
+        - **📝 Documentation**: Another PR \\\\\`title\\\\\` for docs [#11](https://github.com/storybookjs/storybook/pull/11)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **✨ Feature Request**: Some PR title for a \\\\'new\\\\' feature [#48](https://github.com/storybookjs/storybook/pull/48)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+        - **⚠️ Missing Label**: Some PR title with a missing label [#77](https://github.com/storybookjs/storybook/pull/77)
+        	- [ ] The change is appropriate for the version bump
+        	- [ ] The PR is labeled correctly
+        	- [ ] The PR title is correct
+
+
+
+        If you\\'ve made any changes (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.
+
+        When everything above is done:
+        - [ ] Merge this PR
+        - [ ] [Approve the publish workflow run](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)"
+      `);
+    });
+  });
+});
diff --git a/scripts/release/__tests__/is-pr-frozen.test.ts b/scripts/release/__tests__/is-pr-frozen.test.ts
new file mode 100644
index 000000000000..9c2ce713fb0a
--- /dev/null
+++ b/scripts/release/__tests__/is-pr-frozen.test.ts
@@ -0,0 +1,61 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable global-require */
+import path from 'path';
+import { run as isPrFrozen } from '../is-pr-frozen';
+
+// eslint-disable-next-line jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../code/__mocks__/fs-extra'));
+jest.mock('../utils/get-github-info');
+
+const fsExtra = require('fs-extra');
+const simpleGit = require('simple-git');
+const { getPullInfoFromCommit } = require('../utils/get-github-info');
+
+const CODE_DIR_PATH = path.join(__dirname, '..', '..', '..', 'code');
+const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
+
+fsExtra.__setMockFiles({
+  [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '1.0.0' }),
+});
+
+describe('isPrFrozen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return true when PR is frozen', async () => {
+    getPullInfoFromCommit.mockResolvedValue({
+      labels: ['freeze'],
+    });
+    await expect(isPrFrozen({ patch: false })).resolves.toBe(true);
+  });
+
+  it('should return false when PR is not frozen', async () => {
+    getPullInfoFromCommit.mockResolvedValue({
+      labels: [],
+    });
+    await expect(isPrFrozen({ patch: false })).resolves.toBe(false);
+  });
+
+  it('should look for patch PRs when patch is true', async () => {
+    getPullInfoFromCommit.mockResolvedValue({
+      labels: [],
+    });
+    await isPrFrozen({ patch: true });
+
+    expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-from-patch-1.0.0', {
+      '--depth': 1,
+    });
+  });
+
+  it('should look for prerelease PRs when patch is false', async () => {
+    getPullInfoFromCommit.mockResolvedValue({
+      labels: [],
+    });
+    await isPrFrozen({ patch: false });
+
+    expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-from-prerelease-1.0.0', {
+      '--depth': 1,
+    });
+  });
+});
diff --git a/scripts/release/__tests__/label-patches.test.ts b/scripts/release/__tests__/label-patches.test.ts
new file mode 100644
index 000000000000..31203529a0ca
--- /dev/null
+++ b/scripts/release/__tests__/label-patches.test.ts
@@ -0,0 +1,133 @@
+import type { LogResult } from 'simple-git';
+import ansiRegex from 'ansi-regex';
+import { run } from '../label-patches';
+import * as gitClient_ from '../utils/git-client';
+import * as githubInfo_ from '../utils/get-github-info';
+import * as github_ from '../utils/github-client';
+
+jest.mock('uuid');
+jest.mock('../utils/get-github-info');
+jest.mock('../utils/github-client');
+jest.mock('../utils/git-client', () => jest.requireActual('jest-mock-extended').mockDeep());
+
+const gitClient = jest.mocked(gitClient_);
+const github = jest.mocked(github_);
+const githubInfo = jest.mocked(githubInfo_);
+
+const remoteMock = [
+  {
+    name: 'origin',
+    refs: {
+      fetch: 'https://github.com/storybookjs/storybook.git',
+      push: 'https://github.com/storybookjs/storybook.git',
+    },
+  },
+];
+
+const gitLogMock: LogResult = {
+  all: [
+    {
+      hash: 'some-hash',
+      date: '2023-06-07T09:45:11+02:00',
+      message: 'Something else',
+      refs: 'HEAD -> main',
+      body: '',
+      author_name: 'Jeppe Reinhold',
+      author_email: 'jeppe@chromatic.com',
+    },
+    {
+      hash: 'b75879c4d3d72f7830e9c5fca9f75a303ddb194d',
+      date: '2023-06-07T09:45:11+02:00',
+      message: 'Merge pull request #55 from storybookjs/fixes',
+      refs: 'HEAD -> main',
+      body:
+        'Legal: Fix license\n' +
+        '(cherry picked from commit 930b47f011f750c44a1782267d698ccdd3c04da3)\n',
+      author_name: 'Jeppe Reinhold',
+      author_email: 'jeppe@chromatic.com',
+    },
+  ],
+  latest: null!,
+  total: 1,
+};
+
+const pullInfoMock = {
+  user: 'JReinhold',
+  id: 'pr_id',
+  pull: 55,
+  commit: '930b47f011f750c44a1782267d698ccdd3c04da3',
+  title: 'Legal: Fix license',
+  labels: ['documentation', 'patch', 'picked'],
+  links: {
+    commit:
+      '[`930b47f011f750c44a1782267d698ccdd3c04da3`](https://github.com/storybookjs/storybook/commit/930b47f011f750c44a1782267d698ccdd3c04da3)',
+    pull: '[#55](https://github.com/storybookjs/storybook/pull/55)',
+    user: '[@JReinhold](https://github.com/JReinhold)',
+  },
+};
+
+beforeEach(() => {
+  // mock IO
+  jest.clearAllMocks();
+  gitClient.getLatestTag.mockResolvedValue('v7.2.1');
+  gitClient.git.log.mockResolvedValue(gitLogMock);
+  gitClient.git.getRemotes.mockResolvedValue(remoteMock);
+  githubInfo.getPullInfoFromCommit.mockResolvedValue(pullInfoMock);
+  github.getLabelIds.mockResolvedValue({ picked: 'pick-id' });
+});
+
+test('it should fail early when no GH_TOKEN is set', async () => {
+  delete process.env.GH_TOKEN;
+  await expect(run({})).rejects.toThrowErrorMatchingInlineSnapshot(
+    `"GH_TOKEN environment variable must be set, exiting."`
+  );
+});
+
+test('it should label the PR associated with cheery picks in the current branch', async () => {
+  process.env.GH_TOKEN = 'MY_SECRET';
+
+  const writeStderr = jest.spyOn(process.stderr, 'write').mockImplementation();
+
+  await run({});
+  expect(github.githubGraphQlClient.mock.calls).toMatchInlineSnapshot(`
+    [
+      [
+        "
+          mutation ($input: AddLabelsToLabelableInput!) {
+            addLabelsToLabelable(input: $input) {
+              clientMutationId
+            }
+          }
+        ",
+        {
+          "input": {
+            "clientMutationId": "7efda802-d7d1-5d76-97d6-cc16a9f3e357",
+            "labelIds": [
+              "pick-id",
+            ],
+            "labelableId": "pr_id",
+          },
+        },
+      ],
+    ]
+  `);
+
+  expect.addSnapshotSerializer({
+    serialize: (value) => {
+      const stripAnsi = value.map((it: string) => it.replace(ansiRegex(), ''));
+      return JSON.stringify(stripAnsi, null, 2);
+    },
+    test: () => true,
+  });
+
+  expect(writeStderr.mock.calls.map(([text]) => text)).toMatchInlineSnapshot(`
+    [
+      "- Looking for latest tag\\n",
+      "✔ Found latest tag: v7.2.1\\n",
+      "- Looking at cherry pick commits since v7.2.1\\n",
+      "✔ Found the following picks 🍒:\\n Commit: 930b47f011f750c44a1782267d698ccdd3c04da3\\n PR: [#55](https://github.com/storybookjs/storybook/pull/55)\\n",
+      "- Labeling the PRs with the picked label...\\n",
+      "✔ Successfully labeled all PRs with the picked label.\\n"
+    ]
+  `);
+});
diff --git a/scripts/release/__tests__/version.test.ts b/scripts/release/__tests__/version.test.ts
new file mode 100644
index 000000000000..c33c5fc31b8b
--- /dev/null
+++ b/scripts/release/__tests__/version.test.ts
@@ -0,0 +1,234 @@
+/* eslint-disable global-require */
+/* eslint-disable no-underscore-dangle */
+import path from 'path';
+import { run as version } from '../version';
+
+// eslint-disable-next-line jest/no-mocks-import
+jest.mock('fs-extra', () => require('../../../code/__mocks__/fs-extra'));
+const fsExtra = require('fs-extra');
+
+jest.mock('../../../code/lib/cli/src/versions', () => ({
+  '@storybook/addon-a11y': '7.1.0-alpha.29',
+}));
+
+jest.mock('../../utils/exec');
+const { execaCommand } = require('../../utils/exec');
+
+jest.mock('../../utils/workspace', () => ({
+  getWorkspaces: jest.fn().mockResolvedValue([
+    {
+      name: '@storybook/addon-a11y',
+      location: 'addons/a11y',
+    },
+  ]),
+}));
+
+jest.spyOn(console, 'log').mockImplementation(() => {});
+jest.spyOn(console, 'warn').mockImplementation(() => {});
+jest.spyOn(console, 'error').mockImplementation(() => {});
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('Version', () => {
+  const CODE_DIR_PATH = path.join(__dirname, '..', '..', '..', 'code');
+  const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
+  const MANAGER_API_VERSION_PATH = path.join(
+    CODE_DIR_PATH,
+    'lib',
+    'manager-api',
+    'src',
+    'version.ts'
+  );
+  const VERSIONS_PATH = path.join(CODE_DIR_PATH, 'lib', 'cli', 'src', 'versions.ts');
+  const A11Y_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'addons', 'a11y', 'package.json');
+
+  it('should throw when release type is invalid', async () => {
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '1.0.0' }),
+      [MANAGER_API_VERSION_PATH]: `export const version = "1.0.0";`,
+      [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "1.0.0" };`,
+    });
+
+    await expect(version({ releaseType: 'invalid' })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "received": "invalid",
+          "code": "invalid_enum_value",
+          "options": [
+            "major",
+            "minor",
+            "patch",
+            "prerelease",
+            "premajor",
+            "preminor",
+            "prepatch"
+          ],
+          "path": [
+            "releaseType"
+          ],
+          "message": "Invalid enum value. Expected 'major' | 'minor' | 'patch' | 'prerelease' | 'premajor' | 'preminor' | 'prepatch', received 'invalid'"
+        }
+      ]"
+    `);
+  });
+
+  it('should throw when prerelease identifier is combined with non-pre release type', async () => {
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '1.0.0' }),
+      [MANAGER_API_VERSION_PATH]: `export const version = "1.0.0";`,
+      [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "1.0.0" };`,
+    });
+
+    await expect(version({ releaseType: 'major', preId: 'alpha' })).rejects
+      .toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "code": "custom",
+          "message": "Using prerelease identifier requires one of release types: premajor, preminor, prepatch, prerelease",
+          "path": []
+        }
+      ]"
+    `);
+  });
+
+  it('should throw when exact is combined with release type', async () => {
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '1.0.0' }),
+      [MANAGER_API_VERSION_PATH]: `export const version = "1.0.0";`,
+      [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "1.0.0" };`,
+    });
+
+    await expect(version({ releaseType: 'major', exact: '1.0.0' })).rejects
+      .toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "code": "custom",
+          "message": "Combining --exact with --release-type is invalid, but having one of them is required",
+          "path": []
+        }
+      ]"
+    `);
+  });
+
+  it('should throw when exact is invalid semver', async () => {
+    fsExtra.__setMockFiles({
+      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '1.0.0' }),
+      [MANAGER_API_VERSION_PATH]: `export const version = "1.0.0";`,
+      [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "1.0.0" };`,
+    });
+
+    await expect(version({ exact: 'not-semver' })).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "[
+        {
+          "code": "custom",
+          "message": "--exact version has to be a valid semver string",
+          "path": [
+            "exact"
+          ]
+        }
+      ]"
+    `);
+  });
+
+  it.each([
+    // prettier-ignore
+    { releaseType: 'major', currentVersion: '1.1.1', expectedVersion: '2.0.0' },
+    // prettier-ignore
+    { releaseType: 'minor', currentVersion: '1.1.1', expectedVersion: '1.2.0' },
+    // prettier-ignore
+    { releaseType: 'patch', currentVersion: '1.1.1', expectedVersion: '1.1.2' },
+    // prettier-ignore
+    { releaseType: 'premajor', preId: 'alpha', currentVersion: '1.1.1', expectedVersion: '2.0.0-alpha.0' },
+    // prettier-ignore
+    { releaseType: 'preminor', preId: 'alpha', currentVersion: '1.1.1', expectedVersion: '1.2.0-alpha.0' },
+    // prettier-ignore
+    { releaseType: 'prepatch', preId: 'alpha', currentVersion: '1.1.1', expectedVersion: '1.1.2-alpha.0' },
+    // prettier-ignore
+    { releaseType: 'prerelease', currentVersion: '1.1.1-alpha.5', expectedVersion: '1.1.1-alpha.6' },
+    // prettier-ignore
+    { releaseType: 'prerelease', preId: 'alpha', currentVersion: '1.1.1-alpha.5', expectedVersion: '1.1.1-alpha.6' },
+    // prettier-ignore
+    { releaseType: 'prerelease', preId: 'beta', currentVersion: '1.1.1-alpha.10', expectedVersion: '1.1.1-beta.0' },
+    // prettier-ignore
+    { releaseType: 'major', currentVersion: '1.1.1-rc.10', expectedVersion: '2.0.0' },
+    // prettier-ignore
+    { releaseType: 'minor', currentVersion: '1.1.1-rc.10', expectedVersion: '1.2.0' },
+    // prettier-ignore
+    { releaseType: 'patch', currentVersion: '1.1.1-rc.10', expectedVersion: '1.1.1' },
+    // prettier-ignore
+    { exact: '4.2.0-canary.69', currentVersion: '1.1.1-rc.10', expectedVersion: '4.2.0-canary.69' },
+  ])(
+    'bump with type: "$releaseType", pre id "$preId" or exact "$exact", from: $currentVersion, to: $expectedVersion',
+    async ({ releaseType, preId, exact, currentVersion, expectedVersion }) => {
+      fsExtra.__setMockFiles({
+        [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: currentVersion }),
+        [MANAGER_API_VERSION_PATH]: `export const version = "${currentVersion}";`,
+        [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "${currentVersion}" };`,
+        [A11Y_PACKAGE_JSON_PATH]: JSON.stringify({
+          version: currentVersion,
+          dependencies: {
+            '@storybook/core-server': currentVersion,
+            'unrelated-package-a': '1.0.0',
+          },
+          devDependencies: {
+            'unrelated-package-b': currentVersion,
+            '@storybook/core-common': `^${currentVersion}`,
+          },
+          peerDependencies: {
+            '@storybook/preview-api': `*`,
+            '@storybook/svelte': '0.1.1',
+            '@storybook/manager-api': `~${currentVersion}`,
+          },
+        }),
+        [VERSIONS_PATH]: `export default { "@storybook/addon-a11y": "${currentVersion}" };`,
+      });
+
+      await version({ releaseType, preId, exact });
+
+      expect(fsExtra.writeJson).toHaveBeenCalledWith(
+        CODE_PACKAGE_JSON_PATH,
+        { version: expectedVersion },
+        { spaces: 2 }
+      );
+      expect(fsExtra.writeFile).toHaveBeenCalledWith(
+        MANAGER_API_VERSION_PATH,
+        `export const version = "${expectedVersion}";`
+      );
+      expect(fsExtra.writeFile).toHaveBeenCalledWith(
+        VERSIONS_PATH,
+        `export default { "@storybook/addon-a11y": "${expectedVersion}" };`
+      );
+      expect(fsExtra.writeJson).toHaveBeenCalledWith(
+        A11Y_PACKAGE_JSON_PATH,
+        expect.objectContaining({
+          // should update package version
+          version: expectedVersion,
+          dependencies: {
+            // should update storybook dependencies matching current version
+            '@storybook/core-server': expectedVersion,
+            'unrelated-package-a': '1.0.0',
+          },
+          devDependencies: {
+            // should not update non-storybook dependencies, even if they match current version
+            'unrelated-package-b': currentVersion,
+            // should update dependencies with range modifiers correctly (e.g. ^1.0.0 -> ^2.0.0)
+            '@storybook/core-common': `^${expectedVersion}`,
+          },
+          peerDependencies: {
+            // should not update storybook depenedencies if they don't match current version
+            '@storybook/preview-api': `*`,
+            '@storybook/svelte': '0.1.1',
+            '@storybook/manager-api': `~${expectedVersion}`,
+          },
+        }),
+        { spaces: 2 }
+      );
+      expect(execaCommand).toHaveBeenCalledWith('yarn install --mode=update-lockfile', {
+        cwd: path.join(CODE_DIR_PATH),
+        stdio: undefined,
+      });
+    }
+  );
+});
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
new file mode 100644
index 000000000000..35654d9d601c
--- /dev/null
+++ b/scripts/release/generate-pr-description.ts
@@ -0,0 +1,287 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import { z } from 'zod';
+import dedent from 'ts-dedent';
+import { setOutput } from '@actions/core';
+import type { Change } from './utils/get-changes';
+import { getChanges, LABELS_BY_IMPORTANCE } from './utils/get-changes';
+import { getCurrentVersion } from './get-current-version';
+
+program
+  .name('generate-pr-description')
+  .description('generate a PR description for a release')
+  .option(
+    '-C, --current-version <version>',
+    '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(
+    '-M, --manual-cherry-picks <commits>',
+    'A stringified JSON array of commit hashes, of patch PRs that needs to be cherry-picked manually'
+  )
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+const optionsSchema = z.object({
+  currentVersion: z.string().optional(),
+  nextVersion: z.string().optional(),
+  unpickedPatches: z.boolean().optional(),
+  manualCherryPicks: z
+    .string()
+    .default('[]')
+    .transform((val) => JSON.parse(val))
+    .refine((val) => Array.isArray(val)),
+  verbose: z.boolean().optional(),
+});
+
+type Options = {
+  currentVersion?: string;
+  nextVersion?: string;
+  unpickedPatches?: boolean;
+  manualCherryPicks?: string[];
+  verbose: boolean;
+};
+
+const CHANGE_TITLES_TO_IGNORE = [
+  /^bump version.*/i,
+  /^merge branch.*/i,
+  /\[skip ci\]/i,
+  /\[ci skip\]/i,
+];
+
+export const mapToChangelist = ({
+  changes,
+  isRelease,
+}: {
+  changes: Change[];
+  isRelease: boolean;
+}): string => {
+  return changes
+    .filter((change) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const titleToIgnore of CHANGE_TITLES_TO_IGNORE) {
+        if (change.title.match(titleToIgnore)) {
+          return false;
+        }
+      }
+      return true;
+    })
+    .map((change) => {
+      const lines: string[] = [];
+      if (!change.pull) {
+        lines.push(`- **⚠️ Direct commit**: ${change.title} ${change.links.commit}`);
+        if (isRelease) {
+          lines.push('\t- [ ] The change is appropriate for the version bump');
+        }
+        return lines.join('\n');
+      }
+
+      const label = (change.labels
+        ?.filter((l) => Object.keys(LABELS_BY_IMPORTANCE).includes(l))
+        .sort(
+          (a, b) =>
+            Object.keys(LABELS_BY_IMPORTANCE).indexOf(a) -
+            Object.keys(LABELS_BY_IMPORTANCE).indexOf(b)
+        )[0] || 'unknown') as keyof typeof LABELS_BY_IMPORTANCE;
+
+      lines.push(`- **${LABELS_BY_IMPORTANCE[label]}**: ${change.title} ${change.links.pull}`);
+
+      if (isRelease) {
+        lines.push('\t- [ ] The change is appropriate for the version bump');
+        lines.push('\t- [ ] The PR is labeled correctly');
+        lines.push('\t- [ ] The PR title is correct');
+      }
+      return lines.join('\n');
+    })
+    .join('\n');
+};
+
+export const mapCherryPicksToTodo = ({
+  commits,
+  changes,
+  verbose,
+}: {
+  commits: string[];
+  changes: Change[];
+  verbose?: boolean;
+}): string => {
+  const list = commits
+    .map((commit) => {
+      const foundChange = changes.find((change) => change.commit === commit);
+      if (!foundChange) {
+        throw new Error(
+          `Cherry pick commit "${commit}" not found in changes, this should not happen?!`
+        );
+      }
+      return `- [ ] ${foundChange.links.pull}: \`git cherry-pick -m1 -x ${commit}\``;
+    })
+    .join('\n');
+
+  if (verbose) {
+    console.log(`🍒 Cherry pick list:\n${list}`);
+  }
+  return dedent`## 🍒 Manual cherry picking needed!
+
+  The following pull requests could not be cherry-picked automatically because it resulted in merge conflicts.
+  For each pull request below, you need to either manually cherry pick it, or discard it by removing the "patch" label from the PR and re-generate this PR.
+  
+  ${list}`;
+};
+
+export const generateReleaseDescription = ({
+  currentVersion,
+  nextVersion,
+  changeList,
+  changelogText,
+  manualCherryPicks,
+}: {
+  currentVersion: string;
+  nextVersion: string;
+  changeList: string;
+  changelogText: string;
+  manualCherryPicks?: string;
+}): string => {
+  return (
+    dedent`This is an automated pull request that bumps the version from \`${currentVersion}\` to \`${nextVersion}\`.
+  Once this pull request is merged, it will trigger a new release of version \`${nextVersion}\`.
+  If you're not a core maintainer with permissions to release you can ignore this pull request.
+
+  ## To do
+
+  Before merging the PR, there are a few QA steps to go through:
+
+  - [ ] Add the "freeze" label to this PR, to ensure it doesn't get automatically forced pushed by new changes.
+  
+  And for each change below:
+  
+  1. Ensure the change is appropriate for the version bump. E.g. patch release should only contain patches, not new or de-stabilizing features. If a change is not appropriate, revert the PR.
+  2. Ensure the PR is labeled correctly with one of: ${Object.keys(LABELS_BY_IMPORTANCE)
+    .map((label) => `"${label}"`)
+    .join(', ')}.
+  3. Ensure the PR title is correct, and follows the format "[Area]: [Summary]", e.g. *"React: Fix hooks in CSF3 render functions"*. If it is not correct, change the title in the PR.
+      - Areas include: React, Vue, Core, Docs, Controls, etc.
+      - First word of summary indicates the type: “Add”, “Fix”, “Upgrade”, etc.
+      - The entire title should fit on a line
+  
+  This is a list of all the PRs merged and commits pushed directly to \`next\`, that will be part of this release:
+  
+  ${changeList}
+
+  ${manualCherryPicks || ''}
+
+  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.
+  
+  When everything above is done:
+  - [ ] Merge this PR
+  - [ ] [Follow the publish workflow run and see it finishes succesfully](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)
+  
+  ---
+  
+  # Generated changelog
+  
+  ${changelogText}`
+      // don't mention contributors in the release PR, to avoid spamming them
+      .replaceAll('[@', '[@ ')
+      .replaceAll('"', '\\"')
+      .replaceAll('`', '\\`')
+      .replaceAll("'", "\\'")
+  );
+};
+
+export const generateNonReleaseDescription = (
+  changeList: string,
+  manualCherryPicks?: string
+): string => {
+  return (
+    dedent`This is an automated pull request. None of the changes requires a version bump, they are only internal or documentation related. Merging this PR will not trigger a new release, but documentation will be updated.
+  If you're not a core maintainer with permissions to release you can ignore this pull request.
+  
+  This is a list of all the PRs merged and commits pushed directly to \`next\` since the last release:
+  
+  ${changeList}
+
+  ${manualCherryPicks || ''}
+
+  If you've made any changes (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.
+  
+  When everything above is done:
+  - [ ] Merge this PR
+  - [ ] [Approve the publish workflow run](https://github.com/storybookjs/storybook/actions/workflows/publish.yml)`
+      // don't mention contributors in the release PR, to avoid spamming them
+      .replaceAll('[@', '[@ ')
+      .replaceAll('"', '\\"')
+      .replaceAll('`', '\\`')
+      .replaceAll("'", "\\'")
+  );
+};
+
+export const run = async (rawOptions: unknown) => {
+  const { nextVersion, unpickedPatches, verbose, manualCherryPicks, ...options } =
+    optionsSchema.parse(rawOptions) as Options;
+
+  if (!nextVersion) {
+    console.log(
+      '🚨 --next-version option not specified, generating PR description assuming no release is needed'
+    );
+  }
+
+  const currentVersion = options.currentVersion || (await getCurrentVersion());
+
+  console.log(
+    `💬 Generating PR description for ${chalk.blue(nextVersion)} between ${chalk.green(
+      currentVersion
+    )} and ${chalk.green('HEAD')}`
+  );
+
+  const { changes, changelogText } = await getChanges({
+    version: nextVersion,
+    from: `v${currentVersion}`,
+    to: 'HEAD',
+    unpickedPatches,
+    verbose,
+  });
+
+  const hasCherryPicks = manualCherryPicks?.length > 0;
+
+  const description = nextVersion
+    ? generateReleaseDescription({
+        currentVersion,
+        nextVersion,
+        changeList: mapToChangelist({ changes, isRelease: true }),
+        changelogText,
+        ...(hasCherryPicks && {
+          manualCherryPicks: mapCherryPicksToTodo({
+            commits: manualCherryPicks,
+            changes,
+            verbose,
+          }),
+        }),
+      })
+    : generateNonReleaseDescription(
+        mapToChangelist({ changes, isRelease: false }),
+        hasCherryPicks
+          ? mapCherryPicksToTodo({
+              commits: manualCherryPicks,
+              changes,
+              verbose,
+            })
+          : undefined
+      );
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('description', description);
+  }
+  console.log(`✅ Generated PR description for ${chalk.blue(nextVersion)}`);
+  if (verbose) {
+    console.log(description);
+  }
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts
new file mode 100644
index 000000000000..78514d7a68af
--- /dev/null
+++ b/scripts/release/get-changelog-from-file.ts
@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+import { setOutput } from '@actions/core';
+import chalk from 'chalk';
+import { program } from 'commander';
+import { readFile } from 'fs-extra';
+import path from 'path';
+import semver from 'semver';
+import dedent from 'ts-dedent';
+import { getCurrentVersion } from './get-current-version';
+
+program
+  .name('get-changelog-from-file')
+  .description(
+    'get changelog entry for specific version. If not version argument specified it will use the current version in code/package.json'
+  )
+  .arguments('[version]')
+  .option('-E, --no-escape', 'Escape quote-like characters, so the output is safe in CLIs', true)
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+export const getChangelogFromFile = async (args: {
+  version?: string;
+  escape?: boolean;
+  verbose?: boolean;
+}) => {
+  const version = args.version || (await getCurrentVersion());
+  const isPrerelease = semver.prerelease(version) !== null;
+  const changelogFilename = isPrerelease ? 'CHANGELOG.prerelease.md' : 'CHANGELOG.md';
+  const changelogPath = path.join(__dirname, '..', '..', changelogFilename);
+
+  console.log(`📝 Getting changelog from ${chalk.blue(changelogPath)}`);
+
+  const fullChangelog = await readFile(changelogPath, 'utf-8');
+  const changelogForVersion = fullChangelog.split(/(^|\n)## /).find((v) => v.startsWith(version));
+  if (!changelogForVersion) {
+    throw new Error(
+      `Could not find changelog entry for version ${chalk.blue(version)} in ${chalk.green(
+        changelogPath
+      )}`
+    );
+  }
+  const result = args.escape
+    ? `## ${changelogForVersion}`
+        .replaceAll('"', '\\"')
+        .replaceAll('`', '\\`')
+        .replaceAll("'", "\\'")
+    : `## ${changelogForVersion}`;
+
+  console.log(dedent`📝 Changelog entry found:
+      ${result}`);
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('changelog', result);
+  }
+  return result;
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  getChangelogFromFile({
+    version: parsed.args[0],
+    escape: parsed.opts().escape,
+    verbose: parsed.opts().verbose,
+  }).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts
new file mode 100644
index 000000000000..413c101640b6
--- /dev/null
+++ b/scripts/release/get-current-version.ts
@@ -0,0 +1,25 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import { setOutput } from '@actions/core';
+import path from 'path';
+import { readJson } from 'fs-extra';
+
+const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
+const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
+
+export const getCurrentVersion = async () => {
+  console.log(`📐 Reading current version of Storybook...`);
+  const { version } = (await readJson(CODE_PACKAGE_JSON_PATH)) as { version: string };
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('current-version', version);
+  }
+  console.log(`📦 Current version is ${chalk.green(version)}`);
+  return version;
+};
+
+if (require.main === module) {
+  getCurrentVersion().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts
new file mode 100644
index 000000000000..3ece5480236d
--- /dev/null
+++ b/scripts/release/get-version-changelog.ts
@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+import { setOutput } from '@actions/core';
+import chalk from 'chalk';
+import { program } from 'commander';
+import { getCurrentVersion } from './get-current-version';
+import { getChanges } from './utils/get-changes';
+
+program
+  .name('get-version-changelog')
+  .description(
+    'get changelog for specific version. If no version argument specified it will use the current version in code/package.json'
+  )
+  .arguments('[version]')
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+export const getVersionChangelog = async (args: { version?: string; verbose?: boolean }) => {
+  const version = args.version || (await getCurrentVersion());
+
+  console.log(`📝 Getting changelog for version ${chalk.blue(version)}`);
+
+  const { changelogText } = await getChanges({ from: version, version, verbose: args.verbose });
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('changelog', changelogText);
+  }
+  return changelogText;
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  getVersionChangelog({ version: parsed.args[0], verbose: parsed.opts().verbose }).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts
new file mode 100644
index 000000000000..c96259d3fa40
--- /dev/null
+++ b/scripts/release/is-pr-frozen.ts
@@ -0,0 +1,101 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import { simpleGit } from 'simple-git';
+import { setOutput } from '@actions/core';
+import path from 'path';
+import { readJson } from 'fs-extra';
+import { getPullInfoFromCommit } from './utils/get-github-info';
+
+program
+  .name('is-pr-frozen')
+  .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('-V, --verbose', 'Enable verbose logging', false);
+
+const git = simpleGit();
+
+const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
+const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
+
+const getCurrentVersion = async () => {
+  console.log(`📐 Reading current version of Storybook...`);
+  const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
+  return version;
+};
+
+const getRepo = async (verbose?: boolean): Promise<string> => {
+  const remotes = await git.getRemotes(true);
+  const originRemote = remotes.find((remote) => remote.name === 'origin');
+  if (!originRemote) {
+    console.error(
+      'Could not determine repository URL because no remote named "origin" was found. Remotes found:'
+    );
+    console.dir(remotes, { depth: null, colors: true });
+    throw new Error('No remote named "origin" found');
+  }
+  const pushUrl = originRemote.refs.push;
+  const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, '');
+  if (verbose) {
+    console.log(`📦 Extracted repo: ${chalk.blue(repo)}`);
+  }
+  return repo;
+};
+
+export const run = async (options: unknown) => {
+  const { verbose, patch } = options as { verbose?: boolean; patch?: boolean };
+
+  const version = await getCurrentVersion();
+  const branch = `version-from-${patch ? 'patch' : 'prerelease'}-${version}`;
+
+  console.log(`💬 Determining if pull request from branch '${chalk.blue(branch)}' is frozen`);
+
+  console.log(`⬇️ Fetching remote 'origin/${branch}'...`);
+  try {
+    await git.fetch('origin', branch, { '--depth': 1 });
+  } catch (error) {
+    console.warn(
+      `❗ Could not fetch remote 'origin/${branch}', it probably does not exist yet, which is okay`
+    );
+    console.warn(error);
+    console.log(`💧 Pull request doesn't exist yet! 😎`);
+    if (process.env.GITHUB_ACTIONS === 'true') {
+      setOutput('frozen', false);
+    }
+    return false;
+  }
+
+  const commit = await git.revparse(`origin/${branch}`);
+  console.log(`🔍 Found commit: ${commit}`);
+
+  const repo = await getRepo(verbose);
+
+  const pullRequest = await getPullInfoFromCommit({ repo, commit }).catch((err) => {
+    console.error(`🚨 Could not get pull requests from commit: ${commit}`);
+    console.error(err);
+    throw err;
+  });
+  console.log(`🔍 Found pull request:
+  ${JSON.stringify(pullRequest, null, 2)}`);
+
+  const isFrozen = pullRequest.labels?.includes('freeze');
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('frozen', isFrozen);
+  }
+  if (isFrozen) {
+    console.log(`🧊 Pull request is frozen! 🥶`);
+  } else {
+    console.log(`🔥 Pull request is on fire! 🥵`);
+  }
+  return isFrozen;
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts
new file mode 100644
index 000000000000..5a3f7ef11c9e
--- /dev/null
+++ b/scripts/release/is-prerelease.ts
@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import { setOutput } from '@actions/core';
+import semver from 'semver';
+import { getCurrentVersion } from './get-current-version';
+
+program
+  .name('is-prerelease')
+  .description('returns true if the current version is a prerelease')
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+export const isPrerelease = async (versionArg?: string) => {
+  const version = versionArg || (await getCurrentVersion());
+  const result = semver.prerelease(version) !== null;
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('prerelease', result);
+  }
+  console.log(
+    `📦 Current version ${chalk.green(version)} ${
+      result ? chalk.blue('IS') : chalk.red('IS NOT')
+    } a prerelease`
+  );
+
+  return result;
+};
+
+if (require.main === module) {
+  isPrerelease().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts
new file mode 100644
index 000000000000..b5acd8c90ab7
--- /dev/null
+++ b/scripts/release/is-version-published.ts
@@ -0,0 +1,86 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import { setOutput } from '@actions/core';
+import fetch from 'node-fetch';
+import { getCurrentVersion } from './get-current-version';
+
+program
+  .name('is-prerelease [version]')
+  .description('returns true if the current version is a prerelease')
+  .arguments('[version]');
+
+const isVersionPublished = async ({
+  packageName,
+  version,
+  verbose,
+}: {
+  packageName: string;
+  version: string;
+  verbose?: boolean;
+}) => {
+  const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(version)}`;
+  console.log(`⛅ Checking if ${prettyPackage} is published...`);
+
+  if (verbose) {
+    console.log(`Fetching from npm:`);
+    console.log(`https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(version)}`);
+  }
+  const response = await fetch(`https://registry.npmjs.org/${packageName}/${version}`);
+  if (response.status === 404) {
+    console.log(`🌤️ ${prettyPackage} is not published`);
+    return false;
+  }
+  if (response.status !== 200) {
+    console.error(
+      `Unexpected status code when checking the current version on npm: ${response.status}`
+    );
+    console.error(await response.text());
+    throw new Error(
+      `Unexpected status code when checking the current version on npm: ${response.status}`
+    );
+  }
+  const data = await response.json();
+  if (verbose) {
+    console.log(`Response from npm:`);
+    console.log(data);
+  }
+  if (data.version !== version) {
+    // this should never happen
+    console.error(
+      `Unexpected version received when checking the current version on npm: ${data.version}`
+    );
+    console.error(JSON.stringify(data, null, 2));
+    throw new Error(
+      `Unexpected version received when checking the current version on npm: ${data.version}`
+    );
+  }
+
+  console.log(`⛈️ ${prettyPackage} is published`);
+  return true;
+};
+
+export const run = async (args: unknown[], options: unknown) => {
+  const { verbose } = options as { verbose?: boolean };
+
+  const version = (args[0] as string) || (await getCurrentVersion());
+
+  const isAlreadyPublished = await isVersionPublished({
+    version,
+    packageName: '@storybook/manager-api',
+    verbose,
+  });
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('published', isAlreadyPublished);
+  }
+  return isAlreadyPublished;
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.args, parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts
new file mode 100644
index 000000000000..bf18358f877a
--- /dev/null
+++ b/scripts/release/label-patches.ts
@@ -0,0 +1,83 @@
+import program from 'commander';
+import { v4 as uuidv4 } from 'uuid';
+import ora from 'ora';
+import { getLabelIds, githubGraphQlClient } from './utils/github-client';
+import { getPullInfoFromCommits, getRepo } from './utils/get-changes';
+import { getLatestTag, git } from './utils/git-client';
+
+program
+  .name('label-patches')
+  .description('Label all patches applied in current branch up to the latest release tag.');
+
+async function labelPR(id: string, labelId: string) {
+  await githubGraphQlClient(
+    `
+      mutation ($input: AddLabelsToLabelableInput!) {
+        addLabelsToLabelable(input: $input) {
+          clientMutationId
+        }
+      }
+    `,
+    { input: { labelIds: [labelId], labelableId: id, clientMutationId: uuidv4() } }
+  );
+}
+
+export const run = async (_: unknown) => {
+  if (!process.env.GH_TOKEN) {
+    throw new Error('GH_TOKEN environment variable must be set, exiting.');
+  }
+
+  const spinner = ora('Looking for latest tag').start();
+  const latestTag = await getLatestTag();
+  spinner.succeed(`Found latest tag: ${latestTag}`);
+
+  const spinner2 = ora(`Looking at cherry pick commits since ${latestTag}`).start();
+  const commitsSinceLatest = await git.log({ from: latestTag, '--first-parent': null });
+  console.log(commitsSinceLatest);
+  const cherryPicked = commitsSinceLatest.all.flatMap((it) => {
+    const result = it.body.match(/\(cherry picked from commit (\b[0-9a-f]{7,40}\b)\)/);
+    return result ? [result?.[1]] : [];
+  });
+
+  if (cherryPicked.length === 0) {
+    spinner2.fail('No cherry pick commits found to label.');
+    return;
+  }
+
+  const repo = await getRepo();
+  const pullRequests = (
+    await getPullInfoFromCommits({
+      repo,
+      commits: cherryPicked.map((hash) => ({ hash })),
+    })
+  ).filter((it) => it.id != null);
+
+  if (pullRequests.length === 0) {
+    spinner2.fail(
+      `Found picks: ${cherryPicked.join(', ')}, but no associated pull request found to label.`
+    );
+    return;
+  }
+
+  const commitWithPr = pullRequests.map((pr) => `Commit: ${pr.commit}\n PR: ${pr.links.pull}`);
+
+  spinner2.succeed(`Found the following picks 🍒:\n ${commitWithPr.join('\n')}`);
+
+  const spinner3 = ora(`Labeling the PRs with the picked label...`).start();
+  try {
+    const labelToId = await getLabelIds({ repo, labelNames: ['picked'] });
+    await Promise.all(pullRequests.map((pr) => labelPR(pr.id, labelToId.picked)));
+    spinner3.succeed(`Successfully labeled all PRs with the picked label.`);
+  } catch (e) {
+    spinner3.fail(`Something went wrong when labelling the PRs.`);
+    console.error(e);
+  }
+};
+
+if (require.main === module) {
+  const options = program.parse(process.argv);
+  run(options).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts
new file mode 100644
index 000000000000..20a3f2d6a870
--- /dev/null
+++ b/scripts/release/pick-patches.ts
@@ -0,0 +1,154 @@
+/* eslint-disable no-console */
+/* eslint-disable no-await-in-loop */
+import program from 'commander';
+import chalk from 'chalk';
+import { v4 as uuidv4 } from 'uuid';
+import type { GraphQlQueryResponseData } from '@octokit/graphql';
+import ora from 'ora';
+import { simpleGit } from 'simple-git';
+import { setOutput } from '@actions/core';
+import { getUnpickedPRs } from './utils/get-unpicked-prs';
+import { githubGraphQlClient } from './utils/github-client';
+
+program.name('pick-patches').description('Cherry pick patch PRs back to main');
+
+const logger = console;
+
+const OWNER = 'storybookjs';
+const REPO = 'storybook';
+const SOURCE_BRANCH = 'next';
+
+const git = simpleGit();
+
+interface PR {
+  number: number;
+  id: string;
+  branch: string;
+  title: string;
+  mergeCommit: string;
+}
+
+const LABEL = {
+  PATCH: 'patch',
+  PICKED: 'picked',
+  DOCUMENTATION: 'documentation',
+} as const;
+
+function formatPR(pr: PR): string {
+  return `https://github.com/${OWNER}/${REPO}/pull/${pr.number} "${pr.title}" ${chalk.yellow(
+    pr.mergeCommit
+  )}`;
+}
+
+// @ts-expect-error not used atm
+async function getLabelIds(labelNames: string[]) {
+  const query = labelNames.join('+');
+  const result = await githubGraphQlClient<GraphQlQueryResponseData>(
+    `
+      query ($owner: String!, $repo: String!, $q: String!) {
+        repository(owner: $owner, name: $repo) {
+          labels(query: $q, first: 10) {
+            nodes {
+              id
+              name
+              description
+            }
+          }
+        }
+      }
+    `,
+    {
+      owner: OWNER,
+      repo: REPO,
+      q: query,
+    }
+  );
+
+  const { labels } = result.repository;
+  const labelToId = {} as Record<string, string>;
+  labels.nodes.forEach((label: { name: string; id: string }) => {
+    labelToId[label.name] = label.id;
+  });
+  return labelToId;
+}
+
+// @ts-expect-error not used atm
+async function labelPR(id: string, labelToId: Record<string, string>) {
+  await githubGraphQlClient(
+    `
+      mutation ($input: AddLabelsToLabelableInput!) {
+        addLabelsToLabelable(input: $input) {
+          clientMutationId
+        }
+      }
+    `,
+    {
+      input: {
+        labelIds: [labelToId[LABEL.PICKED]],
+        labelableId: id,
+        clientMutationId: uuidv4(),
+      },
+    }
+  );
+}
+
+export const run = async (_: unknown) => {
+  if (!process.env.GH_TOKEN) {
+    logger.error('GH_TOKEN environment variable must be set, exiting.');
+    process.exit(1);
+  }
+
+  const sourceBranch = SOURCE_BRANCH;
+
+  const spinner = ora('Searching for patch PRs to cherry-pick').start();
+
+  // const labelToId = await getLabelIds(Object.values(LABEL));
+  const patchPRs = await getUnpickedPRs(sourceBranch);
+
+  if (patchPRs.length > 0) {
+    spinner.succeed(`Found ${patchPRs.length} PRs to cherry-pick to main.`);
+  } else {
+    spinner.warn('No PRs found.');
+  }
+
+  const failedCherryPicks: string[] = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const pr of patchPRs) {
+    const prSpinner = ora(`Cherry picking #${pr.number}`).start();
+
+    try {
+      await git.raw(['cherry-pick', '-m', '1', '-x', pr.mergeCommit]);
+      prSpinner.succeed(`Picked: ${formatPR(pr)}`);
+    } catch (pickError) {
+      prSpinner.fail(`Failed to automatically pick: ${formatPR(pr)}`);
+      logger.error(pickError.message);
+      const abort = ora(`Aborting cherry pick for merge commit: ${pr.mergeCommit}`).start();
+      try {
+        await git.raw(['cherry-pick', '--abort']);
+        abort.stop();
+      } catch (abortError) {
+        abort.warn(`Failed to abort cherry pick (${pr.mergeCommit})`);
+        logger.error(pickError.message);
+      }
+      failedCherryPicks.push(pr.mergeCommit);
+      prSpinner.info(
+        `This PR can be picked manually with: ${chalk.grey(
+          `git cherry-pick -m1 -x ${pr.mergeCommit}`
+        )}`
+      );
+    }
+  }
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('failed-cherry-picks', JSON.stringify(failedCherryPicks));
+  }
+};
+
+if (require.main === module) {
+  const options = program.parse(process.argv);
+  run(options).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts
new file mode 100644
index 000000000000..f3d3516b6a98
--- /dev/null
+++ b/scripts/release/publish.ts
@@ -0,0 +1,206 @@
+/* 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 fetch from 'node-fetch';
+import dedent from 'ts-dedent';
+import { execaCommand } from '../utils/exec';
+
+program
+  .name('publish')
+  .description('publish all packages')
+  .requiredOption(
+    '-T, --tag <tag>',
+    'Specify which distribution tag to set for the version being published. Required, since leaving it undefined would publish with the "latest" tag'
+  )
+  .option('-D, --dry-run', 'Do not publish, only output to shell', false)
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+const optionsSchema = z
+  .object({
+    tag: z.string(),
+    verbose: z.boolean().optional(),
+    dryRun: z.boolean().optional(),
+  })
+  .refine((schema) => (schema.tag ? !semver.valid(schema.tag) : true), {
+    message:
+      'The tag can not be a valid semver version, it must be a plain string like "next" or "latest"',
+  });
+
+type Options = {
+  tag: string;
+  verbose: boolean;
+  dryRun?: boolean;
+};
+
+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 (verbose?: boolean) => {
+  if (verbose) {
+    console.log(`📐 Reading current version of Storybook...`);
+  }
+  const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
+  console.log(`📐 Current version of Storybook is ${chalk.green(version)}`);
+  return version;
+};
+
+const isCurrentVersionPublished = async ({
+  packageName,
+  currentVersion,
+  verbose,
+}: {
+  packageName: string;
+  currentVersion: string;
+  verbose?: boolean;
+}) => {
+  const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(currentVersion)}`;
+  console.log(`⛅ Checking if ${prettyPackage} is published...`);
+
+  if (verbose) {
+    console.log(`Fetching from npm:`);
+    console.log(
+      `https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(currentVersion)}`
+    );
+  }
+  const response = await fetch(`https://registry.npmjs.org/${packageName}/${currentVersion}`);
+  if (response.status === 404) {
+    console.log(`🌤️ ${prettyPackage} is not published`);
+    return false;
+  }
+  if (response.status !== 200) {
+    console.error(
+      `Unexpected status code when checking the current version on npm: ${response.status}`
+    );
+    console.error(await response.text());
+    throw new Error(
+      `Unexpected status code when checking the current version on npm: ${response.status}`
+    );
+  }
+  const data = await response.json();
+  if (verbose) {
+    console.log(`Response from npm:`);
+    console.log(data);
+  }
+  if (data.version !== currentVersion) {
+    // this should never happen
+    console.error(
+      `Unexpected version received when checking the current version on npm: ${data.version}`
+    );
+    console.error(JSON.stringify(data, null, 2));
+    throw new Error(
+      `Unexpected version received when checking the current version on npm: ${data.version}`
+    );
+  }
+
+  console.log(`⛈️ ${prettyPackage} is published`);
+  return true;
+};
+
+const buildAllPackages = async () => {
+  console.log(`🏗️ Building all packages...`);
+  await execaCommand('yarn task --task=compile --start-from=compile --no-link', {
+    stdio: 'inherit',
+    cwd: CODE_DIR_PATH,
+  });
+  console.log(`🏗️ Packages successfully built`);
+};
+
+const publishAllPackages = async ({
+  tag,
+  verbose,
+  dryRun,
+}: {
+  tag: string;
+  verbose?: boolean;
+  dryRun?: boolean;
+}) => {
+  console.log(`📦 Publishing all packages...`);
+  const command = `yarn workspaces foreach --parallel --no-private --verbose npm publish --tolerate-republish --tag ${tag}`;
+  if (verbose) {
+    console.log(`📦 Executing: ${command}`);
+  }
+  if (dryRun) {
+    console.log(`📦 Dry run, skipping publish. Would have executed:
+    ${chalk.blue(command)}`);
+    return;
+  }
+
+  // Note this is to fool `ts-node` into not turning the `import()` into a `require()`.
+  // See: https://github.com/TypeStrong/ts-node/discussions/1290
+  // prettier-ignore
+  const pRetry = (
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    (await new Function('specifier', 'return import(specifier)')(
+      'p-retry'
+      )) as typeof import('p-retry')
+      ).default;
+  /**
+   * 'yarn npm publish' will fail if just one package fails to publish.
+   * But it will continue through with all the other packages, and --tolerate-republish makes it okay to publish the same version again.
+   * So we can safely retry the whole publishing process if it fails.
+   * It's not uncommon for the registry to fail often, which Yarn catches by checking the registry after a package has been published.
+   */
+  await pRetry(
+    () =>
+      execaCommand(command, {
+        stdio: 'inherit',
+        cwd: CODE_DIR_PATH,
+      }),
+    {
+      retries: 4,
+      onFailedAttempt: (error) =>
+        console.log(
+          chalk.yellow(
+            dedent`❗One or more packages failed to publish, retrying...
+            This was attempt number ${error.attemptNumber}, there are ${error.retriesLeft} retries left. 🤞`
+          )
+        ),
+    }
+  );
+  console.log(`📦 Packages successfully published`);
+};
+
+export const run = async (options: unknown) => {
+  if (!validateOptions(options)) {
+    return;
+  }
+  const { tag, dryRun, verbose } = options;
+
+  // Get the current version from code/package.json
+  const currentVersion = await getCurrentVersion(verbose);
+  const isAlreadyPublished = await isCurrentVersionPublished({
+    currentVersion,
+    packageName: '@storybook/manager-api',
+    verbose,
+  });
+  if (isAlreadyPublished) {
+    throw new Error(
+      `⛔ Current version (${chalk.green(currentVersion)}) is already published, aborting.`
+    );
+  }
+  await buildAllPackages();
+  await publishAllPackages({ tag, verbose, dryRun });
+
+  console.log(
+    `✅ Published all packages with version ${chalk.green(currentVersion)}${
+      tag ? ` at tag ${chalk.blue(tag)}` : ''
+    }`
+  );
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts
new file mode 100644
index 000000000000..c6ea25b80831
--- /dev/null
+++ b/scripts/release/unreleased-changes-exists.ts
@@ -0,0 +1,86 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import program from 'commander';
+import { z } from 'zod';
+import { setOutput } from '@actions/core';
+import { intersection } from 'lodash';
+import type { Change } from './utils/get-changes';
+import { RELEASED_LABELS, getChanges } from './utils/get-changes';
+import { getCurrentVersion } from './get-current-version';
+
+program
+  .name('are-changes-unreleased')
+  .description('check if any changes since a release should be released')
+  .option(
+    '-F, --from <version>',
+    'Which version/tag/commit to go back and check changes from. Defaults to latest release tag'
+  )
+  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch" label')
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+const optionsSchema = z.object({
+  from: z.string().optional(),
+  unpickedPatches: z.boolean().optional(),
+  verbose: z.boolean().optional(),
+});
+
+type Options = {
+  from?: string;
+  unpickedPatches?: boolean;
+  verbose: boolean;
+};
+
+const validateOptions = (options: { [key: string]: any }): options is Options => {
+  optionsSchema.parse(options);
+  return true;
+};
+
+export const run = async (
+  options: unknown
+): Promise<{ changesToRelease: Change[]; hasChangesToRelease: boolean }> => {
+  if (!validateOptions(options)) {
+    // this will never return because the validator throws
+    return { changesToRelease: [], hasChangesToRelease: false };
+  }
+  const { from, unpickedPatches, verbose } = options;
+
+  const currentVersion = await getCurrentVersion();
+
+  console.log(`📐 Checking if there are any unreleased changes...`);
+
+  const { changes } = await getChanges({
+    version: currentVersion,
+    from: from || currentVersion,
+    to: 'HEAD',
+    unpickedPatches,
+    verbose,
+  });
+
+  const changesToRelease = changes.filter(
+    ({ labels }) => intersection(Object.keys(RELEASED_LABELS), labels).length > 0
+  );
+
+  const hasChangesToRelease = changesToRelease.length > 0;
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('has-changes-to-release', hasChangesToRelease);
+  }
+  if (hasChangesToRelease) {
+    console.log(
+      `${chalk.green('🦋 The following changes are releasable')}:
+${chalk.blue(changesToRelease.map(({ title, pull }) => `  #${pull}: ${title}`).join('\n'))}`
+    );
+  } else {
+    console.log(chalk.red('🫙 No changes to release!'));
+  }
+
+  return { changesToRelease, hasChangesToRelease };
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/utils/__mocks__/get-github-info.js b/scripts/release/utils/__mocks__/get-github-info.js
new file mode 100644
index 000000000000..2fa98bd4cb48
--- /dev/null
+++ b/scripts/release/utils/__mocks__/get-github-info.js
@@ -0,0 +1,4 @@
+module.exports = {
+  getPullInfoFromCommit: jest.fn(),
+  getPullInfoFromPullRequest: jest.fn(),
+};
diff --git a/scripts/release/utils/get-changes.ts b/scripts/release/utils/get-changes.ts
new file mode 100644
index 000000000000..5a250bfd893c
--- /dev/null
+++ b/scripts/release/utils/get-changes.ts
@@ -0,0 +1,266 @@
+/* eslint-disable no-console */
+import chalk from 'chalk';
+import semver from 'semver';
+import type { PullRequestInfo } from './get-github-info';
+import { getPullInfoFromCommit } from './get-github-info';
+import { getUnpickedPRs } from './get-unpicked-prs';
+import { git } from './git-client';
+
+export const RELEASED_LABELS = {
+  'BREAKING CHANGE': '❗ Breaking Change',
+  'feature request': '✨ Feature Request',
+  bug: '🐛 Bug',
+  maintenance: '🔧 Maintenance',
+  dependencies: '📦 Dependencies',
+} as const;
+
+export const UNRELEASED_LABELS = {
+  documentation: '📝 Documentation',
+  build: '🏗️ Build',
+  unknown: '❔ Missing Label',
+} as const;
+
+export const LABELS_BY_IMPORTANCE = {
+  ...RELEASED_LABELS,
+  ...UNRELEASED_LABELS,
+} as const;
+
+const getCommitAt = async (id: string, verbose?: boolean) => {
+  if (!semver.valid(id)) {
+    console.log(`🔍 ${chalk.red(id)} is not a valid semver string, assuming it is a commit hash`);
+    return id;
+  }
+  const version = id.startsWith('v') ? id : `v${id}`;
+  const commitSha = (await git.raw(['rev-list', '-n', '1', version])).split('\n')[0];
+  if (verbose) {
+    console.log(`🔍 Commit at tag ${chalk.green(version)}: ${chalk.blue(commitSha)}`);
+  }
+  return commitSha;
+};
+
+export const getFromCommit = async (from?: string | undefined, verbose?: boolean) => {
+  let actualFrom = from;
+  if (!from) {
+    console.log(`🔍 No 'from' specified, finding latest version tag, fetching all of them...`);
+    // await git.fetch('origin', ['--all', '--tags']);
+    const { latest } = await git.tags(['v*', '--sort=-v:refname', '--merged']);
+    if (!latest) {
+      throw new Error(
+        'Could not automatically detect which commit to generate from, because no version tag was found in the history. Have you fetch tags?'
+      );
+    }
+    actualFrom = latest;
+    if (verbose) {
+      console.log(`🔍 No 'from' specified, found latest tag: ${chalk.blue(latest)}`);
+    }
+  }
+  const commit = await getCommitAt(actualFrom, verbose);
+  if (verbose) {
+    console.log(`🔍 Found 'from' commit: ${chalk.blue(commit)}`);
+  }
+  return commit;
+};
+
+export const getToCommit = async (to?: string | undefined, verbose?: boolean) => {
+  if (!to) {
+    const head = await git.revparse('HEAD');
+    if (verbose) {
+      console.log(`🔍 No 'to' specified, HEAD is at commit: ${chalk.blue(head)}`);
+    }
+    return head;
+  }
+
+  const commit = await getCommitAt(to, verbose);
+  if (verbose) {
+    console.log(`🔍 Found 'to' commit: ${chalk.blue(commit)}`);
+  }
+  return commit;
+};
+
+export const getAllCommitsBetween = async ({
+  from,
+  to,
+  verbose,
+}: {
+  from: string;
+  to?: string;
+  verbose?: boolean;
+}) => {
+  const logResult = await git.log({ from, to, '--first-parent': null });
+  if (verbose) {
+    console.log(
+      `🔍 Found ${chalk.blue(logResult.total)} commits between ${chalk.green(
+        `${from}`
+      )} and ${chalk.green(`${to}`)}:`
+    );
+    console.dir(logResult.all, { depth: null, colors: true });
+  }
+  return logResult.all;
+};
+
+export const getRepo = async (verbose?: boolean): Promise<string> => {
+  const remotes = await git.getRemotes(true);
+  const originRemote = remotes.find((remote) => remote.name === 'origin');
+  if (!originRemote) {
+    console.error(
+      'Could not determine repository URL because no remote named "origin" was found. Remotes found:'
+    );
+    console.dir(remotes, { depth: null, colors: true });
+    throw new Error('No remote named "origin" found');
+  }
+  const pushUrl = originRemote.refs.push;
+  const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, '');
+  if (verbose) {
+    console.log(`📦 Extracted repo: ${chalk.blue(repo)}`);
+  }
+  return repo;
+};
+
+export const getPullInfoFromCommits = async ({
+  repo,
+  commits,
+  verbose,
+}: {
+  repo: string;
+  commits: readonly { hash: string }[];
+  verbose?: boolean;
+}): Promise<PullRequestInfo[]> => {
+  const pullRequests = await Promise.all(
+    commits.map((commit) =>
+      getPullInfoFromCommit({
+        repo,
+        commit: commit.hash,
+      })
+    )
+  );
+  if (verbose) {
+    console.log(`🔍 Found pull requests:`);
+    console.dir(pullRequests, { depth: null, colors: true });
+  }
+  return pullRequests;
+};
+
+export type Change = PullRequestInfo;
+
+export const mapToChanges = ({
+  commits,
+  pullRequests,
+  unpickedPatches,
+  verbose,
+}: {
+  commits: readonly { hash: string; message?: string }[];
+  pullRequests: PullRequestInfo[];
+  unpickedPatches?: boolean;
+  verbose?: boolean;
+}): Change[] => {
+  if (pullRequests.length !== commits.length) {
+    // not all commits are associated with a pull request, but the pullRequests array should still contain those commits
+    console.error('Pull requests and commits are not the same length, this should not happen');
+    console.error(`Pull Requests: ${pullRequests.length}`);
+    console.dir(pullRequests, { depth: null, colors: true });
+    console.error(`Commits: ${commits.length}`);
+    console.dir(commits, { depth: null, colors: true });
+    throw new Error('Pull requests and commits are not the same length, this should not happen');
+  }
+  const allEntries = pullRequests.map((pr, index) => {
+    return {
+      ...pr,
+      title: pr.title || commits[index].message,
+    };
+  });
+
+  const changes: Change[] = [];
+  allEntries.forEach((entry) => {
+    // filter out any duplicate entries, eg. when multiple commits are associated with the same pull request
+    if (entry.pull && changes.findIndex((existing) => entry.pull === existing.pull) !== -1) {
+      return;
+    }
+    // filter out any entries that are not patches if unpickedPatches is set. this will also filter out direct commits
+    if (unpickedPatches && !entry.labels?.includes('patch')) {
+      return;
+    }
+    changes.push(entry);
+  });
+
+  if (verbose) {
+    console.log(`📝 Generated changelog entries:`);
+    console.dir(changes, { depth: null, colors: true });
+  }
+  return changes;
+};
+
+export const getChangelogText = ({
+  changes,
+  version,
+}: {
+  changes: Change[];
+  version: string;
+}): string => {
+  const heading = `## ${version}`;
+  const formattedEntries = changes
+    .filter((entry) => {
+      // don't include direct commits that are not from pull requests
+      if (!entry.pull) {
+        return false;
+      }
+      // only include PRs that with labels listed in LABELS_FOR_CHANGELOG
+      return entry.labels?.some((label) => Object.keys(RELEASED_LABELS).includes(label));
+    })
+    .map((entry) => {
+      const { title, links } = entry;
+      const { pull, commit, user } = links;
+      return pull
+        ? `- ${title} - ${pull}, thanks ${user}!`
+        : `- ⚠️ _Direct commit_ ${title} - ${commit} by ${user}`;
+    })
+    .sort();
+  const text = [heading, '', ...formattedEntries].join('\n');
+
+  console.log(`✅ Generated Changelog:`);
+  console.log(text);
+
+  return text;
+};
+
+export const getChanges = async ({
+  version,
+  from,
+  to,
+  unpickedPatches,
+  verbose,
+}: {
+  version: string;
+  from?: string;
+  to?: string;
+  unpickedPatches?: boolean;
+  verbose?: boolean;
+}) => {
+  console.log(`💬 Getting changes for ${chalk.blue(version)}`);
+
+  let commits;
+  if (unpickedPatches) {
+    commits = (await getUnpickedPRs('next', verbose)).map((it) => ({ hash: it.mergeCommit }));
+  } else {
+    commits = await getAllCommitsBetween({
+      from: await getFromCommit(from, verbose),
+      to: await getToCommit(to, verbose),
+      verbose,
+    });
+  }
+
+  const repo = await getRepo(verbose);
+  const pullRequests = await getPullInfoFromCommits({ repo, commits, verbose }).catch((err) => {
+    console.error(
+      `🚨 Could not get pull requests from commits, this is usually because you have unpushed commits, or you haven't set the GH_TOKEN environment variable`
+    );
+    console.error(err);
+    throw err;
+  });
+  const changes = mapToChanges({ commits, pullRequests, unpickedPatches, verbose });
+  const changelogText = getChangelogText({
+    changes,
+    version,
+  });
+
+  return { changes, changelogText };
+};
diff --git a/scripts/release/utils/get-github-info.ts b/scripts/release/utils/get-github-info.ts
new file mode 100644
index 000000000000..65508bcc05ae
--- /dev/null
+++ b/scripts/release/utils/get-github-info.ts
@@ -0,0 +1,297 @@
+/**
+ * This file is soft-forked from @changesets/get-github-info
+ * https://github.com/changesets/changesets/tree/main/packages/get-github-info
+ *
+ * The only modification is that it also returns the PR title and labels
+ */
+
+import DataLoader from 'dataloader';
+import fetch from 'node-fetch';
+
+const validRepoNameRegex = /^[\w.-]+\/[\w.-]+$/;
+
+type RequestData =
+  | { kind: 'commit'; repo: string; commit: string }
+  | { kind: 'pull'; repo: string; pull: number };
+
+type ReposWithCommitsAndPRsToFetch = Record<
+  string,
+  ({ kind: 'commit'; commit: string } | { kind: 'pull'; pull: number })[]
+>;
+
+function makeQuery(repos: ReposWithCommitsAndPRsToFetch) {
+  const query = `
+      query {
+        ${Object.keys(repos)
+          .map(
+            (repo, i) =>
+              `a${i}: repository(
+            owner: ${JSON.stringify(repo.split('/')[0])}
+            name: ${JSON.stringify(repo.split('/')[1])}
+          ) {
+            ${repos[repo]
+              .map((data) =>
+                data.kind === 'commit'
+                  ? `a${data.commit}: object(expression: ${JSON.stringify(data.commit)}) {
+            ... on Commit {
+            commitUrl
+            associatedPullRequests(first: 50) {
+              nodes {
+                number
+                id
+                title
+                url
+                mergedAt
+                labels(first: 50) {
+                  nodes {
+                    name
+                  }
+                }
+                author {
+                  login
+                  url
+                }
+              }
+            }
+            author {
+              user {
+                login
+                url
+              }
+            }
+          }}`
+                  : `pr__${data.pull}: pullRequest(number: ${data.pull}) {
+                    url
+                    title
+                    author {
+                      login
+                      url
+                    }
+                    labels(first: 50) {
+                      nodes {
+                        name
+                      }
+                    }    
+                    mergeCommit {
+                      commitUrl
+                      oid
+                    }
+                  }`
+              )
+              .join('\n')}
+          }`
+          )
+          .join('\n')}
+        }
+    `;
+  return query;
+}
+
+// why are we using dataloader?
+// it provides use with two things
+// 1. caching
+// since getInfo will be called inside of changeset's getReleaseLine
+// and there could be a lot of release lines for a single commit
+// caching is important so we don't do a bunch of requests for the same commit
+// 2. batching
+// getReleaseLine will be called a large number of times but it'll be called at the same time
+// so instead of doing a bunch of network requests, we can do a single one.
+const GHDataLoader = new DataLoader(
+  async (requests: RequestData[]) => {
+    if (!process.env.GH_TOKEN) {
+      throw new Error(
+        'Please create a GitHub personal access token at https://github.com/settings/tokens/new with `read:user` and `repo:status` permissions and add it as the GH_TOKEN environment variable'
+      );
+    }
+    const repos: ReposWithCommitsAndPRsToFetch = {};
+    requests.forEach(({ repo, ...data }) => {
+      if (repos[repo] === undefined) {
+        repos[repo] = [];
+      }
+      repos[repo].push(data);
+    });
+
+    const data = await fetch('https://api.github.com/graphql', {
+      method: 'POST',
+      headers: {
+        Authorization: `Token ${process.env.GH_TOKEN}`,
+      },
+      body: JSON.stringify({ query: makeQuery(repos) }),
+    }).then((x: any) => x.json());
+
+    if (data.errors) {
+      throw new Error(
+        `An error occurred when fetching data from GitHub\n${JSON.stringify(data.errors, null, 2)}`
+      );
+    }
+
+    // this is mainly for the case where there's an authentication problem
+    if (!data.data) {
+      throw new Error(`An error occurred when fetching data from GitHub\n${JSON.stringify(data)}`);
+    }
+
+    const cleanedData: Record<string, { commit: Record<string, any>; pull: Record<string, any> }> =
+      {};
+    Object.keys(repos).forEach((repo, index) => {
+      const output: { commit: Record<string, any>; pull: Record<string, any> } = {
+        commit: {},
+        pull: {},
+      };
+      cleanedData[repo] = output;
+      Object.entries(data.data[`a${index}`]).forEach(([field, value]) => {
+        // this is "a" because that's how it was when it was first written, "a" means it's a commit not a pr
+        // we could change it to commit__ but then we have to get new GraphQL results from the GH API to put in the tests
+        if (field[0] === 'a') {
+          output.commit[field.substring(1)] = value;
+        } else {
+          output.pull[field.replace('pr__', '')] = value;
+        }
+      });
+    });
+
+    return requests.map(
+      ({ repo, ...rest }) =>
+        cleanedData[repo][rest.kind][rest.kind === 'pull' ? rest.pull : rest.commit]
+    );
+  },
+  { maxBatchSize: 50 }
+);
+
+export type PullRequestInfo = {
+  user: string | null;
+  id: string | null;
+  title: string | null;
+  commit: string | null;
+  pull: number | null;
+  labels: string[] | null;
+  links: {
+    commit: string;
+    pull: string | null;
+    user: string | null;
+  };
+};
+
+export async function getPullInfoFromCommit(request: {
+  commit: string;
+  repo: string;
+}): Promise<PullRequestInfo> {
+  if (!request.commit) {
+    throw new Error('Please pass a commit SHA to getInfo');
+  }
+
+  if (!request.repo) {
+    throw new Error('Please pass a GitHub repository in the form of userOrOrg/repoName to getInfo');
+  }
+
+  if (!validRepoNameRegex.test(request.repo)) {
+    throw new Error(
+      `Please pass a valid GitHub repository in the form of userOrOrg/repoName to getInfo (it has to match the "${validRepoNameRegex.source}" pattern)`
+    );
+  }
+
+  const data = await GHDataLoader.load({ kind: 'commit', ...request });
+  if (!data) {
+    return {
+      id: null,
+      user: null,
+      pull: null,
+      commit: request.commit,
+      title: null,
+      labels: null,
+      links: {
+        commit: request.commit,
+        pull: null,
+        user: null,
+      },
+    };
+  }
+  let user = null;
+  if (data.author && data.author.user) {
+    user = data.author.user;
+  }
+
+  const associatedPullRequest =
+    data.associatedPullRequests &&
+    data.associatedPullRequests.nodes &&
+    data.associatedPullRequests.nodes.length
+      ? (data.associatedPullRequests.nodes as any[]).sort((a, b) => {
+          if (a.mergedAt === null && b.mergedAt === null) {
+            return 0;
+          }
+          if (a.mergedAt === null) {
+            return 1;
+          }
+          if (b.mergedAt === null) {
+            return -1;
+          }
+          const aDate = new Date(a.mergedAt);
+          const bDate = new Date(b.mergedAt);
+          if (aDate > bDate) {
+            return 1;
+          }
+          if (aDate < bDate) {
+            return -1;
+          }
+          return 0;
+        })[0]
+      : null;
+  if (associatedPullRequest) {
+    user = associatedPullRequest.author;
+  }
+
+  return {
+    user: user ? user.login : null,
+    id: associatedPullRequest ? associatedPullRequest.id : null,
+    pull: associatedPullRequest ? associatedPullRequest.number : null,
+    commit: request.commit,
+    title: associatedPullRequest ? associatedPullRequest.title : null,
+    labels: associatedPullRequest
+      ? (associatedPullRequest.labels.nodes || []).map((label: { name: string }) => label.name)
+      : null,
+    links: {
+      commit: `[\`${request.commit}\`](${data.commitUrl})`,
+      pull: associatedPullRequest
+        ? `[#${associatedPullRequest.number}](${associatedPullRequest.url})`
+        : null,
+      user: user ? `[@${user.login}](${user.url})` : null,
+    },
+  };
+}
+
+export async function getPullInfoFromPullRequest(request: {
+  pull: number;
+  repo: string;
+}): Promise<PullRequestInfo> {
+  if (request.pull === undefined) {
+    throw new Error('Please pass a pull request number');
+  }
+
+  if (!request.repo) {
+    throw new Error('Please pass a GitHub repository in the form of userOrOrg/repoName to getInfo');
+  }
+
+  if (!validRepoNameRegex.test(request.repo)) {
+    throw new Error(
+      `Please pass a valid GitHub repository in the form of userOrOrg/repoName to getInfo (it has to match the "${validRepoNameRegex.source}" pattern)`
+    );
+  }
+
+  const data = await GHDataLoader.load({ kind: 'pull', ...request });
+  const user = data?.author;
+  const title = data?.title;
+  const commit = data?.mergeCommit;
+
+  return {
+    user: user ? user.login : null,
+    id: null,
+    pull: request.pull,
+    commit: commit ? commit.oid : null,
+    title: title || null,
+    labels: data ? (data.labels.nodes || []).map((label: { name: string }) => label.name) : null,
+    links: {
+      commit: commit ? `[\`${commit.oid}\`](${commit.commitUrl})` : null,
+      pull: `[#${request.pull}](https://github.com/${request.repo}/pull/${request.pull})`,
+      user: user ? `[@${user.login}](${user.url})` : null,
+    },
+  };
+}
diff --git a/scripts/release/utils/get-unpicked-prs.ts b/scripts/release/utils/get-unpicked-prs.ts
new file mode 100644
index 000000000000..bd8abeb57bc9
--- /dev/null
+++ b/scripts/release/utils/get-unpicked-prs.ts
@@ -0,0 +1,72 @@
+/* eslint-disable no-console */
+import type { GraphQlQueryResponseData } from '@octokit/graphql';
+import { githubGraphQlClient } from './github-client';
+
+export interface PR {
+  number: number;
+  id: string;
+  branch: string;
+  title: string;
+  mergeCommit: string;
+}
+
+export async function getUnpickedPRs(baseBranch: string, verbose?: boolean): Promise<Array<PR>> {
+  console.log(`💬 Getting unpicked patch pull requests...`);
+  const result = await githubGraphQlClient<GraphQlQueryResponseData>(
+    `
+      query ($owner: String!, $repo: String!, $state: PullRequestState!, $order: IssueOrder!) {
+        repository(owner: $owner, name: $repo) {
+          pullRequests(states: [$state], labels: ["patch"], orderBy: $order, first: 50, baseRefName: "next") {
+            nodes {
+              id
+              number
+              title
+              baseRefName
+              mergeCommit { 
+                oid
+              }
+              labels(first: 20) {
+                nodes {
+                  name
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+    {
+      owner: 'storybookjs',
+      repo: 'storybook',
+      order: {
+        field: 'UPDATED_AT',
+        direction: 'DESC',
+      },
+      state: 'MERGED',
+    }
+  );
+
+  const {
+    pullRequests: { nodes },
+  } = result.repository;
+
+  const prs = nodes.map((node: any) => ({
+    number: node.number,
+    id: node.id,
+    branch: node.baseRefName,
+    title: node.title,
+    mergeCommit: node.mergeCommit.oid,
+    labels: node.labels.nodes.map((l: any) => l.name),
+  }));
+
+  const unpickedPRs = prs
+    .filter((pr: any) => !pr.labels.includes('picked'))
+    .filter((pr: any) => pr.branch === baseBranch)
+    .reverse();
+
+  if (verbose) {
+    console.log(`🔍 Found unpicked patch pull requests:
+  ${JSON.stringify(unpickedPRs, null, 2)}`);
+  }
+  return unpickedPRs;
+}
diff --git a/scripts/release/utils/git-client.ts b/scripts/release/utils/git-client.ts
new file mode 100644
index 000000000000..9b4e05144f8f
--- /dev/null
+++ b/scripts/release/utils/git-client.ts
@@ -0,0 +1,7 @@
+import { simpleGit } from 'simple-git';
+
+export const git = simpleGit();
+
+export async function getLatestTag() {
+  return (await git.tags(['v*', '--sort=-v:refname', '--merged'])).latest;
+}
diff --git a/scripts/release/utils/github-client.ts b/scripts/release/utils/github-client.ts
new file mode 100644
index 000000000000..3c6a2355e0dc
--- /dev/null
+++ b/scripts/release/utils/github-client.ts
@@ -0,0 +1,40 @@
+import type { GraphQlQueryResponseData } from '@octokit/graphql';
+import { graphql } from '@octokit/graphql';
+
+export const githubGraphQlClient = graphql.defaults({
+  headers: { authorization: `token ${process.env.GH_TOKEN}` },
+});
+
+export async function getLabelIds({
+  repo: fullRepo,
+  labelNames,
+}: {
+  labelNames: string[];
+  repo: string;
+}) {
+  const query = labelNames.join('+');
+  const [owner, repo] = fullRepo.split('/');
+  const result = await githubGraphQlClient<GraphQlQueryResponseData>(
+    `
+      query ($owner: String!, $repo: String!, $q: String!) {
+        repository(owner: $owner, name: $repo) {
+          labels(query: $q, first: 10) {
+            nodes {
+              id
+              name
+              description
+            }
+          }
+        }
+      }
+    `,
+    { owner, repo, q: query }
+  );
+
+  const { labels } = result.repository;
+  const labelToId: Record<string, string> = {};
+  labels.nodes.forEach((label: { name: string; id: string }) => {
+    labelToId[label.name] = label.id;
+  });
+  return labelToId;
+}
diff --git a/scripts/release/version.ts b/scripts/release/version.ts
new file mode 100644
index 000000000000..03f608567392
--- /dev/null
+++ b/scripts/release/version.ts
@@ -0,0 +1,260 @@
+/* eslint-disable no-console */
+import { setOutput } from '@actions/core';
+import { readFile, readJson, writeFile, writeJson } from 'fs-extra';
+import chalk from 'chalk';
+import path from 'path';
+import program from 'commander';
+import semver from 'semver';
+import { z } from 'zod';
+import type { Workspace } from '../utils/workspace';
+import { getWorkspaces } from '../utils/workspace';
+import { execaCommand } from '../utils/exec';
+
+program
+  .name('version')
+  .description('version all packages')
+  .option(
+    '-R, --release-type <major|minor|patch|prerelease>',
+    'Which release type to use to bump the version'
+  )
+  .option('-P, --pre-id <id>', 'Which prerelease identifer to change to, eg. "alpha", "beta", "rc"')
+  .option(
+    '-E, --exact <version>',
+    'Use exact version instead of calculating from current version, eg. "7.2.0-canary.123". Can not be combined with --release-type or --pre-id'
+  )
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+const optionsSchema = z
+  .object({
+    releaseType: z
+      .enum(['major', 'minor', 'patch', 'prerelease', 'premajor', 'preminor', 'prepatch'])
+      .optional(),
+    preId: z.string().optional(),
+    exact: z
+      .string()
+      .optional()
+      .refine((version) => (version ? semver.valid(version) !== null : true), {
+        message: '--exact version has to be a valid semver string',
+      }),
+    verbose: z.boolean().optional(),
+  })
+  .superRefine((schema, ctx) => {
+    // manual union validation because zod + commander is not great in this case
+    const hasExact = 'exact' in schema && schema.exact;
+    const hasReleaseType = 'releaseType' in schema && schema.releaseType;
+    if ((hasExact && hasReleaseType) || (!hasExact && !hasReleaseType)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          'Combining --exact with --release-type is invalid, but having one of them is required',
+      });
+    }
+    if (schema.preId && !schema.releaseType.startsWith('pre')) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          'Using prerelease identifier requires one of release types: premajor, preminor, prepatch, prerelease',
+      });
+    }
+    return z.NEVER;
+  });
+
+type BaseOptions = { verbose: boolean };
+type BumpOptions = BaseOptions & {
+  releaseType: semver.ReleaseType;
+  preId?: string;
+};
+type ExactOptions = BaseOptions & {
+  exact: semver.ReleaseType;
+};
+type Options = BumpOptions | ExactOptions;
+
+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 () => {
+  console.log(`📐 Reading current version of Storybook...`);
+  const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
+  return version;
+};
+
+const bumpCodeVersion = async (nextVersion: string) => {
+  console.log(`🤜 Bumping version of ${chalk.cyan('code')}'s package.json...`);
+
+  const codePkgJson = await readJson(CODE_PACKAGE_JSON_PATH);
+
+  codePkgJson.version = nextVersion;
+  await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 });
+
+  console.log(`✅ Bumped version of ${chalk.cyan('code')}'s package.json`);
+};
+
+const bumpAllPackageVersions = async (nextVersion: string, verbose?: boolean) => {
+  console.log(`🤜 Bumping version of ${chalk.cyan('all packages')}...`);
+
+  console.log(`✅ Bumped version of ${chalk.cyan('all packages')}`);
+};
+
+const bumpVersionSources = async (currentVersion: string, nextVersion: string) => {
+  const filesToUpdate = [
+    path.join(CODE_DIR_PATH, 'lib', 'manager-api', 'src', 'version.ts'),
+    path.join(CODE_DIR_PATH, 'lib', 'cli', 'src', 'versions.ts'),
+  ];
+  console.log(`🤜 Bumping versions in...:\n  ${chalk.cyan(filesToUpdate.join('\n  '))}`);
+
+  await Promise.all(
+    filesToUpdate.map(async (filename) => {
+      const currentContent = await readFile(filename, { encoding: 'utf-8' });
+      const nextContent = currentContent.replaceAll(currentVersion, nextVersion);
+      return writeFile(filename, nextContent);
+    })
+  );
+
+  console.log(`✅ Bumped versions in:\n  ${chalk.cyan(filesToUpdate.join('\n  '))}`);
+};
+
+const bumpAllPackageJsons = async ({
+  packages,
+  currentVersion,
+  nextVersion,
+  verbose,
+}: {
+  packages: Workspace[];
+  currentVersion: string;
+  nextVersion: string;
+  verbose?: boolean;
+}) => {
+  console.log(
+    `🤜 Bumping versions and dependencies in ${chalk.cyan(
+      `all ${packages.length} package.json`
+    )}'s...`
+  );
+  // 1. go through all packages in the monorepo
+  await Promise.all(
+    packages.map(async (pkg) => {
+      // 2. get the package.json
+      const packageJsonPath = path.join(CODE_DIR_PATH, pkg.location, 'package.json');
+      const packageJson: {
+        version: string;
+        dependencies: Record<string, string>;
+        devDependencies: Record<string, string>;
+        peerDependencies: Record<string, string>;
+        [key: string]: any;
+      } = await readJson(packageJsonPath);
+      // 3. bump the version
+      packageJson.version = nextVersion;
+      const { dependencies, devDependencies, peerDependencies } = packageJson;
+      if (verbose) {
+        console.log(
+          `    Bumping ${chalk.blue(pkg.name)}'s version to ${chalk.yellow(nextVersion)}`
+        );
+      }
+      // 4. go through all deps in the package.json
+      Object.entries({ dependencies, devDependencies, peerDependencies }).forEach(
+        ([depType, deps]) => {
+          if (!deps) {
+            return;
+          }
+          // 5. find all storybook deps
+          Object.entries(deps)
+            .filter(
+              ([depName, depVersion]) =>
+                depName.startsWith('@storybook/') &&
+                // ignore storybook dependneices that don't use the current version
+                depVersion.includes(currentVersion)
+            )
+            .forEach(([depName, depVersion]) => {
+              // 6. bump the version of any found storybook dep
+              const nextDepVersion = depVersion.replace(currentVersion, nextVersion);
+              if (verbose) {
+                console.log(
+                  `    Bumping ${chalk.blue(pkg.name)}'s ${chalk.red(depType)} on ${chalk.green(
+                    depName
+                  )} from ${chalk.yellow(depVersion)} to ${chalk.yellow(nextDepVersion)}`
+                );
+              }
+              packageJson[depType][depName] = nextDepVersion;
+            });
+        }
+      );
+      await writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    })
+  );
+  console.log(`✅ Bumped peer dependency versions in ${chalk.cyan('all packages')}`);
+};
+
+export const run = async (options: unknown) => {
+  if (!validateOptions(options)) {
+    return;
+  }
+  const { verbose } = options;
+
+  console.log(`🚛 Finding Storybook packages...`);
+
+  const [packages, currentVersion] = await Promise.all([getWorkspaces(), getCurrentVersion()]);
+
+  console.log(
+    `📦 found ${packages.length} storybook packages at version ${chalk.red(currentVersion)}`
+  );
+  if (verbose) {
+    const formattedPackages = packages.map(
+      (pkg) => `${chalk.green(pkg.name.padEnd(60))}: ${chalk.cyan(pkg.location)}`
+    );
+    console.log(`📦 Packages:
+        ${formattedPackages.join('\n    ')}`);
+  }
+
+  let nextVersion: string;
+
+  if ('exact' in options && options.exact) {
+    console.log(`📈 Exact version selected: ${chalk.green(options.exact)}`);
+    nextVersion = options.exact;
+  } else {
+    const { releaseType, preId } = options as BumpOptions;
+    console.log(`📈 Release type selected: ${chalk.green(releaseType)}`);
+    if (preId) {
+      console.log(`🆔 Version prerelease identifier selected: ${chalk.yellow(preId)}`);
+    }
+
+    nextVersion = semver.inc(currentVersion, releaseType, preId);
+
+    console.log(
+      `⏭ Bumping version ${chalk.blue(currentVersion)} with release type ${chalk.green(
+        releaseType
+      )}${
+        preId ? ` and ${chalk.yellow(preId)}` : ''
+      } results in version: ${chalk.bgGreenBright.bold(nextVersion)}`
+    );
+  }
+
+  console.log(`⏭ Bumping all packages to ${chalk.blue(nextVersion)}...`);
+
+  await bumpCodeVersion(nextVersion);
+  await bumpVersionSources(currentVersion, nextVersion);
+  await bumpAllPackageJsons({ packages, currentVersion, nextVersion, verbose });
+
+  console.log(`⬆️ Updating lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`);
+  await execaCommand(`yarn install --mode=update-lockfile`, {
+    cwd: path.join(CODE_DIR_PATH),
+    stdio: verbose ? 'inherit' : undefined,
+  });
+  console.log(`✅ Updated lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`);
+
+  if (process.env.GITHUB_ACTIONS === 'true') {
+    setOutput('current-version', currentVersion);
+    setOutput('next-version', nextVersion);
+  }
+};
+
+if (require.main === module) {
+  const options = program.parse().opts();
+  run(options).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts
new file mode 100644
index 000000000000..2fe20f88d4c6
--- /dev/null
+++ b/scripts/release/write-changelog.ts
@@ -0,0 +1,111 @@
+/* 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 { readFile, writeFile } from 'fs-extra';
+import { getChanges } from './utils/get-changes';
+
+program
+  .name('write-changelog')
+  .description(
+    'write changelog based on merged PRs and commits. the <version> argument describes the changelog entry heading, but NOT which commits/PRs to include, must be a semver string'
+  )
+  .arguments('<version>')
+  .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch" label')
+  .option(
+    '-F, --from <tag>',
+    'Which tag or commit to generate changelog from, eg. "7.0.7". Leave unspecified to select latest released tag in git history'
+  )
+  .option(
+    '-T, --to <tag>',
+    'Which tag or commit to generate changelog to, eg. "7.1.0-beta.8". Leave unspecified to select HEAD commit'
+  )
+  .option('-D, --dry-run', 'Do not write file, only output to shell', false)
+  .option('-V, --verbose', 'Enable verbose logging', false);
+
+const optionsSchema = z.object({
+  unpickedPatches: z.boolean().optional(),
+  from: z.string().optional(),
+  to: z.string().optional(),
+  verbose: z.boolean().optional(),
+  dryRun: z.boolean().optional(),
+});
+
+type Options = {
+  unpickedPatches?: boolean;
+  from?: string;
+  to?: string;
+  verbose: boolean;
+  dryRun?: boolean;
+};
+
+const validateOptions = (args: unknown[], options: { [key: string]: any }): options is Options => {
+  optionsSchema.parse(options);
+  if (args.length !== 1 || !semver.valid(args[0] as string)) {
+    console.error(
+      `🚨 Invalid arguments, expected a single argument with the version to generate changelog for, eg. ${chalk.green(
+        '7.1.0-beta.8'
+      )}`
+    );
+    return false;
+  }
+  return true;
+};
+
+const writeToFile = async ({
+  changelogText,
+  version,
+  verbose,
+}: {
+  changelogText: string;
+  version: string;
+  verbose?: boolean;
+}) => {
+  const isPrerelease = semver.prerelease(version) !== null;
+  const changelogFilename = isPrerelease ? 'CHANGELOG.prerelease.md' : 'CHANGELOG.md';
+  const changelogPath = path.join(__dirname, '..', '..', changelogFilename);
+
+  if (verbose) {
+    console.log(`📝 Writing changelog to ${chalk.blue(changelogPath)}`);
+  }
+
+  const currentChangelog = await readFile(changelogPath, 'utf-8');
+  const nextChangelog = [changelogText, currentChangelog].join('\n\n');
+
+  await writeFile(changelogPath, nextChangelog);
+};
+
+export const run = async (args: unknown[], options: unknown) => {
+  if (!validateOptions(args, options)) {
+    return;
+  }
+  const { from, to, unpickedPatches, dryRun, verbose } = options;
+  const version = args[0] as string;
+
+  console.log(
+    `💬 Generating changelog for ${chalk.blue(version)} between ${chalk.green(
+      from || 'latest'
+    )} and ${chalk.green(to || 'HEAD')}`
+  );
+
+  const { changelogText } = await getChanges({ version, from, to, unpickedPatches, verbose });
+
+  if (dryRun) {
+    console.log(`📝 Dry run, not writing file`);
+    return;
+  }
+
+  await writeToFile({ changelogText, version, verbose });
+
+  console.log(`✅ Wrote Changelog to file`);
+};
+
+if (require.main === module) {
+  const parsed = program.parse();
+  run(parsed.args, parsed.opts()).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts
index b741d80afcb2..8d398bed8784 100644
--- a/scripts/utils/options.ts
+++ b/scripts/utils/options.ts
@@ -7,6 +7,7 @@ import type { PromptObject, Falsy, PrevCaller, PromptType } from 'prompts';
 import program from 'commander';
 import dedent from 'ts-dedent';
 import chalk from 'chalk';
+// eslint-disable-next-line import/extensions
 import kebabCase from 'lodash/kebabCase.js';
 
 // Option types
diff --git a/scripts/utils/workspace.ts b/scripts/utils/workspace.ts
index c490d593f1b5..3219c558599f 100644
--- a/scripts/utils/workspace.ts
+++ b/scripts/utils/workspace.ts
@@ -4,7 +4,7 @@ import { execaCommand } from './exec';
 
 export type Workspace = { name: string; location: string };
 
-async function getWorkspaces() {
+export async function getWorkspaces() {
   const { stdout } = await execaCommand('yarn workspaces list --json', {
     cwd: CODE_DIRECTORY,
     shell: true,
diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
index 03b8f4198c31..6543e32aa9a2 100644
--- a/scripts/utils/yarn.ts
+++ b/scripts/utils/yarn.ts
@@ -24,8 +24,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
     ...storybookVersions,
     'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
-    '@playwright/test': '1.32.3',
-    playwright: '1.32.3',
+    '@playwright/test': '^1.35.0',
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
@@ -65,7 +64,7 @@ export const configureYarn2ForVerdaccio = async ({ cwd, dryRun, debug }: YarnOpt
     `yarn config set enableGlobalCache false`,
     `yarn config set enableMirror false`,
     // ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
-    `yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6001/" } }'`,
+    `yarn config set npmRegistryServer http://localhost:6001/`,
     // Some required magic to be able to fetch deps from local registry
     `yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
     // Disable fallback mode to make sure everything is required correctly
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 2d0d31d24dcb..4f8f559b7a24 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -5,6 +5,25 @@ __metadata:
   version: 6
   cacheKey: 8c0
 
+"@actions/core@npm:^1.10.0":
+  version: 1.10.0
+  resolution: "@actions/core@npm:1.10.0"
+  dependencies:
+    "@actions/http-client": ^2.0.1
+    uuid: ^8.3.2
+  checksum: 9214d1e0cf5cf2a5d48b8f3b12488c6be9f6722ea60f2397409226e8410b5a3e12e558d9b66c93469d180399865ec20180119408a1770f026bd9ecac6965fcda
+  languageName: node
+  linkType: hard
+
+"@actions/http-client@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "@actions/http-client@npm:2.1.0"
+  dependencies:
+    tunnel: ^0.0.6
+  checksum: 3936947d05c394ec3365a8757e13bd8cd0fb124cc1503254e46a95b2b8342fbf3f2a3c13d56d37e1d6705939cf2808dc64b4a38b75f83995fdc2e878e3aef89c
+  languageName: node
+  linkType: hard
+
 "@adobe/css-tools@npm:^4.0.1":
   version: 4.2.0
   resolution: "@adobe/css-tools@npm:4.2.0"
@@ -1247,16 +1266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/polyfill@npm:^7.2.5":
-  version: 7.12.1
-  resolution: "@babel/polyfill@npm:7.12.1"
-  dependencies:
-    core-js: ^2.6.5
-    regenerator-runtime: ^0.13.4
-  checksum: f5d233d2958582e8678838c32c42ba780965119ebb3771d9b9735f85efabc7b8b49161e7d908477486e0aaf8508410e957be764c27a6a828714fb9d1b7f80bc3
-  languageName: node
-  linkType: hard
-
 "@babel/preset-env@npm:^7.20.2":
   version: 7.21.4
   resolution: "@babel/preset-env@npm:7.21.4"
@@ -1711,6 +1720,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gitbeaker/core@npm:^21.7.0":
+  version: 21.7.0
+  resolution: "@gitbeaker/core@npm:21.7.0"
+  dependencies:
+    "@gitbeaker/requester-utils": ^21.7.0
+    form-data: ^3.0.0
+    li: ^1.3.0
+    xcase: ^2.0.1
+  checksum: 907f1dac7f43e288c71f184243712a65601a88ab7c9a8b7ff76629d8d94360c31f995b8142dec324615ad50f7e78e12f646a4302cb595dc990da3cdbd2514dfe
+  languageName: node
+  linkType: hard
+
+"@gitbeaker/node@npm:^21.3.0":
+  version: 21.7.0
+  resolution: "@gitbeaker/node@npm:21.7.0"
+  dependencies:
+    "@gitbeaker/core": ^21.7.0
+    "@gitbeaker/requester-utils": ^21.7.0
+    form-data: ^3.0.0
+    got: ^11.1.4
+    xcase: ^2.0.1
+  checksum: c5be30593dae749271f8529a0e33a1831f173d7e39796c9e30206a71e3007cc6368c802d296f1a8fcca056a8e718c77f50ae61aa17de8e444f0c91bf1a05950c
+  languageName: node
+  linkType: hard
+
+"@gitbeaker/requester-utils@npm:^21.7.0":
+  version: 21.7.0
+  resolution: "@gitbeaker/requester-utils@npm:21.7.0"
+  dependencies:
+    form-data: ^3.0.0
+    query-string: ^6.12.1
+    xcase: ^2.0.1
+  checksum: 1930783d67a8add51bd6056e0524facfc867fb73d78387af4259a166a5e725eaa64a4c22c0fe33538762b0abb496781bf39d95fc8d544825354254dd05e05271
+  languageName: node
+  linkType: hard
+
 "@graphql-typed-document-node/core@npm:^3.1.0":
   version: 3.2.0
   resolution: "@graphql-typed-document-node/core@npm:3.2.0"
@@ -2106,6 +2151,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kwsites/file-exists@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@kwsites/file-exists@npm:1.1.1"
+  dependencies:
+    debug: ^4.1.1
+  checksum: 39e693239a72ccd8408bb618a0200e4a8d61682057ca7ae2c87668d7e69196e8d7e2c9cde73db6b23b3b0230169a15e5f1bfe086539f4be43e767b2db68e8ee4
+  languageName: node
+  linkType: hard
+
+"@kwsites/promise-deferred@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@kwsites/promise-deferred@npm:1.1.1"
+  checksum: ef1ad3f1f50991e3bed352b175986d8b4bc684521698514a2ed63c1d1fc9848843da4f2bc2df961c9b148c94e1c34bf33f0da8a90ba2234e452481f2cc9937b1
+  languageName: node
+  linkType: hard
+
 "@linear/sdk@npm:^1.22.0":
   version: 1.22.0
   resolution: "@linear/sdk@npm:1.22.0"
@@ -2377,6 +2438,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/endpoint@npm:^7.0.0":
+  version: 7.0.5
+  resolution: "@octokit/endpoint@npm:7.0.5"
+  dependencies:
+    "@octokit/types": ^9.0.0
+    is-plain-object: ^5.0.0
+    universal-user-agent: ^6.0.0
+  checksum: 68de3e40b4d2b4d3decfc3e23480d5a781275ebf86d084a38ba70c5d46a6cad051b63332da1768a64d58b0b810c5b57401a3892dff4dd0060d8b6b31d78fc2f5
+  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"
@@ -2388,6 +2460,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/graphql@npm:^5.0.5":
+  version: 5.0.6
+  resolution: "@octokit/graphql@npm:5.0.6"
+  dependencies:
+    "@octokit/request": ^6.0.0
+    "@octokit/types": ^9.0.0
+    universal-user-agent: ^6.0.0
+  checksum: de1d839d97fe6d96179925f6714bf96e7af6f77929892596bb4211adab14add3291fc5872b269a3d0e91a4dcf248d16096c82606c4a43538cf241b815c2e2a36
+  languageName: node
+  linkType: hard
+
 "@octokit/openapi-types@npm:^12.11.0":
   version: 12.11.0
   resolution: "@octokit/openapi-types@npm:12.11.0"
@@ -2395,12 +2478,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/plugin-paginate-rest@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@octokit/plugin-paginate-rest@npm:1.1.2"
-  dependencies:
-    "@octokit/types": ^2.0.1
-  checksum: c0b42a7eb92c6b3fb254e85750fe48b667682be277dc9ccafbb91da241fc18396867739b058ae89d48455b3e75eb2967ac5e196fe54a276b58ed56173f5cd188
+"@octokit/openapi-types@npm:^17.2.0":
+  version: 17.2.0
+  resolution: "@octokit/openapi-types@npm:17.2.0"
+  checksum: baec94b9c300171245d8b0592867ef96d3aa9cbb3261e961c5138e91894e165fffc421288d98f51031af12ab4149efb7ba597d79dee2e5b5a38962348528b1e5
   languageName: node
   linkType: hard
 
@@ -2424,16 +2505,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/plugin-rest-endpoint-methods@npm:2.4.0":
-  version: 2.4.0
-  resolution: "@octokit/plugin-rest-endpoint-methods@npm:2.4.0"
-  dependencies:
-    "@octokit/types": ^2.0.1
-    deprecation: ^2.3.1
-  checksum: eedb9e6c3589651a391aa2c850d33fbfb01c94448d5da85b6208ff1fc05d556b05e660db019306c473149727ed83c5711f138179a39651d2cd548a8da2c4bc73
-  languageName: node
-  linkType: hard
-
 "@octokit/plugin-rest-endpoint-methods@npm:3.17.0":
   version: 3.17.0
   resolution: "@octokit/plugin-rest-endpoint-methods@npm:3.17.0"
@@ -2456,29 +2527,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/request-error@npm:^1.0.2":
-  version: 1.2.1
-  resolution: "@octokit/request-error@npm:1.2.1"
+"@octokit/request-error@npm:^2.0.5, @octokit/request-error@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@octokit/request-error@npm:2.1.0"
   dependencies:
-    "@octokit/types": ^2.0.0
+    "@octokit/types": ^6.0.3
     deprecation: ^2.0.0
     once: ^1.4.0
-  checksum: 0142170094b5c963de7012aa7d081c3aa05ce19ccd365447c9ca57d475bdf64a79549cb2d5e14348deabdb3c6577966e5f6996eeaa5ea3750b87688cc1c0a0f1
+  checksum: eb50eb2734aa903f1e855ac5887bb76d6f237a3aaa022b09322a7676c79bb8020259b25f84ab895c4fc7af5cc736e601ec8cc7e9040ca4629bac8cb393e91c40
   languageName: node
   linkType: hard
 
-"@octokit/request-error@npm:^2.0.5, @octokit/request-error@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@octokit/request-error@npm:2.1.0"
+"@octokit/request-error@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@octokit/request-error@npm:3.0.3"
   dependencies:
-    "@octokit/types": ^6.0.3
+    "@octokit/types": ^9.0.0
     deprecation: ^2.0.0
     once: ^1.4.0
-  checksum: eb50eb2734aa903f1e855ac5887bb76d6f237a3aaa022b09322a7676c79bb8020259b25f84ab895c4fc7af5cc736e601ec8cc7e9040ca4629bac8cb393e91c40
+  checksum: 1e252ac193c8af23b709909911aa327ed5372cbafcba09e4aff41e0f640a7c152579ab0a60311a92e37b4e7936392d59ee4c2feae5cdc387ee8587a33d8afa60
   languageName: node
   linkType: hard
 
-"@octokit/request@npm:^5.2.0, @octokit/request@npm:^5.4.0, @octokit/request@npm:^5.6.0, @octokit/request@npm:^5.6.3":
+"@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"
   dependencies:
@@ -2492,7 +2563,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/rest@npm:^16.43.0 || ^17.11.0 || ^18.12.0":
+"@octokit/request@npm:^6.0.0":
+  version: 6.2.5
+  resolution: "@octokit/request@npm:6.2.5"
+  dependencies:
+    "@octokit/endpoint": ^7.0.0
+    "@octokit/request-error": ^3.0.0
+    "@octokit/types": ^9.0.0
+    is-plain-object: ^5.0.0
+    node-fetch: ^2.6.7
+    universal-user-agent: ^6.0.0
+  checksum: 1f9feaedd75156ffc5b05294974e18b1798a3350ed99acb6d7f9d7b76fc338a47cb9d88b927e7d506894edf49e3a1ef1e18d877403a0aa386d0037b734ab59e4
+  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"
   dependencies:
@@ -2504,30 +2589,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/rest@npm:^16.43.1":
-  version: 16.43.2
-  resolution: "@octokit/rest@npm:16.43.2"
-  dependencies:
-    "@octokit/auth-token": ^2.4.0
-    "@octokit/plugin-paginate-rest": ^1.1.1
-    "@octokit/plugin-request-log": ^1.0.0
-    "@octokit/plugin-rest-endpoint-methods": 2.4.0
-    "@octokit/request": ^5.2.0
-    "@octokit/request-error": ^1.0.2
-    atob-lite: ^2.0.0
-    before-after-hook: ^2.0.0
-    btoa-lite: ^1.0.0
-    deprecation: ^2.0.0
-    lodash.get: ^4.4.2
-    lodash.set: ^4.3.2
-    lodash.uniq: ^4.5.0
-    octokit-pagination-methods: ^1.1.0
-    once: ^1.4.0
-    universal-user-agent: ^4.0.0
-  checksum: 8e51e16a54dcffb007aeefa48d6dda98f84737c044e15c9e8b123765efcf546b5f3465b37e11666f502d637fac3d4c2ef770ed9e7ba7e21330d1b6d773eccde7
-  languageName: node
-  linkType: hard
-
 "@octokit/rest@npm:^17.1.1":
   version: 17.11.2
   resolution: "@octokit/rest@npm:17.11.2"
@@ -2540,15 +2601,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/types@npm:^2.0.0, @octokit/types@npm:^2.0.1":
-  version: 2.16.2
-  resolution: "@octokit/types@npm:2.16.2"
-  dependencies:
-    "@types/node": ">= 8"
-  checksum: 8f324639ea2792f38dee104970f7d74584da6747ca41a5f709e0dcd54bc55095af3c47845a284f132ced4dec5a6d5a9c61ed77c3adaccfb5ad7f347fcb1a55b3
-  languageName: node
-  linkType: hard
-
 "@octokit/types@npm:^4.1.6":
   version: 4.1.10
   resolution: "@octokit/types@npm:4.1.10"
@@ -2576,6 +2628,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@octokit/types@npm:^9.0.0":
+  version: 9.2.3
+  resolution: "@octokit/types@npm:9.2.3"
+  dependencies:
+    "@octokit/openapi-types": ^17.2.0
+  checksum: 9604939ed79be2298827e832177bb8e871d44170144a7504adb0c399966e45361fb909ccffacbd7151f08b94d2e739c6a2d1c0b9a2f9a4bde09c968d27060514
+  languageName: node
+  linkType: hard
+
 "@parcel/watcher@npm:2.0.4":
   version: 2.0.4
   resolution: "@parcel/watcher@npm:2.0.4"
@@ -2633,6 +2694,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/is@npm:^4.0.0":
+  version: 4.6.0
+  resolution: "@sindresorhus/is@npm:4.6.0"
+  checksum: 33b6fb1d0834ec8dd7689ddc0e2781c2bfd8b9c4e4bacbcb14111e0ae00621f2c264b8a7d36541799d74888b5dccdf422a891a5cb5a709ace26325eedc81e22e
+  languageName: node
+  linkType: hard
+
 "@sinonjs/commons@npm:^2.0.0":
   version: 2.0.0
   resolution: "@sinonjs/commons@npm:2.0.0"
@@ -2810,6 +2878,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/scripts@workspace:."
   dependencies:
+    "@actions/core": ^1.10.0
     "@babel/core": ^7.20.2
     "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-proposal-decorators": ^7.20.7
@@ -2827,6 +2896,7 @@ __metadata:
     "@nrwl/cli": ^15.4.5
     "@nrwl/nx-cloud": ^15.0.2
     "@nrwl/workspace": ^15.4.5
+    "@octokit/graphql": ^5.0.5
     "@storybook/eslint-config-storybook": ^3.1.2
     "@storybook/jest": ^0.1.0
     "@storybook/linter-config": ^3.1.2
@@ -2850,10 +2920,12 @@ __metadata:
     "@types/semver": ^7.3.4
     "@types/serve-static": ^1.13.8
     "@types/shelljs": ^0.8.7
+    "@types/uuid": ^9.0.1
     "@typescript-eslint/eslint-plugin": ^5.45.0
     "@typescript-eslint/experimental-utils": ^5.45.0
     "@typescript-eslint/parser": ^5.45.0
     "@verdaccio/types": ^10.2.0
+    ansi-regex: ^5.0.0
     babel-eslint: ^10.1.0
     babel-loader: ^9.1.2
     boxen: ^5.1.2
@@ -2862,7 +2934,8 @@ __metadata:
     commander: ^6.2.1
     cross-env: ^7.0.3
     cross-spawn: ^7.0.3
-    danger: ^10.6.2
+    danger: ^11.2.6
+    dataloader: ^2.2.2
     detect-port: ^1.3.0
     ejs: ^3.1.8
     ejs-lint: ^2.0.0
@@ -2886,9 +2959,11 @@ __metadata:
     jest-environment-jsdom: ^29.3.1
     jest-image-snapshot: ^6.0.0
     jest-junit: ^14.0.1
+    jest-mock-extended: ^3.0.4
     jest-os-detection: ^1.3.1
     jest-serializer-html: ^7.1.0
     jest-watch-typeahead: ^2.2.1
+    json5: ^2.2.3
     junit-xml: ^1.2.0
     lint-staged: ^10.5.4
     lodash: ^4.17.21
@@ -2897,7 +2972,9 @@ __metadata:
     node-gyp: ^8.4.0
     npmlog: ^5.0.1
     nx: ^15.4.5
+    ora: ^5.4.1
     p-limit: ^3.1.0
+    p-retry: ^5.1.2
     prettier: ^2.8.0
     pretty-hrtime: ^1.0.0
     process: ^0.11.10
@@ -2913,6 +2990,7 @@ __metadata:
     semver: ^7.3.7
     serve-static: ^1.14.1
     shelljs: ^0.8.5
+    simple-git: ^3.18.0
     slash: ^3.0.0
     sort-package-json: ^1.48.1
     tempy: ^1.0.0
@@ -2924,10 +3002,12 @@ __metadata:
     type-fest: ^3.4.0
     typescript: ~4.9.3
     util: ^0.12.4
+    uuid: ^9.0.0
     verdaccio: ^5.19.1
     verdaccio-auth-memory: ^10.2.0
-    wait-on: ^5.2.1
+    wait-on: ^7.0.1
     window-size: ^1.1.1
+    zod: ^3.21.4
     zx: ^7.0.3
   dependenciesMeta:
     "@verdaccio/types":
@@ -3082,6 +3162,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@szmarczak/http-timer@npm:^4.0.5":
+  version: 4.0.6
+  resolution: "@szmarczak/http-timer@npm:4.0.6"
+  dependencies:
+    defer-to-connect: ^2.0.0
+  checksum: 73946918c025339db68b09abd91fa3001e87fc749c619d2e9c2003a663039d4c3cb89836c98a96598b3d47dec2481284ba85355392644911f5ecd2336536697f
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^7.28.1, @testing-library/dom@npm:^7.29.4":
   version: 7.31.2
   resolution: "@testing-library/dom@npm:7.31.2"
@@ -3262,6 +3351,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cacheable-request@npm:^6.0.1":
+  version: 6.0.3
+  resolution: "@types/cacheable-request@npm:6.0.3"
+  dependencies:
+    "@types/http-cache-semantics": "*"
+    "@types/keyv": ^3.1.4
+    "@types/node": "*"
+    "@types/responselike": ^1.0.0
+  checksum: 10816a88e4e5b144d43c1d15a81003f86d649776c7f410c9b5e6579d0ad9d4ca71c541962fb403077388b446e41af7ae38d313e46692144985f006ac5e11fa03
+  languageName: node
+  linkType: hard
+
 "@types/connect@npm:*":
   version: 3.4.35
   resolution: "@types/connect@npm:3.4.35"
@@ -3363,6 +3464,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/http-cache-semantics@npm:*":
+  version: 4.0.1
+  resolution: "@types/http-cache-semantics@npm:4.0.1"
+  checksum: 6d6068110a04cac213bdc0fff9c7bac028b5a2da390492204328987d8ddc500adc10d9cf5747a6333dab261712655dcfe120ea1d5527c205d012a39cdccc2a7b
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -3432,6 +3540,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/keyv@npm:^3.1.4":
+  version: 3.1.4
+  resolution: "@types/keyv@npm:3.1.4"
+  dependencies:
+    "@types/node": "*"
+  checksum: ff8f54fc49621210291f815fe5b15d809fd7d032941b3180743440bd507ecdf08b9e844625fa346af568c84bf34114eb378dcdc3e921a08ba1e2a08d7e3c809c
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4, @types/lodash@npm:^4.14.175":
   version: 4.14.192
   resolution: "@types/lodash@npm:4.14.192"
@@ -3571,6 +3688,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/responselike@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@types/responselike@npm:1.0.0"
+  dependencies:
+    "@types/node": "*"
+  checksum: 474ac2402e6d43c007eee25f50d01eb1f67255ca83dd8e036877292bbe8dd5d2d1e50b54b408e233b50a8c38e681ff3ebeaf22f18b478056eddb65536abb003a
+  languageName: node
+  linkType: hard
+
+"@types/retry@npm:0.12.1":
+  version: 0.12.1
+  resolution: "@types/retry@npm:0.12.1"
+  checksum: d2d08393973693826fc947fb09596c34bd65863201e2f6d7e9d7a02d504199d6a2bab13eba56f6366ee0fd45434c699a9fdcfff3311e63bf2fad7a4cf34bacfd
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.3
   resolution: "@types/scheduler@npm:0.16.3"
@@ -3635,6 +3768,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^9.0.1":
+  version: 9.0.2
+  resolution: "@types/uuid@npm:9.0.2"
+  checksum: 4c4834f9738575a69db1179589cf397830dc205850b491216697afb254764c79c96a63b92f76e81b6d03515bed9227adf184fa4d33bb04970e6377e2f7c5bab9
+  languageName: node
+  linkType: hard
+
 "@types/which@npm:^2.0.2":
   version: 2.0.2
   resolution: "@types/which@npm:2.0.2"
@@ -4136,15 +4276,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agent-base@npm:4, agent-base@npm:^4.3.0":
-  version: 4.3.0
-  resolution: "agent-base@npm:4.3.0"
-  dependencies:
-    es6-promisify: ^5.0.0
-  checksum: a618d4e4ca7c0c2023b2664346570773455c501a930718764f65016a8a9eea6d2ab5ba54255589e46de529bab4026a088523dce17f94e34ba385af1f644febe1
-  languageName: node
-  linkType: hard
-
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -4582,13 +4713,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"atob-lite@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "atob-lite@npm:2.0.0"
-  checksum: 8073795465dad14aa92b2cd3322472e93dbc8b87da5740150bbae9d716ee6cc254af1c375b7310a475d876eb24c25011584ae9c1277bdb3eb53ebb4cd236f501
-  languageName: node
-  linkType: hard
-
 "atomic-sleep@npm:^1.0.0":
   version: 1.0.0
   resolution: "atomic-sleep@npm:1.0.0"
@@ -4624,7 +4748,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^0.21.1, axios@npm:^0.21.2":
+"axios@npm:^0.21.2":
   version: 0.21.4
   resolution: "axios@npm:0.21.4"
   dependencies:
@@ -4633,6 +4757,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "axios@npm:0.27.2"
+  dependencies:
+    follow-redirects: ^1.14.9
+    form-data: ^4.0.0
+  checksum: 76d673d2a90629944b44d6f345f01e58e9174690f635115d5ffd4aca495d99bcd8f95c590d5ccb473513f5ebc1d1a6e8934580d0c57cdd0498c3a101313ef771
+  languageName: node
+  linkType: hard
+
 "axios@npm:^1.0.0":
   version: 1.3.4
   resolution: "axios@npm:1.3.4"
@@ -4838,7 +4972,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"before-after-hook@npm:^2.0.0, before-after-hook@npm:^2.1.0, before-after-hook@npm:^2.2.0":
+"before-after-hook@npm:^2.1.0, before-after-hook@npm:^2.2.0":
   version: 2.2.3
   resolution: "before-after-hook@npm:2.2.3"
   checksum: 0488c4ae12df758ca9d49b3bb27b47fd559677965c52cae7b335784724fb8bf96c42b6e5ba7d7afcbc31facb0e294c3ef717cc41c5bc2f7bd9e76f8b90acd31c
@@ -4867,7 +5001,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bl@npm:^4.0.3":
+"bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
   dependencies:
@@ -4985,13 +5119,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"btoa-lite@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "btoa-lite@npm:1.0.0"
-  checksum: 7a4f0568ae3c915464650f98fde7901ae07b13a333a614515a0c86876b3528670fafece28dfef9745d971a613bb83341823afb0c20c6f318b384c1e364b9eb95
-  languageName: node
-  linkType: hard
-
 "buffer-equal-constant-time@npm:1.0.1":
   version: 1.0.1
   resolution: "buffer-equal-constant-time@npm:1.0.1"
@@ -5110,6 +5237,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacheable-lookup@npm:^5.0.3":
+  version: 5.0.4
+  resolution: "cacheable-lookup@npm:5.0.4"
+  checksum: a6547fb4954b318aa831cbdd2f7b376824bc784fb1fa67610e4147099e3074726072d9af89f12efb69121415a0e1f2918a8ddd4aafcbcf4e91fbeef4a59cd42c
+  languageName: node
+  linkType: hard
+
+"cacheable-request@npm:^7.0.2":
+  version: 7.0.4
+  resolution: "cacheable-request@npm:7.0.4"
+  dependencies:
+    clone-response: ^1.0.2
+    get-stream: ^5.1.0
+    http-cache-semantics: ^4.0.0
+    keyv: ^4.0.0
+    lowercase-keys: ^2.0.0
+    normalize-url: ^6.0.1
+    responselike: ^2.0.0
+  checksum: 0834a7d17ae71a177bc34eab06de112a43f9b5ad05ebe929bec983d890a7d9f2bc5f1aa8bb67ea2b65e07a3bc74bea35fa62dd36dbac52876afe36fdcf83da41
+  languageName: node
+  linkType: hard
+
 "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind@npm:1.0.2"
@@ -5322,6 +5471,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cli-spinners@npm:^2.5.0":
+  version: 2.9.0
+  resolution: "cli-spinners@npm:2.9.0"
+  checksum: c0d5437acc1ace7361b1c58a4fda3c92c2d8691ff3169ac658ce30faee71280b7aa706c072bcb6d0e380c232f3495f7d5ad4668c1391fe02c4d3a39d37798f44
+  languageName: node
+  linkType: hard
+
 "cli-truncate@npm:^2.1.0":
   version: 2.1.0
   resolution: "cli-truncate@npm:2.1.0"
@@ -5365,6 +5521,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clone-response@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "clone-response@npm:1.0.3"
+  dependencies:
+    mimic-response: ^1.0.0
+  checksum: 06a2b611824efb128810708baee3bd169ec9a1bf5976a5258cd7eb3f7db25f00166c6eee5961f075c7e38e194f373d4fdf86b8166ad5b9c7e82bbd2e333a6087
+  languageName: node
+  linkType: hard
+
+"clone@npm:^1.0.2":
+  version: 1.0.4
+  resolution: "clone@npm:1.0.4"
+  checksum: 2176952b3649293473999a95d7bebfc9dc96410f6cbd3d2595cf12fd401f63a4bf41a7adbfd3ab2ff09ed60cb9870c58c6acdd18b87767366fabfc163700f13b
+  languageName: node
+  linkType: hard
+
 "co@npm:3.1.0":
   version: 3.1.0
   resolution: "co@npm:3.1.0"
@@ -5641,10 +5813,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^2.6.5":
-  version: 2.6.12
-  resolution: "core-js@npm:2.6.12"
-  checksum: 00128efe427789120a06b819adc94cc72b96955acb331cb71d09287baf9bd37bebd191d91f1ee4939c893a050307ead4faea08876f09115112612b6a05684b63
+"core-js@npm:^3.8.2":
+  version: 3.30.2
+  resolution: "core-js@npm:3.30.2"
+  checksum: 864d7dc908d4ece507d27e6c6d2830300dcb775d88cfefeec31e34ab95be5016bb23abb29c8b1c4a930bada01318af009276199d75dcab1a230c3cebdf8d3a70
   languageName: node
   linkType: hard
 
@@ -5779,32 +5951,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"danger@npm:^10.6.2":
-  version: 10.9.0
-  resolution: "danger@npm:10.9.0"
+"danger@npm:^11.2.6":
+  version: 11.2.6
+  resolution: "danger@npm:11.2.6"
   dependencies:
-    "@babel/polyfill": ^7.2.5
-    "@octokit/rest": ^16.43.1
+    "@gitbeaker/node": ^21.3.0
+    "@octokit/rest": ^18.12.0
     async-retry: 1.2.3
     chalk: ^2.3.0
     commander: ^2.18.0
+    core-js: ^3.8.2
     debug: ^4.1.1
     fast-json-patch: ^3.0.0-1
     get-stdin: ^6.0.0
-    gitlab: ^10.0.1
-    http-proxy-agent: ^2.1.0
-    https-proxy-agent: ^2.2.1
+    http-proxy-agent: ^5.0.0
+    https-proxy-agent: ^5.0.1
     hyperlinker: ^1.0.0
     json5: ^2.1.0
     jsonpointer: ^5.0.0
-    jsonwebtoken: ^8.4.0
+    jsonwebtoken: ^9.0.0
     lodash.find: ^4.6.0
     lodash.includes: ^4.3.0
     lodash.isobject: ^3.0.2
     lodash.keys: ^4.0.8
     lodash.mapvalues: ^4.6.0
     lodash.memoize: ^4.1.2
-    memfs-or-file-map-to-github-branch: ^1.1.0
+    memfs-or-file-map-to-github-branch: ^1.2.1
     micromatch: ^4.0.4
     node-cleanup: ^2.1.2
     node-fetch: ^2.6.7
@@ -5817,6 +5989,7 @@ __metadata:
     pinpoint: ^1.1.0
     prettyjson: ^1.2.1
     readline-sync: ^1.4.9
+    regenerator-runtime: ^0.13.9
     require-from-string: ^2.0.2
     supports-hyperlinks: ^1.0.1
   bin:
@@ -5829,7 +6002,7 @@ __metadata:
     danger-process: distribution/commands/danger-process.js
     danger-reset-status: distribution/commands/danger-reset-status.js
     danger-runner: distribution/commands/danger-runner.js
-  checksum: b8a6d9d04d0ea97ee0a7bf76c6062a6499616e2b0a1a3acbe604b0115a34bbdfba1bb9e096a0abe7f58be3f7d7eb53cfbb42ff36d21184b15fce0cccbf5ee1ed
+  checksum: 2968fbf2be3eb4b337d95e929381f69bd226bb45e54a44546600242275aae50e3a9e48557f1e0625e542d9fc99bdd67656591434aa2fdeea1f8e64a59de8b91f
   languageName: node
   linkType: hard
 
@@ -5860,6 +6033,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dataloader@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "dataloader@npm:2.2.2"
+  checksum: 125ec69f821478cf7c6b4360095db6cab939fe57876a0d2060c428091a8deee7152345189923b71a6afa694aaec463779f34b585317164016fd6f54f52cd94ba
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:1.11.7":
   version: 1.11.7
   resolution: "dayjs@npm:1.11.7"
@@ -5876,15 +6056,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:3.1.0":
-  version: 3.1.0
-  resolution: "debug@npm:3.1.0"
-  dependencies:
-    ms: 2.0.0
-  checksum: 5bff34a352d7b2eaa31886eeaf2ee534b5461ec0548315b2f9f80bd1d2533cab7df1fa52e130ce27bc31c3945fbffb0fc72baacdceb274b95ce853db89254ea4
-  languageName: node
-  linkType: hard
-
 "debug@npm:4, debug@npm:4.3.4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.2.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
@@ -5897,7 +6068,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^3.1.0, debug@npm:^3.2.7":
+"debug@npm:^3.2.7":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
   dependencies:
@@ -5920,6 +6091,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decompress-response@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "decompress-response@npm:6.0.0"
+  dependencies:
+    mimic-response: ^3.1.0
+  checksum: bd89d23141b96d80577e70c54fb226b2f40e74a6817652b80a116d7befb8758261ad073a8895648a29cc0a5947021ab66705cb542fa9c143c82022b27c5b175e
+  languageName: node
+  linkType: hard
+
 "dedent@npm:^0.7.0":
   version: 0.7.0
   resolution: "dedent@npm:0.7.0"
@@ -5966,6 +6146,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defaults@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "defaults@npm:1.0.4"
+  dependencies:
+    clone: ^1.0.2
+  checksum: 9cfbe498f5c8ed733775db62dfd585780387d93c17477949e1670bfcfb9346e0281ce8c4bf9f4ac1fc0f9b851113bd6dc9e41182ea1644ccd97de639fa13c35a
+  languageName: node
+  linkType: hard
+
+"defer-to-connect@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "defer-to-connect@npm:2.0.1"
+  checksum: 625ce28e1b5ad10cf77057b9a6a727bf84780c17660f6644dab61dd34c23de3001f03cedc401f7d30a4ed9965c2e8a7336e220a329146f2cf85d4eddea429782
+  languageName: node
+  linkType: hard
+
 "define-lazy-prop@npm:^2.0.0":
   version: 2.0.0
   resolution: "define-lazy-prop@npm:2.0.0"
@@ -6575,22 +6771,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-promise@npm:^4.0.3":
-  version: 4.2.8
-  resolution: "es6-promise@npm:4.2.8"
-  checksum: 2373d9c5e9a93bdd9f9ed32ff5cb6dd3dd785368d1c21e9bbbfd07d16345b3774ae260f2bd24c8f836a6903f432b4151e7816a7fa8891ccb4e1a55a028ec42c3
-  languageName: node
-  linkType: hard
-
-"es6-promisify@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "es6-promisify@npm:5.0.0"
-  dependencies:
-    es6-promise: ^4.0.3
-  checksum: 23284c6a733cbf7842ec98f41eac742c9f288a78753c4fe46652bae826446ced7615b9e8a5c5f121a08812b1cd478ea58630f3e1c3d70835bd5dcd69c7cd75c9
-  languageName: node
-  linkType: hard
-
 "esbuild-plugin-alias@npm:^0.2.1":
   version: 0.2.1
   resolution: "esbuild-plugin-alias@npm:0.2.1"
@@ -7635,7 +7815,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.15.0":
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.9, follow-redirects@npm:^1.15.0":
   version: 1.15.2
   resolution: "follow-redirects@npm:1.15.2"
   peerDependenciesMeta:
@@ -7661,17 +7841,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-data@npm:^2.5.0":
-  version: 2.5.1
-  resolution: "form-data@npm:2.5.1"
-  dependencies:
-    asynckit: ^0.4.0
-    combined-stream: ^1.0.6
-    mime-types: ^2.1.12
-  checksum: 7e8fb913b84a7ac04074781a18d0f94735bbe82815ff35348803331f6480956ff0035db5bcf15826edee09fe01e665cfac664678f1526646a6374ee13f960e56
-  languageName: node
-  linkType: hard
-
 "form-data@npm:^3.0.0":
   version: 3.0.1
   resolution: "form-data@npm:3.0.1"
@@ -7934,7 +8103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^5.0.0":
+"get-stream@npm:^5.0.0, get-stream@npm:^5.1.0":
   version: 5.2.0
   resolution: "get-stream@npm:5.2.0"
   dependencies:
@@ -7999,21 +8168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gitlab@npm:^10.0.1":
-  version: 10.2.1
-  resolution: "gitlab@npm:10.2.1"
-  dependencies:
-    form-data: ^2.5.0
-    humps: ^2.0.1
-    ky: ^0.12.0
-    ky-universal: ^0.3.0
-    li: ^1.3.0
-    query-string: ^6.8.2
-    universal-url: ^2.0.0
-  checksum: 0d5ca8206b0505eef6c5a1c3d1694910bacac89519c889491beec3efcf799ae5263dc8bb5953ef4ee272d557811e0f45a781d5b6ee27be3280b73d80093e0c65
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -8198,6 +8352,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"got@npm:^11.1.4":
+  version: 11.8.6
+  resolution: "got@npm:11.8.6"
+  dependencies:
+    "@sindresorhus/is": ^4.0.0
+    "@szmarczak/http-timer": ^4.0.5
+    "@types/cacheable-request": ^6.0.1
+    "@types/responselike": ^1.0.0
+    cacheable-lookup: ^5.0.3
+    cacheable-request: ^7.0.2
+    decompress-response: ^6.0.0
+    http2-wrapper: ^1.0.0-beta.5.2
+    lowercase-keys: ^2.0.0
+    p-cancelable: ^2.0.0
+    responselike: ^2.0.0
+  checksum: 754dd44877e5cf6183f1e989ff01c648d9a4719e357457bd4c78943911168881f1cfb7b2cb15d885e2105b3ad313adb8f017a67265dd7ade771afdb261ee8cb1
+  languageName: node
+  linkType: hard
+
 "graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
@@ -8346,13 +8519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasurl@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "hasurl@npm:1.0.0"
-  checksum: 7762739a9713612d7c81f8c59807c59e696ea4402861ff799fd9d507860d4e37ad7eac4e1741a713ae96a74306a98ee5a03245695352ede885cc4287a44c632b
-  languageName: node
-  linkType: hard
-
 "he@npm:^1.1.1":
   version: 1.2.0
   resolution: "he@npm:1.2.0"
@@ -8420,7 +8586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-cache-semantics@npm:^4.1.0":
+"http-cache-semantics@npm:^4.0.0, http-cache-semantics@npm:^4.1.0":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
   checksum: ce1319b8a382eb3cbb4a37c19f6bfe14e5bb5be3d09079e885e8c513ab2d3cd9214902f8a31c9dc4e37022633ceabfc2d697405deeaf1b8f3552bb4ed996fdfc
@@ -8453,16 +8619,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-agent@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "http-proxy-agent@npm:2.1.0"
-  dependencies:
-    agent-base: 4
-    debug: 3.1.0
-  checksum: 526294de33953bacb21b883d8bbc01a82e1e9f5a721785345dd538b15b62c7a5d4080b729eb3177ad15d842f931f44002431d5cf9b036cc8cea4bfb5ec172228
-  languageName: node
-  linkType: hard
-
 "http-proxy-agent@npm:^4.0.0, http-proxy-agent@npm:^4.0.1":
   version: 4.0.1
   resolution: "http-proxy-agent@npm:4.0.1"
@@ -8535,6 +8691,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"http2-wrapper@npm:^1.0.0-beta.5.2":
+  version: 1.0.3
+  resolution: "http2-wrapper@npm:1.0.3"
+  dependencies:
+    quick-lru: ^5.1.1
+    resolve-alpn: ^1.0.0
+  checksum: 6a9b72a033e9812e1476b9d776ce2f387bc94bc46c88aea0d5dab6bd47d0a539b8178830e77054dd26d1142c866d515a28a4dc7c3ff4232c88ff2ebe4f5d12d1
+  languageName: node
+  linkType: hard
+
 "https-proxy-agent@npm:5.0.1, https-proxy-agent@npm:^5.0.0, https-proxy-agent@npm:^5.0.1":
   version: 5.0.1
   resolution: "https-proxy-agent@npm:5.0.1"
@@ -8545,16 +8711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^2.2.1":
-  version: 2.2.4
-  resolution: "https-proxy-agent@npm:2.2.4"
-  dependencies:
-    agent-base: ^4.3.0
-    debug: ^3.1.0
-  checksum: 4bdde8fcd9ea0adc4a77282de2b4f9e27955e0441425af0f27f0fe01006946b80eaee6749e08e838d350c06ed2ebd5d11347d3beb88c45eacb0667e27276cdad
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^1.1.1":
   version: 1.1.1
   resolution: "human-signals@npm:1.1.1"
@@ -8585,13 +8741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"humps@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "humps@npm:2.0.1"
-  checksum: 554f3bb9de780ce833f0058f30536f87615bd75ead2008b98d900598379fe5dcd3300bdd9092d3e078d47b66fade82276974dda7151318b5de7a1d837c3abe6e
-  languageName: node
-  linkType: hard
-
 "husky@npm:^4.3.7":
   version: 4.3.8
   resolution: "husky@npm:4.3.8"
@@ -8984,6 +9133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-interactive@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-interactive@npm:1.0.0"
+  checksum: dd47904dbf286cd20aa58c5192161be1a67138485b9836d5a70433b21a45442e9611b8498b8ab1f839fc962c7620667a50535fdfb4a6bc7989b8858645c06b4d
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -9592,6 +9748,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-mock-extended@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "jest-mock-extended@npm:3.0.4"
+  dependencies:
+    ts-essentials: ^7.0.3
+  peerDependencies:
+    jest: ^24.0.0 || ^25.0.0 || ^26.0.0 || ^27.0.0 || ^28.0.0 || ^29.0.0
+    typescript: ^3.0.0 || ^4.0.0 || ^5.0.0
+  checksum: b9514c0cf2b50460ef154818f71fe356fb8b0bf66af72050257813f88f7bb7313a30172c7ff09bc19e16bc59bae7160a854be2f86364fb8fa70d6e16299db4e0
+  languageName: node
+  linkType: hard
+
 "jest-mock@npm:^27.3.0":
   version: 27.5.1
   resolution: "jest-mock@npm:27.5.1"
@@ -9864,16 +10032,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"joi@npm:^17.3.0":
-  version: 17.9.1
-  resolution: "joi@npm:17.9.1"
+"joi@npm:^17.7.0":
+  version: 17.9.2
+  resolution: "joi@npm:17.9.2"
   dependencies:
     "@hapi/hoek": ^9.0.0
     "@hapi/topo": ^5.0.0
     "@sideway/address": ^4.1.3
     "@sideway/formula": ^3.0.1
     "@sideway/pinpoint": ^2.0.0
-  checksum: 27bae524494f42db55a5a5e5e794c2616ad3524695af8f92f6c122dd5e65b12f2c0b76960cf0f1da7b01e5eb06d4b0579f96edf6b4df890c3fd6517f43dee6be
+  checksum: 284bc34d5070c7b064a9fa68e02703961ad08229dd95dfe0baf2aa5d278c7a99543ecb979b8a6e6f72035539bfdaf1269ac7fa7684a503b6de18b173f72dcc89
   languageName: node
   linkType: hard
 
@@ -9985,6 +10153,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-buffer@npm:3.0.1":
+  version: 3.0.1
+  resolution: "json-buffer@npm:3.0.1"
+  checksum: 0d1c91569d9588e7eef2b49b59851f297f3ab93c7b35c7c221e288099322be6b562767d11e4821da500f3219542b9afd2e54c5dc573107c1126ed1080f8e96d7
+  languageName: node
+  linkType: hard
+
 "json-parse-even-better-errors@npm:^2.3.0":
   version: 2.3.1
   resolution: "json-parse-even-better-errors@npm:2.3.1"
@@ -10038,7 +10213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.2.2":
+"json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -10081,7 +10256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonwebtoken@npm:9.0.0":
+"jsonwebtoken@npm:9.0.0, jsonwebtoken@npm:^9.0.0":
   version: 9.0.0
   resolution: "jsonwebtoken@npm:9.0.0"
   dependencies:
@@ -10093,24 +10268,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonwebtoken@npm:^8.4.0":
-  version: 8.5.1
-  resolution: "jsonwebtoken@npm:8.5.1"
-  dependencies:
-    jws: ^3.2.2
-    lodash.includes: ^4.3.0
-    lodash.isboolean: ^3.0.3
-    lodash.isinteger: ^4.0.4
-    lodash.isnumber: ^3.0.3
-    lodash.isplainobject: ^4.0.6
-    lodash.isstring: ^4.0.1
-    lodash.once: ^4.0.0
-    ms: ^2.1.1
-    semver: ^5.6.0
-  checksum: c5ad937b6fa23a230efa8ed8ca3c0da8ebfdd377bafc3e8432a11b03ef90e733400a00b26c0dfee47db44a2e64b88b154b57e9926a92990f98dd25aaed15006e
-  languageName: node
-  linkType: hard
-
 "jsprim@npm:^1.2.2":
   version: 1.4.2
   resolution: "jsprim@npm:1.4.2"
@@ -10172,6 +10329,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"keyv@npm:^4.0.0":
+  version: 4.5.2
+  resolution: "keyv@npm:4.5.2"
+  dependencies:
+    json-buffer: 3.0.1
+  checksum: b633bf53a5afa5591f383d326746226e110e59f13c7e1e8d3e3c9580d2c2345c5eefc21cce168cd5be7fa34b9163e391927146fbd2b7ee7aa2f3aa02b7f0a7de
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^3.0.2":
   version: 3.2.2
   resolution: "kind-of@npm:3.2.2"
@@ -10202,25 +10368,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ky-universal@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "ky-universal@npm:0.3.0"
-  dependencies:
-    abort-controller: ^3.0.0
-    node-fetch: ^2.6.0
-  peerDependencies:
-    ky: ">=0.12.0"
-  checksum: 8f2d5dba50f113bd4c67547cb8f6fb7ed94e3a62152a4778539452bd7064636c3467c9b3126c05e68ac53a2ca02ab740f0c260f05221f9610587eb8e03e469fa
-  languageName: node
-  linkType: hard
-
-"ky@npm:^0.12.0":
-  version: 0.12.0
-  resolution: "ky@npm:0.12.0"
-  checksum: cdca90751ddf69521fd6bcb55acc236d61d4164850a55d7d4e1c167288af2c9ac0f7c9c8e70b409d583704e905ed9af10da4d5cd41b7d717484b5ade7801e24f
-  languageName: node
-  linkType: hard
-
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -10424,13 +10571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.get@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "lodash.get@npm:4.4.2"
-  checksum: 48f40d471a1654397ed41685495acb31498d5ed696185ac8973daef424a749ca0c7871bf7b665d5c14f5cc479394479e0307e781f61d5573831769593411be6e
-  languageName: node
-  linkType: hard
-
 "lodash.includes@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.includes@npm:4.3.0"
@@ -10438,27 +10578,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isboolean@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "lodash.isboolean@npm:3.0.3"
-  checksum: 0aac604c1ef7e72f9a6b798e5b676606042401dd58e49f051df3cc1e3adb497b3d7695635a5cbec4ae5f66456b951fdabe7d6b387055f13267cde521f10ec7f7
-  languageName: node
-  linkType: hard
-
-"lodash.isinteger@npm:^4.0.4":
-  version: 4.0.4
-  resolution: "lodash.isinteger@npm:4.0.4"
-  checksum: 4c3e023a2373bf65bf366d3b8605b97ec830bca702a926939bcaa53f8e02789b6a176e7f166b082f9365bfec4121bfeb52e86e9040cb8d450e64c858583f61b7
-  languageName: node
-  linkType: hard
-
-"lodash.isnumber@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "lodash.isnumber@npm:3.0.3"
-  checksum: 2d01530513a1ee4f72dd79528444db4e6360588adcb0e2ff663db2b3f642d4bb3d687051ae1115751ca9082db4fdef675160071226ca6bbf5f0c123dbf0aa12d
-  languageName: node
-  linkType: hard
-
 "lodash.isobject@npm:^3.0.2":
   version: 3.0.2
   resolution: "lodash.isobject@npm:3.0.2"
@@ -10466,20 +10585,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isplainobject@npm:^4.0.6":
-  version: 4.0.6
-  resolution: "lodash.isplainobject@npm:4.0.6"
-  checksum: afd70b5c450d1e09f32a737bed06ff85b873ecd3d3d3400458725283e3f2e0bb6bf48e67dbe7a309eb371a822b16a26cca4a63c8c52db3fc7dc9d5f9dd324cbb
-  languageName: node
-  linkType: hard
-
-"lodash.isstring@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "lodash.isstring@npm:4.0.1"
-  checksum: 09eaf980a283f9eef58ef95b30ec7fee61df4d6bf4aba3b5f096869cc58f24c9da17900febc8ffd67819b4e29de29793190e88dc96983db92d84c95fa85d1c92
-  languageName: node
-  linkType: hard
-
 "lodash.keys@npm:^4.0.8":
   version: 4.2.0
   resolution: "lodash.keys@npm:4.2.0"
@@ -10508,20 +10613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.once@npm:^4.0.0":
-  version: 4.1.1
-  resolution: "lodash.once@npm:4.1.1"
-  checksum: 46a9a0a66c45dd812fcc016e46605d85ad599fe87d71a02f6736220554b52ffbe82e79a483ad40f52a8a95755b0d1077fba259da8bfb6694a7abbf4a48f1fc04
-  languageName: node
-  linkType: hard
-
-"lodash.set@npm:^4.3.2":
-  version: 4.3.2
-  resolution: "lodash.set@npm:4.3.2"
-  checksum: c641d31905e51df43170dce8a1d11a1cff11356e2e2e75fe2615995408e9687d58c3e1d64c3c284c2df2bc519f79a98af737d2944d382ff82ffd244ff6075c29
-  languageName: node
-  linkType: hard
-
 "lodash.sortby@npm:^4.7.0":
   version: 4.7.0
   resolution: "lodash.sortby@npm:4.7.0"
@@ -10529,13 +10620,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.uniq@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "lodash.uniq@npm:4.5.0"
-  checksum: 262d400bb0952f112162a320cc4a75dea4f66078b9e7e3075ffbc9c6aa30b3e9df3cf20e7da7d566105e1ccf7804e4fbd7d804eee0b53de05d83f16ffbf41c5e
-  languageName: node
-  linkType: hard
-
 "lodash@npm:4, lodash@npm:4.17.21, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
@@ -10543,7 +10627,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"log-symbols@npm:^4.0.0":
+"log-symbols@npm:^4.0.0, log-symbols@npm:^4.1.0":
   version: 4.1.0
   resolution: "log-symbols@npm:4.1.0"
   dependencies:
@@ -10596,6 +10680,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lowercase-keys@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "lowercase-keys@npm:2.0.0"
+  checksum: f82a2b3568910509da4b7906362efa40f5b54ea14c2584778ddb313226f9cbf21020a5db35f9b9a0e95847a9b781d548601f31793d736b22a2b8ae8eb9ab1082
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:7.16.1":
   version: 7.16.1
   resolution: "lru-cache@npm:7.16.1"
@@ -10816,7 +10907,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs-or-file-map-to-github-branch@npm:^1.1.0":
+"memfs-or-file-map-to-github-branch@npm:^1.2.1":
   version: 1.2.1
   resolution: "memfs-or-file-map-to-github-branch@npm:1.2.1"
   dependencies:
@@ -10939,6 +11030,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-response@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "mimic-response@npm:1.0.1"
+  checksum: c5381a5eae997f1c3b5e90ca7f209ed58c3615caeee850e85329c598f0c000ae7bec40196580eef1781c60c709f47258131dab237cad8786f8f56750594f27fa
+  languageName: node
+  linkType: hard
+
+"mimic-response@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "mimic-response@npm:3.1.0"
+  checksum: 0d6f07ce6e03e9e4445bee655202153bdb8a98d67ee8dc965ac140900d7a2688343e6b4c9a72cfc9ef2f7944dfd76eef4ab2482eb7b293a68b84916bac735362
+  languageName: node
+  linkType: hard
+
 "min-indent@npm:^1.0.0":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
@@ -10973,7 +11078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
+"minimist@npm:^1.1.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.7, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -11240,7 +11345,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
+"node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.7":
   version: 2.6.9
   resolution: "node-fetch@npm:2.6.9"
   dependencies:
@@ -11381,6 +11486,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-url@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "normalize-url@npm:6.1.0"
+  checksum: 95d948f9bdd2cfde91aa786d1816ae40f8262946e13700bf6628105994fe0ff361662c20af3961161c38a119dc977adeb41fc0b41b1745eb77edaaf9cb22db23
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^2.0.0":
   version: 2.0.2
   resolution: "npm-run-path@npm:2.0.2"
@@ -11622,13 +11734,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"octokit-pagination-methods@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "octokit-pagination-methods@npm:1.1.0"
-  checksum: e8b2b346e7ad91c1b10a3d8be76d8aa33889b4df0bd5c28106dc2e8b5498185bbb5bd884ef07a57b09a5c54003deb2814280bab6ed6991e9e650c5cdc9879924
-  languageName: node
-  linkType: hard
-
 "on-exit-leak-free@npm:^0.2.0":
   version: 0.2.0
   resolution: "on-exit-leak-free@npm:0.2.0"
@@ -11736,6 +11841,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ora@npm:^5.4.1":
+  version: 5.4.1
+  resolution: "ora@npm:5.4.1"
+  dependencies:
+    bl: ^4.1.0
+    chalk: ^4.1.0
+    cli-cursor: ^3.1.0
+    cli-spinners: ^2.5.0
+    is-interactive: ^1.0.0
+    is-unicode-supported: ^0.1.0
+    log-symbols: ^4.1.0
+    strip-ansi: ^6.0.0
+    wcwidth: ^1.0.1
+  checksum: 10ff14aace236d0e2f044193362b22edce4784add08b779eccc8f8ef97195cae1248db8ec1ec5f5ff076f91acbe573f5f42a98c19b78dba8c54eefff983cae85
+  languageName: node
+  linkType: hard
+
 "os-homedir@npm:^1.0.0":
   version: 1.0.2
   resolution: "os-homedir@npm:1.0.2"
@@ -11760,6 +11882,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-cancelable@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "p-cancelable@npm:2.1.1"
+  checksum: 8c6dc1f8dd4154fd8b96a10e55a3a832684c4365fb9108056d89e79fbf21a2465027c04a59d0d797b5ffe10b54a61a32043af287d5c4860f1e996cbdbc847f01
+  languageName: node
+  linkType: hard
+
 "p-finally@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-finally@npm:1.0.0"
@@ -11828,6 +11957,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-retry@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "p-retry@npm:5.1.2"
+  dependencies:
+    "@types/retry": 0.12.1
+    retry: ^0.13.1
+  checksum: 9017001ebfbe2a08cf45c970106f6953f5c76d1f8d8e9ff81afcbf6c25fe9f0e13499c5ac49b35d114672cf15689a952f4f3287fd1316420eb810a5a99ecf4e7
+  languageName: node
+  linkType: hard
+
 "p-try@npm:^2.0.0":
   version: 2.2.0
   resolution: "p-try@npm:2.2.0"
@@ -12446,7 +12585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"query-string@npm:^6.8.2":
+"query-string@npm:^6.12.1":
   version: 6.14.1
   resolution: "query-string@npm:6.14.1"
   dependencies:
@@ -12479,6 +12618,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quick-lru@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "quick-lru@npm:5.1.1"
+  checksum: a24cba5da8cec30d70d2484be37622580f64765fb6390a928b17f60cd69e8dbd32a954b3ff9176fa1b86d86ff2ba05252fae55dc4d40d0291c60412b0ad096da
+  languageName: node
+  linkType: hard
+
 "ramda@npm:^0.28.0":
   version: 0.28.0
   resolution: "ramda@npm:0.28.0"
@@ -12697,7 +12843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.4":
+"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.9":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
   checksum: 12b069dc774001fbb0014f6a28f11c09ebfe3c0d984d88c9bced77fdb6fedbacbca434d24da9ae9371bfbf23f754869307fb51a4c98a8b8b18e5ef748677ca24
@@ -13080,6 +13226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-alpn@npm:^1.0.0":
+  version: 1.2.1
+  resolution: "resolve-alpn@npm:1.2.1"
+  checksum: b70b29c1843bc39781ef946c8cd4482e6d425976599c0f9c138cec8209e4e0736161bf39319b01676a847000085dfdaf63583c6fb4427bf751a10635bd2aa0c4
+  languageName: node
+  linkType: hard
+
 "resolve-cwd@npm:^3.0.0":
   version: 3.0.0
   resolution: "resolve-cwd@npm:3.0.0"
@@ -13162,6 +13315,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"responselike@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "responselike@npm:2.0.1"
+  dependencies:
+    lowercase-keys: ^2.0.0
+  checksum: 360b6deb5f101a9f8a4174f7837c523c3ec78b7ca8a7c1d45a1062b303659308a23757e318b1e91ed8684ad1205721142dd664d94771cd63499353fd4ee732b5
+  languageName: node
+  linkType: hard
+
 "restore-cursor@npm:^3.1.0":
   version: 3.1.0
   resolution: "restore-cursor@npm:3.1.0"
@@ -13179,6 +13341,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"retry@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "retry@npm:0.13.1"
+  checksum: 9ae822ee19db2163497e074ea919780b1efa00431d197c7afdb950e42bf109196774b92a49fc9821f0b8b328a98eea6017410bfc5e8a0fc19c85c6d11adb3772
+  languageName: node
+  linkType: hard
+
 "reusify@npm:^1.0.4":
   version: 1.0.4
   resolution: "reusify@npm:1.0.4"
@@ -13249,7 +13418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^6.5.4, rxjs@npm:^6.6.3":
+"rxjs@npm:^6.5.4":
   version: 6.6.7
   resolution: "rxjs@npm:6.6.7"
   dependencies:
@@ -13267,6 +13436,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.8.0":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: 3c49c1ecd66170b175c9cacf5cef67f8914dcbc7cd0162855538d365c83fea631167cacb644b3ce533b2ea0e9a4d0b12175186985f89d75abe73dbd8f7f06f68
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:5.1.2":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -13358,7 +13536,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0, semver@npm:^5.6.0":
+"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.5.0":
   version: 5.7.1
   resolution: "semver@npm:5.7.1"
   bin:
@@ -13508,6 +13686,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-git@npm:^3.18.0":
+  version: 3.19.0
+  resolution: "simple-git@npm:3.19.0"
+  dependencies:
+    "@kwsites/file-exists": ^1.1.1
+    "@kwsites/promise-deferred": ^1.1.1
+    debug: ^4.3.4
+  checksum: 4dc448e663f92bed8dd2d43e07b1c3dbb2444412f39d38b710fe3dc41b1c25dae07aff1960fbf5bd17d4f8f33b6908a335c82f0b9c5db5b87c4ad1d7a2873d7e
+  languageName: node
+  linkType: hard
+
 "sisteransi@npm:^1.0.5":
   version: 1.0.5
   resolution: "sisteransi@npm:1.0.5"
@@ -14457,6 +14646,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-essentials@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "ts-essentials@npm:7.0.3"
+  peerDependencies:
+    typescript: ">=3.7.0"
+  checksum: ea1919534ec6ce4ca4d9cb0ff1ab8e053509237da8d4298762ab3bfba4e78ca5649a599ce78a5c7c2624f3a7a971f62b265b7b0c3c881336e4fa6acaf6f37544
+  languageName: node
+  linkType: hard
+
 "ts-interface-checker@npm:^0.1.9":
   version: 0.1.13
   resolution: "ts-interface-checker@npm:0.1.13"
@@ -14617,6 +14815,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tunnel@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "tunnel@npm:0.0.6"
+  checksum: e27e7e896f2426c1c747325b5f54efebc1a004647d853fad892b46d64e37591ccd0b97439470795e5262b5c0748d22beb4489a04a0a448029636670bfd801b75
+  languageName: node
+  linkType: hard
+
 "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
   version: 0.14.5
   resolution: "tweetnacl@npm:0.14.5"
@@ -15000,25 +15205,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"universal-url@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "universal-url@npm:2.0.0"
-  dependencies:
-    hasurl: ^1.0.0
-    whatwg-url: ^7.0.0
-  checksum: 57a5f887676987650f9f2b62811159e2706645e6fbb2b5ed83d802d996310de1e39066478e6f4f11cc9ec4e92624dd0f943f950d9ecaac2763b2b22d2aac8ae0
-  languageName: node
-  linkType: hard
-
-"universal-user-agent@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "universal-user-agent@npm:4.0.1"
-  dependencies:
-    os-name: ^3.1.0
-  checksum: e590abd8decb36400d1a630da5957e61f0356492bf413e12f78c169cade915080b03dbfbe8fa62c557bd73413edc681de580ad84488565bf30a9d509fd1b311f
-  languageName: node
-  linkType: hard
-
 "universal-user-agent@npm:^5.0.0":
   version: 5.0.0
   resolution: "universal-user-agent@npm:5.0.0"
@@ -15164,6 +15350,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uuid@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "uuid@npm:9.0.0"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 8867e438990d1d33ac61093e2e4e3477a2148b844e4fa9e3c2360fa4399292429c4b6ec64537eb1659c97b2d10db349c673ad58b50e2824a11e0d3630de3c056
+  languageName: node
+  linkType: hard
+
 "v8-compile-cache-lib@npm:^3.0.1":
   version: 3.0.1
   resolution: "v8-compile-cache-lib@npm:3.0.1"
@@ -15418,18 +15613,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wait-on@npm:^5.2.1":
-  version: 5.3.0
-  resolution: "wait-on@npm:5.3.0"
+"wait-on@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "wait-on@npm:7.0.1"
   dependencies:
-    axios: ^0.21.1
-    joi: ^17.3.0
+    axios: ^0.27.2
+    joi: ^17.7.0
     lodash: ^4.17.21
-    minimist: ^1.2.5
-    rxjs: ^6.6.3
+    minimist: ^1.2.7
+    rxjs: ^7.8.0
   bin:
     wait-on: bin/wait-on
-  checksum: 5ca740e3f2cf4f73ebd2787ff15f7b8d0ee99f188dd37aae0a7d116ae9837f04b8752e4306218aee5165ca4e37cfd3c5b114627748e465e46f8cd51af0da1790
+  checksum: 2a9c56d26dac573e6bfd36e85d99f072021c23dc2c0faab900a411460b58e16982b96b018d9168c366040f56196314fa46f3d79ef19e3dc38f55824d5035f2ec
   languageName: node
   linkType: hard
 
@@ -15442,6 +15637,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wcwidth@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "wcwidth@npm:1.0.1"
+  dependencies:
+    defaults: ^1.0.3
+  checksum: 5b61ca583a95e2dd85d7078400190efd452e05751a64accb8c06ce4db65d7e0b0cde9917d705e826a2e05cc2548f61efde115ffa374c3e436d04be45c889e5b4
+  languageName: node
+  linkType: hard
+
 "web-streams-polyfill@npm:^3.0.3":
   version: 3.2.1
   resolution: "web-streams-polyfill@npm:3.2.1"
@@ -15722,6 +15926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xcase@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "xcase@npm:2.0.1"
+  checksum: 11b8ae8f6734b29d442a5acf1dff3a896cabbf49e7ffa01472ff6fa687a6e6f6a25889d06c10a41950e7a90fe89239fa78d95eab0c5eb654ca75f0ccd71ba8ed
+  languageName: node
+  linkType: hard
+
 "xdg-basedir@npm:^4.0.0":
   version: 4.0.0
   resolution: "xdg-basedir@npm:4.0.0"
@@ -15855,6 +16066,13 @@ __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
+
 "zwitch@npm:^1.0.0":
   version: 1.0.5
   resolution: "zwitch@npm:1.0.5"