diff --git a/.circleci/config.yml b/.circleci/config.yml
index ef32f6fb4984..f6674fc9c46c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -19,7 +19,7 @@ executors:
     docker:
       - image: cimg/node:16.17.1
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
   sb_node_16_browsers:
     parameters:
@@ -32,7 +32,7 @@ executors:
     docker:
       - image: cimg/node:16.17.1-browsers
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
   sb_playwright:
     parameters:
@@ -43,14 +43,15 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.27.0-focal
+      - image: mcr.microsoft.com/playwright:v1.28.0-focal
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
 
 orbs:
   git-shallow-clone: guitarrapc/git-shallow-clone@2.4.0
   browser-tools: circleci/browser-tools@1.4.0
+  discord: antonioned/discord@0.1.0
 
 commands:
   # Forked off from https://github.com/guitarrapc/git-shallow-clone-orb
@@ -101,7 +102,7 @@ commands:
             then
               export HOME=$(getent passwd $(id -un) | cut -d: -f6)
             fi
-            
+
             # known_hosts
             mkdir -p ~/.ssh
             if [ -x "$(command -v ssh-keyscan)" ] && ([ "<< parameters.keyscan_github >>" == "true" ] || [ "<< parameters.keyscan_bitbucket >>" == "true" ])
@@ -125,19 +126,19 @@ commands:
               echo 'bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAubiN81eDcafrgMeLzaFPsw2kNvEcqTKl/VqLat/MaB33pZy0y3rJZtnqwR2qOOvbwKZYKiEO1O6VqNEBxKvJJelCq0dTXWT5pbO2gDXC6h6QDXCaHo6pOHGPUy+YBaGQRGuSusMEASYiWunYN0vCAI8QaXnWMXNMdFP3jHAJH0eDsoiGnLPBlBp4TNm6rYI74nMzgz3B9IikW4WVK+dc8KZJZWYjAuORU3jc1c/NPskD2ASinf8v3xnfXeukU0sJ5N6m5E8VLjObPEO+mN2t/FZTMZLiFqPWc/ALSqnMnnhwrNi2rbfg/rd/IpL8Le3pSBne8+seeFVBoGqzHM9yXw==
             ' >> ~/.ssh/known_hosts
             fi
-            
+
             (umask 077; touch ~/.ssh/id_rsa)
             chmod 0600 ~/.ssh/id_rsa
             (echo $CHECKOUT_KEY > ~/.ssh/id_rsa)
-            
+
             # use git+ssh instead of https
             git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
             git config --global gc.auto 0 || true
-            
+
             # checkout
             git clone << parameters.clone_options >> $CIRCLE_REPOSITORY_URL "<< parameters.path >>"
             cd "<< parameters.path >>"
-            
+
             # Fetch remote and check the commit ID of the checked out code
             if [ -n "$CIRCLE_TAG" ]
             then
@@ -151,7 +152,7 @@ commands:
               # others
               git fetch << parameters.fetch_options >> --force origin "$CIRCLE_BRANCH:remotes/origin/$CIRCLE_BRANCH"
             fi
-            
+
             # Check the commit ID of the checked out code
             if [ -n "$CIRCLE_TAG" ]
             then
@@ -162,7 +163,7 @@ commands:
               git reset --hard "$CIRCLE_SHA1"
               git checkout -q -B "$CIRCLE_BRANCH"
             fi
-            
+
             git reset --hard "$CIRCLE_SHA1"
           name: Checkout code shallow
   cancel-workflow-on-failure:
@@ -175,7 +176,36 @@ commands:
             echo "Canceling workflow as previous step resulted in failure."
             echo "To execute all checks locally, please run yarn ci-tests"
             curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}"
+  report-workflow-on-failure:
+    description: 'Reports failures to discord'
+    parameters:
+      template:
+        description: |
+          Which template to report in discord. Applicable for parallel sandbox jobs
+        type: string
+        default: 'none'
+    steps:
+      - run:
+          when: on_fail
+          command: git fetch --unshallow
+      - discord/status:
+          only_for_branches: main,next,next-release,latest-release
+          fail_only: true
+          failure_message: $(yarn get-report-message << pipeline.parameters.workflow >> << parameters.template >>)
 jobs:
+  pretty-docs:
+    executor:
+      class: small
+      name: sb_node_16_classic
+    steps:
+      - checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - run:
+          name: Prettier
+          command: |
+            cd scripts
+            yarn
+            yarn docs:prettier:check
   build:
     executor:
       class: large
@@ -197,6 +227,7 @@ jobs:
           command: |
             cd code
             yarn local-registry --publish
+      - report-workflow-on-failure
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@@ -241,21 +272,22 @@ jobs:
           name: set up cra repro, skip tests
           command: |
             cd code
-            node ./lib/cli/bin/index.js repro-next cra/default-js --output ../../cra-bench
+            SANDBOX_ROOT=../bench yarn task --task sandbox --template cra/default-ts --skip-template-stories --start-from=never  --no-link
       - run:
           name: Run @storybook/bench on repro
           command: |
-            cd ../cra-bench
+            cd bench/cra-default-ts
             rm -rf node_modules
             mkdir node_modules
-            npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label cra
+            npx -p @storybook/bench@next sb-bench 'yarn install' --label cra
+      - report-workflow-on-failure
       - run:
           name: prep artifacts
           when: always
-          command: tar cvzf /tmp/sb-bench.tar.gz ../cra-bench
+          command: tar cvzf /tmp/cra-default-ts-bench.tar.gz bench/cra-default-ts
       - store_artifacts:
-          path: /tmp/sb-bench.tar.gz
-          destination: sb-bench.tar.gz
+          path: /tmp/cra-default-ts-bench.tar.gz
+          destination: cra-default-ts-bench.tar.gz
   react-vite-bench:
     executor:
       class: large
@@ -281,24 +313,25 @@ jobs:
           name: set up react-vite repro, skip tests
           command: |
             cd code
-            node ./lib/cli/bin/index.js repro-next react-vite/default-ts --output ../../react-vite-bench
+            SANDBOX_ROOT=../bench yarn task --task sandbox --template react-vite/default-ts --skip-template-stories --start-from=never  --no-link
       - run:
           name: Run @storybook/bench on repro
           command: |
-            cd ../react-vite-bench
+            cd bench/react-vite-default-ts
             rm -rf node_modules
             mkdir node_modules
-            npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label react-vite
+            npx -p @storybook/bench@next sb-bench 'yarn install' --label react-vite
+      - report-workflow-on-failure
       - run:
           name: prep artifacts
           when: always
-          command: tar cvzf /tmp/sb-bench.tar.gz ../react-vite-bench
+          command: tar cvzf /tmp/react-vite-default-ts-bench.tar.gz bench/react-vite-default-ts
       - store_artifacts:
-          path: /tmp/sb-bench.tar.gz
-          destination: sb-bench.tar.gz
+          path: /tmp/react-vite-default-ts-bench.tar.gz
+          destination: react-vite-default-ts-bench.tar.gz
   lint:
     executor:
-      class: medium
+      class: large
       name: sb_node_16_classic
     steps:
       - checkout_advanced:
@@ -310,6 +343,7 @@ jobs:
           command: |
             cd code
             yarn lint
+      - report-workflow-on-failure
       - cancel-workflow-on-failure
   check:
     executor:
@@ -325,6 +359,7 @@ jobs:
           command: |
             yarn task --task check --start-from=auto --no-link --debug
             git diff --exit-code
+      - report-workflow-on-failure
       - cancel-workflow-on-failure
   script-unit-tests:
     executor: sb_node_16_browsers
@@ -340,6 +375,7 @@ jobs:
             yarn test --coverage --ci
       - store_test_results:
           path: scripts/junit.xml
+      - report-workflow-on-failure
       - cancel-workflow-on-failure
   unit-tests:
     executor:
@@ -354,13 +390,14 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage --ci
+            yarn test --coverage --ci --maxWorkers=6
       - store_test_results:
           path: code/junit.xml
       - persist_to_workspace:
           root: .
           paths:
             - code/coverage
+      - report-workflow-on-failure
       - cancel-workflow-on-failure
   coverage:
     executor:
@@ -376,10 +413,13 @@ jobs:
           command: |
             cd code
             yarn coverage
+      - report-workflow-on-failure
   chromatic-internal-storybooks:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_16_browsers
+    environment:
+        NODE_OPTIONS: --max_old_space_size=6144
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout
@@ -391,6 +431,7 @@ jobs:
             cd code
             yarn storybook:ui:chromatic
             yarn storybook:blocks:chromatic
+      - report-workflow-on-failure
       - store_test_results:
           path: test-results
   ## new workflow
@@ -410,7 +451,9 @@ jobs:
           at: .
       - run:
           name: Creating Sandboxes
-          command: yarn task --task sandbox --template $(yarn get-template << pipeline.parameters.workflow >> create) --no-link --start-from=never --junit
+          command: yarn task --task sandbox --template $(yarn get-template << pipeline.parameters.workflow >> sandbox) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> sandbox)
       - persist_to_workspace:
           root: .
           paths:
@@ -434,6 +477,8 @@ jobs:
       - run:
           name: Smoke Testing Sandboxes
           command: yarn task --task smoke-test --template $(yarn get-template << pipeline.parameters.workflow >> smoke-test) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> smoke-test)
       - store_test_results:
           path: test-results
   build-sandboxes:
@@ -453,6 +498,8 @@ jobs:
       - run:
           name: Building Sandboxes
           command: yarn task --task build --template $(yarn get-template << pipeline.parameters.workflow >> build) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> build)
       - store_test_results:
           path: test-results
       - persist_to_workspace:
@@ -476,6 +523,8 @@ jobs:
       - run:
           name: Running Test Runner
           command: yarn task --task test-runner --template $(yarn get-template << pipeline.parameters.workflow >> test-runner) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> test-runner)
       - store_test_results:
           path: test-results
   chromatic-sandboxes:
@@ -494,6 +543,8 @@ jobs:
       - run:
           name: Running Chromatic
           command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> chromatic)
       - store_test_results:
           path: test-results
   e2e-sandboxes:
@@ -513,6 +564,8 @@ jobs:
       - run:
           name: Running E2E Tests
           command: yarn task --task e2e-tests --template $(yarn get-template << pipeline.parameters.workflow >> e2e-tests) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> e2e-tests)
       - store_test_results:
           path: test-results
       - store_artifacts: # this is where playwright puts more complex stuff
@@ -523,9 +576,10 @@ workflows:
   ci:
     when:
       and:
-        - equal: [ api, << pipeline.trigger_source >> ]
-        - equal:  [ ci, << pipeline.parameters.workflow >> ]
+        - equal: [api, << pipeline.trigger_source >>]
+        - equal: [ci, << pipeline.parameters.workflow >>]
     jobs:
+      - pretty-docs
       - build
       - lint:
           requires:
@@ -556,8 +610,9 @@ workflows:
             - build-sandboxes
   pr:
     when:
-      equal: [ pr, << pipeline.parameters.workflow >> ]
+      equal: [pr, << pipeline.parameters.workflow >>]
     jobs:
+      - pretty-docs
       - build
       - lint:
           requires:
@@ -605,8 +660,9 @@ workflows:
             - build-sandboxes
   merged:
     when:
-      equal: [ merged, << pipeline.parameters.workflow >> ]
+      equal: [merged, << pipeline.parameters.workflow >>]
     jobs:
+      - pretty-docs
       - build
       - lint:
           requires:
@@ -633,11 +689,11 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build
       - build-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
@@ -645,27 +701,27 @@ workflows:
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 14
+          parallelism: 15
           requires:
             - build-sandboxes
   daily:
     when:
-      equal: [ daily, << pipeline.parameters.workflow >> ]
+      equal: [daily, << pipeline.parameters.workflow >>]
     jobs:
       - build
       - create-sandboxes:
-          parallelism: 24
+          parallelism: 25
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 24
+          parallelism: 25
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
@@ -673,10 +729,10 @@ workflows:
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 24
+          parallelism: 25
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 24
+          parallelism: 25
           requires:
-            - build-sandboxes
\ No newline at end of file
+            - build-sandboxes
diff --git a/.github/workflows/generate-repros-next.yml b/.github/workflows/generate-repros-next.yml
index 42b36076d37b..fcd1ee8072c5 100644
--- a/.github/workflows/generate-repros-next.yml
+++ b/.github/workflows/generate-repros-next.yml
@@ -28,6 +28,12 @@ jobs:
         run: node ./scripts/check-dependencies.js
       - name: Compile Storybook libraries
         run: yarn task --task publish --start-from=auto --no-link
+      - name: Running local registry
+        run: yarn local-registry --port 6001 --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
       - name: Generate repros
         run: yarn generate-repros-next --local-registry
         working-directory: ./code
diff --git a/.gitignore b/.gitignore
index 41baa60da98e..25b6e5a7b525 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ junit.xml
 test-results
 /repros
 /sandbox
+/bench
 .verdaccio-cache
 
 # Yarn stuff
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5faead8d09d2..39bce5bab28e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,86 @@
+## 7.0.0-alpha.51 (November 19, 2022)
+
+#### Bug Fixes
+
+-   NextJS: Fix out-of-the-box babel handling [#19842](https://github.com/storybooks/storybook/pull/19842)
+-   NextJS: Fix import url on windows [#19798](https://github.com/storybooks/storybook/pull/19798)
+-   UI: Fix panel invisible for any addon listed after the interactions panel [#19771](https://github.com/storybooks/storybook/pull/19771)
+-   Core: Bail preview builder on failure [#19849](https://github.com/storybooks/storybook/pull/19849)
+-   Core: Fix double esbuild-register register [#19852](https://github.com/storybooks/storybook/pull/19852)
+-   Composition: Fix regression in the `#root` to `#storybook-root` change [#19848](https://github.com/storybooks/storybook/pull/19848)
+-   UI: Fix `showPanel=false` doesn't work on mobile view [#19807](https://github.com/storybooks/storybook/pull/19807)
+
+#### Maintenance
+
+-   CLI: Replace degit with giget [#19870](https://github.com/storybooks/storybook/pull/19870)
+-   Build: Bundle lib/channel-websocket with tsup [#19694](https://github.com/storybooks/storybook/pull/19694)
+-   Maintenance: Upgrade monorepo to TS 4.9  [#19869](https://github.com/storybooks/storybook/pull/19869)
+
+#### Build
+
+-   Build: Downgrade @types/node [#19890](https://github.com/storybooks/storybook/pull/19890)
+-   Maintenance: Add angular 14 template and skip test runner on angular 15 for now [#19871](https://github.com/storybooks/storybook/pull/19871)
+-   Build: Upgrade Jest to 29 [#19863](https://github.com/storybooks/storybook/pull/19863)
+-   Build: Fix chromatic version to 6.11.2 in local scripts [#19889](https://github.com/storybooks/storybook/pull/19889)
+-   Build: Pin chromatic version to 6.11.2 to temporary fix flakiness [#19874](https://github.com/storybooks/storybook/pull/19874)
+
+#### Dependency Upgrades
+
+-   Bump mdx2-csf dependency [#19885](https://github.com/storybooks/storybook/pull/19885)
+
+## 7.0.0-alpha.50 (November 17, 2022)
+
+#### Features
+
+-   Expose more CSF types in all renderers [#19833](https://github.com/storybooks/storybook/pull/19833)
+-   CSF: Renamed Framework to Renderer [#19802](https://github.com/storybooks/storybook/pull/19802)
+
+#### Bug Fixes
+
+-   Next.js: use file path instead of image contents for next-image-loader-stub [#19858](https://github.com/storybooks/storybook/pull/19858)
+-   TypeScript: Fix type inference bug with decorators  [#19839](https://github.com/storybooks/storybook/pull/19839)
+-   Vite: Keep using absolute path node_modules splitting [#19836](https://github.com/storybooks/storybook/pull/19836)
+-   Vite: Fix preview annotation paths on Windows [#19822](https://github.com/storybooks/storybook/pull/19822)
+-   Fix csf-plugin ignoring options [#19823](https://github.com/storybooks/storybook/pull/19823)
+-   Controls: Checkbox does not update when using useArgs hook [#19508](https://github.com/storybooks/storybook/pull/19508)
+
+#### Maintenance
+
+-   Jest: switch from Parameters to StorybookInternalParameters [#19853](https://github.com/storybooks/storybook/pull/19853)
+-   Blocks: Story stories [#19805](https://github.com/storybooks/storybook/pull/19805)
+-   Blocks: Canvas stories [#19804](https://github.com/storybooks/storybook/pull/19804)
+-   Tech: TypeScript should check stories and tests as well [#19831](https://github.com/storybooks/storybook/pull/19831)
+
+#### Build
+
+-   UI Storybook: Disable sourcemaps when building in CI [#19862](https://github.com/storybooks/storybook/pull/19862)
+-   Build: Increase max node memory for jobs [#19856](https://github.com/storybooks/storybook/pull/19856)
+-   CI: improve error reporting mechanism [#19841](https://github.com/storybooks/storybook/pull/19841)
+-   Fix tests on Windows [#19777](https://github.com/storybooks/storybook/pull/19777)
+-   Build: Fix benchmark to run on local packages [#19832](https://github.com/storybooks/storybook/pull/19832)
+-   CI: Report failures on discord [#19801](https://github.com/storybooks/storybook/pull/19801)
+
+## 7.0.0-alpha.49 (November 13, 2022)
+
+#### Bug Fixes
+
+-   Essentials: Fix preview annotations for Vite pnpm support [#19689](https://github.com/storybooks/storybook/pull/19689)
+
+#### Maintenance
+
+-   Build: convert addon-docs to use ts-up [#19790](https://github.com/storybooks/storybook/pull/19790)
+-   Core: Allow overriding WebView and UrlStore [#19623](https://github.com/storybooks/storybook/pull/19623)
+-   Storyshots: Support .cjs and .mjs file extensions [#19726](https://github.com/storybooks/storybook/pull/19726)
+
+#### Build
+
+-   Build: less noise when compiling [#19808](https://github.com/storybooks/storybook/pull/19808)
+-   Build: Upgrade bench to `next` [#19791](https://github.com/storybooks/storybook/pull/19791)
+-   Maintenance: improve error feedback when tasks fail in CI [#19786](https://github.com/storybooks/storybook/pull/19786)
+-   UI: Enable TurboSnap for UI Storybook [#19767](https://github.com/storybooks/storybook/pull/19767)
+-   CI: Use a new cadence (ci, pr, merged, daily) and trigger CircleCI from github actions [#19768](https://github.com/storybooks/storybook/pull/19768)
+-   Maintenance: provide expected failure metadata in junit reports [#19775](https://github.com/storybooks/storybook/pull/19775)
+
 ## 7.0.0-alpha.48 (November 7, 2022)
 
 #### Breaking Changes
@@ -542,9 +625,10 @@ Bad publish
 
 #### Bug Fixes
 
-- CLI: Fix race condition in sb init [#19083](https://github.com/storybooks/storybook/pull/19083)
-- Vite: Fix framework option checks, and SSv6 [#19062](https://github.com/storybooks/storybook/pull/19062)
-- Core: Fix WebProjectAnnotations export in preview-web for back-compat [#19048](https://github.com/storybooks/storybook/pull/19048)
+-   CLI: Fix race condition in sb init [#19083](https://github.com/storybooks/storybook/pull/19083)
+-   Vite: Fix framework option checks, and SSv6 [#19062](https://github.com/storybooks/storybook/pull/19062)
+-   Core: Fix WebProjectAnnotations export in preview-web for back-compat [#19048](https://github.com/storybooks/storybook/pull/19048)
+-   Blocks: Fix Checkbox control update when using useArgs hook
 
 #### Maintenance
 
diff --git a/MIGRATION.md b/MIGRATION.md
index 06dac6694ebb..2f9f0c15c407 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -43,7 +43,9 @@
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
-    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
+    - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
+    - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -841,6 +843,69 @@ CSF2Story.args = { label: 'Label' };
 
 The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.
 
+#### Renamed `XFramework` to `XRenderer`
+
+In 6.x you could import XFramework types:
+
+```ts
+import type { ReactFramework } from '@storybook/react';
+import type { VueFramework } from '@storybook/vue';
+import type { SvelteFramework } from '@storybook/svelte';
+
+// etc.
+```
+
+Those are deprecated in 7.0 as they are renamed to:
+
+```ts
+import type { ReactRenderer } from '@storybook/react';
+import type { VueRenderer } from '@storybook/vue';
+import type { SvelteRenderer } from '@storybook/svelte';
+
+// etc.
+```
+
+#### Renamed `DecoratorFn` to `Decorator`
+
+In 6.x you could import the type `DecoratorFn`:
+
+```ts
+import type { DecoratorFn } from '@storybook/react';
+```
+
+This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers:
+
+```ts
+import type { Decorator } from '@storybook/react';
+// or
+import type { Decorator } from '@storybook/vue';
+// or
+import type { Decorator } from '@storybook/svelte';
+// etc.
+```
+
+The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this:
+
+```tsx
+import type { Decorator } from '@storybook/react';
+import { LocaleProvider } from './locale';
+
+const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => (
+  <LocaleProvider lang={args.locale}>
+    <Story />
+  </LocaleProvider>
+);
+```
+
+If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use:
+
+```tsx
+import type { Args, Decorator } from '@storybook/react';
+
+// Decorator<Args> behaves the same as DecoratorFn (without generic)
+const withLocale: Decorator<Args> = (Story, { args }) => // args has type { [name: string]: any }
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade
diff --git a/README.md b/README.md
index fd4b1a777064..7462b6c9fcb7 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,12 @@
 <p align="center">
   <a href="https://storybook.js.org/">
-    <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png">
+      <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
+    </picture>
+    
   </a>
+  
 </p>
 
 <p align="center">Build bulletproof UI components faster</p>
diff --git a/code/.eslintignore b/code/.eslintignore
index 6f8539b9b7b6..3a410b6472bc 100644
--- a/code/.eslintignore
+++ b/code/.eslintignore
@@ -1,5 +1,4 @@
 dist
-lib/**/dll
 build
 coverage
 node_modules
diff --git a/code/addons/a11y/jest.config.js b/code/addons/a11y/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/a11y/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 94be93335614..212f173d2ce2 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -62,15 +62,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.48",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addon-highlight": "7.0.0-alpha.51",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "axe-core": "^4.2.0",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -78,7 +78,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^11.2.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -102,7 +102,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
diff --git a/code/addons/actions/jest.config.js b/code/addons/actions/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/actions/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index cd45f1d91c8e..bd85b1c9ba07 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
@@ -52,6 +52,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -63,13 +76,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -82,7 +95,7 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.167",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -107,7 +120,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Actions",
     "unsupportedFrameworks": [
diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts
index 6a91c6e1ddef..530cb76c0621 100644
--- a/code/addons/actions/src/addArgsHelpers.ts
+++ b/code/addons/actions/src/addArgsHelpers.ts
@@ -1,4 +1,4 @@
-import type { Args, Framework, ArgsEnhancer } from '@storybook/types';
+import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';
 
 // interface ActionsParameter {
@@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,
     argTypes,
@@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context)
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,
     argTypes,
diff --git a/code/addons/actions/tsconfig.json b/code/addons/actions/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/addons/actions/tsconfig.json
+++ b/code/addons/actions/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/backgrounds/jest.config.js b/code/addons/backgrounds/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/backgrounds/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 2584ee916f76..b001b099307f 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -51,6 +51,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -62,19 +75,19 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -98,7 +111,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/decorators/withBackground.ts
index 49500b8a7c12..309c6a8f7599 100644
--- a/code/addons/backgrounds/src/decorators/withBackground.ts
+++ b/code/addons/backgrounds/src/decorators/withBackground.ts
@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -10,8 +10,8 @@ import {
 } from '../helpers';
 
 export const withBackground = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
+  StoryFn: StoryFunction<Renderer>,
+  context: StoryContext<Renderer>
 ) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/decorators/withGrid.ts
index 8e129dcf5af9..3647dd2f4cad 100644
--- a/code/addons/backgrounds/src/decorators/withGrid.ts
+++ b/code/addons/backgrounds/src/decorators/withGrid.ts
@@ -1,10 +1,10 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
+export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/addons/backgrounds/tsconfig.json
+++ b/code/addons/backgrounds/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/controls/jest.config.js b/code/addons/controls/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/controls/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index c51bf2682882..051c62d9dc00 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -46,6 +46,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -57,16 +67,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/blocks": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/blocks": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
@@ -92,7 +102,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
diff --git a/code/addons/controls/tsconfig.json b/code/addons/controls/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/addons/controls/tsconfig.json
+++ b/code/addons/controls/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/docs/jest.config.js b/code/addons/docs/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/docs/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 912874857cd0..e6cfee21fb79 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -24,9 +24,44 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./dist/preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./svelte/HOC.svelte": "./svelte/HOC.svelte",
+    "./ember": "./ember/index.js",
+    "./ember/index.js": "./ember/index.js",
+    "./angular": "./angular/index.js",
+    "./angular/index.js": "./angular/index.js",
+    "./web-components/index.js": "./web-components/index.js",
+    "./jest-transform-mdx": "./jest-transform-mdx.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -46,29 +81,21 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@jest/transform": "^26.6.2",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/blocks": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/csf-plugin": "7.0.0-alpha.48",
-    "@storybook/csf-tools": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
+    "@storybook/blocks": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/csf-plugin": "7.0.0-alpha.51",
+    "@storybook/csf-tools": "7.0.0-alpha.51",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/postinstall": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "dequal": "^2.0.2",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/postinstall": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "remark-external-links": "^8.0.0",
@@ -76,8 +103,8 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "typescript": "~4.6.3"
+    "@babel/core": "^7.20.2",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -94,7 +121,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/preview.ts"
+    ]
+  },
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
diff --git a/code/addons/docs/preset.js b/code/addons/docs/preset.js
index e45ac5b4cec0..a83f95279e7f 100644
--- a/code/addons/docs/preset.js
+++ b/code/addons/docs/preset.js
@@ -1 +1 @@
-module.exports = require('./dist/cjs/preset');
+module.exports = require('./dist/preset');
diff --git a/code/addons/docs/preview.js b/code/addons/docs/preview.js
index e726cab5a1b6..49ad602f79f4 100644
--- a/code/addons/docs/preview.js
+++ b/code/addons/docs/preview.js
@@ -1 +1 @@
-export * from './dist/esm/preview';
+export * from './dist/preview';
diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx
index fb55fcb33f06..b1c6a6391a16 100644
--- a/code/addons/docs/src/DocsRenderer.tsx
+++ b/code/addons/docs/src/DocsRenderer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
@@ -14,14 +14,14 @@ export const defaultComponents: Record<string, any> = {
   ...HeadersMdx,
 };
 
-export class DocsRenderer<TFramework extends Framework> {
-  public render: DocsRenderFunction<TFramework>;
+export class DocsRenderer<TRenderer extends Renderer> {
+  public render: DocsRenderFunction<TRenderer>;
 
   public unmount: (element: HTMLElement) => void;
 
   constructor() {
     this.render = (
-      context: DocsContextProps<TFramework>,
+      context: DocsContextProps<TRenderer>,
       docsParameter: Parameters,
       element: HTMLElement,
       callback: () => void
@@ -33,6 +33,7 @@ export class DocsRenderer<TFramework extends Framework> {
         ...defaultComponents,
         ...docsParameter?.components,
       };
+
       ReactDOM.render(
         <MDXProvider components={components}>
           <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
diff --git a/code/addons/docs/src/blocks.ts b/code/addons/docs/src/blocks.ts
deleted file mode 100644
index 119f7ce62757..000000000000
--- a/code/addons/docs/src/blocks.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@storybook/blocks';
diff --git a/code/addons/docs/src/index.ts b/code/addons/docs/src/index.ts
index 807e2656e5b8..b74399955f12 100644
--- a/code/addons/docs/src/index.ts
+++ b/code/addons/docs/src/index.ts
@@ -1,2 +1,2 @@
-export * from './blocks';
+export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 0538a94fabd6..df92976b9696 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -16,12 +16,11 @@ import { loadCsf } from '@storybook/csf-tools';
 // the jsx to transpile mdx, for now there will be a flag for that
 // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
 type BabelParams = {
-  babelOptions?: any;
   mdxBabelOptions?: any;
   configureJSX?: boolean;
 };
-function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
-  const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
+function createBabelOptions({ mdxBabelOptions, configureJSX }: BabelParams) {
+  const babelPlugins = mdxBabelOptions?.plugins || [];
 
   const filteredBabelPlugins = babelPlugins.filter((p: any) => {
     const name = Array.isArray(p) ? p[0] : p;
@@ -40,13 +39,12 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,
     configFile: false,
-    ...babelOptions,
     ...mdxBabelOptions,
     plugins,
   };
 }
 
-export async function webpack(
+async function webpack(
   webpackConfig: any = {},
   options: Options &
     BabelParams & {
@@ -65,7 +63,6 @@ export async function webpack(
   // it will reuse babel options that are already in use in storybook
   // also, these babel options are chained with other presets.
   const {
-    babelOptions,
     mdxBabelOptions,
     configureJSX = true,
     csfPluginOptions = {},
@@ -100,7 +97,7 @@ export async function webpack(
         use: [
           {
             loader: resolvedBabelLoader,
-            options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+            options: createBabelOptions({ mdxBabelOptions, configureJSX }),
           },
           {
             loader: mdxLoader,
@@ -128,7 +125,7 @@ export async function webpack(
           use: [
             {
               loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+              options: createBabelOptions({ mdxBabelOptions, configureJSX }),
             },
             {
               loader: mdxLoader,
@@ -145,7 +142,7 @@ export async function webpack(
           use: [
             {
               loader: resolvedBabelLoader,
-              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
+              options: createBabelOptions({ mdxBabelOptions, configureJSX }),
             },
             {
               loader: mdxLoader,
@@ -160,7 +157,7 @@ export async function webpack(
   return result;
 }
 
-export const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
+const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
   const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
     const { compile } = await import('@storybook/mdx2-csf');
@@ -176,7 +173,7 @@ export const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
   ];
 };
 
-export const docs = (docsOptions: DocsOptions) => {
+const docs = (docsOptions: DocsOptions) => {
   return {
     ...docsOptions,
     enabled: true,
@@ -184,3 +181,13 @@ export const docs = (docsOptions: DocsOptions) => {
     docsPage: true,
   };
 };
+
+/*
+ * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
+ * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
+ */
+const webpackX = webpack as any;
+const storyIndexersX = storyIndexers as any;
+const docsX = docs as any;
+
+export { webpackX as webpack, storyIndexersX as storyIndexers, docsX as docs };
diff --git a/code/addons/docs/src/shared.ts b/code/addons/docs/src/shared.ts
deleted file mode 100644
index 178bf46ca387..000000000000
--- a/code/addons/docs/src/shared.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-export const ADDON_ID = 'storybook/docs';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PARAM_KEY = `docs`;
-
-export const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`;
-
-export enum SourceType {
-  /**
-   * AUTO is the default
-   *
-   * Use the CODE logic if:
-   * - the user has set a custom source snippet in `docs.source.code` story parameter
-   * - the story is not an args-based story
-   *
-   * Use the DYNAMIC rendered snippet if the story is an args story
-   */
-  AUTO = 'auto',
-
-  /**
-   * Render the code extracted by source-loader
-   */
-  CODE = 'code',
-
-  /**
-   * Render dynamically-rendered source snippet from the story's virtual DOM (currently React only)
-   */
-  DYNAMIC = 'dynamic',
-}
diff --git a/code/addons/docs/tsconfig.json b/code/addons/docs/tsconfig.json
index b1bd17fc8aed..cf1e09965901 100644
--- a/code/addons/docs/tsconfig.json
+++ b/code/addons/docs/tsconfig.json
@@ -3,12 +3,5 @@
   "compilerOptions": {
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/essentials/jest.config.js b/code/addons/essentials/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/essentials/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 7445ad9c83d3..65ed32752123 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -27,6 +27,76 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./actions/preview": {
+      "require": "./dist/actions/preview.js",
+      "import": "./dist/actions/preview.mjs",
+      "types": "./dist/actions/preview.d.ts"
+    },
+    "./actions/manager": {
+      "require": "./dist/actions/manager.js",
+      "import": "./dist/actions/manager.mjs",
+      "types": "./dist/actions/manager.d.ts"
+    },
+    "./backgrounds/preview": {
+      "require": "./dist/backgrounds/preview.js",
+      "import": "./dist/backgrounds/preview.mjs",
+      "types": "./dist/backgrounds/preview.d.ts"
+    },
+    "./backgrounds/manager": {
+      "require": "./dist/backgrounds/manager.js",
+      "import": "./dist/backgrounds/manager.mjs",
+      "types": "./dist/backgrounds/manager.d.ts"
+    },
+    "./controls/manager": {
+      "require": "./dist/controls/manager.js",
+      "import": "./dist/controls/manager.mjs",
+      "types": "./dist/controls/manager.d.ts"
+    },
+    "./docs/preview": {
+      "require": "./dist/docs/preview.js",
+      "import": "./dist/docs/preview.mjs",
+      "types": "./dist/docs/preview.d.ts"
+    },
+    "./docs/preset": {
+      "require": "./dist/docs/preset.js",
+      "import": "./dist/docs/preset.mjs",
+      "types": "./dist/docs/preset.d.ts"
+    },
+    "./highlight/preview": {
+      "require": "./dist/highlight/preview.js",
+      "import": "./dist/highlight/preview.mjs",
+      "types": "./dist/highlight/preview.d.ts"
+    },
+    "./measure/preview": {
+      "require": "./dist/measure/preview.js",
+      "import": "./dist/measure/preview.mjs",
+      "types": "./dist/measure/preview.d.ts"
+    },
+    "./measure/manager": {
+      "require": "./dist/measure/manager.js",
+      "import": "./dist/measure/manager.mjs",
+      "types": "./dist/measure/manager.d.ts"
+    },
+    "./outline/preview": {
+      "require": "./dist/outline/preview.js",
+      "import": "./dist/outline/preview.mjs",
+      "types": "./dist/outline/preview.d.ts"
+    },
+    "./outline/manager": {
+      "require": "./dist/outline/manager.js",
+      "import": "./dist/outline/manager.mjs",
+      "types": "./dist/outline/manager.d.ts"
+    },
+    "./toolbars/manager": {
+      "require": "./dist/toolbars/manager.js",
+      "import": "./dist/toolbars/manager.mjs",
+      "types": "./dist/toolbars/manager.d.ts"
+    },
+    "./viewport/manager": {
+      "require": "./dist/viewport/manager.js",
+      "import": "./dist/viewport/manager.mjs",
+      "types": "./dist/viewport/manager.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -41,76 +111,51 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.48",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.48",
-    "@storybook/addon-controls": "7.0.0-alpha.48",
-    "@storybook/addon-docs": "7.0.0-alpha.48",
-    "@storybook/addon-highlight": "7.0.0-alpha.48",
-    "@storybook/addon-measure": "7.0.0-alpha.48",
-    "@storybook/addon-outline": "7.0.0-alpha.48",
-    "@storybook/addon-toolbars": "7.0.0-alpha.48",
-    "@storybook/addon-viewport": "7.0.0-alpha.48",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
+    "@storybook/addon-actions": "7.0.0-alpha.51",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.51",
+    "@storybook/addon-controls": "7.0.0-alpha.51",
+    "@storybook/addon-docs": "7.0.0-alpha.51",
+    "@storybook/addon-highlight": "7.0.0-alpha.51",
+    "@storybook/addon-measure": "7.0.0-alpha.51",
+    "@storybook/addon-outline": "7.0.0-alpha.51",
+    "@storybook/addon-toolbars": "7.0.0-alpha.51",
+    "@storybook/addon-viewport": "7.0.0-alpha.51",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/vue": "7.0.0-alpha.48",
-    "@types/jest": "^26.0.16",
-    "typescript": "~4.6.3"
+    "@babel/core": "^7.20.2",
+    "@storybook/vue": "7.0.0-alpha.51",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.9.6"
   },
-  "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
-      "optional": true
-    },
-    "@storybook/web-components": {
-      "optional": true
-    },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/actions/preview.ts",
+      "./src/actions/manager.ts",
+      "./src/backgrounds/preview.ts",
+      "./src/backgrounds/manager.ts",
+      "./src/controls/manager.ts",
+      "./src/docs/preview.ts",
+      "./src/docs/preset.ts",
+      "./src/highlight/preview.ts",
+      "./src/measure/preview.ts",
+      "./src/measure/manager.ts",
+      "./src/outline/preview.ts",
+      "./src/outline/manager.ts",
+      "./src/toolbars/manager.ts",
+      "./src/viewport/manager.ts"
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/addons/essentials/src/actions/manager.ts b/code/addons/essentials/src/actions/manager.ts
new file mode 100644
index 000000000000..7e125b743169
--- /dev/null
+++ b/code/addons/essentials/src/actions/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-actions/manager';
diff --git a/code/addons/essentials/src/actions/preview.ts b/code/addons/essentials/src/actions/preview.ts
new file mode 100644
index 000000000000..86c6d5f2e656
--- /dev/null
+++ b/code/addons/essentials/src/actions/preview.ts
@@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-actions/preview';
diff --git a/code/addons/essentials/src/backgrounds/manager.ts b/code/addons/essentials/src/backgrounds/manager.ts
new file mode 100644
index 000000000000..bc51f1b22b4e
--- /dev/null
+++ b/code/addons/essentials/src/backgrounds/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-backgrounds/manager';
diff --git a/code/addons/essentials/src/backgrounds/preview.ts b/code/addons/essentials/src/backgrounds/preview.ts
new file mode 100644
index 000000000000..5e56121e4a03
--- /dev/null
+++ b/code/addons/essentials/src/backgrounds/preview.ts
@@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-backgrounds/preview';
diff --git a/code/addons/essentials/src/controls/manager.ts b/code/addons/essentials/src/controls/manager.ts
new file mode 100644
index 000000000000..49e403523565
--- /dev/null
+++ b/code/addons/essentials/src/controls/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-controls/manager';
diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts
new file mode 100644
index 000000000000..dca808a37dd7
--- /dev/null
+++ b/code/addons/essentials/src/docs/preset.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/export */
+export * from '@storybook/addon-docs/dist/preset';
diff --git a/code/addons/essentials/src/docs/preview.ts b/code/addons/essentials/src/docs/preview.ts
new file mode 100644
index 000000000000..176a03c1f83f
--- /dev/null
+++ b/code/addons/essentials/src/docs/preview.ts
@@ -0,0 +1 @@
+export * from '@storybook/addon-docs/dist/preview';
diff --git a/code/addons/essentials/src/highlight/preview.ts b/code/addons/essentials/src/highlight/preview.ts
new file mode 100644
index 000000000000..ffcf62555af2
--- /dev/null
+++ b/code/addons/essentials/src/highlight/preview.ts
@@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-highlight/preview';
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 861fd91162da..96fd171146bb 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -1,4 +1,4 @@
-import path, { dirname, join } from 'path';
+import path from 'path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 
@@ -24,7 +24,8 @@ const requireMain = (configDir: string) => {
 };
 
 export function addons(options: PresetOptions) {
-  const checkInstalled = (addon: string, main: any) => {
+  const checkInstalled = (addonName: string, main: any) => {
+    const addon = `@storybook/addon-${addonName}`;
     const existingAddon = main.addons?.find((entry: string | { name: string }) => {
       const name = typeof entry === 'string' ? entry : entry.name;
       return name?.startsWith(addon);
@@ -36,35 +37,21 @@ export function addons(options: PresetOptions) {
   };
 
   const main = requireMain(options.configDir);
-  return (
-    [
-      'docs',
-      'controls',
-      'actions',
-      'backgrounds',
-      'viewport',
-      'toolbars',
-      'measure',
-      'outline',
-      'highlight',
-    ]
-      .filter((key) => (options as any)[key] !== false)
-      .map((key) => `@storybook/addon-${key}`)
-      .filter((addon) => !checkInstalled(addon, main))
-      // Use `require.resolve` to ensure Yarn PnP compatibility
-      // Files of various addons should be resolved in the context of `addon-essentials` as they are listed as deps here
-      // and not in `@storybook/core` nor in SB user projects. If `@storybook/core` make the require itself Yarn 2 will
-      // throw an error saying that the package to require must be added as a dependency. Doing `require.resolve` will
-      // allow `@storybook/core` to work with absolute path directly, no more require of dep no more issue.
-      // File to load can be `preset.js`, `register.js`, or the package entry point, so we need to check all these cases
-      // as it's done in `lib/core/src/server/presets.js`.
-      .map((addon) => {
-        try {
-          return dirname(require.resolve(join(addon, 'package.json')));
-          // eslint-disable-next-line no-empty
-        } catch (err) {}
-
-        return require.resolve(addon);
-      })
-  );
+  return [
+    'docs',
+    'controls',
+    'actions',
+    'backgrounds',
+    'viewport',
+    'toolbars',
+    'measure',
+    'outline',
+    'highlight',
+  ]
+    .filter((key) => (options as any)[key] !== false)
+    .filter((addon) => !checkInstalled(addon, main))
+    .map((addon) => {
+      // We point to the re-export from addon-essentials to support yarn pnp and pnpm.
+      return `@storybook/addon-essentials/${addon}`;
+    });
 }
diff --git a/code/addons/essentials/src/measure/manager.ts b/code/addons/essentials/src/measure/manager.ts
new file mode 100644
index 000000000000..cf95d95a76da
--- /dev/null
+++ b/code/addons/essentials/src/measure/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-measure/manager';
diff --git a/code/addons/essentials/src/measure/preview.ts b/code/addons/essentials/src/measure/preview.ts
new file mode 100644
index 000000000000..f18769ff001a
--- /dev/null
+++ b/code/addons/essentials/src/measure/preview.ts
@@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-measure/preview';
diff --git a/code/addons/essentials/src/outline/manager.ts b/code/addons/essentials/src/outline/manager.ts
new file mode 100644
index 000000000000..07a0a1e4879a
--- /dev/null
+++ b/code/addons/essentials/src/outline/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-outline/manager';
diff --git a/code/addons/essentials/src/outline/preview.ts b/code/addons/essentials/src/outline/preview.ts
new file mode 100644
index 000000000000..1cc44b9689a8
--- /dev/null
+++ b/code/addons/essentials/src/outline/preview.ts
@@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-outline/preview';
diff --git a/code/addons/essentials/src/toolbars/manager.ts b/code/addons/essentials/src/toolbars/manager.ts
new file mode 100644
index 000000000000..8c4868b1e254
--- /dev/null
+++ b/code/addons/essentials/src/toolbars/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-toolbars/manager';
diff --git a/code/addons/essentials/src/viewport/manager.ts b/code/addons/essentials/src/viewport/manager.ts
new file mode 100644
index 000000000000..7c052f303800
--- /dev/null
+++ b/code/addons/essentials/src/viewport/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-viewport/manager';
diff --git a/code/addons/essentials/tsconfig.json b/code/addons/essentials/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/addons/essentials/tsconfig.json
+++ b/code/addons/essentials/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/highlight/jest.config.js b/code/addons/highlight/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/highlight/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index c8a7d9ef48e6..aa74943371d2 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
@@ -30,15 +30,25 @@
       "types": "./dist/index.d.ts"
     },
     "./preview": {
-      "require": "./dist/highlight.js",
-      "import": "./dist/highlight.mjs",
-      "types": "./dist/highlight.d.ts"
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
     },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -50,13 +60,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "global": "^4.4.0"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -64,10 +74,10 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/highlight.ts"
+      "./src/preview.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "sbmodern": "dist/modern/index.js",
   "storybook": {
     "displayName": "Highlight",
diff --git a/code/addons/highlight/preview.js b/code/addons/highlight/preview.js
index f7dfc599138c..49ad602f79f4 100644
--- a/code/addons/highlight/preview.js
+++ b/code/addons/highlight/preview.js
@@ -1 +1 @@
-export * from './dist/highlight';
+export * from './dist/preview';
diff --git a/code/addons/highlight/src/highlight.ts b/code/addons/highlight/src/preview.ts
similarity index 100%
rename from code/addons/highlight/src/highlight.ts
rename to code/addons/highlight/src/preview.ts
diff --git a/code/addons/highlight/tsconfig.json b/code/addons/highlight/tsconfig.json
index 6b79f028c19c..c94fb6fc9dd5 100644
--- a/code/addons/highlight/tsconfig.json
+++ b/code/addons/highlight/tsconfig.json
@@ -4,13 +4,5 @@
     "rootDir": "./src",
     "types": ["webpack-env"]
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/interactions/jest.config.js b/code/addons/interactions/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/interactions/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 0eb7130861b4..6f120a25e357 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -33,9 +33,9 @@
       "types": "./dist/manager.d.ts"
     },
     "./preview": {
-      "require": "./dist/preset/preview.js",
-      "import": "./dist/preset/preview.mjs",
-      "types": "./dist/preset/preview.d.ts"
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
     },
     "./register.js": {
       "require": "./dist/manager.js",
@@ -47,6 +47,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -59,15 +72,15 @@
   },
   "dependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/instrumenter": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/instrumenter": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
@@ -76,9 +89,9 @@
   "devDependencies": {
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "formik": "^2.2.9",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -99,12 +112,12 @@
     "entries": [
       "./src/index.ts",
       "./src/manager.tsx",
-      "./src/preset/preview.ts",
+      "./src/preview.ts",
       "./src/preset/checkActionsLoaded.ts"
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Interactions",
     "unsupportedFrameworks": [
diff --git a/code/addons/interactions/preview.js b/code/addons/interactions/preview.js
index 48714cc6fba3..49ad602f79f4 100644
--- a/code/addons/interactions/preview.js
+++ b/code/addons/interactions/preview.js
@@ -1 +1 @@
-export * from './dist/preset/preview';
+export * from './dist/preview';
diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
index f55d28944c5a..179023b84906 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
diff --git a/code/addons/interactions/src/preset/preview.ts b/code/addons/interactions/src/preview.ts
similarity index 95%
rename from code/addons/interactions/src/preset/preview.ts
rename to code/addons/interactions/src/preview.ts
index d36c4bbf4f55..b4f094b7b986 100644
--- a/code/addons/interactions/src/preset/preview.ts
+++ b/code/addons/interactions/src/preview.ts
@@ -3,7 +3,7 @@
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   PlayFunction,
   PlayFunctionContext,
@@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
   return val;
 };
 
-const addActionsFromArgTypes: ArgsEnhancer<Framework> = ({ id, initialArgs }) =>
+const addActionsFromArgTypes: ArgsEnhancer<Renderer> = ({ id, initialArgs }) =>
   addSpies(id, initialArgs);
 
 export const argsEnhancers = [addActionsFromArgTypes];
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index 57af27cc34fa..9a1919e748c9 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import globalThis from 'global';
 import {
   within,
diff --git a/code/addons/interactions/tsconfig.json b/code/addons/interactions/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/addons/interactions/tsconfig.json
+++ b/code/addons/interactions/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/jest/jest.config.js b/code/addons/jest/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/jest/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 96f77afe0c62..dd08248b8e0c 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -48,6 +48,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -59,18 +69,18 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
     "upath": "^1.2.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -94,7 +104,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Jest",
     "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
diff --git a/code/addons/jest/src/shared.test.ts b/code/addons/jest/src/shared.test.ts
index e051f4563f61..ddc3a0c71b17 100644
--- a/code/addons/jest/src/shared.test.ts
+++ b/code/addons/jest/src/shared.test.ts
@@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
   });
 
   test('returns null if filename is a module ID that cannot be inferred from', () => {
-    // @ts-expect-error (Converted from ts-ignore)
+    // @ts-expect-error Storybook's fileName type is string, but according to this test it could be number in case it is a module id.
     expect(defineJestParameter({ fileName: 1234 })).toBeNull();
   });
 });
diff --git a/code/addons/jest/src/shared.ts b/code/addons/jest/src/shared.ts
index 9b761e1d9dec..ef078b7af8a8 100644
--- a/code/addons/jest/src/shared.ts
+++ b/code/addons/jest/src/shared.ts
@@ -1,4 +1,4 @@
-import type { Parameters } from '@storybook/types';
+import type { StorybookInternalParameters } from '@storybook/types';
 
 // addons, panels and events get unique names using a prefix
 export const PARAM_KEY = 'test';
@@ -7,7 +7,7 @@ export const PANEL_ID = `${ADDON_ID}/panel`;
 
 export const ADD_TESTS = `${ADDON_ID}/add_tests`;
 
-interface AddonParameters extends Parameters {
+interface AddonParameters extends StorybookInternalParameters {
   jest?: string | string[] | { disabled: true };
 }
 
diff --git a/code/addons/jest/tsconfig.json b/code/addons/jest/tsconfig.json
index f8b60c90fdef..73a65ef2ef6e 100644
--- a/code/addons/jest/tsconfig.json
+++ b/code/addons/jest/tsconfig.json
@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/links/jest.config.js b/code/addons/links/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/links/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 92cc62a00d09..c26f963e48ed 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",
@@ -52,6 +52,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -63,18 +76,18 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -99,7 +112,7 @@
       "./src/react/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Links",
     "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx
index 664670baa264..9b1d5e09552a 100644
--- a/code/addons/links/src/react/components/link.test.tsx
+++ b/code/addons/links/src/react/components/link.test.tsx
@@ -14,7 +14,6 @@ jest.mock('global', () => ({
       search: 'search',
     },
   },
-  // @ts-expect-error (Converted from ts-ignore)
   window: global,
   __STORYBOOK_STORY_STORE__: {
     fromId: jest.fn(() => ({})),
diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts
index 443886653810..291b613c7edb 100644
--- a/code/addons/links/src/utils.test.ts
+++ b/code/addons/links/src/utils.test.ts
@@ -5,9 +5,7 @@ import { linkTo, hrefTo } from './utils';
 
 jest.mock('@storybook/addons');
 jest.mock('global', () => ({
-  // @ts-expect-error (Converted from ts-ignore)
   document: global.document,
-  // @ts-expect-error (Converted from ts-ignore)
   window: global,
 }));
 
@@ -41,6 +39,7 @@ describe('preview', () => {
 
     it('should select the story (only) provided', () => {
       // simulate a currently selected, but not found as ID
+      // @ts-expect-error (not strict)
       const handler = linkTo(undefined, 'name');
       handler();
 
diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts
index b4ece3c80fea..73ba6e0d3322 100644
--- a/code/addons/links/src/utils.ts
+++ b/code/addons/links/src/utils.ts
@@ -49,7 +49,6 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
   });
 };
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
 const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
   typeof value === 'function' ? value(...args) : value;
 
diff --git a/code/addons/links/tsconfig.json b/code/addons/links/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/addons/links/tsconfig.json
+++ b/code/addons/links/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/measure/jest.config.js b/code/addons/measure/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/measure/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 6ab70183b27a..6305042530ad 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -50,6 +50,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -61,16 +74,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -94,7 +107,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Measure",
     "unsupportedFrameworks": [
diff --git a/code/addons/measure/src/withMeasure.ts b/code/addons/measure/src/withMeasure.ts
index e0a0fa1a101b..4dea5601dc7a 100644
--- a/code/addons/measure/src/withMeasure.ts
+++ b/code/addons/measure/src/withMeasure.ts
@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';
@@ -13,10 +13,7 @@ function findAndDrawElement(x: number, y: number) {
   drawSelectedElement(nodeAtPointerRef);
 }
 
-export const withMeasure = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
-) => {
+export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { measureEnabled } = context.globals;
 
   useEffect(() => {
diff --git a/code/addons/measure/tsconfig.json b/code/addons/measure/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/addons/measure/tsconfig.json
+++ b/code/addons/measure/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/outline/jest.config.js b/code/addons/outline/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/outline/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 478b1d9b23a6..90d030b061be 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -39,9 +39,9 @@
       "types": "./dist/manager.d.ts"
     },
     "./preview": {
-      "require": "./dist/preset/preview.js",
-      "import": "./dist/preset/preview.mjs",
-      "types": "./dist/preset/preview.d.ts"
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
     },
     "./register": {
       "require": "./dist/manager.js",
@@ -53,6 +53,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -64,17 +77,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -95,10 +108,10 @@
     "entries": [
       "./src/index.ts",
       "./src/manager.tsx",
-      "./src/preset/preview.tsx"
+      "./src/preview.tsx"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Outline",
     "unsupportedFrameworks": [
diff --git a/code/addons/outline/preview.js b/code/addons/outline/preview.js
index 48714cc6fba3..49ad602f79f4 100644
--- a/code/addons/outline/preview.js
+++ b/code/addons/outline/preview.js
@@ -1 +1 @@
-export * from './dist/preset/preview';
+export * from './dist/preview';
diff --git a/code/addons/outline/src/preset/preview.tsx b/code/addons/outline/src/preview.tsx
similarity index 51%
rename from code/addons/outline/src/preset/preview.tsx
rename to code/addons/outline/src/preview.tsx
index 1abee6e575c6..65161c6c4f29 100644
--- a/code/addons/outline/src/preset/preview.tsx
+++ b/code/addons/outline/src/preview.tsx
@@ -1,5 +1,5 @@
-import { withOutline } from '../withOutline';
-import { PARAM_KEY } from '../constants';
+import { withOutline } from './withOutline';
+import { PARAM_KEY } from './constants';
 
 export const decorators = [withOutline];
 
diff --git a/code/addons/outline/src/withOutline.ts b/code/addons/outline/src/withOutline.ts
index 1fc20affb60d..455d84ae945a 100644
--- a/code/addons/outline/src/withOutline.ts
+++ b/code/addons/outline/src/withOutline.ts
@@ -1,14 +1,11 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';
 import outlineCSS from './outlineCSS';
 
-export const withOutline = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
-) => {
+export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;
   const isInDocs = context.viewMode === 'docs';
diff --git a/code/addons/outline/tsconfig.json b/code/addons/outline/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/addons/outline/tsconfig.json
+++ b/code/addons/outline/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/storyshots/jest.config.js b/code/addons/storyshots/jest.config.js
new file mode 100644
index 000000000000..0115c67e5629
--- /dev/null
+++ b/code/addons/storyshots/jest.config.js
@@ -0,0 +1,12 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  snapshotSerializers: [...baseConfig.snapshotSerializers, 'enzyme-to-json/serializer'],
+  transform: {
+    ...baseConfig.transform,
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+  },
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json
index 539ef73cb34a..d4da0a55e08f 100644
--- a/code/addons/storyshots/storyshots-core/package.json
+++ b/code/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",
@@ -37,23 +37,22 @@
     "storybook": "yarn sb dev -p 6006"
   },
   "dependencies": {
-    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "7.0.0-alpha.48",
+    "@jest/transform": "^29.3.1",
+    "@storybook/addons": "7.0.0-alpha.51",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/glob": "^7.1.3",
-    "@types/jest": "^26.0.16",
-    "@types/jest-specific-snapshot": "^0.5.3",
+    "@types/jest-specific-snapshot": "^0.5.6",
     "core-js": "^3.8.2",
     "glob": "^7.1.6",
     "global": "^4.4.0",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "preact-render-to-string": "^5.1.19",
-    "pretty-format": "^26.6.2",
+    "pretty-format": "^28.0.0",
     "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "read-pkg-up": "^7.0.1",
     "ts-dedent": "^2.0.0"
@@ -62,12 +61,12 @@
     "@angular/core": "^13.3.6",
     "@angular/platform-browser-dynamic": "^13.3.6",
     "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.0-alpha.48",
-    "@storybook/angular": "7.0.0-alpha.48",
-    "@storybook/react": "7.0.0-alpha.48",
-    "@storybook/vue": "7.0.0-alpha.48",
-    "@storybook/vue3": "7.0.0-alpha.48",
-    "babel-loader": "^8.2.5",
+    "@storybook/addon-docs": "7.0.0-alpha.51",
+    "@storybook/angular": "7.0.0-alpha.51",
+    "@storybook/react": "7.0.0-alpha.51",
+    "@storybook/vue": "7.0.0-alpha.51",
+    "@storybook/vue3": "7.0.0-alpha.51",
+    "babel-loader": "^8.3.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.1",
     "jest-preset-angular": "^8.3.2",
@@ -144,7 +143,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Storyshots",
     "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
diff --git a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
index 168849f26be5..d066d1226e58 100644
--- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
+++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
@@ -4,33 +4,33 @@ const target = new Stories2SnapsConverter();
 
 describe('getSnapshotFileName', () => {
   it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
-    const context = { fileName: 'foo.js' };
+    const context = { fileName: 'foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot');
   });
 
   it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
-    const context = { fileName: 'foo.web.stories.js' };
+    const context = { fileName: 'foo.web.stories.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot');
   });
 
   it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
-    const context = { fileName: 'test/foo.js' };
+    const context = { fileName: 'test/foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot');
   });
 });
 
diff --git a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
index 527a946847c8..439a514f7bd4 100644
--- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
+++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
@@ -29,7 +29,15 @@ export class Stories2SnapsConverter {
     const { dir, name } = path.parse(fileName);
     const { snapshotsDirName, snapshotExtension } = this.options;
 
-    return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension });
+    // Convert to absolute path, in case jest is not running in CWD,
+    // else it will create snapshots with the wrong path
+    const absDir = path.isAbsolute(dir) ? dir : path.resolve(dir);
+
+    return path.format({
+      dir: path.join(absDir, snapshotsDirName),
+      name,
+      ext: snapshotExtension,
+    });
   }
 
   getSnapshotFileName(context: { fileName?: string; kind: any }) {
diff --git a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
index b4fb63b582ff..d52260268104 100644
--- a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
+++ b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts
@@ -52,7 +52,6 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
       const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
       const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
 
-      // @ts-expect-error (Converted from ts-ignore)
       expect(storyshots).notToBeAbandoned(stories2snapsConverter);
     });
   });
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
index c844fe11973d..80b863c51102 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
@@ -1,11 +1,11 @@
-import type { Framework, Addon_Loadable } from '@storybook/types';
+import type { Renderer, Addon_Loadable } from '@storybook/types';
 import type { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi<TFramework extends Framework> extends ClientApiClass<Framework> {
+export interface ClientApi<TRenderer extends Renderer> extends ClientApiClass<Renderer> {
   configure(
     loader: Addon_Loadable,
     module: NodeModule | false,
@@ -19,7 +19,7 @@ export interface Loader {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi<Framework>;
+    storybook: ClientApi<Renderer>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
index 401b25764122..40a7def7ffa7 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts
@@ -33,17 +33,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   setupAngularJestPreset();
 
-  const storybook = jest.requireActual('@storybook/angular');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
+
+  jest.mock('@storybook/angular', () => {
+    const renderAPI = jest.requireActual('@storybook/angular');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/angular');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -52,7 +70,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for angular');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
index 25c03f8622e8..aafc21c96f6c 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   ArgTypesEnhancer,
   CoreCommon_NormalizedStoriesSpecifier,
@@ -87,9 +87,9 @@ function getConfigPathParts(input: string): Output {
   return { preview: configDir };
 }
 
-function configure<TFramework extends Framework>(
+function configure<TRenderer extends Renderer>(
   options: {
-    storybook: ClientApi<TFramework>;
+    storybook: ClientApi<TRenderer>;
   } & StoryshotsOptions
 ): void {
   const { configPath = '.storybook', config, storybook } = options;
@@ -125,7 +125,7 @@ function configure<TFramework extends Framework>(
     } = jest.requireActual(preview);
 
     if (decorators) {
-      decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
+      decorators.forEach((decorator: DecoratorFunction<TRenderer>) =>
         storybook.addDecorator(decorator)
       );
     }
@@ -136,12 +136,12 @@ function configure<TFramework extends Framework>(
       storybook.addStepRunner(runStep);
     }
     if (argsEnhancers) {
-      argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
+      argsEnhancers.forEach((enhancer: ArgsEnhancer<TRenderer>) =>
         storybook.addArgsEnhancer(enhancer as any)
       );
     }
     if (argTypesEnhancers) {
-      argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TFramework>) =>
+      argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TRenderer>) =>
         storybook.addArgTypesEnhancer(enhancer as any)
       );
     }
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
index 6cc2b9d3e943..55a8dfdd6b12 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts
@@ -10,17 +10,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'html';
 
-  const storybook = jest.requireActual('@storybook/html');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
+
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/html', () => {
+    const renderAPI = jest.requireActual('@storybook/html');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/html');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -29,7 +47,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for HTML');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
index c45f7c9b8efc..986dcf5f911f 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts
@@ -16,17 +16,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'preact';
 
-  const storybook = jest.requireActual('@storybook/preact');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
+
+  jest.mock('@storybook/preact', () => {
+    const renderAPI = jest.requireActual('@storybook/preact');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/preact');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -35,7 +53,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for preact');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
index 86284861d29b..2d14593fd096 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts
@@ -11,17 +11,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'rax';
 
-  const storybook = jest.requireActual('@storybook/rax');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
+
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/rax', () => {
+    const renderAPI = jest.requireActual('@storybook/rax');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/rax');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -30,7 +48,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for rax');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
index a31758cdc2b9..7c0e51d23f0f 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/react-native/loader.ts
@@ -25,20 +25,14 @@ function configure(options: StoryshotsOptions, storybook: any) {
 
 function load(options: StoryshotsOptions) {
   const storybook = jest.requireActual('@storybook/react-native');
-  const clientAPI = jest.requireActual('@storybook/client-api');
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
-
-  configure(options, api);
+  configure(options, storybook);
 
   return {
     renderTree: require('../react/renderTree').default,
     renderShallowTree: require('../react/renderShallowTree').default,
     framework: 'react-native' as const,
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
index 1ba371b1d622..bc6f9153f10f 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts
@@ -8,24 +8,42 @@ function test(options: StoryshotsOptions): boolean {
 }
 
 function load(options: StoryshotsOptions) {
-  const storybook = jest.requireActual('@storybook/react');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
+
+  jest.mock('@storybook/react', () => {
+    const renderAPI = jest.requireActual('@storybook/react');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/react');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
     framework: 'react' as const,
     renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: jest.requireActual('./renderShallowTree').default,
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
index 1e352031dfba..bd131ba1f80f 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts
@@ -16,17 +16,35 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'riot';
   mockRiotToIncludeCompiler();
 
-  const storybook = jest.requireActual('@storybook/riot');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
+
+  jest.mock('@storybook/riot', () => {
+    const renderAPI = jest.requireActual('@storybook/riot');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/riot');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -35,7 +53,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for riot');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
index 8f874c7468bd..d7a45bc58466 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts
@@ -13,26 +13,43 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'svelte';
 
-  const storybook = jest.requireActual('@storybook/svelte');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
+
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/svelte', () => {
+    const renderAPI = jest.requireActual('@storybook/svelte');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/svelte');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
-
   return {
     framework: 'svelte' as const,
     renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for svelte');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
index 3748e7713633..bb97cd1560b5 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts
@@ -16,26 +16,43 @@ function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'vue';
   mockVueToIncludeCompiler();
 
-  const storybook = jest.requireActual('@storybook/vue');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
+
+  jest.mock('@storybook/vue', () => {
+    const renderAPI = jest.requireActual('@storybook/vue');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/vue');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
-
   return {
     framework: 'vue' as const,
     renderTree: jest.requireActual('./renderTree').default,
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for vue');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts
index 980b26e14c98..01de29fa01cc 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts
@@ -11,17 +11,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'vue3';
 
-  const storybook = jest.requireActual('@storybook/vue');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
+
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/vue3', () => {
+    const renderAPI = jest.requireActual('@storybook/vue3');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/vue3');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -30,7 +48,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for Vue 3');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
index 35f8020718f3..b17cd8f4474f 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
@@ -10,17 +10,35 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   global.STORYBOOK_ENV = 'web-components';
 
-  const storybook = jest.requireActual('@storybook/html');
-  const clientAPI = jest.requireActual('@storybook/client-api');
+  let mockStartedAPI: any;
+
+  jest.mock('@storybook/core-client', () => {
+    const coreClientAPI = jest.requireActual('@storybook/core-client');
+
+    return {
+      ...coreClientAPI,
+      start: (...args: any[]) => {
+        mockStartedAPI = coreClientAPI.start(...args);
+        return mockStartedAPI;
+      },
+    };
+  });
 
-  const api = {
-    ...clientAPI,
-    ...storybook,
-  };
+  jest.mock('@storybook/html', () => {
+    const renderAPI = jest.requireActual('@storybook/html');
+
+    renderAPI.addDecorator = mockStartedAPI.clientApi.addDecorator;
+    renderAPI.addParameters = mockStartedAPI.clientApi.addParameters;
+
+    return renderAPI;
+  });
+
+  // eslint-disable-next-line global-require
+  const storybook = require('@storybook/html');
 
   configure({
     ...options,
-    storybook: api,
+    storybook,
   });
 
   return {
@@ -29,7 +47,7 @@ function load(options: StoryshotsOptions) {
     renderShallowTree: () => {
       throw new Error('Shallow renderer is not supported for web-components');
     },
-    storybook: api,
+    storybook,
   };
 }
 
diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json
index 50097f24f000..125d5283599a 100644
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",
@@ -35,17 +35,17 @@
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
     "@storybook/csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "@types/jest-image-snapshot": "^4.1.3",
-    "jest-image-snapshot": "^4.3.0"
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
+    "@types/jest-image-snapshot": "^5.1.0",
+    "jest-image-snapshot": "^6.0.0"
   },
   "devDependencies": {
     "@types/puppeteer": "^5.4.0",
     "puppeteer": "^2.0.0 || ^3.0.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.48",
+    "@storybook/addon-storyshots": "7.0.0-alpha.51",
     "puppeteer": ">=2.0.0"
   },
   "peerDependenciesMeta": {
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/addons/storyshots/storyshots-puppeteer/tsconfig.json b/code/addons/storyshots/storyshots-puppeteer/tsconfig.json
index 8198a4b0a167..d16da0e1d60f 100644
--- a/code/addons/storyshots/storyshots-puppeteer/tsconfig.json
+++ b/code/addons/storyshots/storyshots-puppeteer/tsconfig.json
@@ -5,6 +5,5 @@
     "types": ["node"],
     "declaration": true
   },
-  "include": ["src/**/*"],
-  "exclude": []
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/storysource/jest.config.js b/code/addons/storysource/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/storysource/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index 587615a846c7..a18a4f13d23b 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
@@ -53,21 +53,21 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/source-loader": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/source-loader": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
     "estraverse": "^5.2.0",
     "prop-types": "^15.7.2",
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
-    "@types/react": "^16.14.23",
+    "@types/react": "^16.14.34",
     "@types/react-syntax-highlighter": "11.0.5",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -91,7 +91,7 @@
       "./src/preset.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Storysource",
     "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
diff --git a/code/addons/storysource/tsconfig.json b/code/addons/storysource/tsconfig.json
index 13c4f6e9ee64..cf1e09965901 100644
--- a/code/addons/storysource/tsconfig.json
+++ b/code/addons/storysource/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/toolbars/jest.config.js b/code/addons/toolbars/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/toolbars/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 0b4cbde72ca5..8dce94d497bf 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
@@ -46,6 +46,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -57,14 +67,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48"
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -88,7 +98,7 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Toolbars",
     "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
diff --git a/code/addons/toolbars/tsconfig.json b/code/addons/toolbars/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/addons/toolbars/tsconfig.json
+++ b/code/addons/toolbars/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/addons/viewport/jest.config.js b/code/addons/viewport/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/addons/viewport/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 35d69a6bc5b9..1174a56e8339 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -48,6 +48,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -59,18 +72,18 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -95,7 +108,7 @@
       "./src/preview.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded",
   "storybook": {
     "displayName": "Viewport",
     "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts
index 779726eb9e23..6e9b7302b1c1 100644
--- a/code/addons/viewport/src/shortcuts.ts
+++ b/code/addons/viewport/src/shortcuts.ts
@@ -1,6 +1,11 @@
 import type { API } from '@storybook/api';
 import { ADDON_ID } from './constants';
 
+type State = {
+  selected: string;
+  isRotated: boolean;
+};
+
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>
   viewportsKeys.indexOf(current);
 
@@ -24,7 +29,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['shift', 'V'],
     actionName: 'previous',
     action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: getPreviousViewport(viewportsKeys, selected),
         isRotated,
@@ -37,7 +42,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['V'],
     actionName: 'next',
     action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: getNextViewport(viewportsKeys, selected),
         isRotated,
@@ -50,7 +55,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['alt', 'V'],
     actionName: 'reset',
     action: () => {
-      const { isRotated } = api.getAddonState(ADDON_ID);
+      const { isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: 'reset',
         isRotated,
diff --git a/code/addons/viewport/tsconfig.json b/code/addons/viewport/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/addons/viewport/tsconfig.json
+++ b/code/addons/viewport/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/angular/jest.config.js b/code/frameworks/angular/jest.config.js
index 687a16f155b2..dc0ffa5cecd4 100644
--- a/code/frameworks/angular/jest.config.js
+++ b/code/frameworks/angular/jest.config.js
@@ -1,5 +1,12 @@
+const path = require('path');
+
 module.exports = {
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
-  transformIgnorePatterns: ['^.+\\.js$'],
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
 };
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 52275544488c..6dcb8e151f57 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -34,23 +34,24 @@
     "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
-    "@types/react": "^16.14.23",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
+    "@types/webpack-env": "^1.18.0",
     "core-js": "^3.8.2",
     "find-up": "^5.0.0",
     "global": "^4.4.0",
@@ -80,12 +81,12 @@
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
     "jest-preset-angular": "^12.0.0",
-    "jest-specific-snapshot": "^5.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "webpack": "5",
     "zone.js": "^0.11.0"
   },
@@ -122,5 +123,5 @@
     "access": "public"
   },
   "builders": "dist/builders/builders.json",
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/angular/setup-jest.ts b/code/frameworks/angular/setup-jest.ts
index 3caa91649606..06e753a2e78e 100644
--- a/code/frameworks/angular/setup-jest.ts
+++ b/code/frameworks/angular/setup-jest.ts
@@ -1,4 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'jest-preset-angular/setup-jest';
 
+import { webcrypto } from 'node:crypto';
+
+Object.defineProperty(window, 'crypto', {
+  get() {
+    return webcrypto;
+  },
+});
+
 global.EventSource = class {} as any;
diff --git a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
index f539e00793a0..c5164efcf99e 100644
--- a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
+++ b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
@@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';
 
-const buildStandaloneMock = jest.fn();
-jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+const buildDevStandaloneMock = jest.fn();
+const buildStaticStandaloneMock = jest.fn();
+const buildMock = {
+  buildDevStandalone: buildDevStandaloneMock,
+  buildStaticStandalone: buildStaticStandaloneMock,
+};
+jest.doMock('@storybook/core-server', () => buildMock);
 jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 
 const cpSpawnMock = {
@@ -50,7 +55,7 @@ describe('Build Storybook Builder', () => {
   });
 
   beforeEach(() => {
-    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    buildStaticStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
     cpSpawnMock.spawn.mockImplementation(() => ({
       stdout: { on: () => {} },
       stderr: { on: () => {} },
@@ -74,14 +79,16 @@ describe('Build Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       configDir: '.storybook',
+      docs: undefined,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
       mode: 'static',
       tsConfig: './storybook/tsconfig.ts',
       webpackStatsJson: false,
@@ -100,14 +107,16 @@ describe('Build Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       configDir: '.storybook',
+      docs: undefined,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
       mode: 'static',
       tsConfig: 'path/to/tsConfig.json',
       webpackStatsJson: false,
@@ -127,14 +136,16 @@ describe('Build Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       configDir: '.storybook',
+      docs: undefined,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
       mode: 'static',
       tsConfig: 'path/to/tsConfig.json',
       webpackStatsJson: true,
@@ -142,7 +153,7 @@ describe('Build Storybook Builder', () => {
   });
 
   it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(true);
+    buildStaticStandaloneMock.mockRejectedValue(true);
 
     const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
       browserTarget: 'angular-cli:build-2',
@@ -177,16 +188,19 @@ describe('Build Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
+        shell: true,
       }
     );
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       configDir: '.storybook',
+      docs: undefined,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
       mode: 'static',
       tsConfig: './storybook/tsconfig.ts',
       webpackStatsJson: false,
@@ -206,14 +220,16 @@ describe('Build Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: { styles: ['style.scss'] },
       configDir: '.storybook',
+      docs: undefined,
       loglevel: undefined,
       quiet: false,
       outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
       mode: 'static',
       tsConfig: 'path/to/tsConfig.json',
       webpackStatsJson: false,
diff --git a/code/frameworks/angular/src/builders/start-storybook/index.spec.ts b/code/frameworks/angular/src/builders/start-storybook/index.spec.ts
index aacd352b6a8c..c70d7cbf5b37 100644
--- a/code/frameworks/angular/src/builders/start-storybook/index.spec.ts
+++ b/code/frameworks/angular/src/builders/start-storybook/index.spec.ts
@@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';
 
-const buildStandaloneMock = jest.fn();
-jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+const buildDevStandaloneMock = jest.fn();
+const buildStaticStandaloneMock = jest.fn();
+const buildMock = {
+  buildDevStandalone: buildDevStandaloneMock,
+  buildStaticStandalone: buildStaticStandaloneMock,
+};
+jest.doMock('@storybook/core-server', () => buildMock);
 jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));
 
 const cpSpawnMock = {
@@ -49,7 +54,7 @@ describe('Start Storybook Builder', () => {
   });
 
   beforeEach(() => {
-    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    buildDevStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
     cpSpawnMock.spawn.mockImplementation(() => ({
       stdout: { on: () => {} },
       stderr: { on: () => {} },
@@ -74,14 +79,16 @@ describe('Start Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
+      docs: undefined,
       host: 'localhost',
       https: false,
+      packageJson: expect.any(Object),
       port: 4400,
       quiet: false,
       smokeTest: false,
@@ -105,14 +112,16 @@ describe('Start Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
+      docs: undefined,
       host: 'localhost',
       https: false,
+      packageJson: expect.any(Object),
       port: 4400,
       quiet: false,
       smokeTest: false,
@@ -124,7 +133,7 @@ describe('Start Storybook Builder', () => {
   });
 
   it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(true);
+    buildDevStandaloneMock.mockRejectedValue(true);
 
     const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
       browserTarget: 'angular-cli:build-2',
@@ -159,16 +168,19 @@ describe('Start Storybook Builder', () => {
       ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
       {
         cwd: '',
+        shell: true,
       }
     );
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: 'angular-cli:build-2',
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {},
       ci: false,
       configDir: '.storybook',
+      docs: undefined,
       host: 'localhost',
       https: false,
+      packageJson: expect.any(Object),
       port: 9009,
       quiet: false,
       smokeTest: false,
@@ -193,7 +205,7 @@ describe('Start Storybook Builder', () => {
 
     expect(output.success).toBeTruthy();
     expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
       angularBrowserTarget: null,
       angularBuilderContext: expect.any(Object),
       angularBuilderOptions: {
@@ -201,9 +213,11 @@ describe('Start Storybook Builder', () => {
       },
       ci: false,
       configDir: '.storybook',
+      docs: undefined,
       host: 'localhost',
       https: false,
       port: 4400,
+      packageJson: expect.any(Object),
       quiet: false,
       smokeTest: false,
       sslCa: undefined,
diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
index 900bc6a7669f..06d0f37a5223 100644
--- a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
+++ b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
@@ -51,6 +51,7 @@ describe('runCompodoc', () => {
       ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
       {
         cwd: 'path/to/project',
+        shell: true,
       }
     );
   });
@@ -74,6 +75,7 @@ describe('runCompodoc', () => {
       ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
       {
         cwd: 'path/to/project',
+        shell: true,
       }
     );
   });
diff --git a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts
index 0129a09f68a2..a50a8c5ff80c 100644
--- a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts
+++ b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts
@@ -18,8 +18,8 @@ describe('RendererFactory', () => {
   beforeEach(async () => {
     rendererFactory = new RendererFactory();
     document.body.innerHTML =
-      '<div id="root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
-    rootTargetDOMNode = global.document.getElementById('root');
+      '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+    rootTargetDOMNode = global.document.getElementById('storybook-root');
     rootDocstargetDOMNode = global.document.getElementById('root-docs');
     (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
     jest.spyOn(console, 'log').mockImplementation(() => {});
@@ -301,14 +301,16 @@ describe('RendererFactory', () => {
       });
 
       it('should reset root HTML', async () => {
-        global.document.getElementById('root').appendChild(global.document.createElement('👾'));
+        global.document
+          .getElementById('storybook-root')
+          .appendChild(global.document.createElement('👾'));
 
-        expect(global.document.getElementById('root').innerHTML).toContain('Canvas 🖼');
+        expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
         const render = await rendererFactory.getRendererInstance(
           'my-story-in-docs',
           rootDocstargetDOMNode
         );
-        expect(global.document.getElementById('root').innerHTML).toBe('');
+        expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
       });
     });
 
diff --git a/code/frameworks/angular/src/client/angular/helpers.ts b/code/frameworks/angular/src/client/angular/helpers.ts
index ce0c1fcd9f1c..10ce71718090 100644
--- a/code/frameworks/angular/src/client/angular/helpers.ts
+++ b/code/frameworks/angular/src/client/angular/helpers.ts
@@ -7,7 +7,7 @@ import { Subscriber, Observable, ReplaySubject } from 'rxjs';
 import { PartialStoryFn } from '@storybook/types';
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
-import { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types';
+import { NgModuleMetadata, StoryFnAngularReturnType, AngularRenderer } from '../types';
 
 const { document } = global;
 
@@ -131,7 +131,7 @@ const getExistenceOfComponentInModules = (
   });
 };
 
-const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
+const initModule = (storyFn: PartialStoryFn<AngularRenderer>) => {
   const storyObj = storyFn();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
@@ -198,7 +198,7 @@ const draw = (newModule: DynamicComponentType): void => {
   }
 };
 
-export const renderNgApp = (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => {
+export const renderNgApp = (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => {
   if (!forced) {
     draw(initModule(storyFn));
   } else {
diff --git a/code/frameworks/angular/src/client/decorateStory.test.ts b/code/frameworks/angular/src/client/decorateStory.test.ts
index 646f56398c80..bf5d7b6dd5bb 100644
--- a/code/frameworks/angular/src/client/decorateStory.test.ts
+++ b/code/frameworks/angular/src/client/decorateStory.test.ts
@@ -3,12 +3,12 @@ import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { componentWrapperDecorator } from './decorators';
 
 import decorateStory from './decorateStory';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 describe('decorateStory', () => {
   describe('angular behavior', () => {
     it('should use componentWrapperDecorator with args', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent, ({ args }) => args),
         componentWrapperDecorator(
           (story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`,
@@ -42,7 +42,7 @@ describe('decorateStory', () => {
     });
 
     it('should use componentWrapperDecorator with input / output', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent, {
           parentInput: 'Parent input',
           parentOutput: () => {},
@@ -81,7 +81,7 @@ describe('decorateStory', () => {
     });
 
     it('should use componentWrapperDecorator', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent),
         componentWrapperDecorator((story) => `<grandparent>${story}</grandparent>`),
         componentWrapperDecorator((story) => `<great-grandparent>${story}</great-grandparent>`),
@@ -96,7 +96,7 @@ describe('decorateStory', () => {
     });
 
     it('should use template in preference to component parameters', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -129,7 +129,7 @@ describe('decorateStory', () => {
     });
 
     it('should include story templates in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -162,7 +162,7 @@ describe('decorateStory', () => {
     });
 
     it('should include story components in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -195,7 +195,7 @@ describe('decorateStory', () => {
     });
 
     it('should include legacy story components in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -229,7 +229,7 @@ describe('decorateStory', () => {
     });
 
     it('should keep template with an empty value', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent),
       ];
       const decorated = decorateStory(() => ({ template: '' }), decorators);
@@ -272,7 +272,7 @@ describe('decorateStory', () => {
 
   describe('default behavior', () => {
     it('calls decorators in out to in order', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return { ...story, props: { a: [...story.props.a, 1] } };
@@ -292,7 +292,7 @@ describe('decorateStory', () => {
     });
 
     it('passes context through to sub decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s, c) => {
           const story = s({ ...c, k: 1 });
           return { ...story, props: { a: [...story.props.a, c.k] } };
@@ -312,7 +312,7 @@ describe('decorateStory', () => {
     });
 
     it('DOES NOT merge parameter or pass through parameters key in context', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s, c) => {
           const story = s({ ...c, k: 1, parameters: { p: 1 } });
           return {
@@ -347,7 +347,7 @@ describe('decorateStory', () => {
   });
 });
 
-function makeContext(input: Record<string, unknown>): StoryContext<AngularFramework> {
+function makeContext(input: Record<string, unknown>): StoryContext<AngularRenderer> {
   return {
     id: 'id',
     kind: 'kind',
@@ -355,7 +355,7 @@ function makeContext(input: Record<string, unknown>): StoryContext<AngularFramew
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext<AngularFramework>;
+  } as StoryContext<AngularRenderer>;
 }
 
 @Component({
diff --git a/code/frameworks/angular/src/client/decorateStory.ts b/code/frameworks/angular/src/client/decorateStory.ts
index a7816084f232..2b3daf651371 100644
--- a/code/frameworks/angular/src/client/decorateStory.ts
+++ b/code/frameworks/angular/src/client/decorateStory.ts
@@ -2,15 +2,15 @@ import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/types
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 export default function decorateStory(
-  mainStoryFn: LegacyStoryFn<AngularFramework>,
-  decorators: DecoratorFunction<AngularFramework>[]
-): LegacyStoryFn<AngularFramework> {
+  mainStoryFn: LegacyStoryFn<AngularRenderer>,
+  decorators: DecoratorFunction<AngularRenderer>[]
+): LegacyStoryFn<AngularRenderer> {
   const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
-    (previousStoryFn: LegacyStoryFn<AngularFramework>, decorator) =>
-      (context: StoryContext<AngularFramework>) => {
+    (previousStoryFn: LegacyStoryFn<AngularRenderer>, decorator) =>
+      (context: StoryContext<AngularRenderer>) => {
         const decoratedStory = decorator((update) => {
           return previousStoryFn({
             ...context,
@@ -29,9 +29,9 @@ export default function decorateStory(
 export { decorateStory };
 
 const prepareMain = (
-  story: AngularFramework['storyResult'],
-  context: StoryContext<AngularFramework>
-): AngularFramework['storyResult'] => {
+  story: AngularRenderer['storyResult'],
+  context: StoryContext<AngularRenderer>
+): AngularRenderer['storyResult'] => {
   let { template } = story;
 
   const component = story.component ?? context.component;
@@ -50,7 +50,7 @@ function hasNoTemplate(template: string | null | undefined): template is undefin
   return template === null || template === undefined;
 }
 
-const cleanArgsDecorator: DecoratorFunction<AngularFramework> = (storyFn, context) => {
+const cleanArgsDecorator: DecoratorFunction<AngularRenderer> = (storyFn, context) => {
   if (!context.argTypes || !context.args) {
     return storyFn();
   }
diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts
index 3f7651051f2a..8ed4e347c55a 100644
--- a/code/frameworks/angular/src/client/decorators.test.ts
+++ b/code/frameworks/angular/src/client/decorators.test.ts
@@ -2,9 +2,9 @@ import { Addon_StoryContext } from '@storybook/types';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
-const defaultContext: Addon_StoryContext<AngularFramework> = {
+const defaultContext: Addon_StoryContext<AngularRenderer> = {
   componentId: 'unspecified',
   kind: 'unspecified',
   title: 'unspecified',
diff --git a/code/frameworks/angular/src/client/decorators.ts b/code/frameworks/angular/src/client/decorators.ts
index 9e5a59ca04e6..b34b416e71a2 100644
--- a/code/frameworks/angular/src/client/decorators.ts
+++ b/code/frameworks/angular/src/client/decorators.ts
@@ -3,12 +3,12 @@ import { Type } from '@angular/core';
 import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
-import { ICollection, NgModuleMetadata, AngularFramework } from './types';
+import { ICollection, NgModuleMetadata, AngularRenderer } from './types';
 
 // We use `any` here as the default type rather than `Args` because we need something that is
 // castable to any component-specific args type when the user is being careful.
 export const moduleMetadata =
-  <TArgs = any>(metadata: Partial<NgModuleMetadata>): DecoratorFunction<AngularFramework, TArgs> =>
+  <TArgs = any>(metadata: Partial<NgModuleMetadata>): DecoratorFunction<AngularRenderer, TArgs> =>
   (storyFn) => {
     const story = storyFn();
     const storyMetadata = story.moduleMetadata || {};
@@ -32,8 +32,8 @@ export const moduleMetadata =
 export const componentWrapperDecorator =
   <TArgs = any>(
     element: Type<unknown> | ((story: string) => string),
-    props?: ICollection | ((storyContext: StoryContext<AngularFramework, TArgs>) => ICollection)
-  ): DecoratorFunction<AngularFramework, TArgs> =>
+    props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)
+  ): DecoratorFunction<AngularRenderer, TArgs> =>
   (storyFn, storyContext) => {
     const story = storyFn();
     const currentProps = typeof props === 'function' ? (props(storyContext) as ICollection) : props;
diff --git a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot
index dbb2d4c08edf..de95727d81f5 100644
--- a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot
+++ b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-posix.snapshot
@@ -10,7 +10,7 @@ Object {
           "getSignature": Object {
             "description": "<p>Getter for <code>inputValue</code>.</p>
 ",
-            "line": 115,
+            "line": 116,
             "name": "inputValue",
             "rawdescription": "
 Getter for \`inputValue\`.",
@@ -42,7 +42,7 @@ Getter for \`inputValue\`.",
                 "type": "string",
               },
             ],
-            "line": 110,
+            "line": 111,
             "name": "inputValue",
             "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
                 "type": "T[]",
               },
             ],
-            "line": 195,
+            "line": 196,
             "name": "item",
             "returnType": "void",
             "type": "void",
@@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
           "getSignature": Object {
             "description": "<p>Get the private value.</p>
 ",
-            "line": 154,
+            "line": 155,
             "name": "value",
             "rawdescription": "
 Get the private value.",
@@ -116,7 +116,7 @@ Get the private value.",
                 "type": "string | number",
               },
             ],
-            "line": 149,
+            "line": 150,
             "name": "value",
             "rawdescription": "
 Set the private value.",
@@ -137,14 +137,14 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
 ",
       "encapsulation": Array [],
       "entryComponents": Array [],
-      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
       "hostBindings": Array [
         Object {
           "decorators": Array [],
           "defaultValue": "false",
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 124,
+          "line": 125,
           "name": "class.focused",
           "type": "boolean",
         },
@@ -164,7 +164,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
           ],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 120,
+          "line": 121,
           "name": "click",
         },
       ],
@@ -177,7 +177,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
           "deprecationMessage": "",
           "description": "<p>Specify the accent-type of the button</p>
 ",
-          "line": 56,
+          "line": 57,
           "name": "accent",
           "rawdescription": "
 Specify the accent-type of the button",
@@ -190,7 +190,7 @@ Specify the accent-type of the button",
           "deprecationMessage": "",
           "description": "<p>Appearance style of the button.</p>
 ",
-          "line": 52,
+          "line": 53,
           "name": "appearance",
           "rawdescription": "
 Appearance style of the button.",
@@ -202,7 +202,7 @@ Appearance style of the button.",
           "deprecationMessage": "",
           "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
 ",
-          "line": 110,
+          "line": 111,
           "name": "inputValue",
           "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
           "deprecationMessage": "",
           "description": "<p>Sets the button to a disabled state.</p>
 ",
-          "line": 60,
+          "line": 61,
           "name": "isDisabled",
           "rawdescription": "
 Sets the button to a disabled state.",
@@ -225,7 +225,7 @@ Sets the button to a disabled state.",
           "decorators": Array [],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 195,
+          "line": 196,
           "name": "item",
           "type": "T[]",
         },
@@ -238,24 +238,24 @@ Sets the button to a disabled state.",
           "jsdoctags": Array [
             Object {
               "comment": "",
-              "end": 1525,
+              "end": 1587,
               "flags": 4227072,
               "kind": 325,
               "modifierFlagsCache": 0,
-              "pos": 1512,
+              "pos": 1574,
               "tagName": Object {
-                "end": 1521,
+                "end": 1583,
                 "escapedText": "required",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 1513,
+                "pos": 1575,
                 "transformFlags": 0,
               },
               "transformFlags": 0,
             },
           ],
-          "line": 68,
+          "line": 69,
           "name": "label",
           "rawdescription": "
 
@@ -268,7 +268,7 @@ The inner text of the button.
           "decorators": Array [],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 192,
+          "line": 193,
           "name": "showKeyAlias",
           "type": "",
         },
@@ -279,7 +279,7 @@ The inner text of the button.
           "deprecationMessage": "",
           "description": "<p>Size of the button.</p>
 ",
-          "line": 72,
+          "line": 73,
           "name": "size",
           "rawdescription": "
 Size of the button.",
@@ -291,7 +291,7 @@ Size of the button.",
           "deprecationMessage": "",
           "description": "<p>Specifies some arbitrary object</p>
 ",
-          "line": 75,
+          "line": 76,
           "name": "someDataObject",
           "rawdescription": "
 Specifies some arbitrary object",
@@ -307,24 +307,24 @@ Specifies some arbitrary object",
           "jsdoctags": Array [
             Object {
               "comment": "",
-              "end": 1802,
+              "end": 1864,
               "flags": 4227072,
               "kind": 329,
               "modifierFlagsCache": 0,
-              "pos": 1787,
+              "pos": 1849,
               "tagName": Object {
-                "end": 1798,
+                "end": 1860,
                 "escapedText": "deprecated",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 1788,
+                "pos": 1850,
                 "transformFlags": 0,
               },
               "transformFlags": 0,
             },
           ],
-          "line": 83,
+          "line": 84,
           "name": "somethingYouShouldNotUse",
           "rawdescription": "
 
@@ -361,21 +361,21 @@ Some input you shouldn't use.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3518,
+                "end": 3580,
                 "escapedText": "x",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3517,
+                "pos": 3579,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 3516,
+                "end": 3578,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3511,
+                "pos": 3573,
                 "transformFlags": 0,
               },
               "type": "number",
@@ -386,27 +386,27 @@ Some input you shouldn't use.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3563,
+                "end": 3625,
                 "escapedText": "y",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3562,
+                "pos": 3624,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 3561,
+                "end": 3623,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3556,
+                "pos": 3618,
                 "transformFlags": 0,
               },
               "type": "string | number",
             },
           ],
-          "line": 164,
+          "line": 165,
           "modifierKind": Array [
             123,
           ],
@@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together.
               "type": "",
             },
           ],
-          "line": 120,
+          "line": 121,
           "name": "onClickListener",
           "optional": false,
           "returnType": "void",
@@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 4079,
+                "end": 4141,
                 "escapedText": "password",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 4071,
+                "pos": 4133,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 4070,
+                "end": 4132,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 4065,
+                "pos": 4127,
                 "transformFlags": 0,
               },
               "type": "string",
             },
           ],
-          "line": 187,
+          "line": 188,
           "modifierKind": Array [
             121,
           ],
@@ -529,28 +529,28 @@ A private method.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3938,
+                "end": 4000,
                 "escapedText": "id",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3936,
+                "pos": 3998,
                 "transformFlags": 0,
               },
               "optional": true,
               "tagName": Object {
-                "end": 3935,
+                "end": 3997,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3930,
+                "pos": 3992,
                 "transformFlags": 0,
               },
               "type": "number",
             },
           ],
-          "line": 178,
+          "line": 179,
           "modifierKind": Array [
             122,
           ],
@@ -588,7 +588,7 @@ A protected method.
               "type": "ISomeInterface",
             },
           ],
-          "line": 169,
+          "line": 170,
           "modifierKind": Array [
             123,
           ],
@@ -610,7 +610,7 @@ A public method using an interface.",
           "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
 ",
-          "line": 91,
+          "line": 92,
           "name": "onClick",
           "rawdescription": "
 
@@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 106,
+          "line": 107,
           "modifierKind": Array [
             121,
           ],
@@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
           "deprecationMessage": "",
           "description": "<p>Private value.</p>
 ",
-          "line": 146,
+          "line": 147,
           "modifierKind": Array [
             121,
           ],
@@ -661,7 +661,7 @@ Private value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 48,
+          "line": 49,
           "name": "buttonRef",
           "optional": false,
           "type": "ElementRef",
@@ -677,7 +677,7 @@ Private value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 124,
+          "line": 125,
           "name": "focus",
           "optional": false,
           "type": "",
@@ -688,7 +688,7 @@ Private value.",
           "deprecationMessage": "",
           "description": "<p>Public value.</p>
 ",
-          "line": 143,
+          "line": 144,
           "modifierKind": Array [
             123,
           ],
@@ -702,7 +702,7 @@ Public value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 199,
+          "line": 200,
           "modifierKind": Array [
             123,
           ],
@@ -937,7 +937,7 @@ export class InputComponent<T> {
       Object {
         "coverageCount": "16/25",
         "coveragePercent": 64,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "linktype": "component",
         "name": "InputComponent",
         "status": "good",
@@ -946,7 +946,7 @@ export class InputComponent<T> {
       Object {
         "coverageCount": "0/4",
         "coveragePercent": 0,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "linktype": "interface",
         "name": "ISomeInterface",
         "status": "low",
@@ -955,7 +955,7 @@ export class InputComponent<T> {
       Object {
         "coverageCount": "0/1",
         "coveragePercent": 0,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "linksubtype": "variable",
         "linktype": "miscellaneous",
         "name": "exportedConstant",
@@ -973,7 +973,7 @@ export class InputComponent<T> {
     Object {
       "deprecated": false,
       "deprecationMessage": "",
-      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
       "id": "interface-ISomeInterface-d145da25329b094ee29610c45a9e46387cb39eddb2a67b4c9fadb84bcec76eacd60d131e48d98b2ee5725dedd25f2eb299b704e8e0a34307d6e84f6e57d57044",
       "indexSignatures": Array [],
       "kind": 165,
@@ -984,7 +984,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 25,
+          "line": 26,
           "name": "one",
           "optional": false,
           "type": "string",
@@ -993,7 +993,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 27,
+          "line": 28,
           "name": "three",
           "optional": false,
           "type": "any[]",
@@ -1002,7 +1002,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 26,
+          "line": 27,
           "name": "two",
           "optional": false,
           "type": "boolean",
@@ -1230,14 +1230,14 @@ export class InputComponent<T> {
         "deprecated": false,
         "deprecationMessage": "",
         "description": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "name": "ButtonAccent",
         "subtype": "enum",
       },
     ],
     "functions": Array [],
     "groupedEnumerations": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
         Object {
           "childs": Array [
             Object {
@@ -1257,7 +1257,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
           "name": "ButtonAccent",
           "subtype": "enum",
         },
@@ -1265,13 +1265,13 @@ export class InputComponent<T> {
     },
     "groupedFunctions": Object {},
     "groupedTypeAliases": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
         Object {
           "ctype": "miscellaneous",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
           "kind": 186,
           "name": "ButtonSize",
           "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
@@ -1280,13 +1280,13 @@ export class InputComponent<T> {
       ],
     },
     "groupedVariables": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
         Object {
           "ctype": "miscellaneous",
           "defaultValue": "'An exported constant'",
           "deprecated": false,
           "deprecationMessage": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
           "name": "exportedConstant",
           "subtype": "variable",
           "type": "string",
@@ -1299,7 +1299,7 @@ export class InputComponent<T> {
         "deprecated": false,
         "deprecationMessage": "",
         "description": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "kind": 186,
         "name": "ButtonSize",
         "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
@@ -1312,7 +1312,7 @@ export class InputComponent<T> {
         "defaultValue": "'An exported constant'",
         "deprecated": false,
         "deprecationMessage": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
         "name": "exportedConstant",
         "subtype": "variable",
         "type": "string",
diff --git a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot
index 012aeb4a1651..de95727d81f5 100644
--- a/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot
+++ b/code/frameworks/angular/src/client/docs/__testfixtures__/doc-button/compodoc-undefined.snapshot
@@ -10,7 +10,7 @@ Object {
           "getSignature": Object {
             "description": "<p>Getter for <code>inputValue</code>.</p>
 ",
-            "line": 115,
+            "line": 116,
             "name": "inputValue",
             "rawdescription": "
 Getter for \`inputValue\`.",
@@ -42,7 +42,7 @@ Getter for \`inputValue\`.",
                 "type": "string",
               },
             ],
-            "line": 110,
+            "line": 111,
             "name": "inputValue",
             "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
                 "type": "T[]",
               },
             ],
-            "line": 195,
+            "line": 196,
             "name": "item",
             "returnType": "void",
             "type": "void",
@@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
           "getSignature": Object {
             "description": "<p>Get the private value.</p>
 ",
-            "line": 154,
+            "line": 155,
             "name": "value",
             "rawdescription": "
 Get the private value.",
@@ -116,7 +116,7 @@ Get the private value.",
                 "type": "string | number",
               },
             ],
-            "line": 149,
+            "line": 150,
             "name": "value",
             "rawdescription": "
 Set the private value.",
@@ -144,7 +144,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
           "defaultValue": "false",
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 124,
+          "line": 125,
           "name": "class.focused",
           "type": "boolean",
         },
@@ -164,7 +164,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
           ],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 120,
+          "line": 121,
           "name": "click",
         },
       ],
@@ -177,7 +177,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
           "deprecationMessage": "",
           "description": "<p>Specify the accent-type of the button</p>
 ",
-          "line": 56,
+          "line": 57,
           "name": "accent",
           "rawdescription": "
 Specify the accent-type of the button",
@@ -190,7 +190,7 @@ Specify the accent-type of the button",
           "deprecationMessage": "",
           "description": "<p>Appearance style of the button.</p>
 ",
-          "line": 52,
+          "line": 53,
           "name": "appearance",
           "rawdescription": "
 Appearance style of the button.",
@@ -202,7 +202,7 @@ Appearance style of the button.",
           "deprecationMessage": "",
           "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
 ",
-          "line": 110,
+          "line": 111,
           "name": "inputValue",
           "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
           "deprecationMessage": "",
           "description": "<p>Sets the button to a disabled state.</p>
 ",
-          "line": 60,
+          "line": 61,
           "name": "isDisabled",
           "rawdescription": "
 Sets the button to a disabled state.",
@@ -225,7 +225,7 @@ Sets the button to a disabled state.",
           "decorators": Array [],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 195,
+          "line": 196,
           "name": "item",
           "type": "T[]",
         },
@@ -238,24 +238,24 @@ Sets the button to a disabled state.",
           "jsdoctags": Array [
             Object {
               "comment": "",
-              "end": 1525,
+              "end": 1587,
               "flags": 4227072,
               "kind": 325,
               "modifierFlagsCache": 0,
-              "pos": 1512,
+              "pos": 1574,
               "tagName": Object {
-                "end": 1521,
+                "end": 1583,
                 "escapedText": "required",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 1513,
+                "pos": 1575,
                 "transformFlags": 0,
               },
               "transformFlags": 0,
             },
           ],
-          "line": 68,
+          "line": 69,
           "name": "label",
           "rawdescription": "
 
@@ -268,7 +268,7 @@ The inner text of the button.
           "decorators": Array [],
           "deprecated": false,
           "deprecationMessage": "",
-          "line": 192,
+          "line": 193,
           "name": "showKeyAlias",
           "type": "",
         },
@@ -279,7 +279,7 @@ The inner text of the button.
           "deprecationMessage": "",
           "description": "<p>Size of the button.</p>
 ",
-          "line": 72,
+          "line": 73,
           "name": "size",
           "rawdescription": "
 Size of the button.",
@@ -291,7 +291,7 @@ Size of the button.",
           "deprecationMessage": "",
           "description": "<p>Specifies some arbitrary object</p>
 ",
-          "line": 75,
+          "line": 76,
           "name": "someDataObject",
           "rawdescription": "
 Specifies some arbitrary object",
@@ -307,24 +307,24 @@ Specifies some arbitrary object",
           "jsdoctags": Array [
             Object {
               "comment": "",
-              "end": 1802,
+              "end": 1864,
               "flags": 4227072,
               "kind": 329,
               "modifierFlagsCache": 0,
-              "pos": 1787,
+              "pos": 1849,
               "tagName": Object {
-                "end": 1798,
+                "end": 1860,
                 "escapedText": "deprecated",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 1788,
+                "pos": 1850,
                 "transformFlags": 0,
               },
               "transformFlags": 0,
             },
           ],
-          "line": 83,
+          "line": 84,
           "name": "somethingYouShouldNotUse",
           "rawdescription": "
 
@@ -361,21 +361,21 @@ Some input you shouldn't use.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3518,
+                "end": 3580,
                 "escapedText": "x",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3517,
+                "pos": 3579,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 3516,
+                "end": 3578,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3511,
+                "pos": 3573,
                 "transformFlags": 0,
               },
               "type": "number",
@@ -386,27 +386,27 @@ Some input you shouldn't use.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3563,
+                "end": 3625,
                 "escapedText": "y",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3562,
+                "pos": 3624,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 3561,
+                "end": 3623,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3556,
+                "pos": 3618,
                 "transformFlags": 0,
               },
               "type": "string | number",
             },
           ],
-          "line": 164,
+          "line": 165,
           "modifierKind": Array [
             123,
           ],
@@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together.
               "type": "",
             },
           ],
-          "line": 120,
+          "line": 121,
           "name": "onClickListener",
           "optional": false,
           "returnType": "void",
@@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 4079,
+                "end": 4141,
                 "escapedText": "password",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 4071,
+                "pos": 4133,
                 "transformFlags": 0,
               },
               "tagName": Object {
-                "end": 4070,
+                "end": 4132,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 4065,
+                "pos": 4127,
                 "transformFlags": 0,
               },
               "type": "string",
             },
           ],
-          "line": 187,
+          "line": 188,
           "modifierKind": Array [
             121,
           ],
@@ -529,28 +529,28 @@ A private method.
               "deprecated": false,
               "deprecationMessage": "",
               "name": Object {
-                "end": 3938,
+                "end": 4000,
                 "escapedText": "id",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3936,
+                "pos": 3998,
                 "transformFlags": 0,
               },
               "optional": true,
               "tagName": Object {
-                "end": 3935,
+                "end": 3997,
                 "escapedText": "param",
                 "flags": 4227072,
                 "kind": 79,
                 "modifierFlagsCache": 0,
-                "pos": 3930,
+                "pos": 3992,
                 "transformFlags": 0,
               },
               "type": "number",
             },
           ],
-          "line": 178,
+          "line": 179,
           "modifierKind": Array [
             122,
           ],
@@ -588,7 +588,7 @@ A protected method.
               "type": "ISomeInterface",
             },
           ],
-          "line": 169,
+          "line": 170,
           "modifierKind": Array [
             123,
           ],
@@ -610,7 +610,7 @@ A public method using an interface.",
           "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
 ",
-          "line": 91,
+          "line": 92,
           "name": "onClick",
           "rawdescription": "
 
@@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 106,
+          "line": 107,
           "modifierKind": Array [
             121,
           ],
@@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
           "deprecationMessage": "",
           "description": "<p>Private value.</p>
 ",
-          "line": 146,
+          "line": 147,
           "modifierKind": Array [
             121,
           ],
@@ -661,7 +661,7 @@ Private value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 48,
+          "line": 49,
           "name": "buttonRef",
           "optional": false,
           "type": "ElementRef",
@@ -677,7 +677,7 @@ Private value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 124,
+          "line": 125,
           "name": "focus",
           "optional": false,
           "type": "",
@@ -688,7 +688,7 @@ Private value.",
           "deprecationMessage": "",
           "description": "<p>Public value.</p>
 ",
-          "line": 143,
+          "line": 144,
           "modifierKind": Array [
             123,
           ],
@@ -702,7 +702,7 @@ Public value.",
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 199,
+          "line": 200,
           "modifierKind": Array [
             123,
           ],
@@ -984,7 +984,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 25,
+          "line": 26,
           "name": "one",
           "optional": false,
           "type": "string",
@@ -993,7 +993,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 27,
+          "line": 28,
           "name": "three",
           "optional": false,
           "type": "any[]",
@@ -1002,7 +1002,7 @@ export class InputComponent<T> {
           "deprecated": false,
           "deprecationMessage": "",
           "description": "",
-          "line": 26,
+          "line": 27,
           "name": "two",
           "optional": false,
           "type": "boolean",
diff --git a/code/frameworks/angular/src/client/docs/sourceDecorator.ts b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
index 605112b11b24..7769aa6968aa 100644
--- a/code/frameworks/angular/src/client/docs/sourceDecorator.ts
+++ b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
@@ -1,7 +1,7 @@
 import { addons, useEffect } from '@storybook/addons';
 import { PartialStoryFn } from '@storybook/types';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
-import { StoryContext, AngularFramework } from '../types';
+import { StoryContext, AngularRenderer } from '../types';
 import { computesTemplateSourceFromComponent } from '../../renderer';
 
 export const skipSourceRender = (context: StoryContext) => {
@@ -22,7 +22,7 @@ export const skipSourceRender = (context: StoryContext) => {
  * @param context  StoryContext
  */
 export const sourceDecorator = (
-  storyFn: PartialStoryFn<AngularFramework>,
+  storyFn: PartialStoryFn<AngularRenderer>,
   context: StoryContext
 ) => {
   const story = storyFn();
diff --git a/code/frameworks/angular/src/client/public-api.ts b/code/frameworks/angular/src/client/public-api.ts
index 31c4c273420f..596a5fd1b4a3 100644
--- a/code/frameworks/angular/src/client/public-api.ts
+++ b/code/frameworks/angular/src/client/public-api.ts
@@ -3,20 +3,20 @@ import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 import { renderToCanvas, render } from './render';
 import decorateStory from './decorateStory';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 export * from './public-types';
 
 const FRAMEWORK = 'angular';
 
-interface ClientApi extends Addon_ClientStoryApi<AngularFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<AngularRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
   load: (...args: any[]) => void;
 }
 
-const api = start(renderToCanvas, { decorateStory, render });
+const api = start<AngularRenderer>(renderToCanvas, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts
index da446898d293..c4a54cf25898 100644
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@@ -1,28 +1,39 @@
-import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types';
-import { AngularFramework } from './types';
+import {
+  AnnotatedStoryFn,
+  Args,
+  ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
+  StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
+} from '@storybook/types';
+import { AngularRenderer } from './types';
 
-export type { Args, ArgTypes } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { Parameters as AngularParameters } from './types';
+export type { AngularRenderer };
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<AngularFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<AngularFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
@@ -34,3 +45,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<AngularFramework, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;
diff --git a/code/frameworks/angular/src/client/render.ts b/code/frameworks/angular/src/client/render.ts
index 622fe0ed6e8f..f8d220d93c6f 100644
--- a/code/frameworks/angular/src/client/render.ts
+++ b/code/frameworks/angular/src/client/render.ts
@@ -1,13 +1,13 @@
 import { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
 import { renderNgApp } from './angular/helpers';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 
 export const rendererFactory = new RendererFactory();
 
-export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
+export const render: ArgsStoryFn<AngularRenderer> = (props) => ({ props });
 
 export async function renderToCanvas(
   {
@@ -16,7 +16,7 @@ export async function renderToCanvas(
     forceRemount,
     storyContext: { parameters, component },
     id,
-  }: Store_RenderContext<AngularFramework>,
+  }: Store_RenderContext<AngularRenderer>,
   element: HTMLElement
 ) {
   showMain();
diff --git a/code/frameworks/angular/src/client/types.ts b/code/frameworks/angular/src/client/types.ts
index 36ebabc89edd..14f41557d5d5 100644
--- a/code/frameworks/angular/src/client/types.ts
+++ b/code/frameworks/angular/src/client/types.ts
@@ -1,7 +1,7 @@
 import {
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
-  WebFramework,
+  WebRenderer,
 } from '@storybook/types';
 
 export interface NgModuleMetadata {
@@ -27,7 +27,11 @@ export interface StoryFnAngularReturnType {
   userDefinedTemplate?: boolean;
 }
 
-export interface AngularFramework extends WebFramework {
+/**
+ * @deprecated Use `AngularRenderer` instead.
+ */
+export type AngularFramework = AngularRenderer;
+export interface AngularRenderer extends WebRenderer {
   component: any;
   storyResult: StoryFnAngularReturnType;
 }
@@ -38,4 +42,4 @@ export type Parameters = DefaultParameters & {
   bootstrapModuleOptions?: unknown;
 };
 
-export type StoryContext = DefaultStoryContext<AngularFramework> & { parameters: Parameters };
+export type StoryContext = DefaultStoryContext<AngularRenderer> & { parameters: Parameters };
diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
index 6342bb1118a6..fcc4a17aea81 100644
--- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect';
diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts
index b7154d6c8714..6bcd3ee47389 100644
--- a/code/frameworks/angular/template/cli/Button.stories.ts
+++ b/code/frameworks/angular/template/cli/Button.stories.ts
@@ -1,20 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import Button from './button.component';
 
-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction
 const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/angular/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
   render: (args: Button) => ({
     props: {
       backgroundColor: null,
       ...args,
     },
   }),
-  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
   argTypes: {
     backgroundColor: {
       control: 'color',
@@ -25,7 +22,7 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;
 
-// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/angular/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
diff --git a/code/frameworks/angular/template/cli/Header.stories.ts b/code/frameworks/angular/template/cli/Header.stories.ts
index 8b6b954a64de..70852b3205f9 100644
--- a/code/frameworks/angular/template/cli/Header.stories.ts
+++ b/code/frameworks/angular/template/cli/Header.stories.ts
@@ -8,7 +8,7 @@ import Header from './header.component';
 const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/angular/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => ({ props: args }),
   decorators: [
@@ -18,7 +18,7 @@ const meta: Meta<Header> = {
     }),
   ],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts
index dd16b59371ab..4ae8d3bbb0fd 100644
--- a/code/frameworks/angular/template/cli/Page.stories.ts
+++ b/code/frameworks/angular/template/cli/Page.stories.ts
@@ -11,7 +11,7 @@ const meta: Meta<Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on StoryFn layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
     layout: 'fullscreen',
   },
   decorators: [
@@ -31,7 +31,7 @@ export const LoggedOut: Story = {
   }),
 };
 
-// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/angular/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   render: (args: Page) => ({
     props: args,
diff --git a/code/frameworks/ember/jest.config.js b/code/frameworks/ember/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/ember/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index bb2ae7b4ce45..d22e956e2718 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
   "bugs": {
@@ -31,12 +31,12 @@
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "ember-source": "~3.28.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/ember/src/client/preview/index.ts b/code/frameworks/ember/src/client/preview/index.ts
index 13a01a7a0351..96a58ede904b 100644
--- a/code/frameworks/ember/src/client/preview/index.ts
+++ b/code/frameworks/ember/src/client/preview/index.ts
@@ -1,9 +1,10 @@
 import { start } from '@storybook/core-client';
 
 import './globals';
+import type { EmberRenderer } from './types';
 import { renderToCanvas } from './render';
 
-const { configure: coreConfigure, clientApi, forceReRender } = start(renderToCanvas);
+const { configure: coreConfigure, clientApi, forceReRender } = start<EmberRenderer>(renderToCanvas);
 
 export const { raw } = clientApi;
 
diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts
index 426eabcc2074..0f951bc1962a 100644
--- a/code/frameworks/ember/src/client/preview/render.ts
+++ b/code/frameworks/ember/src/client/preview/render.ts
@@ -3,7 +3,7 @@ import { dedent } from 'ts-dedent';
 import type { Store_RenderContext } from '@storybook/types';
 // @ts-expect-error (Converted from ts-ignore)
 import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
-import type { OptionsArgs, EmberFramework } from './types';
+import type { OptionsArgs, EmberRenderer } from './types';
 
 const { window: globalWindow, document } = global;
 
@@ -20,7 +20,7 @@ let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
 
-function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
+function render(options: OptionsArgs, el: EmberRenderer['canvasElement']) {
   if (isRendering) return;
   isRendering = true;
 
@@ -61,8 +61,8 @@ function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
 }
 
 export function renderToCanvas(
-  { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
-  canvasElement: EmberFramework['canvasElement']
+  { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberRenderer>,
+  canvasElement: EmberRenderer['canvasElement']
 ) {
   const element = storyFn();
 
diff --git a/code/frameworks/ember/src/client/preview/types.ts b/code/frameworks/ember/src/client/preview/types.ts
index e360063627ea..5df0b2632aa5 100644
--- a/code/frameworks/ember/src/client/preview/types.ts
+++ b/code/frameworks/ember/src/client/preview/types.ts
@@ -1,4 +1,4 @@
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 
 export type { RenderContext } from '@storybook/types';
 
@@ -13,7 +13,11 @@ export interface OptionsArgs {
   element: any;
 }
 
-export interface EmberFramework extends WebFramework {
+/**
+ * @deprecated Use `EmberRenderer` instead.
+ */
+export type EmberFramework = EmberRenderer;
+export interface EmberRenderer extends WebRenderer {
   component: any;
   storyResult: OptionsArgs;
 }
diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/Button.stories.js
similarity index 78%
rename from code/frameworks/ember/template/cli/1-Button.stories.js
rename to code/frameworks/ember/template/cli/Button.stories.js
index 9aff5c61cb45..92d4eb67f58f 100644
--- a/code/frameworks/ember/template/cli/1-Button.stories.js
+++ b/code/frameworks/ember/template/cli/Button.stories.js
@@ -2,20 +2,19 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-// More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/ember/writing-stories/introduction
 export default {
-  title: 'Button',
+  title: 'Example/Button',
   render: (args) => ({
     template: hbs`<button {{action onClick}}>{{label}}</button>`,
     context: args,
   }),
-  // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
     label: { control: 'text' },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/ember/writing-stories/args
 export const Text = {
   args: {
     label: 'Button',
diff --git a/code/frameworks/ember/tsconfig.json b/code/frameworks/ember/tsconfig.json
index 5627221de68f..2cf6db4b14d3 100644
--- a/code/frameworks/ember/tsconfig.json
+++ b/code/frameworks/ember/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*", "package.json"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*", "package.json"]
 }
diff --git a/code/frameworks/html-webpack5/jest.config.js b/code/frameworks/html-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/html-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 5d2e4bd25c5a..dbb83c5852f1 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,17 +50,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/html": "7.0.0-alpha.48",
-    "@storybook/preset-html-webpack": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/html": "7.0.0-alpha.51",
+    "@storybook/preset-html-webpack": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*"
@@ -78,5 +78,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/html-webpack5/tsconfig.json b/code/frameworks/html-webpack5/tsconfig.json
index d9463d503988..a4429176e35f 100644
--- a/code/frameworks/html-webpack5/tsconfig.json
+++ b/code/frameworks/html-webpack5/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/nextjs/jest.config.js b/code/frameworks/nextjs/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/nextjs/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 80e845870e81..ca855ed8e16f 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -59,14 +59,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.48",
-    "@storybook/react": "7.0.0-alpha.48",
-    "@types/node": "^14.14.20 || ^16.0.0",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.51",
+    "@storybook/react": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "image-size": "^1.0.0",
@@ -81,10 +80,9 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.48",
-    "@types/loader-utils": "^2.0.3",
+    "@storybook/addon-actions": "7.0.0-alpha.51",
     "next": "^12.2.4",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
@@ -121,5 +119,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/nextjs/src/config/babel.ts b/code/frameworks/nextjs/src/config/babel.ts
deleted file mode 100644
index cceba0dc534d..000000000000
--- a/code/frameworks/nextjs/src/config/babel.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { TransformOptions } from '@babel/core';
-import { loadConfig } from 'tsconfig-paths';
-
-export const configureTypescript = async (baseConfig: TransformOptions) => {
-  const configLoadResult = loadConfig();
-
-  // if tsconfig is successfully loaded, this is a typescript project
-  if (configLoadResult.resultType === 'success') {
-    baseConfig.presets ||= [];
-
-    if (!baseConfig.presets.includes('@babel/preset-typescript')) {
-      baseConfig.presets.push('@babel/preset-typescript');
-    }
-  }
-};
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 2bd4ba751691..924b9311795c 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -5,6 +5,7 @@ import { pathExists } from 'fs-extra';
 import type { NextConfig } from 'next';
 import dedent from 'ts-dedent';
 import { DefinePlugin } from 'webpack';
+import { pathToFileURL } from 'node:url';
 import { addScopedAlias } from '../utils';
 
 export const configureConfig = async ({
@@ -60,7 +61,7 @@ const resolveNextConfig = async ({
     );
   }
 
-  const nextConfigExport = await import(nextConfigFile);
+  const nextConfigExport = await import(pathToFileURL(nextConfigFile).href);
 
   const nextConfig =
     typeof nextConfigExport === 'function'
diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts
index bf913e5e85cc..b506cba14e27 100644
--- a/code/frameworks/nextjs/src/next-image-loader-stub.ts
+++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts
@@ -1,3 +1,4 @@
+// @ts-expect-error (loader-utils has no webpack5 compatible types)
 import { interpolateName } from 'loader-utils';
 import imageSizeOf from 'image-size';
 import type { RawLoaderDefinition } from 'webpack';
@@ -15,7 +16,7 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (conten
 
   this.emitFile(outputPath, content);
 
-  const { width, height } = imageSizeOf(content);
+  const { width, height } = imageSizeOf(this.resourcePath);
 
   return `export default ${JSON.stringify({
     src: outputPath,
@@ -27,4 +28,4 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (conten
 
 nextImageLoaderStub.raw = true;
 
-export = nextImageLoaderStub;
+export default nextImageLoaderStub;
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 2833d9c5752f..5a688210c58f 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -1,17 +1,17 @@
 // https://storybook.js.org/docs/react/addons/writing-presets
 import { dirname, join } from 'path';
 import type { Options, PresetProperty } from '@storybook/types';
-import type { TransformOptions } from '@babel/core';
+import type { ConfigItem, TransformOptions } from '@babel/core';
+import { loadPartialConfig } from '@babel/core';
+import { getProjectRoot } from '@storybook/core-common';
 import { configureConfig } from './config/webpack';
 import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
 import { configureRouting } from './routing/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
-import { configureStyledJsxTransforms } from './styledJsx/babel';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
 import type { FrameworkOptions, StorybookConfig } from './types';
-import { configureTypescript } from './config/babel';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -72,10 +72,42 @@ export const config: StorybookConfig['previewAnnotations'] = (entry = []) => [
 // You're using a version of Nextjs prior to v10, which is unsupported by this framework.
 
 export const babel = async (baseConfig: TransformOptions): Promise<TransformOptions> => {
-  configureTypescript(baseConfig);
-  configureStyledJsxTransforms(baseConfig);
+  const configPartial = loadPartialConfig({
+    ...baseConfig,
+    filename: `${getProjectRoot()}/__fake__.js`,
+  });
 
-  return baseConfig;
+  const options = configPartial?.options;
+
+  const isPresetConfigItem = (preset: any): preset is ConfigItem => {
+    return typeof preset === 'object' && preset !== null && 'file' in preset;
+  };
+
+  const hasNextBabelConfig = options?.presets?.find(
+    (preset) =>
+      (Array.isArray(preset) && preset[0] === 'next/babel') ||
+      preset === 'next/babel' ||
+      (isPresetConfigItem(preset) && preset.file?.request === 'next/babel')
+  );
+
+  if (!hasNextBabelConfig) {
+    options?.presets?.push('next/babel');
+  }
+
+  const presets = options?.presets?.filter(
+    (preset) =>
+      !(
+        isPresetConfigItem(preset) &&
+        (preset as ConfigItem).file?.request === require.resolve('@babel/preset-react')
+      )
+  );
+
+  return {
+    ...options,
+    presets,
+    babelrc: false,
+    configFile: false,
+  };
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
diff --git a/code/frameworks/nextjs/src/styledJsx/babel.ts b/code/frameworks/nextjs/src/styledJsx/babel.ts
deleted file mode 100644
index fe90611129d5..000000000000
--- a/code/frameworks/nextjs/src/styledJsx/babel.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { TransformOptions } from '@babel/core';
-
-export const configureStyledJsxTransforms = async (baseConfig: TransformOptions) => {
-  baseConfig.plugins ||= [];
-
-  if (!baseConfig.plugins.includes('styled-jsx/babel')) {
-    baseConfig.plugins.push('styled-jsx/babel');
-  }
-};
diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.js b/code/frameworks/nextjs/template/cli/js/Button.stories.js
new file mode 100644
index 000000000000..d9d3e1b70574
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js
@@ -0,0 +1,41 @@
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/nextjs/template/cli/js/Button.stories.jsx b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx
deleted file mode 100644
index bfabf81396b9..000000000000
--- a/code/frameworks/nextjs/template/cli/js/Button.stories.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
-  tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
diff --git a/code/frameworks/nextjs/template/cli/js/Header.stories.js b/code/frameworks/nextjs/template/cli/js/Header.stories.js
new file mode 100644
index 000000000000..a931a5e8b9f7
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/js/Header.stories.js
@@ -0,0 +1,23 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {
+  args: {},
+};
diff --git a/code/frameworks/nextjs/template/cli/js/Header.stories.jsx b/code/frameworks/nextjs/template/cli/js/Header.stories.jsx
deleted file mode 100644
index 824597f35ee8..000000000000
--- a/code/frameworks/nextjs/template/cli/js/Header.stories.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
-  tags: ['docsPage'],
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.js b/code/frameworks/nextjs/template/cli/js/Page.stories.js
new file mode 100644
index 000000000000..40b25af0a1e6
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js
@@ -0,0 +1,24 @@
+import { within, userEvent } from '@storybook/testing-library';
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
diff --git a/code/frameworks/nextjs/template/cli/js/Page.stories.jsx b/code/frameworks/nextjs/template/cli/js/Page.stories.jsx
deleted file mode 100644
index 0174fdb881f9..000000000000
--- a/code/frameworks/nextjs/template/cli/js/Page.stories.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { within, userEvent } from '@storybook/testing-library';
-
-import { Page } from './Page';
-
-export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-const Template = (args) => <Page {...args} />;
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
index c220928db6d6..000d644a4299 100644
--- a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
@@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: {
       control: 'color',
@@ -19,7 +17,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
index 728b2043ce14..18a379082fbe 100644
--- a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
@@ -4,10 +4,10 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
index 52c4cb406233..357a46f74d91 100644
--- a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
@@ -7,7 +7,7 @@ const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/frameworks/nextjs/tsconfig.json b/code/frameworks/nextjs/tsconfig.json
index 4461940be450..26be65113f88 100644
--- a/code/frameworks/nextjs/tsconfig.json
+++ b/code/frameworks/nextjs/tsconfig.json
@@ -5,6 +5,5 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/frameworks/preact-webpack5/jest.config.js b/code/frameworks/preact-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/preact-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 899d9d86feff..043508c0cde6 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -50,17 +50,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preact": "7.0.0-alpha.48",
-    "@storybook/preset-preact-webpack": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preact": "7.0.0-alpha.51",
+    "@storybook/preset-preact-webpack": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
     "preact": "^10.5.13",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -79,5 +79,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/preact-webpack5/tsconfig.json b/code/frameworks/preact-webpack5/tsconfig.json
index 88fbabf6e314..77832da6336d 100644
--- a/code/frameworks/preact-webpack5/tsconfig.json
+++ b/code/frameworks/preact-webpack5/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/react-vite/jest.config.js b/code/frameworks/react-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/react-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 2955ecc3bdb2..d4d2651b9b1a 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -53,13 +53,13 @@
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
     "@rollup/pluginutils": "^4.2.0",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/react": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-vite": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/react": "7.0.0-alpha.51",
     "@vitejs/plugin-react": "^2.0.0",
     "ast-types": "^0.14.2",
     "magic-string": "^0.26.1",
@@ -67,8 +67,8 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
   "peerDependencies": {
@@ -88,5 +88,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/react-vite/src/index.ts b/code/frameworks/react-vite/src/index.ts
index 8fbdfff5e6e2..067a9d564f75 100644
--- a/code/frameworks/react-vite/src/index.ts
+++ b/code/frameworks/react-vite/src/index.ts
@@ -1,8 +1,13 @@
 // exports for builder-vite
+import * as clientApi from '@storybook/client-api';
+
+// client-api exposes both a class, and individual named exports.
+// The class is used in StoryStoreV7 and the individual exports in SSv6
+const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/addons';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-export { ClientApi } from '@storybook/client-api';
+export { clientApi, ClientApi };
 
 export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/react-vite/tsconfig.json b/code/frameworks/react-vite/tsconfig.json
index 534e4ddd108a..13e04352a3c7 100644
--- a/code/frameworks/react-vite/tsconfig.json
+++ b/code/frameworks/react-vite/tsconfig.json
@@ -5,6 +5,5 @@
     "types": ["node"],
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/react-webpack5/jest.config.js b/code/frameworks/react-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/react-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index fbb4e80d02f7..6e389bf4093c 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,14 +51,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.48",
-    "@storybook/react": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0"
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.51",
+    "@storybook/react": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "jest-specific-snapshot": "^4.0.0",
-    "typescript": "~4.6.3"
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
@@ -86,5 +86,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/react-webpack5/tsconfig.json b/code/frameworks/react-webpack5/tsconfig.json
index 5505b0889f9e..77832da6336d 100644
--- a/code/frameworks/react-webpack5/tsconfig.json
+++ b/code/frameworks/react-webpack5/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/server-webpack5/jest.config.js b/code/frameworks/server-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/server-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 213ed072a345..f22559f93df0 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,16 +50,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preset-server-webpack": "7.0.0-alpha.48",
-    "@storybook/server": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preset-server-webpack": "7.0.0-alpha.51",
+    "@storybook/server": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -74,5 +74,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/server-webpack5/tsconfig.json b/code/frameworks/server-webpack5/tsconfig.json
index 640955dd9694..a4429176e35f 100644
--- a/code/frameworks/server-webpack5/tsconfig.json
+++ b/code/frameworks/server-webpack5/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/svelte-vite/jest.config.js b/code/frameworks/svelte-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/svelte-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 1f49c052ce30..8619b5787c21 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -52,14 +52,14 @@
   },
   "dependencies": {
     "@storybook/addon-svelte-csf": "^2.0.0",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/svelte": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-vite": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/svelte": "7.0.0-alpha.51",
     "@sveltejs/vite-plugin-svelte": "^1.0.0",
     "magic-string": "^0.26.1",
     "svelte": "^3.0.0",
@@ -67,8 +67,8 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
   "peerDependencies": {
@@ -92,5 +92,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts
index 8fbdfff5e6e2..067a9d564f75 100644
--- a/code/frameworks/svelte-vite/src/index.ts
+++ b/code/frameworks/svelte-vite/src/index.ts
@@ -1,8 +1,13 @@
 // exports for builder-vite
+import * as clientApi from '@storybook/client-api';
+
+// client-api exposes both a class, and individual named exports.
+// The class is used in StoryStoreV7 and the individual exports in SSv6
+const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/addons';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-export { ClientApi } from '@storybook/client-api';
+export { clientApi, ClientApi };
 
 export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/svelte-vite/tsconfig.json b/code/frameworks/svelte-vite/tsconfig.json
index 534e4ddd108a..13e04352a3c7 100644
--- a/code/frameworks/svelte-vite/tsconfig.json
+++ b/code/frameworks/svelte-vite/tsconfig.json
@@ -5,6 +5,5 @@
     "types": ["node"],
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/svelte-webpack5/jest.config.js b/code/frameworks/svelte-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/svelte-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 88ef0e088f94..f162ed24e6d6 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,17 +51,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preset-svelte-webpack": "7.0.0-alpha.48",
-    "@storybook/svelte": "7.0.0-alpha.48",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preset-svelte-webpack": "7.0.0-alpha.51",
+    "@storybook/svelte": "7.0.0-alpha.51",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
     "svelte": "^3.48.0",
     "svelte-loader": "^3.1.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -81,5 +81,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/svelte-webpack5/tsconfig.json b/code/frameworks/svelte-webpack5/tsconfig.json
index 88fbabf6e314..77832da6336d 100644
--- a/code/frameworks/svelte-webpack5/tsconfig.json
+++ b/code/frameworks/svelte-webpack5/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/vue-vite/jest.config.js b/code/frameworks/vue-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/vue-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
index e879f908697b..652eb4a47b0a 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,21 +50,21 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/vue": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-vite": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/vue": "7.0.0-alpha.51",
     "magic-string": "^0.26.1",
     "vite": "^3.1.3",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "^2.7.10"
   },
   "peerDependencies": {
@@ -83,5 +83,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts
index 8fbdfff5e6e2..067a9d564f75 100644
--- a/code/frameworks/vue-vite/src/index.ts
+++ b/code/frameworks/vue-vite/src/index.ts
@@ -1,8 +1,13 @@
 // exports for builder-vite
+import * as clientApi from '@storybook/client-api';
+
+// client-api exposes both a class, and individual named exports.
+// The class is used in StoryStoreV7 and the individual exports in SSv6
+const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/addons';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-export { ClientApi } from '@storybook/client-api';
+export { clientApi, ClientApi };
 
 export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/vue-vite/tsconfig.json b/code/frameworks/vue-vite/tsconfig.json
index 1f9bdf2596c3..1405a8fbb5a6 100644
--- a/code/frameworks/vue-vite/tsconfig.json
+++ b/code/frameworks/vue-vite/tsconfig.json
@@ -5,6 +5,5 @@
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/vue-webpack5/jest.config.js b/code/frameworks/vue-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/vue-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 88e5f2f825a7..ff40e2f9f5a8 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,16 +50,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preset-vue-webpack": "7.0.0-alpha.48",
-    "@storybook/vue": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preset-vue-webpack": "7.0.0-alpha.51",
+    "@storybook/vue": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "^2.6.12",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.14"
@@ -85,5 +85,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/vue-webpack5/tsconfig.json b/code/frameworks/vue-webpack5/tsconfig.json
index 1f9bdf2596c3..1405a8fbb5a6 100644
--- a/code/frameworks/vue-webpack5/tsconfig.json
+++ b/code/frameworks/vue-webpack5/tsconfig.json
@@ -5,6 +5,5 @@
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/vue3-vite/jest.config.js b/code/frameworks/vue3-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/vue3-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 1b1f0a8201d8..0d5cf3855a63 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,22 +51,22 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/vue3": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-vite": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/vue3": "7.0.0-alpha.51",
     "@vitejs/plugin-vue": "^3.0.0",
     "magic-string": "^0.26.1",
     "vite": "^3.1.3",
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
   "engines": {
@@ -82,5 +82,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/vue3-vite/src/index.ts b/code/frameworks/vue3-vite/src/index.ts
index 8fbdfff5e6e2..067a9d564f75 100644
--- a/code/frameworks/vue3-vite/src/index.ts
+++ b/code/frameworks/vue3-vite/src/index.ts
@@ -1,8 +1,13 @@
 // exports for builder-vite
+import * as clientApi from '@storybook/client-api';
+
+// client-api exposes both a class, and individual named exports.
+// The class is used in StoryStoreV7 and the individual exports in SSv6
+const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/addons';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-export { ClientApi } from '@storybook/client-api';
+export { clientApi, ClientApi };
 
 export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/vue3-vite/tsconfig.json b/code/frameworks/vue3-vite/tsconfig.json
index d710036f4bec..3ce879217eb5 100644
--- a/code/frameworks/vue3-vite/tsconfig.json
+++ b/code/frameworks/vue3-vite/tsconfig.json
@@ -6,6 +6,5 @@
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/vue3-webpack5/jest.config.js b/code/frameworks/vue3-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/vue3-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 1c2078817477..e02c4981d5a6 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,17 +50,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preset-vue3-webpack": "7.0.0-alpha.48",
-    "@storybook/vue3": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preset-vue3-webpack": "7.0.0-alpha.51",
+    "@storybook/vue3": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "3.0.0",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "3.0.0"
   },
   "peerDependencies": {
@@ -82,5 +82,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/vue3-webpack5/tsconfig.json b/code/frameworks/vue3-webpack5/tsconfig.json
index a9b035c99817..863d7c2de0d2 100644
--- a/code/frameworks/vue3-webpack5/tsconfig.json
+++ b/code/frameworks/vue3-webpack5/tsconfig.json
@@ -4,6 +4,5 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/web-components-vite/jest.config.js b/code/frameworks/web-components-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/web-components-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 5cb60b1b3df1..bab78c14ebc9 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,21 +51,21 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/builder-vite": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/web-components": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/builder-vite": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/web-components": "7.0.0-alpha.51",
     "magic-string": "^0.26.1",
     "vite": "3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "typescript": "^4.9.3",
     "vite": "^3.1.0"
   },
   "engines": {
@@ -81,5 +81,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts
index 8fbdfff5e6e2..067a9d564f75 100644
--- a/code/frameworks/web-components-vite/src/index.ts
+++ b/code/frameworks/web-components-vite/src/index.ts
@@ -1,8 +1,13 @@
 // exports for builder-vite
+import * as clientApi from '@storybook/client-api';
+
+// client-api exposes both a class, and individual named exports.
+// The class is used in StoryStoreV7 and the individual exports in SSv6
+const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 export { addons } from '@storybook/addons';
 export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
-export { ClientApi } from '@storybook/client-api';
+export { clientApi, ClientApi };
 
 export type { StorybookConfig } from '@storybook/builder-vite';
diff --git a/code/frameworks/web-components-vite/tsconfig.json b/code/frameworks/web-components-vite/tsconfig.json
index 534e4ddd108a..13e04352a3c7 100644
--- a/code/frameworks/web-components-vite/tsconfig.json
+++ b/code/frameworks/web-components-vite/tsconfig.json
@@ -5,6 +5,5 @@
     "types": ["node"],
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/frameworks/web-components-webpack5/jest.config.js b/code/frameworks/web-components-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/frameworks/web-components-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 895cc52e21b1..5243dd33b7ab 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
@@ -52,18 +52,18 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/preset-web-components-webpack": "7.0.0-alpha.48",
-    "@storybook/web-components": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/preset-web-components-webpack": "7.0.0-alpha.51",
+    "@storybook/web-components": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
     "lit-html": "2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "lit-html": "^1.4.1 || ^2.0.0"
@@ -81,5 +81,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/frameworks/web-components-webpack5/tsconfig.json b/code/frameworks/web-components-webpack5/tsconfig.json
index d9463d503988..a4429176e35f 100644
--- a/code/frameworks/web-components-webpack5/tsconfig.json
+++ b/code/frameworks/web-components-webpack5/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/jest.config.base.js b/code/jest.config.base.js
new file mode 100644
index 000000000000..dd8850d0115c
--- /dev/null
+++ b/code/jest.config.base.js
@@ -0,0 +1,94 @@
+const os = require('os');
+const path = require('path');
+
+/**
+ * TODO: Some windows related tasks are still commented out, because they are behaving differently on
+ * a local Windows machine compared to the Windows Server 2022 machine running in GitHub Actions.
+ * The main issue is that path.sep is behaving differently on the two machines. Some more investagations
+ * are necessary!
+ * */
+const skipOnWindows = [
+  'lib/core-server/src/utils/__tests__/server-statics.test.ts',
+  'lib/core-common/src/utils/__tests__/template.test.ts',
+  'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts',
+  'lib/core-common/src/utils/__tests__/interpret-files.test.ts',
+  'lib/cli/src/helpers.test.ts',
+];
+
+module.exports = {
+  cacheDirectory: path.resolve('.cache/jest'),
+  clearMocks: true,
+  moduleNameMapper: {
+    // non-js files
+    '\\.(jpg|jpeg|png|apng|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      path.resolve('./__mocks__/fileMock.js'),
+    '\\.(css|scss|stylesheet)$': path.resolve('./__mocks__/styleMock.js'),
+    '\\.(md)$': path.resolve('./__mocks__/htmlMock.js'),
+
+    // core-js v2 to v3 mapping
+    'core-js/modules/es6.(.*)': 'core-js/modules/es.$1',
+    'core-js/modules/es7.(.*)': 'core-js/modules/esnext.$1',
+    'core-js/library/fn/(.*)': `core-js/features/$1`,
+    'core-js/es5/(.*)': `core-js/es/$1`,
+    'core-js/es6/(.*)': `core-js/es/$1`,
+    'core-js/es7/reflect': `core-js/proposals/reflect-metadata`,
+    'core-js/es7/(.*)': `core-js/proposals/$1`,
+    'core-js/object$/': `core-js/es/object`,
+    'core-js/object/(.*)': `core-js/es/object/$1`,
+    'babel-runtime/core-js/(.*)': `core-js/es/$1`,
+    // 'babel-runtime/core-js/object/assign'
+    'core-js/library/fn/object/assign': 'core-js/es/object/assign',
+  },
+  transform: {
+    '^.+\\.[jt]sx?$': path.resolve('../scripts/utils/jest-transform-js.js'),
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  testPathIgnorePatterns: [
+    '/storybook-static/',
+    '/node_modules/',
+    '/dist/',
+    '/prebuilt/',
+    '/template/',
+    'addon-jest.test.js',
+    // TODO: Can not get svelte-jester to work, but also not necessary for this test, as it is run by tsc/svelte-check.
+    '/renderers/svelte/src/public-types.test.ts',
+    '/renderers/vue/src/public-types.test.ts',
+    '/renderers/vue3/src/public-types.test.ts',
+    ...(process.platform === 'win32' ? skipOnWindows : []),
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/cli/test/',
+    '/dist/',
+    '/prebuilt/',
+    '/generators/',
+    '/template/',
+    '/__mocks__ /',
+    '/__mockdata__/',
+    '/__mocks-ng-workspace__/',
+    '/__testfixtures__/',
+    '^.*\\.stories\\.[jt]sx?$',
+    'typings.d.ts$',
+  ],
+  globals: {
+    PREVIEW_URL: undefined,
+    SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer', 'jest-serializer-html'],
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
+  modulePathIgnorePatterns: [
+    //
+    '/dist/.*/__mocks__/',
+    '/storybook-static/',
+    '/template/',
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
+};
diff --git a/code/jest.config.browser.js b/code/jest.config.browser.js
new file mode 100644
index 000000000000..2e94523b8eff
--- /dev/null
+++ b/code/jest.config.browser.js
@@ -0,0 +1,9 @@
+const path = require('path');
+const baseConfig = require('./jest.config.base');
+
+module.exports = {
+  ...baseConfig,
+  setupFilesAfterEnv: [path.resolve('./jest.init.browser.ts')],
+  testEnvironment: 'jest-environment-jsdom',
+  setupFiles: ['raf/polyfill'],
+};
diff --git a/code/jest.config.js b/code/jest.config.js
index ef5b43abe791..ee2ebd55a9ac 100644
--- a/code/jest.config.js
+++ b/code/jest.config.js
@@ -1,75 +1,10 @@
-const os = require('os');
-
-// TODO Revisit this test later, when we have a windows machine @valentinpalkovic
-const skipOnWindows = [
-  'lib/core-server/src/utils/stories-json.test.ts',
-  'lib/core-server/src/utils/StoryIndexGenerator.test.ts',
-  'lib/cli/src/helpers.test.ts',
-  'lib/core-server/src/utils/__tests__/server-statics.test.ts',
-  'lib/core-common/src/utils/__tests__/template.test.ts',
-  'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts',
-  'lib/core-common/src/utils/__tests__/interpret-files.test.ts',
-  'lib/builder-manager/src/utils/files.test.ts',
-  'lib/cli/src/helpers.test.ts',
-  'lib/core-server/src/utils/__tests__/server-statics.test.ts',
-  'lib/core-common/src/utils/__tests__/template.test.ts',
-  'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts',
-  'lib/core-common/src/utils/__tests__/interpret-files.test.ts',
-  'lib/builder-manager/src/utils/files.test.ts',
-];
-
 module.exports = {
-  cacheDirectory: '.cache/jest',
-  clearMocks: true,
-  moduleNameMapper: {
-    // non-js files
-    '\\.(jpg|jpeg|png|apng|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/__mocks__/fileMock.js',
-    '\\.(css|scss|stylesheet)$': '<rootDir>/__mocks__/styleMock.js',
-    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
-
-    // core-js v2 to v3 mapping
-    'core-js/modules/es6.(.*)': 'core-js/modules/es.$1',
-    'core-js/modules/es7.(.*)': 'core-js/modules/esnext.$1',
-    'core-js/library/fn/(.*)': `core-js/features/$1`,
-    'core-js/es5/(.*)': `core-js/es/$1`,
-    'core-js/es6/(.*)': `core-js/es/$1`,
-    'core-js/es7/reflect': `core-js/proposals/reflect-metadata`,
-    'core-js/es7/(.*)': `core-js/proposals/$1`,
-    'core-js/object$/': `core-js/es/object`,
-    'core-js/object/(.*)': `core-js/es/object/$1`,
-    'babel-runtime/core-js/(.*)': `core-js/es/$1`,
-    // 'babel-runtime/core-js/object/assign'
-    'core-js/library/fn/object/assign': 'core-js/es/object/assign',
-  },
-  projects: ['<rootDir>'],
-  roots: ['<rootDir>/addons', '<rootDir>/frameworks', '<rootDir>/lib', '<rootDir>/renderers'],
-  transform: {
-    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
-    '^.+\\.[jt]sx?$': '<rootDir>/../scripts/utils/jest-transform-js.js',
-    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
-  },
-  transformIgnorePatterns: [
-    '/node_modules/(?!(lit-html|@mdx-js)).+\\.js',
-    '/node_modules/(?!).+\\.js',
-  ],
-  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
-  testPathIgnorePatterns: [
-    '/storybook-static/',
-    '/node_modules/',
-    '/dist/',
-    '/prebuilt/',
-    '/template/',
-    'addon-jest.test.js',
-    '/frameworks/angular/*',
-    '/examples/*/src/*.*',
-    '/examples/*/src/*/*.*',
-    '/examples/*/src/*/*/*.*',
-    // TODO: Can not get svelte-jester to work, but also not necessary for this test, as it is run by tsc/svelte-check.
-    '/renderers/svelte/src/public-types.test.ts',
-    '/renderers/vue/src/public-types.test.ts',
-    '/renderers/vue3/src/public-types.test.ts',
-    ...(process.platform === 'win32' ? skipOnWindows : []),
+  projects: [
+    '<rootDir>/addons/*',
+    '<rootDir>/frameworks/!(angular)*',
+    '<rootDir>/lib/*',
+    '<rootDir>/renderers/*',
+    '<rootDir>/ui/*',
   ],
   collectCoverage: false,
   collectCoverageFrom: [
@@ -77,44 +12,10 @@ module.exports = {
     'lib/*/src/**/*.{js,jsx,ts,tsx}',
     'renderers/*/src/**/*.{js,jsx,ts,tsx}',
     'addons/*/src/**/*.{js,jsx,ts,tsx}',
-  ],
-  coveragePathIgnorePatterns: [
-    '/node_modules/',
-    '/cli/test/',
-    '/dist/',
-    '/prebuilt/',
-    '/generators/',
-    '/template/',
-    '/dll/',
-    '/__mocks__ /',
-    '/__mockdata__/',
-    '/__mocks-ng-workspace__/',
-    '/__testfixtures__/',
-    '^.*\\.stories\\.[jt]sx?$',
-    'typings.d.ts$',
-  ],
-  globals: {
-    PREVIEW_URL: undefined,
-    SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
-  },
-  snapshotSerializers: [
-    '@emotion/jest/serializer',
-    'enzyme-to-json/serializer',
-    'jest-serializer-html',
+    'ui/*/src/**/*.{js,jsx,ts,tsx}',
   ],
   coverageDirectory: 'coverage',
-  setupFilesAfterEnv: ['./jest.init.ts'],
   coverageReporters: ['lcov'],
-  testEnvironment: 'jest-environment-jsdom-thirteen',
-  setupFiles: ['raf/polyfill'],
-  testURL: 'http://localhost',
-  modulePathIgnorePatterns: [
-    //
-    '/dist/.*/__mocks__/',
-    '/storybook-static/',
-    '/template/',
-  ],
-  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
-  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   reporters: ['default', 'jest-junit'],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };
diff --git a/code/jest.config.node.js b/code/jest.config.node.js
new file mode 100644
index 000000000000..54acf2670929
--- /dev/null
+++ b/code/jest.config.node.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('./jest.config.base');
+
+module.exports = {
+  ...baseConfig,
+  setupFilesAfterEnv: [path.resolve('./jest.init.base.ts')],
+};
diff --git a/code/jest.init.ts b/code/jest.init.base.ts
similarity index 68%
rename from code/jest.init.ts
rename to code/jest.init.base.ts
index bf6a5ee3a9af..535f1bc74a0d 100644
--- a/code/jest.init.ts
+++ b/code/jest.init.base.ts
@@ -1,4 +1,3 @@
-import 'jest-enzyme/lib/index';
 import '@testing-library/jest-dom';
 
 // setup file
@@ -8,7 +7,6 @@ import Adapter from 'enzyme-adapter-react-16';
 // @ts-expect-error (Converted from ts-ignore)
 import regeneratorRuntime from 'regenerator-runtime';
 import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register';
-import EventEmitter from 'events';
 
 registerRequireContextHook();
 
@@ -58,41 +56,3 @@ const throwError = (message: any) => throwMessage('error: ', message);
 
 global.console.error = throwError;
 global.console.warn = throwWarning;
-
-// Mock for matchMedia since it's not yet implemented in JSDOM (https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom)
-global.window.matchMedia = jest.fn().mockImplementation((query) => {
-  return {
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  };
-});
-class EventSourceMock {
-  static sources: EventSourceMock[] = [];
-
-  static reset() {
-    this.sources = [];
-  }
-
-  emitter: EventEmitter;
-
-  constructor() {
-    this.emitter = new EventEmitter();
-    EventSourceMock.sources.push(this);
-  }
-
-  addEventListener(event: string, cb: (data: any) => void) {
-    this.emitter.on(event, cb);
-  }
-
-  emit(event: string, data: any) {
-    this.emitter.emit(event, data);
-  }
-}
-
-global.window.EventSource = EventSourceMock as any;
diff --git a/code/jest.init.browser.ts b/code/jest.init.browser.ts
new file mode 100644
index 000000000000..0ad9f9d2e7ac
--- /dev/null
+++ b/code/jest.init.browser.ts
@@ -0,0 +1,48 @@
+import './jest.init.base';
+import EventEmitter from 'events';
+import { webcrypto } from 'node:crypto';
+
+// Mock for matchMedia since it's not yet implemented in JSDOM (https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom)
+global.window.matchMedia = jest.fn().mockImplementation((query) => {
+  return {
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  };
+});
+
+class EventSourceMock {
+  static sources: EventSourceMock[] = [];
+
+  static reset() {
+    this.sources = [];
+  }
+
+  emitter: EventEmitter;
+
+  constructor() {
+    this.emitter = new EventEmitter();
+    EventSourceMock.sources.push(this);
+  }
+
+  addEventListener(event: string, cb: (data: any) => void) {
+    this.emitter.on(event, cb);
+  }
+
+  emit(event: string, data: any) {
+    this.emitter.emit(event, data);
+  }
+}
+
+global.window.EventSource = EventSourceMock as any;
+
+Object.defineProperty(window, 'crypto', {
+  get() {
+    return webcrypto;
+  },
+});
diff --git a/code/lerna.json b/code/lerna.json
index 8442865df4d6..ee66d5a2ad77 100644
--- a/code/lerna.json
+++ b/code/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "7.0.0-alpha.48"
+  "version": "7.0.0-alpha.51"
 }
diff --git a/code/lib/addons/jest.config.js b/code/lib/addons/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/addons/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json
index 57cf53a7bebb..5b86a7e526c2 100644
--- a/code/lib/addons/package.json
+++ b/code/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -42,13 +42,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0"
   },
   "peerDependencies": {
@@ -63,5 +63,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/addons/src/hooks.ts b/code/lib/addons/src/hooks.ts
index c456c219451b..55ec838f995f 100644
--- a/code/lib/addons/src/hooks.ts
+++ b/code/lib/addons/src/hooks.ts
@@ -1,7 +1,7 @@
 import global from 'global';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   Args,
   DecoratorApplicator,
   DecoratorFunction,
@@ -32,7 +32,7 @@ interface Effect {
 
 type AbstractFunction = (...args: any[]) => any;
 
-export class HooksContext<TFramework extends Framework> {
+export class HooksContext<TRenderer extends Renderer> {
   hookListsMap: WeakMap<AbstractFunction, Hook[]>;
 
   mountedDecorators: Set<AbstractFunction>;
@@ -53,7 +53,7 @@ export class HooksContext<TFramework extends Framework> {
 
   hasUpdates: boolean;
 
-  currentContext: StoryContext<TFramework> | null;
+  currentContext: StoryContext<TRenderer> | null;
 
   renderListener = (storyId: StoryId) => {
     if (storyId !== this.currentContext.id) return;
@@ -126,15 +126,15 @@ export class HooksContext<TFramework extends Framework> {
   }
 }
 
-function hookify<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>
-): LegacyStoryFn<TFramework>;
-function hookify<TFramework extends Framework>(
-  decorator: DecoratorFunction<TFramework>
-): DecoratorFunction<TFramework>;
-function hookify<TFramework extends Framework>(fn: AbstractFunction) {
+function hookify<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>
+): LegacyStoryFn<TRenderer>;
+function hookify<TRenderer extends Renderer>(
+  decorator: DecoratorFunction<TRenderer>
+): DecoratorFunction<TRenderer>;
+function hookify<TRenderer extends Renderer>(fn: AbstractFunction) {
   return (...args: any[]) => {
-    const { hooks }: { hooks: HooksContext<TFramework> } =
+    const { hooks }: { hooks: HooksContext<TRenderer> } =
       typeof args[0] === 'function' ? args[1] : args[0];
 
     const prevPhase = hooks.currentPhase;
@@ -177,16 +177,16 @@ function hookify<TFramework extends Framework>(fn: AbstractFunction) {
 let numberOfRenders = 0;
 const RENDER_LIMIT = 25;
 export const applyHooks =
-  <TFramework extends Framework>(
-    applyDecorators: DecoratorApplicator<TFramework>
-  ): DecoratorApplicator<TFramework> =>
-  (storyFn: LegacyStoryFn<TFramework>, decorators: DecoratorFunction<TFramework>[]) => {
+  <TRenderer extends Renderer>(
+    applyDecorators: DecoratorApplicator<TRenderer>
+  ): DecoratorApplicator<TRenderer> =>
+  (storyFn: LegacyStoryFn<TRenderer>, decorators: DecoratorFunction<TRenderer>[]) => {
     const decorated = applyDecorators(
       hookify(storyFn),
       decorators.map((decorator) => hookify(decorator))
     );
     return (context) => {
-      const { hooks } = context as { hooks: HooksContext<TFramework> };
+      const { hooks } = context as { hooks: HooksContext<TRenderer> };
       hooks.prevMountedDecorators = hooks.mountedDecorators;
       hooks.mountedDecorators = new Set([storyFn, ...decorators]);
       hooks.currentContext = context;
@@ -215,12 +215,12 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) =>
 const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
-function getHooksContextOrNull<TFramework extends Framework>(): HooksContext<TFramework> | null {
+function getHooksContextOrNull<TRenderer extends Renderer>(): HooksContext<TRenderer> | null {
   return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
-function getHooksContextOrThrow<TFramework extends Framework>(): HooksContext<TFramework> {
-  const hooks = getHooksContextOrNull<TFramework>();
+function getHooksContextOrThrow<TRenderer extends Renderer>(): HooksContext<TRenderer> {
+  const hooks = getHooksContextOrNull<TRenderer>();
   if (hooks == null) {
     throw invalidHooksError();
   }
@@ -404,7 +404,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
 }
 
 /* Returns current story context */
-export function useStoryContext<TFramework extends Framework>(): StoryContext<TFramework> {
+export function useStoryContext<TRenderer extends Renderer>(): StoryContext<TRenderer> {
   const { currentContext } = getHooksContextOrThrow();
   if (currentContext == null) {
     throw invalidHooksError();
diff --git a/code/lib/addons/tsconfig.json b/code/lib/addons/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/addons/tsconfig.json
+++ b/code/lib/addons/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/api/jest.config.js b/code/lib/api/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/api/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/api/package.json b/code/lib/api/package.json
index 467c173b5131..ebdd7937d3c0 100644
--- a/code/lib/api/package.json
+++ b/code/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -45,13 +45,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -63,13 +63,12 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@jest/globals": "^26.6.2",
-    "@storybook/core-common": "7.0.0-alpha.48",
+    "@storybook/core-common": "7.0.0-alpha.51",
     "@types/lodash": "^4.14.167",
     "@types/qs": "^6",
     "flush-promises": "^1.0.2",
     "qs": "^6.10.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -84,5 +83,5 @@
       "./src/shortcut.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/api/src/modules/globals.ts b/code/lib/api/src/modules/globals.ts
index ab7207b6a676..c7b99ce186ca 100644
--- a/code/lib/api/src/modules/globals.ts
+++ b/code/lib/api/src/modules/globals.ts
@@ -19,7 +19,7 @@ export interface SubAPI {
   updateGlobals: (newGlobals: Globals) => void;
 }
 
-export const init: ModuleFn = ({ store, fullAPI }) => {
+export const init: ModuleFn<SubAPI, SubState, true> = ({ store, fullAPI }) => {
   const api: SubAPI = {
     getGlobals() {
       return store.getState().globals;
diff --git a/code/lib/api/src/tests/shortcut.test.js b/code/lib/api/src/tests/shortcut.test.js
index 9a4532532682..23aeb049236e 100644
--- a/code/lib/api/src/tests/shortcut.test.js
+++ b/code/lib/api/src/tests/shortcut.test.js
@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import global from 'global';
 import { eventToShortcut, keyToSymbol } from '../lib/shortcut';
 
diff --git a/code/lib/api/src/tests/stories.test.ts b/code/lib/api/src/tests/stories.test.ts
index 229862fa0871..59ce70e8cf7d 100644
--- a/code/lib/api/src/tests/stories.test.ts
+++ b/code/lib/api/src/tests/stories.test.ts
@@ -34,7 +34,7 @@ function mockChannel() {
   return new Channel({ transport });
 }
 
-const mockGetEntries = jest.fn<API_StoryIndex['entries'], []>();
+const mockGetEntries = jest.fn<() => API_StoryIndex['entries']>();
 
 jest.mock('../lib/events');
 jest.mock('global', () => ({
diff --git a/code/lib/api/src/version.ts b/code/lib/api/src/version.ts
index 22f21c33eed5..2a1066536ca1 100644
--- a/code/lib/api/src/version.ts
+++ b/code/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '7.0.0-alpha.48';
+export const version = '7.0.0-alpha.51';
diff --git a/code/lib/api/tsconfig.json b/code/lib/api/tsconfig.json
index f8b60c90fdef..cf1e09965901 100644
--- a/code/lib/api/tsconfig.json
+++ b/code/lib/api/tsconfig.json
@@ -1,13 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/builder-manager/jest.config.js b/code/lib/builder-manager/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/builder-manager/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json
index 84a286b93dd1..594d9cf6eb1f 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/manager": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/manager": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
     "@types/ejs": "^3.1.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "browser-assert": "^1.2.1",
@@ -58,7 +58,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -69,5 +69,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/builder-manager/src/utils/files.test.ts b/code/lib/builder-manager/src/utils/files.test.ts
index 41d62ec82693..2cdb1f0d4c59 100644
--- a/code/lib/builder-manager/src/utils/files.test.ts
+++ b/code/lib/builder-manager/src/utils/files.test.ts
@@ -1,17 +1,27 @@
+import { platform } from 'os';
 import { sanitizePath } from './files';
 
+const os = platform();
+const isWindows = os === 'win32';
+
 test('sanitizePath', () => {
-  const addonsDir = '/Users/username/Projects/projectname/storybook';
+  const addonsDir = isWindows
+    ? 'C:\\Users\\username\\Projects\\projectname\\storybook'
+    : '/Users/username/Projects/projectname/storybook';
   const text = 'demo text';
   const file = {
-    path: '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs',
+    path: isWindows
+      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs'
+      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs',
     contents: Uint8Array.from(Array.from(text).map((letter) => letter.charCodeAt(0))),
     text,
   };
   const { location, url } = sanitizePath(file, addonsDir);
 
-  expect(location).toMatchInlineSnapshot(
-    `"/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs"`
+  expect(location).toEqual(
+    isWindows
+      ? 'C:\\Users\\username\\Projects\\projectname\\storybook\\node_modules\\@storybook\\addon-x+y\\dist\\manager.mjs'
+      : '/Users/username/Projects/projectname/storybook/node_modules/@storybook/addon-x+y/dist/manager.mjs'
   );
   expect(url).toMatchInlineSnapshot(
     `"./sb-addons/node_modules/%40storybook/addon-x%2By/dist/manager.mjs"`
diff --git a/code/lib/builder-manager/src/utils/files.ts b/code/lib/builder-manager/src/utils/files.ts
index bded035f9a2c..bca197dcda9e 100644
--- a/code/lib/builder-manager/src/utils/files.ts
+++ b/code/lib/builder-manager/src/utils/files.ts
@@ -1,6 +1,6 @@
 import type { OutputFile } from 'esbuild';
 import fs from 'fs-extra';
-import { join } from 'path';
+import { join, normalize } from 'path';
 import slash from 'slash';
 import type { Compilation } from '../types';
 
@@ -26,7 +26,8 @@ export async function readOrderedFiles(
 
 export function sanitizePath(file: OutputFile, addonsDir: string) {
   const filePath = file.path.replace(addonsDir, '');
-  const location = join(addonsDir, filePath);
+  const location = normalize(join(addonsDir, filePath));
   const url = `./sb-addons${slash(filePath).split('/').map(encodeURIComponent).join('/')}`;
+
   return { location, url };
 }
diff --git a/code/lib/builder-manager/tsconfig.json b/code/lib/builder-manager/tsconfig.json
index 314889c338e2..b89e79d6ea26 100644
--- a/code/lib/builder-manager/tsconfig.json
+++ b/code/lib/builder-manager/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "typings.d.ts"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*", "typings.d.ts"]
 }
diff --git a/code/lib/builder-vite/jest.config.js b/code/lib/builder-vite/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/builder-vite/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json
index dbc277446d42..bec560c5f36a 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme",
   "repository": {
@@ -19,14 +19,14 @@
   },
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
     "@storybook/mdx2-csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/source-loader": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/source-loader": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@vitejs/plugin-react": "^2.0.0",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^0.9.3",
@@ -38,12 +38,12 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^16.0.0 || ^18.0.0",
+    "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts
index 141965a0034e..fdfe0249bce5 100644
--- a/code/lib/builder-vite/src/codegen-iframe-script.ts
+++ b/code/lib/builder-vite/src/codegen-iframe-script.ts
@@ -1,22 +1,23 @@
-import { isAbsolute, resolve } from 'path';
-import { getRendererName } from '@storybook/core-common';
+import { getRendererName, getFrameworkName } from '@storybook/core-common';
+import type { PreviewAnnotation } from '@storybook/types';
 import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
-import { transformAbsPath } from './utils/transform-abs-path';
 import type { ExtendedOptions } from './types';
+import { processPreviewAnnotation } from './utils/process-preview-annotation';
 
 export async function generateIframeScriptCode(options: ExtendedOptions) {
   const { presets } = options;
   const rendererName = await getRendererName(options);
-  const previewAnnotations = await presets.apply('previewAnnotations', [], options);
-  const resolvedPreviewAnnotations = previewAnnotations.map((entry) =>
-    isAbsolute(entry) ? entry : resolve(entry)
+  const frameworkName = await getFrameworkName(options);
+
+  const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
+    'previewAnnotations',
+    [],
+    options
   );
-  const configEntries = [...resolvedPreviewAnnotations].filter(Boolean);
+  const configEntries = [...previewAnnotations].filter(Boolean).map(processPreviewAnnotation);
 
-  const absoluteFilesToImport = (files: string[], name: string) =>
-    files
-      .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${transformAbsPath(el)}'`)
-      .join('\n');
+  const filesToImport = (files: string[], name: string) =>
+    files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n');
 
   const importArray = (name: string, length: number) =>
     new Array(length).fill(0).map((_, i) => `${name}_${i}`);
@@ -28,10 +29,8 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
     // Ensure that the client API is initialized by the framework before any other iframe code
     // is loaded. That way our client-apis can assume the existence of the API+store
     import { configure } from '${rendererName}';
-
-    import * as clientApi from "@storybook/client-api";
-    import { logger } from '@storybook/client-logger';
-    ${absoluteFilesToImport(configEntries, 'config')}
+    import { clientApi } from '${frameworkName}';
+    ${filesToImport(configEntries, 'config')}
     import * as preview from '${virtualPreviewFile}';
     import { configStories } from '${virtualStoriesFile}';
 
diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
index ee5339228f23..c1c7aa6a4444 100644
--- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts
@@ -1,21 +1,22 @@
-import { isAbsolute, resolve } from 'path';
 import { loadPreviewOrConfigFile, getFrameworkName } from '@storybook/core-common';
+import type { PreviewAnnotation } from '@storybook/types';
 import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
-import { transformAbsPath } from './utils/transform-abs-path';
 import type { ExtendedOptions } from './types';
+import { processPreviewAnnotation } from './utils/process-preview-annotation';
 
 export async function generateModernIframeScriptCode(options: ExtendedOptions) {
   const { presets, configDir } = options;
   const frameworkName = await getFrameworkName(options);
 
   const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
-  const previewAnnotations = await presets.apply('previewAnnotations', [], options);
-  const resolvedPreviewAnnotations = [...previewAnnotations].map((entry) =>
-    isAbsolute(entry) ? entry : resolve(entry)
+  const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
+    'previewAnnotations',
+    [],
+    options
   );
-  const relativePreviewAnnotations = [...resolvedPreviewAnnotations, previewOrConfigFile]
+  const relativePreviewAnnotations = [...previewAnnotations, previewOrConfigFile]
     .filter(Boolean)
-    .map((configEntry) => transformAbsPath(configEntry as string));
+    .map(processPreviewAnnotation);
 
   // eslint-disable-next-line @typescript-eslint/no-shadow
   const generateHMRHandler = (frameworkName: string): string => {
diff --git a/code/lib/builder-vite/src/utils/process-preview-annotation.ts b/code/lib/builder-vite/src/utils/process-preview-annotation.ts
new file mode 100644
index 000000000000..b37ac876d817
--- /dev/null
+++ b/code/lib/builder-vite/src/utils/process-preview-annotation.ts
@@ -0,0 +1,41 @@
+import type { PreviewAnnotation } from '@storybook/types';
+import { resolve } from 'path';
+import slash from 'slash';
+import { transformAbsPath } from './transform-abs-path';
+
+/**
+ * Preview annotations can take several forms, and vite needs them to be
+ * a bit more restrained.
+ *
+ * For node_modules, we want bare imports (so vite can process them),
+ * and for files in the user's source,
+ * we want absolute paths.
+ */
+export function processPreviewAnnotation(path: PreviewAnnotation | undefined) {
+  // If entry is an object, take the first, which is the
+  // bare (non-absolute) specifier.
+  // This is so that webpack can use an absolute path, and
+  // continue supporting super-addons in pnp/pnpm without
+  // requiring them to re-export their sub-addons as we do
+  // in addon-essentials.
+  if (typeof path === 'object') {
+    return path.bare;
+  }
+  // resolve relative paths into absolute paths, but don't resolve "bare" imports
+  if (path?.startsWith('./') || path?.startsWith('../')) {
+    return slash(resolve(path));
+  }
+  // This should not occur, since we use `.filter(Boolean)` prior to
+  // calling this function, but this makes typescript happy
+  if (!path) {
+    throw new Error('Could not determine path for previewAnnotation');
+  }
+
+  // For addon dependencies that use require.resolve(), we need to convert to a bare path
+  // so that vite will process it as a dependency (cjs -> esm, etc).
+  if (path.includes('node_modules')) {
+    return transformAbsPath(path);
+  }
+
+  return slash(path);
+}
diff --git a/code/lib/builder-vite/tsconfig.json b/code/lib/builder-vite/tsconfig.json
index 76d943e5d483..d3576aa8f726 100644
--- a/code/lib/builder-vite/tsconfig.json
+++ b/code/lib/builder-vite/tsconfig.json
@@ -5,6 +5,5 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/builder-webpack5/jest.config.js b/code/lib/builder-webpack5/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/builder-webpack5/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json
index 4e547eb766ab..8777a7d915ec 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -25,15 +25,15 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./presets/custom-webpack-preset.js": {
-      "require": "./presets/custom-webpack-preset.js",
-      "import": "./presets/custom-webpack-preset.mjs",
-      "types": "./presets/custom-webpack-preset.d.ts"
+    "./presets/custom-webpack-preset": {
+      "require": "./dist/presets/custom-webpack-preset.js",
+      "import": "./dist/presets/custom-webpack-preset.mjs",
+      "types": "./dist/presets/custom-webpack-preset.d.ts"
     },
-    "./presets/preview-preset.js": {
-      "require": "./presets/preview-preset.js",
-      "import": "./presets/preview-preset.mjs",
-      "types": "./presets/preview-preset.d.ts"
+    "./presets/preview-preset": {
+      "require": "./dist/presets/preview-preset.js",
+      "import": "./dist/presets/preview-preset.mjs",
+      "types": "./dist/presets/preview-preset.d.ts"
     },
     "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
     "./package.json": "./package.json"
@@ -52,26 +52,26 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@babel/core": "^7.20.2",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/semver": "^7.3.4",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^8.3.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -93,12 +93,11 @@
     "webpack-virtual-modules": "^0.4.3"
   },
   "devDependencies": {
-    "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-dev-middleware": "^5.3.0",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-virtual-modules": "^0.1.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -120,5 +119,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index ac29c5ad5d95..78dedb2d0df9 100644
--- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -2,12 +2,13 @@ import path from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import type { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+// @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-import type { Options, CoreConfig, DocsOptions } from '@storybook/types';
+import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types';
 import {
   getRendererName,
   stringifyProcessEnvs,
@@ -82,7 +83,18 @@ export default async (
   const docsOptions = await presets.apply<DocsOptions>('docs');
 
   const previewAnnotations = [
-    ...(await presets.apply('previewAnnotations', [], options)),
+    ...(await presets.apply<PreviewAnnotation[]>('previewAnnotations', [], options)).map(
+      (entry) => {
+        // If entry is an object, use the absolute import specifier.
+        // This is to maintain back-compat with community addons that bundle other addons
+        // and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp)
+        // The vite builder uses the bare import specifier.
+        if (typeof entry === 'object') {
+          return entry.absolute;
+        }
+        return entry;
+      }
+    ),
     loadPreviewOrConfigFile(options),
   ].filter(Boolean);
   const entries = (await presets.apply('entries', [], options)) as string[];
diff --git a/code/lib/builder-webpack5/tsconfig.json b/code/lib/builder-webpack5/tsconfig.json
index de98a048bdd5..5b3f3a56a68d 100644
--- a/code/lib/builder-webpack5/tsconfig.json
+++ b/code/lib/builder-webpack5/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "typings.d.ts", "templates/virtualModuleEntry.template.js"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/channel-postmessage/jest.config.js b/code/lib/channel-postmessage/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/channel-postmessage/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json
index 1b676a31d54f..42cd02e500be 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,15 +42,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "qs": "^6.10.0",
     "telejson": "^6.0.8"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -60,5 +60,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/channel-postmessage/tsconfig.json b/code/lib/channel-postmessage/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/channel-postmessage/tsconfig.json
+++ b/code/lib/channel-postmessage/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/channel-websocket/jest.config.js b/code/lib/channel-websocket/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/channel-websocket/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json
index 7372527e2a85..b764c37825f2 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -20,9 +20,17 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -31,19 +39,24 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "telejson": "^6.0.8"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "bundler": {
+    "entries": [
+      "./src/index.ts"
+    ]
+  },
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/channel-websocket/tsconfig.json b/code/lib/channel-websocket/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/channel-websocket/tsconfig.json
+++ b/code/lib/channel-websocket/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/channels/jest.config.js b/code/lib/channels/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/channels/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 9518d25fee5d..d9c87671b88a 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,7 +42,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -52,5 +52,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/channels/tsconfig.json b/code/lib/channels/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/channels/tsconfig.json
+++ b/code/lib/channels/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/cli-sb/jest.config.js b/code/lib/cli-sb/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/cli-sb/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 6bf000d0e72c..d190a11a5730 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -24,13 +24,13 @@
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "7.0.0-alpha.48"
+    "@storybook/cli": "7.0.0-alpha.51"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/cli-storybook/jest.config.js b/code/lib/cli-storybook/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/cli-storybook/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 484cef2424ec..0e2e705cc01c 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -27,13 +27,13 @@
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/cli": "7.0.0-alpha.48"
+    "@storybook/cli": "7.0.0-alpha.51"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/cli/jest.config.js b/code/lib/cli/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/cli/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 651e93c0d66d..a88039fca170 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -41,21 +41,20 @@
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/csf-tools": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/telemetry": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/codemod": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/csf-tools": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/telemetry": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/semver": "^7.3.4",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
     "cross-spawn": "^7.0.3",
-    "degit": "^2.8.4",
     "detect-indent": "^6.1.0",
     "envinfo": "^7.7.3",
     "execa": "^5.0.0",
@@ -63,6 +62,7 @@
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",
+    "giget": "^1.0.0",
     "globby": "^11.0.2",
     "jscodeshift": "^0.13.1",
     "leven": "^3.1.0",
@@ -77,9 +77,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.48",
+    "@storybook/client-api": "7.0.0-alpha.51",
     "@types/cross-spawn": "^6.0.2",
-    "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
     "@types/semver": "^7.3.4",
@@ -87,7 +86,7 @@
     "@types/update-notifier": "^6.0.1",
     "@types/util-deprecate": "^1.0.0",
     "strip-json-comments": "^3.1.1",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "update-notifier": "^6.0.2"
   },
   "publishConfig": {
@@ -99,5 +98,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
index 0dd4419f3639..0ae9971db053 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
@@ -8,7 +8,7 @@ import { RemovedAPIs, removedGlobalClientAPIs as migration } from './remove-glob
 // eslint-disable-next-line global-require, jest/no-mocks-import
 jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra'));
 
-const check = async ({ packageJson = {}, contents }) => {
+const check = async ({ packageJson = {}, contents }: any) => {
   if (contents) {
     // eslint-disable-next-line global-require
     require('fs-extra').__setMockFiles({
diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index cd07092f24f9..31ae5ab1e876 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -161,7 +161,7 @@ program
   .command('repro-next [filterValue]')
   .description('Create a reproduction from a set of possible templates')
   .option('-o --output <outDir>', 'Define an output directory')
-  .option('-b --branch <branch>', 'Define the branch to degit from', 'next')
+  .option('-b --branch <branch>', 'Define the branch to download from', 'next')
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
     reproNext({ filterValue, ...options }).catch((e) => {
diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts
index dbc6760c0809..c53cbf3a9d97 100644
--- a/code/lib/cli/src/helpers.test.ts
+++ b/code/lib/cli/src/helpers.test.ts
@@ -9,7 +9,7 @@ jest.mock('fs', () => ({
   existsSync: jest.fn(),
 }));
 jest.mock('./dirs', () => ({
-  getRendererDir: (renderer) => `@storybook/${renderer}`,
+  getRendererDir: (renderer: string) => `@storybook/${renderer}`,
   getCliDir: () => '@storybook/cli',
 }));
 
diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts
index 00ebb767831f..53bfc848077d 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/lib/cli/src/helpers.ts
@@ -198,6 +198,7 @@ export async function copyComponents(
   const componentsPath = async () => {
     const baseDir = getRendererDir(renderer);
     const assetsDir = join(baseDir, 'template/cli');
+
     const assetsLanguage = join(assetsDir, languageFolderMapping[language]);
     const assetsJS = join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]);
     const assetsTSLegacy = join(
@@ -232,7 +233,9 @@ export async function copyComponents(
   };
 
   const destinationPath = await targetPath();
-  await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, { overwrite: true });
+  await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, {
+    overwrite: true,
+  });
   await fse.copy(await componentsPath(), destinationPath, { overwrite: true });
 }
 
diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
index 17ebaffad8b2..66e50ab6d9fd 100644
--- a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
+++ b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts
@@ -181,6 +181,7 @@ describe('NPM Proxy', () => {
       const writePackageSpy = jest.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(jest.fn);
 
       jest.spyOn(pnpmProxy, 'retrievePackageJson').mockImplementation(
+        // @ts-expect-error (not strict)
         jest.fn(() => ({
           overrides: {
             bar: 'x.x.x',
diff --git a/code/lib/cli/src/repro-generators/configs.ts b/code/lib/cli/src/repro-generators/configs.ts
index cf9f3b917706..3a2194c152be 100644
--- a/code/lib/cli/src/repro-generators/configs.ts
+++ b/code/lib/cli/src/repro-generators/configs.ts
@@ -264,5 +264,5 @@ export const svelte: Parameters = {
   renderer: 'svelte',
   name: 'svelte',
   version: 'latest',
-  generator: 'npx degit sveltejs/template {{appName}}',
+  generator: 'npx giget github:sveltejs/template#master {{appName}}',
 };
diff --git a/code/lib/cli/src/repro-next.ts b/code/lib/cli/src/repro-next.ts
index 2c118507d068..d1a75a13ba6b 100644
--- a/code/lib/cli/src/repro-next.ts
+++ b/code/lib/cli/src/repro-next.ts
@@ -3,7 +3,7 @@ import path from 'path';
 import chalk from 'chalk';
 import boxen from 'boxen';
 import { dedent } from 'ts-dedent';
-import degit from 'degit';
+import { downloadTemplate } from 'giget';
 
 import { existsSync } from 'fs-extra';
 import { allTemplates as TEMPLATES } from './repro-templates';
@@ -137,12 +137,13 @@ export const reproNext = async ({
     try {
       const templateType = init ? 'after-storybook' : 'before-storybook';
       // Download the repro based on subfolder "after-storybook" and selected branch
-      await degit(
-        `storybookjs/repro-templates-temp/${selectedTemplate}/${templateType}#${branch}`,
+      await downloadTemplate(
+        `github:storybookjs/repro-templates-temp/${selectedTemplate}/${templateType}#${branch}`,
         {
           force: true,
+          dir: templateDestination,
         }
-      ).clone(templateDestination);
+      );
     } catch (err) {
       logger.error(`🚨 Failed to download repro template: ${err.message}`);
       throw err;
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 1cfad2991091..9027de5f4203 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -2,6 +2,7 @@ export const allTemplates = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
     script: 'npx create-react-app .',
+    inDevelopment: true,
     expected: {
       // TODO: change this to @storybook/cra once that package is created
       framework: '@storybook/react-webpack5',
@@ -141,6 +142,17 @@ export const allTemplates = {
     name: 'Angular CLI (latest)',
     script:
       'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
+    skipTasks: ['test-runner'],
+    expected: {
+      framework: '@storybook/angular',
+      renderer: '@storybook/angular',
+      builder: '@storybook/builder-webpack5',
+    },
+  },
+  'angular-cli/14-ts': {
+    name: 'Angular CLI (Version 14)',
+    script:
+      'npx -p @angular/cli@14 ng new angular-v14 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -251,7 +263,8 @@ type TemplateKey = keyof typeof allTemplates;
 export const ci: TemplateKey[] = ['cra/default-ts', 'react-vite/default-ts'];
 export const pr: TemplateKey[] = [
   ...ci,
-  'angular-cli/default-ts',
+  // TODO: swap with 'angular-cli/default-ts' once angular 15 fully works with Storybook
+  'angular-cli/14-ts',
   'vue3-vite/default-ts',
   'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
@@ -263,6 +276,7 @@ export const merged: TemplateKey[] = [
   ...pr,
   'react-webpack/18-ts',
   'react-webpack/17-ts',
+  'angular-cli/default-ts',
   'angular-cli/13-ts',
   'preact-webpack5/default-ts',
   'html-webpack/default',
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index c00a272d65e2..3874f63135d8 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -1,85 +1,85 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.0.0-alpha.48',
-  '@storybook/addon-actions': '7.0.0-alpha.48',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.48',
-  '@storybook/addon-controls': '7.0.0-alpha.48',
-  '@storybook/addon-docs': '7.0.0-alpha.48',
-  '@storybook/addon-essentials': '7.0.0-alpha.48',
-  '@storybook/addon-highlight': '7.0.0-alpha.48',
-  '@storybook/addon-interactions': '7.0.0-alpha.48',
-  '@storybook/addon-jest': '7.0.0-alpha.48',
-  '@storybook/addon-links': '7.0.0-alpha.48',
-  '@storybook/addon-measure': '7.0.0-alpha.48',
-  '@storybook/addon-outline': '7.0.0-alpha.48',
-  '@storybook/addon-storyshots': '7.0.0-alpha.48',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.48',
-  '@storybook/addon-storysource': '7.0.0-alpha.48',
-  '@storybook/addon-toolbars': '7.0.0-alpha.48',
-  '@storybook/addon-viewport': '7.0.0-alpha.48',
-  '@storybook/addons': '7.0.0-alpha.48',
-  '@storybook/angular': '7.0.0-alpha.48',
-  '@storybook/api': '7.0.0-alpha.48',
-  '@storybook/blocks': '7.0.0-alpha.48',
-  '@storybook/builder-manager': '7.0.0-alpha.48',
-  '@storybook/builder-vite': '7.0.0-alpha.48',
-  '@storybook/builder-webpack5': '7.0.0-alpha.48',
-  '@storybook/channel-postmessage': '7.0.0-alpha.48',
-  '@storybook/channel-websocket': '7.0.0-alpha.48',
-  '@storybook/channels': '7.0.0-alpha.48',
-  '@storybook/cli': '7.0.0-alpha.48',
-  '@storybook/client-api': '7.0.0-alpha.48',
-  '@storybook/client-logger': '7.0.0-alpha.48',
-  '@storybook/codemod': '7.0.0-alpha.48',
-  '@storybook/components': '7.0.0-alpha.48',
-  '@storybook/core-client': '7.0.0-alpha.48',
-  '@storybook/core-common': '7.0.0-alpha.48',
-  '@storybook/core-events': '7.0.0-alpha.48',
-  '@storybook/core-server': '7.0.0-alpha.48',
-  '@storybook/core-webpack': '7.0.0-alpha.48',
-  '@storybook/csf-tools': '7.0.0-alpha.48',
-  '@storybook/docs-tools': '7.0.0-alpha.48',
-  '@storybook/ember': '7.0.0-alpha.48',
-  '@storybook/html': '7.0.0-alpha.48',
-  '@storybook/html-webpack5': '7.0.0-alpha.48',
-  '@storybook/instrumenter': '7.0.0-alpha.48',
-  '@storybook/nextjs': '7.0.0-alpha.48',
-  '@storybook/node-logger': '7.0.0-alpha.48',
-  '@storybook/postinstall': '7.0.0-alpha.48',
-  '@storybook/preact': '7.0.0-alpha.48',
-  '@storybook/preact-webpack5': '7.0.0-alpha.48',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.48',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.48',
-  '@storybook/preview-web': '7.0.0-alpha.48',
-  '@storybook/react': '7.0.0-alpha.48',
-  '@storybook/react-vite': '7.0.0-alpha.48',
-  '@storybook/react-webpack5': '7.0.0-alpha.48',
-  '@storybook/router': '7.0.0-alpha.48',
-  '@storybook/server': '7.0.0-alpha.48',
-  '@storybook/server-webpack5': '7.0.0-alpha.48',
-  '@storybook/source-loader': '7.0.0-alpha.48',
-  '@storybook/store': '7.0.0-alpha.48',
-  '@storybook/svelte': '7.0.0-alpha.48',
-  '@storybook/svelte-vite': '7.0.0-alpha.48',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.48',
-  '@storybook/telemetry': '7.0.0-alpha.48',
-  '@storybook/theming': '7.0.0-alpha.48',
-  '@storybook/manager': '7.0.0-alpha.48',
-  '@storybook/vue': '7.0.0-alpha.48',
-  '@storybook/vue-vite': '7.0.0-alpha.48',
-  '@storybook/vue-webpack5': '7.0.0-alpha.48',
-  '@storybook/vue3': '7.0.0-alpha.48',
-  '@storybook/vue3-vite': '7.0.0-alpha.48',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.48',
-  '@storybook/web-components': '7.0.0-alpha.48',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.48',
-  '@storybook/web-components-vite': '7.0.0-alpha.48',
-  sb: '7.0.0-alpha.48',
-  storybook: '7.0.0-alpha.48',
+  '@storybook/addon-a11y': '7.0.0-alpha.51',
+  '@storybook/addon-actions': '7.0.0-alpha.51',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.51',
+  '@storybook/addon-controls': '7.0.0-alpha.51',
+  '@storybook/addon-docs': '7.0.0-alpha.51',
+  '@storybook/addon-essentials': '7.0.0-alpha.51',
+  '@storybook/addon-highlight': '7.0.0-alpha.51',
+  '@storybook/addon-interactions': '7.0.0-alpha.51',
+  '@storybook/addon-jest': '7.0.0-alpha.51',
+  '@storybook/addon-links': '7.0.0-alpha.51',
+  '@storybook/addon-measure': '7.0.0-alpha.51',
+  '@storybook/addon-outline': '7.0.0-alpha.51',
+  '@storybook/addon-storyshots': '7.0.0-alpha.51',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.51',
+  '@storybook/addon-storysource': '7.0.0-alpha.51',
+  '@storybook/addon-toolbars': '7.0.0-alpha.51',
+  '@storybook/addon-viewport': '7.0.0-alpha.51',
+  '@storybook/addons': '7.0.0-alpha.51',
+  '@storybook/angular': '7.0.0-alpha.51',
+  '@storybook/api': '7.0.0-alpha.51',
+  '@storybook/blocks': '7.0.0-alpha.51',
+  '@storybook/builder-manager': '7.0.0-alpha.51',
+  '@storybook/builder-vite': '7.0.0-alpha.51',
+  '@storybook/builder-webpack5': '7.0.0-alpha.51',
+  '@storybook/channel-postmessage': '7.0.0-alpha.51',
+  '@storybook/channel-websocket': '7.0.0-alpha.51',
+  '@storybook/channels': '7.0.0-alpha.51',
+  '@storybook/cli': '7.0.0-alpha.51',
+  '@storybook/client-api': '7.0.0-alpha.51',
+  '@storybook/client-logger': '7.0.0-alpha.51',
+  '@storybook/codemod': '7.0.0-alpha.51',
+  '@storybook/components': '7.0.0-alpha.51',
+  '@storybook/core-client': '7.0.0-alpha.51',
+  '@storybook/core-common': '7.0.0-alpha.51',
+  '@storybook/core-events': '7.0.0-alpha.51',
+  '@storybook/core-server': '7.0.0-alpha.51',
+  '@storybook/core-webpack': '7.0.0-alpha.51',
+  '@storybook/csf-tools': '7.0.0-alpha.51',
+  '@storybook/docs-tools': '7.0.0-alpha.51',
+  '@storybook/ember': '7.0.0-alpha.51',
+  '@storybook/html': '7.0.0-alpha.51',
+  '@storybook/html-webpack5': '7.0.0-alpha.51',
+  '@storybook/instrumenter': '7.0.0-alpha.51',
+  '@storybook/nextjs': '7.0.0-alpha.51',
+  '@storybook/node-logger': '7.0.0-alpha.51',
+  '@storybook/postinstall': '7.0.0-alpha.51',
+  '@storybook/preact': '7.0.0-alpha.51',
+  '@storybook/preact-webpack5': '7.0.0-alpha.51',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.51',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.51',
+  '@storybook/preview-web': '7.0.0-alpha.51',
+  '@storybook/react': '7.0.0-alpha.51',
+  '@storybook/react-vite': '7.0.0-alpha.51',
+  '@storybook/react-webpack5': '7.0.0-alpha.51',
+  '@storybook/router': '7.0.0-alpha.51',
+  '@storybook/server': '7.0.0-alpha.51',
+  '@storybook/server-webpack5': '7.0.0-alpha.51',
+  '@storybook/source-loader': '7.0.0-alpha.51',
+  '@storybook/store': '7.0.0-alpha.51',
+  '@storybook/svelte': '7.0.0-alpha.51',
+  '@storybook/svelte-vite': '7.0.0-alpha.51',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.51',
+  '@storybook/telemetry': '7.0.0-alpha.51',
+  '@storybook/theming': '7.0.0-alpha.51',
+  '@storybook/manager': '7.0.0-alpha.51',
+  '@storybook/vue': '7.0.0-alpha.51',
+  '@storybook/vue-vite': '7.0.0-alpha.51',
+  '@storybook/vue-webpack5': '7.0.0-alpha.51',
+  '@storybook/vue3': '7.0.0-alpha.51',
+  '@storybook/vue3-vite': '7.0.0-alpha.51',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.51',
+  '@storybook/web-components': '7.0.0-alpha.51',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.51',
+  '@storybook/web-components-vite': '7.0.0-alpha.51',
+  sb: '7.0.0-alpha.51',
+  storybook: '7.0.0-alpha.51',
 };
diff --git a/code/lib/cli/src/window.d.ts b/code/lib/cli/src/window.d.ts
index 0adbb33da3b6..7a5da303ea67 100644
--- a/code/lib/cli/src/window.d.ts
+++ b/code/lib/cli/src/window.d.ts
@@ -1,8 +1,8 @@
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import type { StoryStore } from '@storybook/client-api';
 
 declare global {
   interface Window {
-    __STORYBOOK_STORY_STORE__: StoryStore<Framework>;
+    __STORYBOOK_STORY_STORE__: StoryStore<Renderer>;
   }
 }
diff --git a/code/lib/cli/tsconfig.json b/code/lib/cli/tsconfig.json
index 0521e258ae2f..b0f65014db55 100644
--- a/code/lib/cli/tsconfig.json
+++ b/code/lib/cli/tsconfig.json
@@ -7,6 +7,5 @@
     "strictNullChecks": false,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["templates/**/**", "**/*.test.*", "src/frameworks/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/client-api/jest.config.js b/code/lib/client-api/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/client-api/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json
index 26f9f27e31dd..cefa94b7a261 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -42,11 +42,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/qs": "^6.9.5",
     "@types/webpack-env": "^1.16.4",
     "global": "^4.4.0",
@@ -56,8 +56,8 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "typescript": "~4.6.3"
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -71,5 +71,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/client-api/src/ClientApi.ts b/code/lib/client-api/src/ClientApi.ts
index b09c69a5ec6f..d0d61f76e177 100644
--- a/code/lib/client-api/src/ClientApi.ts
+++ b/code/lib/client-api/src/ClientApi.ts
@@ -8,7 +8,7 @@ import type {
   Args,
   StepRunner,
   ArgTypes,
-  Framework,
+  Renderer,
   DecoratorFunction,
   Parameters,
   ArgTypesEnhancer,
@@ -31,7 +31,7 @@ import { StoryStoreFacade } from './StoryStoreFacade';
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
 // relevant framework instanciates them via `start.js`. The good news is this happens right away.
-let singleton: ClientApi<Framework>;
+let singleton: ClientApi<Renderer>;
 
 const warningAlternatives = {
   addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
@@ -60,7 +60,7 @@ const checkMethod = (method: keyof typeof warningAlternatives) => {
   }
 };
 
-export const addDecorator = (decorator: DecoratorFunction<Framework>) => {
+export const addDecorator = (decorator: DecoratorFunction<Renderer>) => {
   checkMethod('addDecorator');
   singleton.addDecorator(decorator);
 };
@@ -70,7 +70,7 @@ export const addParameters = (parameters: Parameters) => {
   singleton.addParameters(parameters);
 };
 
-export const addLoader = (loader: LoaderFunction<Framework>) => {
+export const addLoader = (loader: LoaderFunction<Renderer>) => {
   checkMethod('addLoader');
   singleton.addLoader(loader);
 };
@@ -85,12 +85,12 @@ export const addArgTypes = (argTypes: ArgTypes) => {
   singleton.addArgTypes(argTypes);
 };
 
-export const addArgsEnhancer = (enhancer: ArgsEnhancer<Framework>) => {
+export const addArgsEnhancer = (enhancer: ArgsEnhancer<Renderer>) => {
   checkMethod('addArgsEnhancer');
   singleton.addArgsEnhancer(enhancer);
 };
 
-export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Framework>) => {
+export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Renderer>) => {
   checkMethod('addArgTypesEnhancer');
   singleton.addArgTypesEnhancer(enhancer);
 };
@@ -105,18 +105,18 @@ export const getGlobalRender = () => {
   return singleton.facade.projectAnnotations.render;
 };
 
-export const setGlobalRender = (render: StoryFn<Framework>) => {
+export const setGlobalRender = (render: StoryFn<Renderer>) => {
   checkMethod('setGlobalRender');
   singleton.facade.projectAnnotations.render = render;
 };
 
 const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
-export class ClientApi<TFramework extends Framework> {
-  facade: StoryStoreFacade<TFramework>;
+export class ClientApi<TRenderer extends Renderer> {
+  facade: StoryStoreFacade<TRenderer>;
 
-  storyStore?: StoryStore<TFramework>;
+  storyStore?: StoryStore<TRenderer>;
 
-  private addons: Addon_ClientApiAddons<TFramework['storyResult']>;
+  private addons: Addon_ClientApiAddons<TRenderer['storyResult']>;
 
   onImportFnChanged?: ({ importFn }: { importFn: Store_ModuleImportFn }) => void;
 
@@ -124,7 +124,7 @@ export class ClientApi<TFramework extends Framework> {
   // just use numeric indexes
   private lastFileName = 0;
 
-  constructor({ storyStore }: { storyStore?: StoryStore<TFramework> } = {}) {
+  constructor({ storyStore }: { storyStore?: StoryStore<TRenderer> } = {}) {
     this.facade = new StoryStoreFacade();
 
     this.addons = {};
@@ -146,7 +146,7 @@ export class ClientApi<TFramework extends Framework> {
     return this.facade.getStoryIndex(this.storyStore);
   }
 
-  addDecorator = (decorator: DecoratorFunction<TFramework>) => {
+  addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
     this.facade.projectAnnotations.decorators.push(decorator);
   };
 
@@ -179,7 +179,7 @@ export class ClientApi<TFramework extends Framework> {
     );
   };
 
-  addLoader = (loader: LoaderFunction<TFramework>) => {
+  addLoader = (loader: LoaderFunction<TRenderer>) => {
     this.facade.projectAnnotations.loaders.push(loader);
   };
 
@@ -197,11 +197,11 @@ export class ClientApi<TFramework extends Framework> {
     };
   };
 
-  addArgsEnhancer = (enhancer: ArgsEnhancer<TFramework>) => {
+  addArgsEnhancer = (enhancer: ArgsEnhancer<TRenderer>) => {
     this.facade.projectAnnotations.argsEnhancers.push(enhancer);
   };
 
-  addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<TFramework>) => {
+  addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<TRenderer>) => {
     this.facade.projectAnnotations.argTypesEnhancers.push(enhancer);
   };
 
@@ -219,7 +219,7 @@ export class ClientApi<TFramework extends Framework> {
   }
 
   // what are the occasions that "m" is a boolean vs an obj
-  storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi<TFramework['storyResult']> => {
+  storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi<TRenderer['storyResult']> => {
     if (!kind && typeof kind !== 'string') {
       throw new Error('Invalid or missing kind provided for stories, should be a string');
     }
@@ -275,7 +275,7 @@ export class ClientApi<TFramework extends Framework> {
     }
 
     let hasAdded = false;
-    const api: Addon_StoryApi<TFramework['storyResult']> = {
+    const api: Addon_StoryApi<TRenderer['storyResult']> = {
       kind: kind.toString(),
       add: () => api,
       addDecorator: () => api,
@@ -292,7 +292,7 @@ export class ClientApi<TFramework extends Framework> {
       };
     });
 
-    const meta: Store_NormalizedComponentAnnotations<TFramework> = {
+    const meta: Store_NormalizedComponentAnnotations<TRenderer> = {
       id: sanitize(kind),
       title: kind,
       decorators: [],
@@ -304,7 +304,7 @@ export class ClientApi<TFramework extends Framework> {
     this._addedExports[fileName] = { default: meta };
 
     let counter = 0;
-    api.add = (storyName: string, storyFn: StoryFn<TFramework>, parameters: Parameters = {}) => {
+    api.add = (storyName: string, storyFn: StoryFn<TRenderer>, parameters: Parameters = {}) => {
       hasAdded = true;
 
       if (typeof storyName !== 'string') {
@@ -340,7 +340,7 @@ export class ClientApi<TFramework extends Framework> {
       return api;
     };
 
-    api.addDecorator = (decorator: DecoratorFunction<TFramework>) => {
+    api.addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
       if (hasAdded)
         throw new Error(`You cannot add a decorator after the first story for a kind.
 Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
@@ -349,7 +349,7 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
       return api;
     };
 
-    api.addLoader = (loader: LoaderFunction<TFramework>) => {
+    api.addLoader = (loader: LoaderFunction<TRenderer>) => {
       if (hasAdded) throw new Error(`You cannot add a loader after the first story for a kind.`);
 
       meta.loaders.push(loader);
diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/client-api/src/StoryStoreFacade.ts
index a7a1d6c8f1c2..c62c8e2e6c6c 100644
--- a/code/lib/client-api/src/StoryStoreFacade.ts
+++ b/code/lib/client-api/src/StoryStoreFacade.ts
@@ -5,7 +5,7 @@ import { SynchronousPromise } from 'synchronous-promise';
 import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   ComponentId,
   DocsOptions,
   Parameters,
@@ -21,8 +21,8 @@ import type { StoryStore } from '@storybook/store';
 import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
 import { logger } from '@storybook/client-logger';
 
-export class StoryStoreFacade<TFramework extends Framework> {
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>;
+export class StoryStoreFacade<TRenderer extends Renderer> {
+  projectAnnotations: Store_NormalizedProjectAnnotations<TRenderer>;
 
   entries: Record<StoryId, Addon_IndexEntry & { componentId?: ComponentId }>;
 
@@ -54,22 +54,22 @@ export class StoryStoreFacade<TFramework extends Framework> {
     });
   }
 
-  getStoryIndex(store: StoryStore<TFramework>) {
+  getStoryIndex(store: StoryStore<TRenderer>) {
     const fileNameOrder = Object.keys(this.csfExports);
     const storySortParameter = this.projectAnnotations.parameters?.options?.storySort;
 
     const storyEntries = Object.entries(this.entries);
     // Add the kind parameters and global parameters to each entry
-    const sortableV6: [StoryId, Store_Story<TFramework>, Parameters, Parameters][] =
+    const sortableV6: [StoryId, Store_Story<TRenderer>, Parameters, Parameters][] =
       storyEntries.map(([storyId, { type, importPath, ...entry }]) => {
         const exports = this.csfExports[importPath];
-        const csfFile = store.processCSFFileWithCache<TFramework>(
+        const csfFile = store.processCSFFileWithCache<TRenderer>(
           exports,
           importPath,
           exports.default.title
         );
 
-        let storyLike: Store_Story<TFramework>;
+        let storyLike: Store_Story<TRenderer>;
         if (type === 'story') {
           storyLike = store.storyFromCSFFile({ storyId, csfFile });
         } else {
diff --git a/code/lib/client-api/tsconfig.json b/code/lib/client-api/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/client-api/tsconfig.json
+++ b/code/lib/client-api/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/client-logger/jest.config.js b/code/lib/client-logger/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/client-logger/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index ec0ed24068e0..069191d031a0 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -45,7 +45,7 @@
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -55,5 +55,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/client-logger/tsconfig.json b/code/lib/client-logger/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/lib/client-logger/tsconfig.json
+++ b/code/lib/client-logger/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/codemod/jest.config.js b/code/lib/codemod/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/codemod/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 61a87d4def31..b83654578441 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -37,23 +37,23 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/types": "^7.12.11",
+    "@babel/types": "^7.20.2",
     "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/csf-tools": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
     "jscodeshift": "^0.13.1",
     "lodash": "^4.17.21",
-    "prettier": ">=2.2.1 <=3.0.0",
+    "prettier": "^2.7.1",
     "recast": "^0.19.0",
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
-    "typescript": "~4.6.3"
+    "jest": "^29.3.1",
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -64,5 +64,5 @@
       "./src/index.js"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
index 277ca3d9ac6e..0905da1ea0a2 100644
--- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts
@@ -1,11 +1,10 @@
-import { describe } from '@jest/globals';
+import { describe, it, expect } from '@jest/globals';
 import { dedent } from 'ts-dedent';
 import _transform from '../csf-2-to-3';
 
-// @ts-expect-error (Converted from ts-ignore)
 expect.addSnapshotSerializer({
   print: (val: any) => val,
-  test: (val) => true,
+  test: () => true,
 });
 
 const jsTransform = (source: string) => _transform({ source }, null, {}).trim();
diff --git a/code/lib/codemod/tsconfig.json b/code/lib/codemod/tsconfig.json
index f8b60c90fdef..cf1e09965901 100644
--- a/code/lib/codemod/tsconfig.json
+++ b/code/lib/codemod/tsconfig.json
@@ -1,13 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/core-client/jest.config.js b/code/lib/core-client/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/core-client/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json
index 33788fffd9fa..0cb253f09187 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -35,22 +35,22 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -65,5 +65,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/core-client/src/PreviewWeb.mockdata.ts b/code/lib/core-client/src/PreviewWeb.mockdata.ts
index e176aecc069c..4bcd742107ea 100644
--- a/code/lib/core-client/src/PreviewWeb.mockdata.ts
+++ b/code/lib/core-client/src/PreviewWeb.mockdata.ts
@@ -173,9 +173,9 @@ export const waitForEvents = (
     events.forEach((event) => mockChannel.on(event, listener));
 
     // Don't wait too long
-    waitForQuiescence().then(() =>
-      reject(new Error(`Event was not emitted in time: ${debugLabel || events}`))
-    );
+    waitForQuiescence().then(() => {
+      reject(new Error(`Event was not emitted in time: ${debugLabel || events}`));
+    });
   });
 };
 
diff --git a/code/lib/core-client/src/start.test.ts b/code/lib/core-client/src/start.test.ts
index 8d3040025c86..c09ce001b591 100644
--- a/code/lib/core-client/src/start.test.ts
+++ b/code/lib/core-client/src/start.test.ts
@@ -15,7 +15,6 @@ import {
 import { start as realStart } from './start';
 
 jest.mock('global', () => ({
-  // @ts-expect-error (jest is not happy with this)
   ...jest.requireActual('global'),
   history: { replaceState: jest.fn() },
   document: {
diff --git a/code/lib/core-client/src/start.ts b/code/lib/core-client/src/start.ts
index 99e63c7203a3..9c7d69bb5cb1 100644
--- a/code/lib/core-client/src/start.ts
+++ b/code/lib/core-client/src/start.ts
@@ -2,7 +2,7 @@
 import global from 'global';
 import { ClientApi } from '@storybook/client-api';
 import { PreviewWeb } from '@storybook/preview-web';
-import type { Framework, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types';
 import { createChannel } from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
@@ -15,9 +15,9 @@ const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
 
-interface CoreClient_RendererImplementation<TFramework extends Framework> {
-  decorateStory?: ProjectAnnotations<TFramework>['applyDecorators'];
-  render?: ArgsStoryFn<TFramework>;
+interface CoreClient_RendererImplementation<TRenderer extends Renderer> {
+  decorateStory?: ProjectAnnotations<TRenderer>['applyDecorators'];
+  render?: ArgsStoryFn<TRenderer>;
 }
 
 interface CoreClient_ClientAPIFacade {
@@ -27,19 +27,19 @@ interface CoreClient_ClientAPIFacade {
   raw: (...args: any[]) => never;
 }
 
-interface CoreClient_StartReturnValue<TFramework extends Framework> {
+interface CoreClient_StartReturnValue<TRenderer extends Renderer> {
   /* deprecated */
   forceReRender: () => void;
   /* deprecated */
   configure: any;
   /* deprecated */
-  clientApi: ClientApi<TFramework> | CoreClient_ClientAPIFacade;
+  clientApi: ClientApi<TRenderer> | CoreClient_ClientAPIFacade;
 }
 
-export function start<TFramework extends Framework>(
-  renderToCanvas: ProjectAnnotations<TFramework>['renderToCanvas'],
-  { decorateStory, render }: CoreClient_RendererImplementation<TFramework> = {}
-): CoreClient_StartReturnValue<TFramework> {
+export function start<TRenderer extends Renderer>(
+  renderToCanvas: ProjectAnnotations<TRenderer>['renderToCanvas'],
+  { decorateStory, render }: CoreClient_RendererImplementation<TRenderer> = {}
+): CoreClient_StartReturnValue<TRenderer> {
   if (globalWindow) {
     // To enable user code to detect if it is running in Storybook
     globalWindow.IS_STORYBOOK = true;
@@ -59,8 +59,8 @@ export function start<TFramework extends Framework>(
   const channel = createChannel({ page: 'preview' });
   addons.setChannel(channel);
 
-  const clientApi = new ClientApi<TFramework>();
-  const preview = new PreviewWeb<TFramework>();
+  const clientApi = new ClientApi<TRenderer>();
+  const preview = new PreviewWeb<TRenderer>();
   let initialized = false;
 
   const importFn = (path: Path) => clientApi.importFn(path);
diff --git a/code/lib/core-client/tsconfig.json b/code/lib/core-client/tsconfig.json
index 053f1bdbcc37..49e844294dce 100644
--- a/code/lib/core-client/tsconfig.json
+++ b/code/lib/core-client/tsconfig.json
@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*", "typings.d.ts"],
-  "exclude": []
+  "include": ["src/**/*", "typings.d.ts"]
 }
diff --git a/code/lib/core-common/jest.config.js b/code/lib/core-common/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/core-common/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 78bf96fe271c..22a11e36a78c 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -46,12 +46,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "@types/babel__core": "^7.0.0",
+    "@babel/core": "^7.20.2",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
+    "@types/babel__core": "^7.1.20",
     "@types/express": "^4.7.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "chalk": "^4.1.0",
     "esbuild": "^0.14.48",
@@ -73,11 +73,11 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/mock-fs": "^4.13.0",
+    "@types/mock-fs": "^4.13.1",
     "@types/picomatch": "^2.3.0",
-    "mock-fs": "^4.13.0",
-    "type-fest": "^2.17.0",
-    "typescript": "~4.6.3"
+    "mock-fs": "^5.2.0",
+    "type-fest": "^2.19.0",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -97,5 +97,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/core-common/src/presets.test.ts b/code/lib/core-common/src/presets.test.ts
index 76749c0ee2d6..f9829c286db6 100644
--- a/code/lib/core-common/src/presets.test.ts
+++ b/code/lib/core-common/src/presets.test.ts
@@ -1,3 +1,5 @@
+import './presets';
+
 function wrapPreset(basePresets: any): { babel: Function; webpack: Function } {
   return {
     babel: async (config: any, args: any) => basePresets.apply('babel', config, args),
diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts
index 2ab9fd3bdc1e..7a3f2ba529ff 100644
--- a/code/lib/core-common/src/presets.ts
+++ b/code/lib/core-common/src/presets.ts
@@ -1,6 +1,5 @@
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/node-logger';
-import { dirname } from 'path';
 import type {
   BuilderOptions,
   CLIOptions,
@@ -82,35 +81,26 @@ export const resolveAddonName = (
     }
   }
 
-  const absolutePackageJson = resolved && resolve(`${name}/package.json`);
-
-  // We want to absolutize the package name part to a path on disk
-  //   (i.e. '/Users/foo/.../node_modules/@addons/foo') as otherwise
-  // we may not be able to import the package in certain module systems (eg. pnpm, yarn pnp)
-  const absoluteDir = absolutePackageJson && dirname(absolutePackageJson);
-
-  // If the package has an export (e.g. `/preview`), absolutize it, eg. to
-  //    /Users/foo/.../node_modules/@addons/foo/preview
-  // NOTE: this looks like the path of an absolute file, but it DOES NOT exist.
-  //  - However it is importable by webpack.
-  //  - Vite needs to strip off the absolute part to import it though
-  //     (vite cannot import absolute files: https://github.com/vitejs/vite/issues/5494
-  //      this also means vite suffers issues with pnpm etc)
-  const absolutizeExport = (exportName: string) => {
-    if (resolve(`${name}${exportName}`)) return `${absoluteDir}${exportName}`;
+  const checkExists = (exportName: string) => {
+    if (resolve(`${name}${exportName}`)) return `${name}${exportName}`;
     return undefined;
   };
 
-  const path = name;
+  // This is used to maintain back-compat with community addons that do not
+  // re-export their sub-addons but reference the sub-addon name directly.
+  //  We need to turn it into an absolute path so that webpack can
+  // serve it up correctly  when yarn pnp or pnpm is being used.
+  // Vite will be broken in such cases, because it does not process absolute paths,
+  // and it will try to import from the bare import, breaking in pnp/pnpm.
+  const absolutizeExport = (exportName: string) => {
+    return resolve(`${name}${exportName}`);
+  };
 
-  // We don't want to resolve an import path (e.g. '@addons/foo/preview') to the file on disk,
-  // because you are not allowed to import arbitrary files in packages in Vite.
-  // Instead we check if the export exists and "absolutize" it.
   const managerFile = absolutizeExport(`/manager`);
   const registerFile = absolutizeExport(`/register`) || absolutizeExport(`/register-panel`);
-  const previewFile = absolutizeExport(`/preview`);
-  // Presets are imported by node, so therefore fine to be a path on disk (at this stage anyway)
-  const presetFile = resolve(`${path}/preset`);
+  const previewFile = checkExists(`/preview`);
+  const previewFileAbsolute = absolutizeExport('/preview');
+  const presetFile = absolutizeExport(`/preset`);
 
   if (!(managerFile || previewFile) && presetFile) {
     return {
@@ -132,9 +122,17 @@ export const resolveAddonName = (
 
     return {
       type: 'virtual',
-      name: path,
+      name,
       ...(managerEntries.length ? { managerEntries } : {}),
-      ...(previewFile ? { previewAnnotations: [previewFile] } : {}),
+      ...(previewFile
+        ? {
+            previewAnnotations: [
+              previewFileAbsolute
+                ? { bare: previewFile, absolute: previewFileAbsolute }
+                : previewFile,
+            ],
+          }
+        : {}),
       ...(presetFile ? { presets: [{ name: presetFile, options }] } : {}),
     };
   }
@@ -233,7 +231,6 @@ export async function loadPreset(
 
     logger.warn(warning);
     logger.error(e);
-
     return [];
   }
 }
diff --git a/code/lib/core-common/src/utils/interpret-require.ts b/code/lib/core-common/src/utils/interpret-require.ts
index f8da08edf20f..8ed1c200197f 100644
--- a/code/lib/core-common/src/utils/interpret-require.ts
+++ b/code/lib/core-common/src/utils/interpret-require.ts
@@ -3,7 +3,10 @@ import { getInterpretedFileWithExt } from './interpret-files';
 let registered = false;
 
 export function interopRequireDefault(filePath: string) {
-  if (registered === false) {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  const hasEsbuildBeenRegistered = !!require('module')._extensions['.ts'];
+
+  if (registered === false && !hasEsbuildBeenRegistered) {
     // eslint-disable-next-line global-require
     const { register } = require('esbuild-register/dist/node');
     registered = true;
diff --git a/code/lib/core-common/tsconfig.json b/code/lib/core-common/tsconfig.json
index 41ca5ea687e5..a4429176e35f 100644
--- a/code/lib/core-common/tsconfig.json
+++ b/code/lib/core-common/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/core-events/jest.config.js b/code/lib/core-events/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/core-events/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 2b1a9721a0be..a807d33b8311 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -42,7 +42,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -52,5 +52,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/core-events/tsconfig.json b/code/lib/core-events/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/core-events/tsconfig.json
+++ b/code/lib/core-events/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/core-server/jest.config.js b/code/lib/core-server/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/core-server/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 1739945e976a..f91e46d8e5f1 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -35,18 +35,18 @@
   "dependencies": {
     "@aw-web-design/x-default-browser": "1.4.88",
     "@discoveryjs/json-ext": "^0.5.3",
-    "@storybook/builder-manager": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/builder-manager": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-alpha.48",
+    "@storybook/csf-tools": "7.0.0-alpha.51",
     "@storybook/docs-mdx": "0.0.1-canary.12433cf.0",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/telemetry": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/telemetry": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",
@@ -77,15 +77,14 @@
     "ws": "^8.2.3"
   },
   "devDependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.48",
+    "@storybook/builder-webpack5": "7.0.0-alpha.51",
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/serve-favicon": "^2.5.2",
     "@types/ws": "^8",
     "jest-os-detection": "^1.3.1",
-    "jest-specific-snapshot": "^4.0.0",
-    "ts-jest": "^26.4.4",
-    "typescript": "~4.6.3",
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3",
     "webpack": "5"
   },
   "peerDependencies": {
@@ -103,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/core-server/src/core-presets.disabled-test.ts b/code/lib/core-server/src/core-presets.disabled-test.ts
index 4c8f22320f2a..495ae1e3b73a 100644
--- a/code/lib/core-server/src/core-presets.disabled-test.ts
+++ b/code/lib/core-server/src/core-presets.disabled-test.ts
@@ -19,6 +19,7 @@ import { buildStaticStandalone } from './build-static';
 
 import { outputStats } from './utils/output-stats';
 
+// @ts-expect-error (not strict)
 const { SNAPSHOT_OS } = global;
 const mkdtemp = promisify(mkdtempCb);
 const { packageJson } = readUpSync({ cwd: __dirname });
@@ -33,6 +34,7 @@ jest.mock('webpack', () => {
   const actual = jest.requireActual('webpack');
 
   Object.keys(actual).forEach((key) => {
+    // @ts-expect-error (not strict)
     value[key] = actual[key];
   });
   return value;
@@ -88,6 +90,7 @@ jest.mock('@storybook/store', () => {
 
 jest.mock('http', () => ({
   ...jest.requireActual('http'),
+  // @ts-expect-error (not strict)
   createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
 }));
 jest.mock('ws');
@@ -129,7 +132,7 @@ const baseOptions = {
 const ROOT = getProjectRoot();
 const CWD = process.cwd();
 const NODE_MODULES = /.*node_modules/g;
-const cleanRoots = (obj): any => {
+const cleanRoots = (obj: any): any => {
   if (!obj) return obj;
   if (typeof obj === 'string')
     return obj.replace(CWD, 'CWD').replace(ROOT, 'ROOT').replace(NODE_MODULES, 'NODE_MODULES');
@@ -148,15 +151,18 @@ const cleanRoots = (obj): any => {
   return obj;
 };
 
-const getConfig = (fn: any, name): Configuration | null => {
-  const call = fn.mock.calls.find((c) => c[0].name === name);
+const getConfig = (fn: any, name: string): Configuration | null => {
+  const call = fn.mock.calls.find((c: any) => c[0].name === name);
   if (!call) {
     return null;
   }
   return call[0];
 };
 
-const prepareSnap = (get: any, name): Pick<Configuration, 'module' | 'entry' | 'plugins'> => {
+const prepareSnap = (
+  get: any,
+  name: string
+): Pick<Configuration, 'module' | 'entry' | 'plugins'> => {
   const config = getConfig(get(), name);
   if (!config) {
     return null;
@@ -173,7 +179,8 @@ const snap = (name: string) => `__snapshots__/${name}`;
 // FIXME: we no longer have test cases
 // eslint-disable-next-line jest/no-disabled-tests
 describe.skip('FIXME', () => {
-  describe.each([[]])('%s', (example) => {
+  // @ts-expect-error (not strict)
+  describe.each([[]])('%s', (example: string) => {
     describe.each([
       ['manager', managerExecutor],
       ['preview', previewExecutor],
@@ -209,8 +216,8 @@ describe.skip('FIXME', () => {
   });
 });
 
-const progressPlugin = (config) =>
-  config.plugins.find((p) => p.constructor.name === 'ProgressPlugin');
+const progressPlugin = (config: any) =>
+  config.plugins.find((p: any) => p.constructor.name === 'ProgressPlugin');
 
 describe('dev cli flags', () => {
   beforeEach(async () => {
@@ -271,6 +278,7 @@ describe('dev cli flags', () => {
 
     it('production mode', async () => {
       expect.assertions(1);
+      // @ts-expect-error (not strict)
       await expect(buildStaticStandalone(optionsWithInvalidStaticDir)).rejects.toThrow(
         "Won't copy root directory. Check your staticDirs!"
       );
diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts
index f25c87e46d28..300e52dcdd78 100644
--- a/code/lib/core-server/src/dev-server.ts
+++ b/code/lib/core-server/src/dev-server.ts
@@ -159,6 +159,11 @@ export async function storybookDevServer(options: Options) {
       });
     } catch (error) {
       await managerBuilder?.bail();
+      // For some reason, even when Webpack fails e.g. wrong main.js config,
+      // the preview may continue to print to stdout, which can affect output
+      // when we catch this error and process those errors (e.g. telemetry)
+      // gets overwritten by preview progress output. Therefore, we should bail the preview too.
+      await previewBuilder?.bail().catch();
       throw error;
     }
   }
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index 676abe654994..67a56c64bd58 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -1,6 +1,10 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 /// <reference types="@types/jest" />;
 
+/**
+ * @jest-environment node
+ */
+
 import path from 'path';
 import fs from 'fs-extra';
 import { normalizeStoriesEntry } from '@storybook/core-common';
@@ -11,7 +15,6 @@ import type {
 import { loadCsf, getStorySortParameter } from '@storybook/csf-tools';
 import { toId } from '@storybook/csf';
 import { logger } from '@storybook/node-logger';
-import { mocked } from 'ts-jest/utils';
 
 import { StoryIndexGenerator } from './StoryIndexGenerator';
 
@@ -74,7 +77,7 @@ describe('StoryIndexGenerator', () => {
   beforeEach(() => {
     const actual = jest.requireActual('@storybook/csf-tools');
     loadCsfMock.mockImplementation(actual.loadCsf);
-    mocked(logger.warn).mockClear();
+    jest.mocked(logger.warn).mockClear();
   });
   describe('extraction', () => {
     const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -862,7 +865,7 @@ describe('StoryIndexGenerator', () => {
         `);
 
         expect(logger.warn).toHaveBeenCalledTimes(1);
-        expect(mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
+        expect(jest.mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
           `"🚨 You have two component docs pages with the same name A:docs. Use \`<Meta of={} name=\\"Other Name\\">\` to distinguish them."`
         );
       });
@@ -890,7 +893,7 @@ describe('StoryIndexGenerator', () => {
         `);
 
         expect(logger.warn).toHaveBeenCalledTimes(1);
-        expect(mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
+        expect(jest.mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
           `"🚨 You have a story for A with the same name as your component docs page (Story One), so the docs page is being dropped. Use \`<Meta of={} name=\\"Other Name\\">\` to distinguish them."`
         );
       });
@@ -912,7 +915,7 @@ describe('StoryIndexGenerator', () => {
         `);
 
         expect(logger.warn).toHaveBeenCalledTimes(1);
-        expect(mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
+        expect(jest.mocked(logger.warn).mock.calls[0][0]).toMatchInlineSnapshot(
           `"🚨 You have a story for A with the same name as your default docs entry name (Story One), so the docs page is being dropped. Consider changing the story name."`
         );
       });
@@ -1176,30 +1179,6 @@ describe('StoryIndexGenerator', () => {
         expect(Object.keys((await generator.getIndex()).entries)).not.toContain('notitle--docs');
       });
 
-      it('errors on dependency deletion', async () => {
-        const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
-          options
-        );
-        const docsSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/docs2/*.mdx',
-          options
-        );
-
-        const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options);
-        await generator.initialize();
-        await generator.getIndex();
-        expect(toId).toHaveBeenCalledTimes(5);
-
-        expect(Object.keys((await generator.getIndex()).entries)).toContain('a--story-one');
-
-        generator.invalidate(storiesSpecifier, './src/A.stories.js', true);
-
-        await expect(() => generator.getIndex()).rejects.toThrowError(
-          /Could not find "..\/A.stories" for docs file/
-        );
-      });
-
       it('cleans up properly on dependent docs deletion', async () => {
         const storiesSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/A.stories.(ts|js|jsx)',
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 2d8f3d4c5180..d6a4be5afea9 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -304,7 +304,12 @@ export class StoryIndexGenerator {
         dependencies.forEach((dep) => {
           if (dep.entries.length > 0) {
             const first = dep.entries[0];
-            if (path.resolve(this.options.workingDir, first.importPath).startsWith(absoluteOf)) {
+
+            if (
+              path
+                .normalize(path.resolve(this.options.workingDir, first.importPath))
+                .startsWith(path.normalize(absoluteOf))
+            ) {
               ofTitle = first.title;
             }
           }
@@ -485,11 +490,6 @@ export class StoryIndexGenerator {
           }
         });
       });
-
-      const notFound = dependents.filter((dep) => !invalidated.has(dep));
-      if (notFound.length > 0) {
-        throw new Error(`Could not invalidate ${notFound.length} deps: ${notFound.join(', ')}`);
-      }
     }
 
     if (removed) {
diff --git a/code/lib/core-server/src/withTelemetry.test.ts b/code/lib/core-server/src/withTelemetry.test.ts
index b60fd8d382f2..d887909ecc72 100644
--- a/code/lib/core-server/src/withTelemetry.test.ts
+++ b/code/lib/core-server/src/withTelemetry.test.ts
@@ -3,7 +3,6 @@
 import prompts from 'prompts';
 import { loadAllPresets, cache } from '@storybook/core-common';
 import { telemetry } from '@storybook/telemetry';
-import { mocked } from 'ts-jest/utils';
 
 import { withTelemetry } from './withTelemetry';
 
@@ -57,7 +56,7 @@ describe('when command fails', () => {
   });
 
   it('does not send error message when crash reports are disabled', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({ enableCrashReports: false } as any),
     });
     await expect(async () =>
@@ -73,7 +72,7 @@ describe('when command fails', () => {
   });
 
   it('does send error message when crash reports are enabled', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({ enableCrashReports: true } as any),
     });
 
@@ -90,7 +89,7 @@ describe('when command fails', () => {
   });
 
   it('does not send error message when telemetry is disabled', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({ disableTelemetry: true } as any),
     });
 
@@ -107,7 +106,7 @@ describe('when command fails', () => {
   });
 
   it('does send error messages when telemetry is disabled, but crash reports are enabled', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({ disableTelemetry: true, enableCrashReports: true } as any),
     });
 
@@ -124,10 +123,10 @@ describe('when command fails', () => {
   });
 
   it('does not send error messages when disabled crash reports are cached', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({} as any),
     });
-    mocked(cache.get).mockResolvedValueOnce(false);
+    jest.mocked(cache.get).mockResolvedValueOnce(false);
 
     await expect(async () =>
       withTelemetry('dev', { presetOptions: {} as any }, run)
@@ -142,10 +141,10 @@ describe('when command fails', () => {
   });
 
   it('does send error messages when enabled crash reports are cached', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({} as any),
     });
-    mocked(cache.get).mockResolvedValueOnce(true);
+    jest.mocked(cache.get).mockResolvedValueOnce(true);
 
     await expect(async () =>
       withTelemetry('dev', { presetOptions: {} as any }, run)
@@ -160,11 +159,11 @@ describe('when command fails', () => {
   });
 
   it('does not send error messages when disabled crash reports are prompted', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({} as any),
     });
-    mocked(cache.get).mockResolvedValueOnce(undefined);
-    mocked(prompts).mockResolvedValueOnce({ enableCrashReports: false });
+    jest.mocked(cache.get).mockResolvedValueOnce(undefined);
+    jest.mocked(prompts).mockResolvedValueOnce({ enableCrashReports: false });
 
     await expect(async () =>
       withTelemetry('dev', { presetOptions: {} as any }, run)
@@ -179,11 +178,11 @@ describe('when command fails', () => {
   });
 
   it('does send error messages when enabled crash reports are prompted', async () => {
-    mocked(loadAllPresets).mockResolvedValueOnce({
+    jest.mocked(loadAllPresets).mockResolvedValueOnce({
       apply: async () => ({} as any),
     });
-    mocked(cache.get).mockResolvedValueOnce(undefined);
-    mocked(prompts).mockResolvedValueOnce({ enableCrashReports: true });
+    jest.mocked(cache.get).mockResolvedValueOnce(undefined);
+    jest.mocked(prompts).mockResolvedValueOnce({ enableCrashReports: true });
 
     await expect(async () =>
       withTelemetry('dev', { presetOptions: {} as any }, run)
@@ -199,7 +198,7 @@ describe('when command fails', () => {
 
   // if main.js has errors, we have no way to tell if they've disabled telemetry
   it('does not send error messages when presets fail to evaluate', async () => {
-    mocked(loadAllPresets).mockRejectedValueOnce(error);
+    jest.mocked(loadAllPresets).mockRejectedValueOnce(error);
 
     await expect(async () =>
       withTelemetry('dev', { presetOptions: {} as any }, run)
diff --git a/code/lib/core-server/tsconfig.json b/code/lib/core-server/tsconfig.json
index 63768daf6d49..cf1e09965901 100644
--- a/code/lib/core-server/tsconfig.json
+++ b/code/lib/core-server/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": ["src/**/**.test.ts", "src/**/**.disabled-test.ts"]
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/core-webpack/jest.config.js b/code/lib/core-webpack/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/core-webpack/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 757e358853e0..5201166b69f5 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -42,14 +42,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "webpack": "5"
   },
   "publishConfig": {
@@ -61,5 +61,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/core-webpack/tsconfig.json b/code/lib/core-webpack/tsconfig.json
index 41ca5ea687e5..a4429176e35f 100644
--- a/code/lib/core-webpack/tsconfig.json
+++ b/code/lib/core-webpack/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/csf-plugin/jest.config.js b/code/lib/csf-plugin/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/csf-plugin/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index bf9f23a7e561..f50a8cafc867 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
@@ -42,11 +42,11 @@
     "prep": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/csf-tools": "7.0.0-alpha.48",
+    "@storybook/csf-tools": "7.0.0-alpha.51",
     "unplugin": "^0.10.2"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -56,5 +56,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index 037f156abf4b..8204a1f723ac 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -20,7 +20,7 @@ export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
       const code = await fs.readFile(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-        enrichCsf(csf);
+        enrichCsf(csf, options);
         return formatCsf(csf);
       } catch (err: any) {
         logger.warn(err.message);
diff --git a/code/lib/csf-plugin/tsconfig.json b/code/lib/csf-plugin/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/lib/csf-plugin/tsconfig.json
+++ b/code/lib/csf-plugin/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/csf-tools/jest.config.js b/code/lib/csf-tools/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/csf-tools/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 0baf282324c3..b8d0f9c29bd3 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,19 +42,19 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/types": "^7.12.11",
+    "@babel/types": "^7.20.2",
     "@storybook/csf": "next",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/types": "7.0.0-alpha.51",
     "fs-extra": "^9.0.1",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
-    "@babel/traverse": "^7.12.11",
+    "@babel/generator": "^7.20.4",
+    "@babel/parser": "^7.20.3",
+    "@babel/traverse": "^7.20.1",
     "@types/fs-extra": "^9.0.6",
     "js-yaml": "^3.14.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -64,5 +64,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/csf-tools/tsconfig.json b/code/lib/csf-tools/tsconfig.json
index f8b60c90fdef..73a65ef2ef6e 100644
--- a/code/lib/csf-tools/tsconfig.json
+++ b/code/lib/csf-tools/tsconfig.json
@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/docs-tools/jest.config.js b/code/lib/docs-tools/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/docs-tools/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index b0c9065aa270..4326d0376908 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
@@ -42,17 +42,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@babel/core": "^7.20.2",
+    "@storybook/core-common": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "require-from-string": "^2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -62,5 +62,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts b/code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts
index f6f35ec345b2..8e60d01b5ff6 100644
--- a/code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts
+++ b/code/lib/docs-tools/src/argTypes/docgen/extractDocgenProps.test.ts
@@ -40,7 +40,6 @@ function createFuncType(typeSystemDef: TypeSystemDef, others: Record<string, any
 
 function createComponent(docgenInfo: Record<string, any>): Component {
   const component = () => {};
-  // @ts-expect-error (Converted from ts-ignore)
   component.__docgenInfo = {
     [DOCGEN_SECTION]: {
       [PROP_NAME]: {
diff --git a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts
index 5c0e0cb5ca66..7fdedf3db758 100644
--- a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts
+++ b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.test.ts
@@ -1,5 +1,4 @@
-import type { ArgTypes } from '@storybook/api';
-import type { StrictInputType } from '@storybook/types';
+import type { ArgTypes, StrictInputType } from '@storybook/types';
 import { enhanceArgTypes } from './enhanceArgTypes';
 
 expect.addSnapshotSerializer({
@@ -37,6 +36,7 @@ const enhance = ({
     args: { input: arg },
     globals: {},
   };
+  // @ts-expect-error (not strict)
   return enhanceArgTypes(context);
 };
 
diff --git a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
index f339c4d68b67..aa2d8c13e5c5 100644
--- a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
+++ b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
@@ -1,8 +1,8 @@
-import type { Framework, StoryContextForEnhancers } from '@storybook/types';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
 import { combineParameters } from '@storybook/store';
 
-export const enhanceArgTypes = <TFramework extends Framework>(
-  context: StoryContextForEnhancers<TFramework>
+export const enhanceArgTypes = <TRenderer extends Renderer>(
+  context: StoryContextForEnhancers<TRenderer>
 ) => {
   const {
     component,
diff --git a/code/lib/docs-tools/src/hasDocsOrControls.ts b/code/lib/docs-tools/src/hasDocsOrControls.ts
index d460666d7bc3..b1585ee534d7 100644
--- a/code/lib/docs-tools/src/hasDocsOrControls.ts
+++ b/code/lib/docs-tools/src/hasDocsOrControls.ts
@@ -1,7 +1,7 @@
 import type { Options } from '@storybook/types';
 
 // `addons/x` is for the monorepo, `addon-x` is for normal usage
-const packageRe = /(addons\/|addon-)(docs|controls)/;
+const packageRe = /(addons\/|addon-|addon-essentials\/)(docs|controls)/;
 
 export const hasDocsOrControls = (options: Options) =>
   options.presetsList?.some((preset) => packageRe.test(preset.name));
diff --git a/code/lib/docs-tools/tsconfig.json b/code/lib/docs-tools/tsconfig.json
index f8b60c90fdef..73a65ef2ef6e 100644
--- a/code/lib/docs-tools/tsconfig.json
+++ b/code/lib/docs-tools/tsconfig.json
@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/instrumenter/jest.config.js b/code/lib/instrumenter/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/instrumenter/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 438b26938564..241cd28c1c1c 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,15 +42,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -60,5 +60,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/instrumenter/src/instrumenter.test.ts b/code/lib/instrumenter/src/instrumenter.test.ts
index 647dbedb1486..367915be5499 100644
--- a/code/lib/instrumenter/src/instrumenter.test.ts
+++ b/code/lib/instrumenter/src/instrumenter.test.ts
@@ -554,7 +554,7 @@ describe('Instrumenter', () => {
     });
 
     it.skip('starts debugging at the first non-nested interceptable call', () => {
-      const fn = (...args) => args;
+      const fn = (...args: any[]) => args;
       const { fn1, fn2, fn3 } = instrument({ fn1: fn, fn2: fn, fn3: fn }, { intercept: true });
       fn3(fn1(), fn2()); // setup the dependencies
       addons.getChannel().emit(EVENTS.START, { storyId });
diff --git a/code/lib/instrumenter/tsconfig.json b/code/lib/instrumenter/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/instrumenter/tsconfig.json
+++ b/code/lib/instrumenter/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/node-logger/jest.config.js b/code/lib/node-logger/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/node-logger/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index 8b3c1ca3beeb..988b605ad948 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@types/pretty-hrtime": "^1.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -59,5 +59,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/node-logger/tsconfig.json b/code/lib/node-logger/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/lib/node-logger/tsconfig.json
+++ b/code/lib/node-logger/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/postinstall/jest.config.js b/code/lib/postinstall/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/postinstall/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json
index 914ed77992a7..d3deed811f2d 100644
--- a/code/lib/postinstall/package.json
+++ b/code/lib/postinstall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/postinstall",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook addons postinstall utilities",
   "keywords": [
     "api",
@@ -43,10 +43,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "devDependencies": {
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest": "^29.3.1",
+    "jest-specific-snapshot": "^6.0.0",
     "jscodeshift": "^0.13.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -56,5 +56,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/postinstall/src/codemods.test.ts b/code/lib/postinstall/src/codemods.test.ts
index 77684e253143..cc7489df0b0e 100644
--- a/code/lib/postinstall/src/codemods.test.ts
+++ b/code/lib/postinstall/src/codemods.test.ts
@@ -1,6 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import 'jest-specific-snapshot';
+// @ts-expect-error (broken types)
 import { applyTransform } from 'jscodeshift/dist/testUtils';
 
 jest.mock('@storybook/node-logger');
diff --git a/code/lib/postinstall/tsconfig.json b/code/lib/postinstall/tsconfig.json
index bda0ed7ef097..52d43eaaa9b9 100644
--- a/code/lib/postinstall/tsconfig.json
+++ b/code/lib/postinstall/tsconfig.json
@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": ["src/**.test.ts"]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/preview-web/jest.config.js b/code/lib/preview-web/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/preview-web/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json
index 0a636823871e..e6202852b2e4 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,12 +42,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "ansi-to-html": "^0.6.11",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -57,10 +57,9 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
     "react": "16.14.0",
-    "ts-jest": "^28.0.8",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -70,5 +69,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/preview-web/src/Preview.tsx b/code/lib/preview-web/src/Preview.tsx
index d01e8169e4a5..75e0b564a647 100644
--- a/code/lib/preview-web/src/Preview.tsx
+++ b/code/lib/preview-web/src/Preview.tsx
@@ -17,7 +17,7 @@ import { logger, deprecate } from '@storybook/client-logger';
 import type { Channel } from '@storybook/channels';
 import { addons } from '@storybook/addons';
 import type {
-  Framework,
+  Renderer,
   Args,
   Globals,
   Store_ModuleImportFn,
@@ -41,7 +41,7 @@ const STORY_INDEX_PATH = './index.json';
 
 export type MaybePromise<T> = Promise<T> | T;
 
-export class Preview<TFramework extends Framework> {
+export class Preview<TFramework extends Renderer> {
   serverChannel?: Channel;
 
   storyStore: StoryStore<TFramework>;
diff --git a/code/lib/preview-web/src/PreviewWeb.integration.test.ts b/code/lib/preview-web/src/PreviewWeb.integration.test.ts
index e387d1fec987..43eb31038ff2 100644
--- a/code/lib/preview-web/src/PreviewWeb.integration.test.ts
+++ b/code/lib/preview-web/src/PreviewWeb.integration.test.ts
@@ -3,7 +3,6 @@ import global from 'global';
 import type { Store_RenderContext } from '@storybook/types';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
 
-import { mocked } from 'ts-jest/utils';
 import { expect } from '@jest/globals';
 
 import { PreviewWeb } from './PreviewWeb';
@@ -29,7 +28,6 @@ jest.mock('./WebView');
 
 const { window, document } = global;
 jest.mock('global', () => ({
-  // @ts-expect-error (Converted from ts-ignore)
   ...jest.requireActual('global'),
   history: { replaceState: jest.fn() },
   document: {
@@ -63,8 +61,8 @@ beforeEach(() => {
   addons.setChannel(mockChannel as any);
   addons.setServerChannel(createMockChannel());
 
-  mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
-  mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
+  jest.mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
+  jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
 });
 
 describe('PreviewWeb', () => {
@@ -77,6 +75,7 @@ describe('PreviewWeb', () => {
         ({ storyFn }: Store_RenderContext<any>) => storyFn()
       );
       document.location.search = '?id=component-one--a';
+      // @ts-expect-error (not strict)
       await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
 
       await waitForRender();
@@ -100,6 +99,7 @@ describe('PreviewWeb', () => {
         React.createElement('div', {}, 'INSIDE')
       );
 
+      // @ts-expect-error (not strict)
       await preview.initialize({ importFn, getProjectAnnotations });
       await waitForRender();
 
@@ -130,6 +130,7 @@ describe('PreviewWeb', () => {
 
       document.location.search = '?id=component-one--a';
       const preview = new PreviewWeb();
+      // @ts-expect-error (not strict)
       await preview.initialize({ importFn, getProjectAnnotations });
       await waitForRender();
 
diff --git a/code/lib/preview-web/src/PreviewWeb.test.ts b/code/lib/preview-web/src/PreviewWeb.test.ts
index b32229c319de..cf65a9db5e15 100644
--- a/code/lib/preview-web/src/PreviewWeb.test.ts
+++ b/code/lib/preview-web/src/PreviewWeb.test.ts
@@ -29,9 +29,12 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
-import type { Framework } from '@storybook/types';
-import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store';
-import { mocked } from 'ts-jest/utils';
+import type {
+  DecoratorFunction,
+  Renderer,
+  Store_ModuleImportFn,
+  ProjectAnnotations,
+} from '@storybook/types';
 
 import { PreviewWeb } from './PreviewWeb';
 import {
@@ -57,7 +60,7 @@ const { history, document } = global;
 
 const mockStoryIndex = jest.fn(() => storyIndex);
 
-let mockFetchResult;
+let mockFetchResult: any;
 jest.mock('global', () => ({
   ...(mockJest.requireActual('global') as any),
   history: { replaceState: mockJest.fn() },
@@ -67,11 +70,6 @@ jest.mock('global', () => ({
       search: '?id=*',
     },
   },
-  window: {
-    location: {
-      reload: mockJest.fn(),
-    },
-  },
   FEATURES: {
     storyStoreV7: true,
     breakingChangesV7: true,
@@ -101,16 +99,18 @@ const createGate = (): [Promise<any | undefined>, (_?: any) => void] => {
 // a timer, so we need to first setImmediate (to get past the resolution), then run the timers
 // Probably jest modern timers do this but they aren't working for some bizzarre reason.
 async function waitForSetCurrentStory() {
-  await new Promise((r) => setImmediate(r));
+  jest.useFakeTimers({ doNotFake: ['setTimeout'] });
+  await new Promise((r) => setTimeout(r, 0));
   jest.runAllTimers();
 }
 
 async function createAndRenderPreview({
+  // @ts-expect-error (not strict)
   importFn: inputImportFn = importFn,
   getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations,
 }: {
-  importFn?: ModuleImportFn;
-  getProjectAnnotations?: () => WebProjectAnnotations<Framework>;
+  importFn?: Store_ModuleImportFn;
+  getProjectAnnotations?: () => ProjectAnnotations<Renderer>;
 } = {}) {
   const preview = new PreviewWeb();
   await preview.initialize({
@@ -140,8 +140,8 @@ beforeEach(() => {
   addons.setServerChannel(createMockChannel());
   mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
 
-  mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
-  mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
+  jest.mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
+  jest.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
 });
 
 describe('PreviewWeb', () => {
@@ -151,6 +151,7 @@ describe('PreviewWeb', () => {
       const preview = new PreviewWeb();
       await expect(
         preview.initialize({
+          // @ts-expect-error (not strict)
           importFn,
           getProjectAnnotations: () => {
             throw err;
@@ -167,6 +168,7 @@ describe('PreviewWeb', () => {
       mockFetchResult = { status: 500, text: async () => err.toString() };
 
       const preview = new PreviewWeb();
+      // @ts-expect-error (not strict)
       await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
         'sort error'
       );
@@ -194,6 +196,7 @@ describe('PreviewWeb', () => {
 
     it('SET_GLOBALS sets globals and types even when undefined', async () => {
       await createAndRenderPreview({
+        // @ts-expect-error (not strict)
         getProjectAnnotations: () => ({ renderToCanvas: jest.fn() }),
       });
 
@@ -237,6 +240,7 @@ describe('PreviewWeb', () => {
     it('allows async getProjectAnnotations', async () => {
       const preview = new PreviewWeb();
       await preview.initialize({
+        // @ts-expect-error (not strict)
         importFn,
         getProjectAnnotations: async () => {
           return getProjectAnnotations();
@@ -519,6 +523,7 @@ describe('PreviewWeb', () => {
           renderToCanvas: undefined,
         });
         const preview = new PreviewWeb();
+        // @ts-expect-error (not strict)
         await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow();
 
         expect(preview.view.showErrorDisplay).toHaveBeenCalled();
@@ -632,6 +637,7 @@ describe('PreviewWeb', () => {
         });
 
         const preview = new PreviewWeb();
+        // @ts-expect-error (not strict)
         await preview.initialize({ importFn, getProjectAnnotations });
 
         await waitForRender();
@@ -687,7 +693,7 @@ describe('PreviewWeb', () => {
 
         const context = docsRenderer.render.mock.calls[0][0];
 
-        expect(context.componentStories().map((s) => s.id)).toEqual([
+        expect(context.componentStories().map((s: any) => s.id)).toEqual([
           'component-one--a',
           'component-one--b',
           'component-one--e',
@@ -897,6 +903,7 @@ describe('PreviewWeb', () => {
         document.location.search = '?id=component-one--a';
         componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);
 
+        // @ts-expect-error (not strict)
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('loading');
 
@@ -958,6 +965,7 @@ describe('PreviewWeb', () => {
         document.location.search = '?id=component-one--a';
         projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
 
+        // @ts-expect-error (not strict)
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('rendering');
 
@@ -1037,6 +1045,7 @@ describe('PreviewWeb', () => {
         });
 
         document.location.search = '?id=component-one--a';
+        // @ts-expect-error (not strict)
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('playing');
 
@@ -1104,6 +1113,7 @@ describe('PreviewWeb', () => {
 
           mockChannel.emit.mockClear();
           const story = await preview.storyStore.loadStory({ storyId: 'component-one--a' });
+          // @ts-expect-error (not strict)
           preview.renderStoryToElement(story, 'story-element' as any);
           await waitForRender();
 
@@ -1421,6 +1431,7 @@ describe('PreviewWeb', () => {
 
       document.location.search = '?id=component-one--a';
       projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
+      // @ts-expect-error (not strict)
       await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
       await waitForRenderPhase('rendering');
 
@@ -1517,6 +1528,7 @@ describe('PreviewWeb', () => {
       it('still renders the selected story, once ready', async () => {
         document.location.search = '';
         // We intentionally are *not* awaiting here
+        // @ts-expect-error (not strict)
         new PreviewWeb().initialize({ importFn, getProjectAnnotations });
 
         emitter.emit(SET_CURRENT_STORY, {
@@ -1623,6 +1635,7 @@ describe('PreviewWeb', () => {
           const preview = new PreviewWeb();
           // We can't wait for the initialize function, as it waits for `renderSelection()`
           // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that
+          // @ts-expect-error (not strict)
           preview.initialize({ importFn, getProjectAnnotations });
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
@@ -1668,6 +1681,7 @@ describe('PreviewWeb', () => {
           const preview = new PreviewWeb();
           // We can't wait for the initialize function, as it waits for `renderSelection()`
           // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that
+          // @ts-expect-error (not strict)
           preview.initialize({ importFn, getProjectAnnotations });
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
@@ -1712,6 +1726,7 @@ describe('PreviewWeb', () => {
           const preview = new PreviewWeb();
           // We can't wait for the initialize function, as it waits for `renderSelection()`
           // which prepares, but it does emit `CURRENT_STORY_WAS_SET` right before that
+          // @ts-expect-error (not strict)
           preview.initialize({ importFn, getProjectAnnotations });
           await waitForEvents([CURRENT_STORY_WAS_SET]);
 
@@ -2015,11 +2030,24 @@ describe('PreviewWeb', () => {
       });
 
       describe('while story is still rendering', () => {
+        let originalLocation = window.location;
+        beforeEach(() => {
+          originalLocation = window.location;
+          delete (window as Partial<Window>).location;
+          window.location = { ...originalLocation, reload: jest.fn() };
+        });
+
+        afterEach(() => {
+          delete (window as Partial<Window>).location;
+          window.location = { ...originalLocation, reload: originalLocation.reload };
+        });
+
         it('stops initial story after loaders if running', async () => {
           const [gate, openGate] = createGate();
           componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);
 
           document.location.search = '?id=component-one--a';
+          // @ts-expect-error (not strict)
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('loading');
 
@@ -2053,6 +2081,7 @@ describe('PreviewWeb', () => {
 
           document.location.search = '?id=component-one--a';
           projectAnnotations.renderToCanvas.mockImplementation(async () => gate);
+          // @ts-expect-error (not strict)
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('rendering');
 
@@ -2087,6 +2116,7 @@ describe('PreviewWeb', () => {
           componentOneExports.a.play.mockImplementationOnce(async () => gate);
 
           document.location.search = '?id=component-one--a';
+          // @ts-expect-error (not strict)
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('playing');
 
@@ -2140,6 +2170,7 @@ describe('PreviewWeb', () => {
           componentOneExports.a.play.mockImplementationOnce(async () => gate);
 
           document.location.search = '?id=component-one--a';
+          // @ts-expect-error (not strict)
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('playing');
 
@@ -2162,10 +2193,11 @@ describe('PreviewWeb', () => {
 
           // Wait three ticks without resolving the play function
           await waitForSetCurrentStory();
-          await waitForSetCurrentStory();
-          await waitForSetCurrentStory();
+          // We can't mock setTimeout for this test, due to waitForSetCurrentStory hack,
+          // So give some (real) time for the reload to be called
+          await new Promise((r) => setTimeout(r, 100));
 
-          expect(global.window.location.reload).toHaveBeenCalled();
+          expect(window.location.reload).toHaveBeenCalled();
           expect(mockChannel.emit).not.toHaveBeenCalledWith(STORY_CHANGED, 'component-one--b');
           expect(projectAnnotations.renderToCanvas).not.toHaveBeenCalledWith(
             expect.objectContaining({
@@ -2542,6 +2574,7 @@ describe('PreviewWeb', () => {
         mockFetchResult = { status: 500, text: async () => err.toString() };
 
         const preview = new PreviewWeb();
+        // @ts-expect-error (not strict)
         await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
           'sort error'
         );
@@ -2562,6 +2595,7 @@ describe('PreviewWeb', () => {
         mockFetchResult = { status: 500, text: async () => err.toString() };
 
         const preview = new PreviewWeb();
+        // @ts-expect-error (not strict)
         await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
           'sort error'
         );
@@ -3065,6 +3099,7 @@ describe('PreviewWeb', () => {
         await waitForEvents([STORY_MISSING]);
 
         mockChannel.emit.mockClear();
+        // @ts-expect-error (not strict)
         preview.onStoriesChanged({ importFn, storyIndex });
         await waitForRender();
         expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
@@ -3074,7 +3109,7 @@ describe('PreviewWeb', () => {
     describe('when a standalone docs file changes', () => {
       const newStandaloneDocsExports = { default: jest.fn() };
 
-      const newImportFn = jest.fn(async (path) => {
+      const newImportFn = jest.fn(async (path: string) => {
         return path === './src/Introduction.mdx' ? newStandaloneDocsExports : importFn(path);
       });
 
@@ -3084,6 +3119,7 @@ describe('PreviewWeb', () => {
         mockChannel.emit.mockClear();
         docsRenderer.render.mockClear();
 
+        // @ts-expect-error (not strict)
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
@@ -3103,6 +3139,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
         mockChannel.emit.mockClear();
 
+        // @ts-expect-error (not strict)
         preview.onStoriesChanged({ importFn: newImportFn });
         await waitForRender();
 
@@ -3120,6 +3157,7 @@ describe('PreviewWeb', () => {
         const preview = new PreviewWeb();
         await expect(
           preview.initialize({
+            // @ts-expect-error (not strict)
             importFn,
             getProjectAnnotations: () => {
               throw err;
@@ -3140,6 +3178,7 @@ describe('PreviewWeb', () => {
         const preview = new PreviewWeb();
         await expect(
           preview.initialize({
+            // @ts-expect-error (not strict)
             importFn,
             getProjectAnnotations: () => {
               throw err;
@@ -3182,7 +3221,7 @@ describe('PreviewWeb', () => {
       expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, err);
     });
 
-    const newGlobalDecorator = jest.fn((s) => s());
+    const newGlobalDecorator = jest.fn<DecoratorFunction>((s) => s());
     const newGetProjectAnnotations = () => {
       return {
         ...projectAnnotations,
@@ -3311,6 +3350,7 @@ describe('PreviewWeb', () => {
       const [gate, openGate] = createGate();
       componentOneExports.a.play.mockImplementationOnce(async () => gate);
       const preview = new PreviewWeb();
+      // @ts-expect-error (not strict)
       await preview.initialize({ importFn, getProjectAnnotations });
       await waitForRenderPhase('playing');
 
@@ -3333,6 +3373,7 @@ describe('PreviewWeb', () => {
       mockChannel.emit.mockClear();
       const [gate, openGate] = createGate();
       componentOneExports.b.play.mockImplementationOnce(async () => gate);
+      // @ts-expect-error (not strict)
       preview.renderStoryToElement(
         await preview.storyStore.loadStory({ storyId: 'component-one--b' }),
         {} as any
@@ -3365,6 +3406,7 @@ describe('PreviewWeb', () => {
       const preview = new PreviewWeb();
       await expect(
         preview.initialize({
+          // @ts-expect-error (not strict)
           importFn,
           getProjectAnnotations: () => {
             throw err;
@@ -3380,6 +3422,7 @@ describe('PreviewWeb', () => {
       mockFetchResult = { status: 500, text: async () => err.toString() };
 
       const preview = new PreviewWeb();
+      // @ts-expect-error (not strict)
       await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow(
         'sort error'
       );
@@ -3390,11 +3433,13 @@ describe('PreviewWeb', () => {
     it('waits for stories to be cached', async () => {
       const [gate, openGate] = createGate();
 
+      // @ts-expect-error (not strict)
       const gatedImportFn = async (path) => {
         await gate;
         return importFn(path);
       };
 
+      // @ts-expect-error (not strict)
       const preview = await createAndRenderPreview({ importFn: gatedImportFn });
 
       let extracted = false;
diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx
index 4e21f0b5f354..a1ed45f445c9 100644
--- a/code/lib/preview-web/src/PreviewWeb.tsx
+++ b/code/lib/preview-web/src/PreviewWeb.tsx
@@ -1,10 +1,10 @@
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 import { PreviewWithSelection } from './PreviewWithSelection';
 import { UrlStore } from './UrlStore';
 import { WebView } from './WebView';
 
-export class PreviewWeb<TFramework extends Framework> extends PreviewWithSelection<TFramework> {
+export class PreviewWeb<TFramework extends Renderer> extends PreviewWithSelection<TFramework> {
   constructor() {
     super(new UrlStore(), new WebView());
   }
diff --git a/code/lib/preview-web/src/PreviewWithSelection.tsx b/code/lib/preview-web/src/PreviewWithSelection.tsx
index e4d1802b9bfb..7444e5f55434 100644
--- a/code/lib/preview-web/src/PreviewWithSelection.tsx
+++ b/code/lib/preview-web/src/PreviewWithSelection.tsx
@@ -19,7 +19,7 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   Args,
   Globals,
   Store_ModuleImportFn,
@@ -41,25 +41,25 @@ import { StandaloneDocsRender } from './render/StandaloneDocsRender';
 import type { SelectionStore } from './SelectionStore';
 import type { View } from './View';
 
-const { window: globalWindow } = global;
+const globalWindow = globalThis;
 
 function focusInInput(event: Event) {
   const target = event.target as Element;
   return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }
 
-type PossibleRender<TFramework extends Framework> =
+type PossibleRender<TFramework extends Renderer> =
   | StoryRender<TFramework>
   | TemplateDocsRender<TFramework>
   | StandaloneDocsRender<TFramework>;
 
-function isStoryRender<TFramework extends Framework>(
+function isStoryRender<TFramework extends Renderer>(
   r: PossibleRender<TFramework>
 ): r is StoryRender<TFramework> {
   return r.type === 'story';
 }
 
-export class PreviewWithSelection<TFramework extends Framework> extends Preview<TFramework> {
+export class PreviewWithSelection<TFramework extends Renderer> extends Preview<TFramework> {
   currentSelection?: Store_Selection;
 
   currentRender?: PossibleRender<TFramework>;
diff --git a/code/lib/preview-web/src/UrlStore.test.ts b/code/lib/preview-web/src/UrlStore.test.ts
index 132e368ede91..c3a3af6f78d4 100644
--- a/code/lib/preview-web/src/UrlStore.test.ts
+++ b/code/lib/preview-web/src/UrlStore.test.ts
@@ -21,6 +21,7 @@ describe('UrlStore', () => {
     });
     it('should error on invalid ids', () => {
       [null, '', '/whatever/story/story--id'].forEach((path) => {
+        // @ts-expect-error (invalid data)
         expect(() => pathToId(path)).toThrow(/Invalid/);
       });
     });
diff --git a/code/lib/preview-web/src/docs-context/DocsContext.ts b/code/lib/preview-web/src/docs-context/DocsContext.ts
index 687cac7295a1..953041cf6680 100644
--- a/code/lib/preview-web/src/docs-context/DocsContext.ts
+++ b/code/lib/preview-web/src/docs-context/DocsContext.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
@@ -13,23 +13,23 @@ import type { Channel } from '@storybook/channels';
 
 import type { DocsContextProps } from './DocsContextProps';
 
-export class DocsContext<TFramework extends Framework> implements DocsContextProps<TFramework> {
-  private componentStoriesValue: Store_Story<TFramework>[];
+export class DocsContext<TRenderer extends Renderer> implements DocsContextProps<TRenderer> {
+  private componentStoriesValue: Store_Story<TRenderer>[];
 
-  private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TFramework>>;
+  private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TRenderer>>;
 
   private exportToStoryId: Map<Store_ModuleExport, StoryId>;
 
   private nameToStoryId: Map<StoryName, StoryId>;
 
-  private primaryStory?: Store_Story<TFramework>;
+  private primaryStory?: Store_Story<TRenderer>;
 
   constructor(
     public channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
     /** The CSF files known (via the index) to be refererenced by this docs file */
-    csfFiles: Store_CSFFile<TFramework>[],
+    csfFiles: Store_CSFFile<TRenderer>[],
     componentStoriesFromAllCsfFiles = true
   ) {
     this.storyIdToCSFFile = new Map();
@@ -45,7 +45,7 @@ export class DocsContext<TFramework extends Framework> implements DocsContextPro
   // This docs entry references this CSF file and can syncronously load the stories, as well
   // as reference them by module export. If the CSF is part of the "component" stories, they
   // can also be referenced by name and are in the componentStories list.
-  referenceCSFFile(csfFile: Store_CSFFile<TFramework>, addToComponentStories: boolean) {
+  referenceCSFFile(csfFile: Store_CSFFile<TRenderer>, addToComponentStories: boolean) {
     Object.values(csfFile.stories).forEach((annotation) => {
       this.storyIdToCSFFile.set(annotation.id, csfFile);
       this.exportToStoryId.set(annotation.moduleExport, annotation.id);
@@ -96,11 +96,11 @@ export class DocsContext<TFramework extends Framework> implements DocsContextPro
     return this.store.storyFromCSFFile({ storyId, csfFile });
   };
 
-  getStoryContext = (story: Store_Story<TFramework>) => {
+  getStoryContext = (story: Store_Story<TRenderer>) => {
     return {
       ...this.store.getStoryContext(story),
       viewMode: 'docs',
-    } as StoryContextForLoaders<TFramework>;
+    } as StoryContextForLoaders<TRenderer>;
   };
 
   loadStory = (id: StoryId) => {
diff --git a/code/lib/preview-web/src/docs-context/DocsContextProps.ts b/code/lib/preview-web/src/docs-context/DocsContextProps.ts
index ddb1c66d4e72..268992e5e66e 100644
--- a/code/lib/preview-web/src/docs-context/DocsContextProps.ts
+++ b/code/lib/preview-web/src/docs-context/DocsContextProps.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExport,
   Store_ModuleExports,
   Store_Story,
@@ -10,7 +10,7 @@ import type {
 import type { Channel } from '@storybook/channels';
 import type { StoryRenderOptions } from '../render/StoryRender';
 
-export interface DocsContextProps<TFramework extends Framework = Framework> {
+export interface DocsContextProps<TRenderer extends Renderer = Renderer> {
   /**
    * Register the CSF file that this docs entry represents.
    * Used by the `<Meta of={} />` block.
@@ -35,26 +35,26 @@ export interface DocsContextProps<TFramework extends Framework = Framework> {
    * Syncronously find a story by id (if the id is not provided, this will look up the primary
    * story in the CSF file, if such a file exists).
    */
-  storyById: (id?: StoryId) => Store_Story<TFramework>;
+  storyById: (id?: StoryId) => Store_Story<TRenderer>;
   /**
    * Syncronously find all stories of the component referenced by the CSF file.
    */
-  componentStories: () => Store_Story<TFramework>[];
+  componentStories: () => Store_Story<TRenderer>[];
 
   /**
    * Get the story context of the referenced story.
    */
-  getStoryContext: (story: Store_Story<TFramework>) => StoryContextForLoaders<TFramework>;
+  getStoryContext: (story: Store_Story<TRenderer>) => StoryContextForLoaders<TRenderer>;
   /**
    * Asyncronously load an arbitrary story by id.
    */
-  loadStory: (id: StoryId) => Promise<Store_Story<TFramework>>;
+  loadStory: (id: StoryId) => Promise<Store_Story<TRenderer>>;
 
   /**
    * Render a story to a given HTML element and keep it up to date across context changes
    */
   renderStoryToElement: (
-    story: Store_Story<TFramework>,
+    story: Store_Story<TRenderer>,
     element: HTMLElement,
     options: StoryRenderOptions
   ) => () => Promise<void>;
diff --git a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
index 441b8d33d3e1..bef733c3e96f 100644
--- a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
+++ b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
@@ -1,8 +1,8 @@
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { DocsContextProps } from './DocsContextProps';
 
-export type DocsRenderFunction<TFramework extends Framework> = (
-  docsContext: DocsContextProps<TFramework>,
+export type DocsRenderFunction<TRenderer extends Renderer> = (
+  docsContext: DocsContextProps<TRenderer>,
   docsParameters: Parameters,
   element: HTMLElement,
   callback: () => void
diff --git a/code/lib/preview-web/src/render/Render.ts b/code/lib/preview-web/src/render/Render.ts
index 4e74f5d8439d..737a058497c3 100644
--- a/code/lib/preview-web/src/render/Render.ts
+++ b/code/lib/preview-web/src/render/Render.ts
@@ -1,4 +1,4 @@
-import type { StoryId, Framework } from '@storybook/types';
+import type { StoryId, Renderer } from '@storybook/types';
 import type { StoryRenderOptions } from './StoryRender';
 
 export type RenderType = 'story' | 'docs';
@@ -10,16 +10,16 @@ export type RenderType = 'story' | 'docs';
  *  - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
  *  - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
  */
-export interface Render<TFramework extends Framework> {
+export interface Render<TRenderer extends Renderer> {
   type: RenderType;
   id: StoryId;
   isPreparing: () => boolean;
-  isEqual: (other: Render<TFramework>) => boolean;
+  isEqual: (other: Render<TRenderer>) => boolean;
   disableKeyListeners: boolean;
   teardown?: (options: { viewModeChanged: boolean }) => Promise<void>;
   torndown: boolean;
   renderToElement: (
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement?: any,
     options?: StoryRenderOptions
   ) => Promise<void>;
diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
index df6733b7206b..85ca36938f7b 100644
--- a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
+++ b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('StandaloneDocsRender', () => {
 
     const render = new StandaloneDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
       entry
     );
 
diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.ts
index cb22ca9a739f..c88b36f79974 100644
--- a/code/lib/preview-web/src/render/StandaloneDocsRender.ts
+++ b/code/lib/preview-web/src/render/StandaloneDocsRender.ts
@@ -1,6 +1,6 @@
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExports,
   StoryId,
@@ -24,7 +24,7 @@ import { DocsContext } from '../docs-context/DocsContext';
  *  - *.mdx file that may or may not reference a specific CSF file with `<Meta of={} />`
  */
 
-export class StandaloneDocsRender<TFramework extends Framework> implements Render<TFramework> {
+export class StandaloneDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public readonly type: RenderType = 'docs';
 
   public readonly id: StoryId;
@@ -41,11 +41,11 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
 
   public preparing = false;
 
-  private csfFiles?: Store_CSFFile<TFramework>[];
+  private csfFiles?: Store_CSFFile<TRenderer>[];
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -66,22 +66,22 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
     this.preparing = false;
   }
 
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.exports &&
-      this.exports === (other as StandaloneDocsRender<TFramework>).exports
+      this.exports === (other as StandaloneDocsRender<TRenderer>).exports
     );
   }
 
   async renderToElement(
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.exports || !this.csfFiles || !this.store.projectAnnotations)
       throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TRenderer>(
       this.channel,
       this.store,
       renderStoryToElement,
@@ -98,7 +98,7 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
 
     const docsParameter = { ...docs, page: this.exports.default };
     const renderer = await docs.renderer();
-    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
+    const { render } = renderer as { render: DocsRenderFunction<TRenderer> };
     const renderDocs = async () => {
       await new Promise<void>((r) =>
         // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
diff --git a/code/lib/preview-web/src/render/StoryRender.test.ts b/code/lib/preview-web/src/render/StoryRender.test.ts
index 3813597ae5eb..20cbb680059e 100644
--- a/code/lib/preview-web/src/render/StoryRender.test.ts
+++ b/code/lib/preview-web/src/render/StoryRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_StoryIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_StoryIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -35,7 +35,8 @@ describe('StoryRender', () => {
 
     const render = new StoryRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
+      // @ts-expect-error jest mock
       jest.fn(),
       {} as any,
       entry.id,
diff --git a/code/lib/preview-web/src/render/StoryRender.ts b/code/lib/preview-web/src/render/StoryRender.ts
index c9206457b7f4..845a1ccb8fcb 100644
--- a/code/lib/preview-web/src/render/StoryRender.ts
+++ b/code/lib/preview-web/src/render/StoryRender.ts
@@ -1,6 +1,5 @@
-import global from 'global';
 import type {
-  Framework,
+  Renderer,
   Store_RenderContext,
   RenderToCanvas,
   Store_Story,
@@ -21,7 +20,7 @@ import {
 import type { Render, RenderType } from './Render';
 import { PREPARE_ABORTED } from './Render';
 
-const { AbortController } = global;
+const { AbortController } = globalThis;
 
 export type RenderPhase =
   | 'preparing'
@@ -42,8 +41,8 @@ function serializeError(error: any) {
   }
 }
 
-export type RenderContextCallbacks<TFramework extends Framework> = Pick<
-  Store_RenderContext<TFramework>,
+export type RenderContextCallbacks<TRenderer extends Renderer> = Pick<
+  Store_RenderContext<TRenderer>,
   'showMain' | 'showError' | 'showException'
 >;
 
@@ -51,16 +50,16 @@ export type StoryRenderOptions = {
   autoplay?: boolean;
 };
 
-export class StoryRender<TFramework extends Framework> implements Render<TFramework> {
+export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public type: RenderType = 'story';
 
-  public story?: Store_Story<TFramework>;
+  public story?: Store_Story<TRenderer>;
 
   public phase?: RenderPhase;
 
   private abortController?: AbortController;
 
-  private canvasElement?: TFramework['canvasElement'];
+  private canvasElement?: TRenderer['canvasElement'];
 
   private notYetRendered = true;
 
@@ -72,13 +71,13 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
 
   constructor(
     public channel: Channel,
-    public store: StoryStore<TFramework>,
-    private renderToScreen: RenderToCanvas<TFramework>,
-    private callbacks: RenderContextCallbacks<TFramework>,
+    public store: StoryStore<TRenderer>,
+    private renderToScreen: RenderToCanvas<TRenderer>,
+    private callbacks: RenderContextCallbacks<TRenderer>,
     public id: StoryId,
     public viewMode: ViewMode,
     public renderOptions: StoryRenderOptions = { autoplay: true },
-    story?: Store_Story<TFramework>
+    story?: Store_Story<TRenderer>
   ) {
     this.abortController = new AbortController();
 
@@ -109,17 +108,17 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
     });
 
     if ((this.abortController as AbortController).signal.aborted) {
-      this.store.cleanupStory(this.story as Store_Story<TFramework>);
+      this.store.cleanupStory(this.story as Store_Story<TRenderer>);
       throw PREPARE_ABORTED;
     }
   }
 
   // The two story "renders" are equal and have both loaded the same story
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.story &&
-      this.story === (other as StoryRender<TFramework>).story
+      this.story === (other as StoryRender<TRenderer>).story
     );
   }
 
@@ -131,7 +130,7 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
     return ['rendering', 'playing'].includes(this.phase as RenderPhase);
   }
 
-  async renderToElement(canvasElement: TFramework['canvasElement']) {
+  async renderToElement(canvasElement: TRenderer['canvasElement']) {
     this.canvasElement = canvasElement;
 
     // FIXME: this comment
@@ -179,22 +178,22 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
         loadedContext = await applyLoaders({
           ...this.storyContext(),
           viewMode: this.viewMode,
-        } as StoryContextForLoaders<TFramework>);
+        } as StoryContextForLoaders<TRenderer>);
       });
       if (abortSignal.aborted) {
         return;
       }
 
-      const renderStoryContext: StoryContext<TFramework> = {
+      const renderStoryContext: StoryContext<TRenderer> = {
         ...loadedContext!,
         // By this stage, it is possible that new args/globals have been received for this story
         // and we need to ensure we render it with the new values
         ...this.storyContext(),
         abortSignal,
-        // We should consider parameterizing the story types with TFramework['canvasElement'] in the future
+        // We should consider parameterizing the story types with TRenderer['canvasElement'] in the future
         canvasElement: canvasElement as any,
       };
-      const renderContext: Store_RenderContext<TFramework> = {
+      const renderContext: Store_RenderContext<TRenderer> = {
         componentId,
         title,
         kind: title,
@@ -293,7 +292,7 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
     // If we still haven't completed, reload the page (iframe) to ensure we have a clean slate
     // for the next render. Since the reload can take a brief moment to happen, we want to stop
     // further rendering by awaiting a never-resolving promise (which is destroyed on reload).
-    global.window.location.reload();
+    window.location.reload();
     await new Promise(() => {});
   }
 }
diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts b/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
index bf765bb3d155..22e6199e43b7 100644
--- a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
+++ b/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_TemplateDocsIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_TemplateDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('TemplateDocsRender', () => {
 
     const render = new TemplateDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
       entry
     );
 
diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.ts b/code/lib/preview-web/src/render/TemplateDocsRender.ts
index 45a2b38196ae..58c996df887d 100644
--- a/code/lib/preview-web/src/render/TemplateDocsRender.ts
+++ b/code/lib/preview-web/src/render/TemplateDocsRender.ts
@@ -1,6 +1,6 @@
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_Story,
   StoryId,
@@ -27,12 +27,12 @@ import { DocsContext } from '../docs-context/DocsContext';
  *  - *.stories.mdx files, where the MDX compiler produces a CSF file with a `.parameter.docs.page`
  *      parameter containing the compiled content of the MDX file.
  */
-export class TemplateDocsRender<TFramework extends Framework> implements Render<TFramework> {
+export class TemplateDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public readonly type: RenderType = 'docs';
 
   public readonly id: StoryId;
 
-  public story?: Store_Story<TFramework>;
+  public story?: Store_Story<TRenderer>;
 
   public rerender?: () => Promise<void>;
 
@@ -44,11 +44,11 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
 
   public preparing = false;
 
-  private csfFiles?: Store_CSFFile<TFramework>[];
+  private csfFiles?: Store_CSFFile<TRenderer>[];
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -64,7 +64,7 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
     if (this.torndown) throw PREPARE_ABORTED;
 
     const { importPath, title } = this.entry;
-    const primaryCsfFile = this.store.processCSFFileWithCache<TFramework>(
+    const primaryCsfFile = this.store.processCSFFileWithCache<TRenderer>(
       entryExports,
       importPath,
       title
@@ -83,21 +83,21 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
     this.preparing = false;
   }
 
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.story &&
-      this.story === (other as TemplateDocsRender<TFramework>).story
+      this.story === (other as TemplateDocsRender<TRenderer>).story
     );
   }
 
   async renderToElement(
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TRenderer>(
       this.channel,
       this.store,
       renderStoryToElement,
@@ -113,7 +113,7 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
       );
 
     const renderer = await docsParameter.renderer();
-    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
+    const { render } = renderer as { render: DocsRenderFunction<TRenderer> };
     const renderDocs = async () => {
       await new Promise<void>((r) =>
         // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
diff --git a/code/lib/preview-web/tsconfig.json b/code/lib/preview-web/tsconfig.json
index 25de4fbd3e60..5b3f3a56a68d 100644
--- a/code/lib/preview-web/tsconfig.json
+++ b/code/lib/preview-web/tsconfig.json
@@ -1,15 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/router/jest.config.js b/code/lib/router/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/router/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 85304d5a3d4c..a8bf22b14094 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -47,7 +47,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/client-logger": "7.0.0-alpha.51",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0"
   },
@@ -58,7 +58,7 @@
     "react-router-dom": "6.0.2",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.4.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -74,5 +74,5 @@
       "./src/utils.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/router/tsconfig.json b/code/lib/router/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/router/tsconfig.json
+++ b/code/lib/router/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/source-loader/jest.config.js b/code/lib/source-loader/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/source-loader/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index f0d6b3e7e9a3..0c715ff4846c 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -44,14 +44,14 @@
   },
   "dependencies": {
     "@storybook/csf": "next",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/types": "7.0.0-alpha.51",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",
-    "prettier": ">=2.2.1 <=3.0.0"
+    "prettier": "^2.7.1"
   },
   "devDependencies": {
-    "jest-specific-snapshot": "^4.0.0",
-    "typescript": "~4.6.3"
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -66,5 +66,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/source-loader/tsconfig.json b/code/lib/source-loader/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/source-loader/tsconfig.json
+++ b/code/lib/source-loader/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/store/jest.config.js b/code/lib/store/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/store/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/store/package.json b/code/lib/store/package.json
index 89cc002f4037..6ee6f173a133 100644
--- a/code/lib/store/package.json
+++ b/code/lib/store/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/store",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "",
   "keywords": [
     "storybook"
@@ -42,11 +42,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/types": "7.0.0-alpha.51",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
     "lodash": "^4.17.21",
@@ -57,7 +57,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -72,5 +72,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/store/src/StoryIndexStore.test.ts b/code/lib/store/src/StoryIndexStore.test.ts
index c49e5988a789..079253590daa 100644
--- a/code/lib/store/src/StoryIndexStore.test.ts
+++ b/code/lib/store/src/StoryIndexStore.test.ts
@@ -32,11 +32,11 @@ const storyIndex: Store_StoryIndex = {
   },
 };
 
-const makeStoryIndex = (titlesAndNames) => {
+const makeStoryIndex = (titlesAndNames: any) => {
   return {
     v: 4,
     entries: Object.fromEntries(
-      titlesAndNames.map(([title, name]) => {
+      titlesAndNames.map(([title, name]: [any, any]) => {
         const id = `${title}--${name}`.replace('/', '-');
         return [
           id,
diff --git a/code/lib/store/src/StoryStore.test.ts b/code/lib/store/src/StoryStore.test.ts
index 02da944424b7..f7eda61f3241 100644
--- a/code/lib/store/src/StoryStore.test.ts
+++ b/code/lib/store/src/StoryStore.test.ts
@@ -1,11 +1,10 @@
-import type { Framework, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ProjectAnnotations, Store_StoryIndex } from '@storybook/types';
 import global from 'global';
 import { expect } from '@jest/globals';
 
 import { prepareStory } from './csf/prepareStory';
 import { processCSFFile } from './csf/processCSFFile';
 import { StoryStore } from './StoryStore';
-import type { StoryIndex } from './types';
 import type { HooksContext } from './hooks';
 
 // Spy on prepareStory/processCSFFile
@@ -43,7 +42,7 @@ const projectAnnotations: ProjectAnnotations<any> = {
   render: jest.fn(),
 };
 
-const storyIndex: StoryIndex = {
+const storyIndex: Store_StoryIndex = {
   v: 4,
   entries: {
     'component-one--a': {
@@ -444,7 +443,7 @@ describe('StoryStore', () => {
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
 
-      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<Framework> };
+      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<Renderer> };
       hooks.clean = jest.fn();
       store.cleanupStory(story);
       expect(hooks.clean).toHaveBeenCalled();
@@ -631,11 +630,12 @@ describe('StoryStore', () => {
     });
 
     it('does not include (modern) docs entries ever', async () => {
-      const docsOnlyStoryIndex: StoryIndex = {
+      const docsOnlyStoryIndex: Store_StoryIndex = {
         v: 4,
         entries: {
           ...storyIndex.entries,
           'introduction--docs': {
+            standalone: true,
             type: 'docs',
             id: 'introduction--docs',
             title: 'Introduction',
diff --git a/code/lib/store/src/StoryStore.ts b/code/lib/store/src/StoryStore.ts
index b353428e37e8..1cca0afd842b 100644
--- a/code/lib/store/src/StoryStore.ts
+++ b/code/lib/store/src/StoryStore.ts
@@ -1,7 +1,7 @@
 import memoize from 'memoizerific';
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   API_PreparedStoryIndex,
   ComponentTitle,
   Parameters,
@@ -37,20 +37,20 @@ import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf
 const CSF_CACHE_SIZE = 1000;
 const STORY_CACHE_SIZE = 10000;
 
-export class StoryStore<TFramework extends Framework> {
+export class StoryStore<TRenderer extends Renderer> {
   storyIndex?: StoryIndexStore;
 
   importFn?: Store_ModuleImportFn;
 
-  projectAnnotations?: Store_NormalizedProjectAnnotations<TFramework>;
+  projectAnnotations?: Store_NormalizedProjectAnnotations<TRenderer>;
 
   globals?: GlobalsStore;
 
   args: ArgsStore;
 
-  hooks: Record<StoryId, HooksContext<TFramework>>;
+  hooks: Record<StoryId, HooksContext<TRenderer>>;
 
-  cachedCSFFiles?: Record<Path, Store_CSFFile<TFramework>>;
+  cachedCSFFiles?: Record<Path, Store_CSFFile<TRenderer>>;
 
   processCSFFileWithCache: typeof processCSFFile;
 
@@ -77,7 +77,7 @@ export class StoryStore<TFramework extends Framework> {
     });
   }
 
-  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
+  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TRenderer>) {
     // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
     const { globals, globalTypes } = projectAnnotations;
@@ -134,7 +134,7 @@ export class StoryStore<TFramework extends Framework> {
   }
 
   // To load a single CSF file to service a story we need to look up the importPath in the index
-  loadCSFFileByStoryId(storyId: StoryId): Store_PromiseLike<Store_CSFFile<TFramework>> {
+  loadCSFFileByStoryId(storyId: StoryId): Store_PromiseLike<Store_CSFFile<TRenderer>> {
     if (!this.storyIndex || !this.importFn)
       throw new Error(`loadCSFFileByStoryId called before initialization`);
 
@@ -145,7 +145,7 @@ export class StoryStore<TFramework extends Framework> {
     );
   }
 
-  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TFramework>['cachedCSFFiles']> {
+  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TRenderer>['cachedCSFFiles']> {
     if (!this.storyIndex) throw new Error(`loadAllCSFFiles called before initialization`);
 
     const importPaths: Record<Path, StoryId> = {};
@@ -164,7 +164,7 @@ export class StoryStore<TFramework extends Framework> {
       list.reduce((acc, { importPath, csfFile }) => {
         acc[importPath] = csfFile;
         return acc;
-      }, {} as Record<Path, Store_CSFFile<TFramework>>)
+      }, {} as Record<Path, Store_CSFFile<TRenderer>>)
     );
   }
 
@@ -177,7 +177,7 @@ export class StoryStore<TFramework extends Framework> {
   }
 
   // Load the CSF file for a story and prepare the story from it and the project annotations.
-  async loadStory({ storyId }: { storyId: StoryId }): Promise<Store_Story<TFramework>> {
+  async loadStory({ storyId }: { storyId: StoryId }): Promise<Store_Story<TRenderer>> {
     await this.initializationPromise;
     const csfFile = await this.loadCSFFileByStoryId(storyId);
     return this.storyFromCSFFile({ storyId, csfFile });
@@ -190,8 +190,8 @@ export class StoryStore<TFramework extends Framework> {
     csfFile,
   }: {
     storyId: StoryId;
-    csfFile: Store_CSFFile<TFramework>;
-  }): Store_Story<TFramework> {
+    csfFile: Store_CSFFile<TRenderer>;
+  }): Store_Story<TRenderer> {
     if (!this.projectAnnotations) throw new Error(`storyFromCSFFile called before initialization`);
 
     const storyAnnotations = csfFile.stories[storyId];
@@ -214,8 +214,8 @@ export class StoryStore<TFramework extends Framework> {
   componentStoriesFromCSFFile({
     csfFile,
   }: {
-    csfFile: Store_CSFFile<TFramework>;
-  }): Store_Story<TFramework>[] {
+    csfFile: Store_CSFFile<TRenderer>;
+  }): Store_Story<TRenderer>[] {
     if (!this.storyIndex)
       throw new Error(`componentStoriesFromCSFFile called before initialization`);
 
@@ -238,7 +238,7 @@ export class StoryStore<TFramework extends Framework> {
         const firstStoryEntry = storyIndex.importPathToEntry(storyImportPath);
         return this.loadCSFFileByStoryId(firstStoryEntry.id);
       }),
-    ])) as [Store_ModuleExports, ...Store_CSFFile<TFramework>[]];
+    ])) as [Store_ModuleExports, ...Store_CSFFile<TRenderer>[]];
 
     return { entryExports, csfFiles };
   }
@@ -246,8 +246,8 @@ export class StoryStore<TFramework extends Framework> {
   // A prepared story does not include args, globals or hooks. These are stored in the story store
   // and updated separtely to the (immutable) story.
   getStoryContext(
-    story: Store_Story<TFramework>
-  ): Omit<StoryContextForLoaders<TFramework>, 'viewMode'> {
+    story: Store_Story<TRenderer>
+  ): Omit<StoryContextForLoaders<TRenderer>, 'viewMode'> {
     if (!this.globals) throw new Error(`getStoryContext called before initialization`);
 
     return {
@@ -258,13 +258,13 @@ export class StoryStore<TFramework extends Framework> {
     };
   }
 
-  cleanupStory(story: Store_Story<TFramework>): void {
+  cleanupStory(story: Store_Story<TRenderer>): void {
     this.hooks[story.id].clean();
   }
 
   extract(
     options: Store_ExtractOptions = { includeDocsOnly: false }
-  ): Record<StoryId, StoryContextForEnhancers<TFramework>> {
+  ): Record<StoryId, StoryContextForEnhancers<TRenderer>> {
     if (!this.storyIndex) throw new Error(`extract called before initialization`);
 
     const { cachedCSFFiles } = this;
@@ -380,13 +380,13 @@ export class StoryStore<TFramework extends Framework> {
     };
   }
 
-  raw(): Store_BoundStory<TFramework>[] {
+  raw(): Store_BoundStory<TRenderer>[] {
     return Object.values(this.extract())
       .map(({ id }: { id: StoryId }) => this.fromId(id))
-      .filter(Boolean) as Store_BoundStory<TFramework>[];
+      .filter(Boolean) as Store_BoundStory<TRenderer>[];
   }
 
-  fromId(storyId: StoryId): Store_BoundStory<TFramework> | null {
+  fromId(storyId: StoryId): Store_BoundStory<TRenderer> | null {
     if (!this.storyIndex) throw new Error(`fromId called before initialization`);
 
     if (!this.cachedCSFFiles)
@@ -406,7 +406,7 @@ export class StoryStore<TFramework extends Framework> {
         const context = {
           ...this.getStoryContext(story),
           viewMode: 'story',
-        } as StoryContext<TFramework>;
+        } as StoryContext<TRenderer>;
 
         return story.unboundStoryFn({ ...context, ...update });
       },
diff --git a/code/lib/store/src/args.ts b/code/lib/store/src/args.ts
index 407776d0a3cb..f04e0c978dc1 100644
--- a/code/lib/store/src/args.ts
+++ b/code/lib/store/src/args.ts
@@ -1,5 +1,5 @@
 import { dequal as deepEqual } from 'dequal';
-import type { Framework, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
+import type { Renderer, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
 import { once } from '@storybook/client-logger';
 import isPlainObject from 'lodash/isPlainObject';
 import { dedent } from 'ts-dedent';
@@ -145,10 +145,10 @@ export const deepDiff = (value: any, update: any): any => {
 };
 
 export const NO_TARGET_NAME = '';
-export function groupArgsByTarget<TArgs = Args>({
+export function groupArgsByTarget<TArgs extends Args = Args>({
   args,
   argTypes,
-}: StoryContext<Framework, TArgs>) {
+}: StoryContext<Renderer, TArgs>) {
   const groupedArgs: Record<string, Partial<TArgs>> = {};
   (Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => {
     const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target?: string };
@@ -159,6 +159,6 @@ export function groupArgsByTarget<TArgs = Args>({
   return groupedArgs;
 }
 
-export function noTargetArgs<TArgs = Args>(context: StoryContext<Framework, TArgs>) {
+export function noTargetArgs<TArgs extends Args = Args>(context: StoryContext<Renderer, TArgs>) {
   return groupArgsByTarget(context)[NO_TARGET_NAME];
 }
diff --git a/code/lib/store/src/autoTitle.test.ts b/code/lib/store/src/autoTitle.test.ts
index 256b91d2d402..e4c1fe23dbb2 100644
--- a/code/lib/store/src/autoTitle.test.ts
+++ b/code/lib/store/src/autoTitle.test.ts
@@ -5,7 +5,7 @@ import { userOrAutoTitleFromSpecifier as userOrAuto } from './autoTitle';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
-  test: (val) => true,
+  test: (val: any) => true,
 });
 
 // Make these two the same so `normalizeStoriesEntry` doesn't change anything
diff --git a/code/lib/store/src/csf/composeConfigs.test.ts b/code/lib/store/src/csf/composeConfigs.test.ts
index 5760d7e5c854..1b62b69f1e0e 100644
--- a/code/lib/store/src/csf/composeConfigs.test.ts
+++ b/code/lib/store/src/csf/composeConfigs.test.ts
@@ -162,8 +162,11 @@ describe('composeConfigs', () => {
     const fn = jest.fn();
 
     const { runStep } = composeConfigs([
+      // @ts-expect-error (not defined)
       { runStep: (label, play, context) => fn(`${label}1`, play(context)) },
+      // @ts-expect-error (not defined)
       { runStep: (label, play, context) => fn(`${label}2`, play(context)) },
+      // @ts-expect-error (not defined)
       { runStep: (label, play, context) => fn(`${label}3`, play(context)) },
     ]);
 
diff --git a/code/lib/store/src/csf/composeConfigs.ts b/code/lib/store/src/csf/composeConfigs.ts
index 6069a26df3ef..f7d479363ed0 100644
--- a/code/lib/store/src/csf/composeConfigs.ts
+++ b/code/lib/store/src/csf/composeConfigs.ts
@@ -1,4 +1,4 @@
-import type { Framework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, Store_ModuleExports, ProjectAnnotations } from '@storybook/types';
 
 import { combineParameters } from '../parameters';
 import { composeStepRunners } from './stepRunners';
@@ -31,9 +31,9 @@ export function getSingletonField<TFieldType = any>(
   return getField(moduleExportList, field).pop();
 }
 
-export function composeConfigs<TFramework extends Framework>(
+export function composeConfigs<TRenderer extends Renderer>(
   moduleExportList: Store_ModuleExports[]
-): ProjectAnnotations<TFramework> {
+): ProjectAnnotations<TRenderer> {
   const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers');
   const stepRunners = getField(moduleExportList, 'runStep');
 
@@ -54,6 +54,6 @@ export function composeConfigs<TFramework extends Framework>(
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
     renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
     applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
-    runStep: composeStepRunners<TFramework>(stepRunners),
+    runStep: composeStepRunners<TRenderer>(stepRunners),
   };
 }
diff --git a/code/lib/store/src/csf/normalizeComponentAnnotations.ts b/code/lib/store/src/csf/normalizeComponentAnnotations.ts
index 27addf2c6674..4ecb4d4a2450 100644
--- a/code/lib/store/src/csf/normalizeComponentAnnotations.ts
+++ b/code/lib/store/src/csf/normalizeComponentAnnotations.ts
@@ -1,17 +1,17 @@
 import { sanitize } from '@storybook/csf';
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExports,
   Store_NormalizedComponentAnnotations,
 } from '@storybook/types';
 
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeComponentAnnotations<TFramework extends Framework>(
+export function normalizeComponentAnnotations<TRenderer extends Renderer>(
   defaultExport: Store_ModuleExports['default'],
   title: string = defaultExport.title,
   importPath?: string
-): Store_NormalizedComponentAnnotations<TFramework> {
+): Store_NormalizedComponentAnnotations<TRenderer> {
   const { id, argTypes } = defaultExport;
   return {
     id: sanitize(id || title),
diff --git a/code/lib/store/src/csf/normalizeProjectAnnotations.ts b/code/lib/store/src/csf/normalizeProjectAnnotations.ts
index e4700f6d3fa7..679bc43edb41 100644
--- a/code/lib/store/src/csf/normalizeProjectAnnotations.ts
+++ b/code/lib/store/src/csf/normalizeProjectAnnotations.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ArgTypes,
   ProjectAnnotations,
   Store_NormalizedProjectAnnotations,
@@ -9,12 +9,12 @@ import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeProjectAnnotations<TFramework extends Framework>({
+export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   argTypes,
   globalTypes,
   argTypesEnhancers,
   ...annotations
-}: ProjectAnnotations<TFramework>): Store_NormalizedProjectAnnotations<TFramework> {
+}: ProjectAnnotations<TRenderer>): Store_NormalizedProjectAnnotations<TRenderer> {
   return {
     ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
     ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
diff --git a/code/lib/store/src/csf/normalizeStory.test.ts b/code/lib/store/src/csf/normalizeStory.test.ts
index c1374f1957b6..5a97b4b56359 100644
--- a/code/lib/store/src/csf/normalizeStory.test.ts
+++ b/code/lib/store/src/csf/normalizeStory.test.ts
@@ -1,5 +1,5 @@
 import { expect, describe, it } from '@jest/globals';
-import type { Framework, StoryAnnotationsOrFn } from '@storybook/types';
+import type { Renderer, StoryAnnotationsOrFn } from '@storybook/types';
 
 import { normalizeStory } from './normalizeStory';
 
@@ -133,7 +133,7 @@ describe('normalizeStory', () => {
       });
 
       it('full annotations', () => {
-        const storyObj: StoryAnnotationsOrFn<Framework> = {
+        const storyObj: StoryAnnotationsOrFn<Renderer> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],
@@ -174,7 +174,7 @@ describe('normalizeStory', () => {
       });
 
       it('prefers new annotations to legacy, but combines', () => {
-        const storyObj: StoryAnnotationsOrFn<Framework> = {
+        const storyObj: StoryAnnotationsOrFn<Renderer> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],
diff --git a/code/lib/store/src/csf/normalizeStory.ts b/code/lib/store/src/csf/normalizeStory.ts
index 96a77f5fdc54..a771b5e83ef4 100644
--- a/code/lib/store/src/csf/normalizeStory.ts
+++ b/code/lib/store/src/csf/normalizeStory.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ArgTypes,
   LegacyStoryAnnotationsOrFn,
   Store_NormalizedComponentAnnotations,
@@ -23,13 +23,13 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
 
 const deprecatedStoryAnnotationWarning = deprecate(() => {}, deprecatedStoryAnnotation);
 
-export function normalizeStory<TFramework extends Framework>(
+export function normalizeStory<TRenderer extends Renderer>(
   key: StoryId,
-  storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
-  meta: Store_NormalizedComponentAnnotations<TFramework>
-): Store_NormalizedStoryAnnotations<TFramework> {
-  const storyObject: StoryAnnotations<TFramework> = storyAnnotations;
-  const userStoryFn: StoryFn<TFramework> | null =
+  storyAnnotations: LegacyStoryAnnotationsOrFn<TRenderer>,
+  meta: Store_NormalizedComponentAnnotations<TRenderer>
+): Store_NormalizedStoryAnnotations<TRenderer> {
+  const storyObject: StoryAnnotations<TRenderer> = storyAnnotations;
+  const userStoryFn: StoryFn<TRenderer> | null =
     typeof storyAnnotations === 'function' ? storyAnnotations : null;
 
   const { story } = storyObject;
diff --git a/code/lib/store/src/csf/prepareStory.test.ts b/code/lib/store/src/csf/prepareStory.test.ts
index b67e0d8265c0..a724ea7879cc 100644
--- a/code/lib/store/src/csf/prepareStory.test.ts
+++ b/code/lib/store/src/csf/prepareStory.test.ts
@@ -4,7 +4,7 @@ import global from 'global';
 import { expect } from '@jest/globals';
 import { addons, HooksContext } from '@storybook/addons';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   PlayFunctionContext,
   SBObjectType,
@@ -234,11 +234,11 @@ describe('prepareStory', () => {
     describe('argsEnhancers', () => {
       it('are applied in the right order', () => {
         const run: number[] = [];
-        const enhancerOne: ArgsEnhancer<Framework> = () => {
+        const enhancerOne: ArgsEnhancer<Renderer> = () => {
           run.push(1);
           return {};
         };
-        const enhancerTwo: ArgsEnhancer<Framework> = () => {
+        const enhancerTwo: ArgsEnhancer<Renderer> = () => {
           run.push(2);
           return {};
         };
diff --git a/code/lib/store/src/csf/prepareStory.ts b/code/lib/store/src/csf/prepareStory.ts
index c8db666bddf2..ba7ccc6320de 100644
--- a/code/lib/store/src/csf/prepareStory.ts
+++ b/code/lib/store/src/csf/prepareStory.ts
@@ -3,7 +3,7 @@ import deprecate from 'util-deprecate';
 import global from 'global';
 
 import type {
-  Framework,
+  Renderer,
   Args,
   ArgsStoryFn,
   LegacyStoryFn,
@@ -41,11 +41,11 @@ const argTypeDefaultValueWarning = deprecate(
 //
 // Note that this story function is *stateless* in the sense that it does not track args or globals
 // Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation.
-export function prepareStory<TFramework extends Framework>(
-  storyAnnotations: Store_NormalizedStoryAnnotations<TFramework>,
-  componentAnnotations: Store_NormalizedComponentAnnotations<TFramework>,
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>
-): Store_Story<TFramework> {
+export function prepareStory<TRenderer extends Renderer>(
+  storyAnnotations: Store_NormalizedStoryAnnotations<TRenderer>,
+  componentAnnotations: Store_NormalizedComponentAnnotations<TRenderer>,
+  projectAnnotations: Store_NormalizedProjectAnnotations<TRenderer>
+): Store_Story<TRenderer> {
   // NOTE: in the current implementation we are doing everything once, up front, rather than doing
   // anything at render time. The assumption is that as we don't load all the stories at once, this
   // will have a limited cost. If this proves misguided, we can refactor it.
@@ -107,7 +107,7 @@ export function prepareStory<TFramework extends Framework>(
     ...storyAnnotations.args,
   } as Args;
 
-  const contextForEnhancers: StoryContextForEnhancers<TFramework> = {
+  const contextForEnhancers: StoryContextForEnhancers<TRenderer> = {
     componentId: componentAnnotations.id,
     title,
     kind: title, // Back compat
@@ -161,13 +161,13 @@ export function prepareStory<TFramework extends Framework>(
     };
   }
 
-  const applyLoaders = async (context: StoryContextForLoaders<TFramework>) => {
+  const applyLoaders = async (context: StoryContextForLoaders<TRenderer>) => {
     const loadResults = await Promise.all(loaders.map((loader) => loader(context)));
     const loaded = Object.assign({}, ...loadResults);
     return { ...context, loaded };
   };
 
-  const undecoratedStoryFn: LegacyStoryFn<TFramework> = (context: StoryContext<TFramework>) => {
+  const undecoratedStoryFn: LegacyStoryFn<TRenderer> = (context: StoryContext<TRenderer>) => {
     const mappedArgs = Object.entries(context.args).reduce((acc, [key, val]) => {
       const mapping = context.argTypes[key]?.mapping;
       acc[key] = mapping && val in mapping ? mapping[val] : val;
@@ -183,12 +183,12 @@ export function prepareStory<TFramework extends Framework>(
     const includedContext = { ...context, args: includedArgs };
     const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
     return renderTimePassArgsFirst
-      ? (render as ArgsStoryFn<TFramework>)(includedContext.args, includedContext)
-      : (render as LegacyStoryFn<TFramework>)(includedContext);
+      ? (render as ArgsStoryFn<TRenderer>)(includedContext.args, includedContext)
+      : (render as LegacyStoryFn<TRenderer>)(includedContext);
   };
-  const decoratedStoryFn = applyHooks<TFramework>(applyDecorators)(undecoratedStoryFn, decorators);
-  const unboundStoryFn = (context: StoryContext<TFramework>) => {
-    let finalContext: StoryContext<TFramework> = context;
+  const decoratedStoryFn = applyHooks<TRenderer>(applyDecorators)(undecoratedStoryFn, decorators);
+  const unboundStoryFn = (context: StoryContext<TRenderer>) => {
+    let finalContext: StoryContext<TRenderer> = context;
     if (global.FEATURES?.argTypeTargetsV7) {
       const argsByTarget = groupArgsByTarget(context);
       finalContext = {
@@ -204,11 +204,11 @@ export function prepareStory<TFramework extends Framework>(
   const { play } = storyAnnotations;
   const playFunction =
     play &&
-    (async (storyContext: StoryContext<TFramework>) => {
-      const playFunctionContext: PlayFunctionContext<TFramework> = {
+    (async (storyContext: StoryContext<TRenderer>) => {
+      const playFunctionContext: PlayFunctionContext<TRenderer> = {
         ...storyContext,
         // eslint-disable-next-line @typescript-eslint/no-shadow
-        step: (label: StepLabel, play: PlayFunction<TFramework>) =>
+        step: (label: StepLabel, play: PlayFunction<TRenderer>) =>
           // TODO: We know runStep is defined, we need a proper normalized annotations type
           runStep!(label, play, playFunctionContext),
       };
diff --git a/code/lib/store/src/csf/processCSFFile.ts b/code/lib/store/src/csf/processCSFFile.ts
index 176432dffe2d..7698701153f0 100644
--- a/code/lib/store/src/csf/processCSFFile.ts
+++ b/code/lib/store/src/csf/processCSFFile.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ComponentTitle,
   Parameters,
   Path,
@@ -39,19 +39,19 @@ const checkDisallowedParameters = (parameters?: Parameters) => {
 };
 
 // Given the raw exports of a CSF file, check and normalize it.
-export function processCSFFile<TFramework extends Framework>(
+export function processCSFFile<TRenderer extends Renderer>(
   moduleExports: Store_ModuleExports,
   importPath: Path,
   title: ComponentTitle
-): Store_CSFFile<TFramework> {
+): Store_CSFFile<TRenderer> {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
 
-  const meta: Store_NormalizedComponentAnnotations<TFramework> =
-    normalizeComponentAnnotations<TFramework>(defaultExport, title, importPath);
+  const meta: Store_NormalizedComponentAnnotations<TRenderer> =
+    normalizeComponentAnnotations<TRenderer>(defaultExport, title, importPath);
   checkDisallowedParameters(meta.parameters);
 
-  const csfFile: Store_CSFFile<TFramework> = { meta, stories: {} };
+  const csfFile: Store_CSFFile<TRenderer> = { meta, stories: {} };
 
   Object.keys(namedExports).forEach((key) => {
     if (isExportStory(key, meta)) {
diff --git a/code/lib/store/src/csf/stepRunners.ts b/code/lib/store/src/csf/stepRunners.ts
index a19d7180a210..2a5b5be88e17 100644
--- a/code/lib/store/src/csf/stepRunners.ts
+++ b/code/lib/store/src/csf/stepRunners.ts
@@ -1,4 +1,4 @@
-import type { Framework, StepRunner } from '@storybook/types';
+import type { Renderer, StepRunner } from '@storybook/types';
 
 /**
  * Compose step runners to create a single step runner that applies each step runner in order.
@@ -18,9 +18,9 @@ import type { Framework, StepRunner } from '@storybook/types';
  * @param stepRunners an array of StepRunner
  * @returns a StepRunner that is the composition of the arguments
  */
-export function composeStepRunners<TFramework extends Framework>(
-  stepRunners: StepRunner<TFramework>[]
-): StepRunner<TFramework> {
+export function composeStepRunners<TRenderer extends Renderer>(
+  stepRunners: StepRunner<TRenderer>[]
+): StepRunner<TRenderer> {
   return async (label, play, playContext) => {
     const composedPlay = stepRunners.reduceRight<() => Promise<void>>(
       (innerPlay, stepRunner) => async () => stepRunner(label, innerPlay, playContext),
diff --git a/code/lib/store/src/csf/testing-utils/index.test.ts b/code/lib/store/src/csf/testing-utils/index.test.ts
index 1f2d7c25c6cf..f7e02d95a559 100644
--- a/code/lib/store/src/csf/testing-utils/index.test.ts
+++ b/code/lib/store/src/csf/testing-utils/index.test.ts
@@ -31,6 +31,7 @@ describe('composeStory', () => {
 
   test('should throw an error if Story is undefined', () => {
     expect(() => {
+      // @ts-expect-error (invalid input)
       composeStory(undefined, meta);
     }).toThrow();
   });
diff --git a/code/lib/store/src/csf/testing-utils/index.ts b/code/lib/store/src/csf/testing-utils/index.ts
index b0e663dc5a04..4db39dba0c6e 100644
--- a/code/lib/store/src/csf/testing-utils/index.ts
+++ b/code/lib/store/src/csf/testing-utils/index.ts
@@ -1,6 +1,7 @@
+import type { AnnotatedStoryFn } from '@storybook/csf';
 import { isExportStory } from '@storybook/csf';
 import type {
-  Framework,
+  Renderer,
   Args,
   ComponentAnnotations,
   LegacyStoryAnnotationsOrFn,
@@ -9,6 +10,7 @@ import type {
   Store_ComposeStory,
   Store_CSFExports,
   StoryContext,
+  Parameters,
 } from '@storybook/types';
 
 import { HooksContext } from '@storybook/addons';
@@ -21,18 +23,18 @@ import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations';
 
 let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {};
 
-export function setProjectAnnotations<TFramework extends Framework = Framework>(
-  projectAnnotations: ProjectAnnotations<TFramework> | ProjectAnnotations<TFramework>[]
+export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
+  projectAnnotations: ProjectAnnotations<TRenderer> | ProjectAnnotations<TRenderer>[]
 ) {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
   GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs(annotations);
 }
 
-export function composeStory<TFramework extends Framework = Framework, TArgs extends Args = Args>(
-  storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
-  componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
-  projectAnnotations: ProjectAnnotations<TFramework> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
-  defaultConfig: ProjectAnnotations<TFramework> = {},
+export function composeStory<TRenderer extends Renderer = Renderer, TArgs extends Args = Args>(
+  storyAnnotations: LegacyStoryAnnotationsOrFn<TRenderer>,
+  componentAnnotations: ComponentAnnotations<TRenderer, TArgs>,
+  projectAnnotations: ProjectAnnotations<TRenderer> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
+  defaultConfig: ProjectAnnotations<TRenderer> = {},
   exportsName?: string
 ) {
   if (storyAnnotations === undefined) {
@@ -43,7 +45,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
   // eslint-disable-next-line no-param-reassign
   componentAnnotations.title = componentAnnotations.title ?? 'ComposedStory';
   const normalizedComponentAnnotations =
-    normalizeComponentAnnotations<TFramework>(componentAnnotations);
+    normalizeComponentAnnotations<TRenderer>(componentAnnotations);
 
   const storyName =
     exportsName ||
@@ -52,7 +54,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
     storyAnnotations.name ||
     'unknown';
 
-  const normalizedStory = normalizeStory<TFramework>(
+  const normalizedStory = normalizeStory<TRenderer>(
     storyName,
     storyAnnotations,
     normalizedComponentAnnotations
@@ -63,7 +65,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
     ...defaultConfig,
   });
 
-  const story = prepareStory<TFramework>(
+  const story = prepareStory<TRenderer>(
     normalizedStory,
     normalizedComponentAnnotations,
     normalizedProjectAnnotations
@@ -85,14 +87,14 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
   composedStory.storyName = storyName;
   composedStory.args = story.initialArgs;
   composedStory.play = story.playFunction as Store_ComposedStoryPlayFn;
-  composedStory.parameters = story.parameters;
+  composedStory.parameters = story.parameters as Parameters;
 
   return composedStory;
 }
 
 export function composeStories<TModule extends Store_CSFExports>(
   storiesImport: TModule,
-  globalConfig: ProjectAnnotations<Framework>,
+  globalConfig: ProjectAnnotations<Renderer>,
   composeStoryFn: Store_ComposeStory
 ) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/code/lib/store/src/decorators.test.ts b/code/lib/store/src/decorators.test.ts
index df4bab1e4e50..0fe27396fda8 100644
--- a/code/lib/store/src/decorators.test.ts
+++ b/code/lib/store/src/decorators.test.ts
@@ -1,9 +1,9 @@
 import { expect } from '@jest/globals';
-import type { Framework, StoryContext } from '@storybook/types';
+import type { Renderer, StoryContext } from '@storybook/types';
 
 import { defaultDecorateStory } from './decorators';
 
-function makeContext(input: Record<string, any> = {}): StoryContext<Framework> {
+function makeContext(input: Record<string, any> = {}): StoryContext<Renderer> {
   return {
     id: 'id',
     kind: 'kind',
@@ -11,15 +11,18 @@ function makeContext(input: Record<string, any> = {}): StoryContext<Framework> {
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext<Framework>;
+  } as StoryContext<Renderer>;
 }
 
 describe('client-api.decorators', () => {
   it('calls decorators in out to in order', () => {
     const order: number[] = [];
     const decorators = [
+      // @ts-expect-error (not defined)
       (s) => order.push(1) && s(),
+      // @ts-expect-error (not defined)
       (s) => order.push(2) && s(),
+      // @ts-expect-error (not defined)
       (s) => order.push(3) && s(),
     ];
     const decorated = defaultDecorateStory(() => order.push(4), decorators);
@@ -32,8 +35,11 @@ describe('client-api.decorators', () => {
   it('passes context through to sub decorators', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
+      // @ts-expect-error (not defined)
       (s, c) => contexts.push(c) && s({ args: { k: 1 } }),
+      // @ts-expect-error (not defined)
       (s, c) => contexts.push(c) && s({ args: { k: 2 } }),
+      // @ts-expect-error (not defined)
       (s, c) => contexts.push(c) && s({ args: { k: 3 } }),
     ];
     const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
@@ -46,7 +52,9 @@ describe('client-api.decorators', () => {
   it('passes context through to sub decorators additively', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
+      // @ts-expect-error (not defined)
       (s, c) => contexts.push(c) && s({ args: { a: 1 } }),
+      // @ts-expect-error (not defined)
       (s, c) => contexts.push(c) && s({ globals: { g: 2 } }),
     ];
     const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
@@ -61,9 +69,12 @@ describe('client-api.decorators', () => {
   });
 
   it('does not recreate decorated story functions each time', () => {
+    // @ts-expect-error (not defined)
     const decoratedStories = [];
     const decorators = [
+      // @ts-expect-error (not defined)
       (s, c) => {
+        // @ts-expect-error (not defined)
         decoratedStories.push = s;
         return s();
       },
@@ -72,6 +83,7 @@ describe('client-api.decorators', () => {
 
     decorated(makeContext());
     decorated(makeContext());
+    // @ts-expect-error (not defined)
     expect(decoratedStories[0]).toBe(decoratedStories[1]);
   });
 
@@ -85,6 +97,7 @@ describe('client-api.decorators', () => {
       resolve = r;
     });
     const decorators = [
+      // @ts-expect-error (not defined)
       async (s, c) => {
         // The fence here simulates async-ness in react rendering an element (`<S />` doesn't run `S()` straight away)
         await fence;
@@ -97,6 +110,7 @@ describe('client-api.decorators', () => {
     decoratedOne(makeContext({ value: 1 }));
     decoratedTwo(makeContext({ value: 2 }));
 
+    // @ts-expect-error (not defined)
     resolve();
     await fence;
 
@@ -107,6 +121,7 @@ describe('client-api.decorators', () => {
   it('DOES NOT merge core metadata or pass through core metadata keys in context', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
+      // @ts-expect-error (not defined)
       (s, c) =>
         contexts.push(c) &&
         s({ parameters: { c: 'd' }, id: 'notId', kind: 'notKind', name: 'notName' }),
diff --git a/code/lib/store/src/decorators.ts b/code/lib/store/src/decorators.ts
index 8868cd803af4..f76597423b29 100644
--- a/code/lib/store/src/decorators.ts
+++ b/code/lib/store/src/decorators.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   DecoratorFunction,
   LegacyStoryFn,
   PartialStoryFn,
@@ -7,11 +7,11 @@ import type {
   StoryContextUpdate,
 } from '@storybook/types';
 
-export function decorateStory<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>,
-  decorator: DecoratorFunction<TFramework>,
-  bindWithContext: (storyFn: LegacyStoryFn<TFramework>) => PartialStoryFn<TFramework>
-): LegacyStoryFn<TFramework> {
+export function decorateStory<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorator: DecoratorFunction<TRenderer>,
+  bindWithContext: (storyFn: LegacyStoryFn<TRenderer>) => PartialStoryFn<TRenderer>
+): LegacyStoryFn<TRenderer> {
   // Bind the partially decorated storyFn so that when it is called it always knows about the story context,
   // no matter what it is passed directly. This is because we cannot guarantee a decorator will
   // pass the context down to the next decorated story in the chain.
@@ -42,17 +42,17 @@ export function sanitizeStoryContextUpdate({
   return update;
 }
 
-export function defaultDecorateStory<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>,
-  decorators: DecoratorFunction<TFramework>[]
-): LegacyStoryFn<TFramework> {
+export function defaultDecorateStory<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorators: DecoratorFunction<TRenderer>[]
+): LegacyStoryFn<TRenderer> {
   // We use a trick to avoid recreating the bound story function inside `decorateStory`.
   // Instead we pass it a context "getter", which is defined once (at "decoration time")
   // The getter reads a variable which is scoped to this call of `decorateStory`
   // (ie to this story), so there is no possibility of overlap.
   // This will break if you call the same story twice interleaved
   // (React might do it if you rendered the same story twice in the one ReactDom.render call, for instance)
-  const contextStore: Store_ContextStore<TFramework> = {};
+  const contextStore: Store_ContextStore<TRenderer> = {};
 
   /**
    * When you call the story function inside a decorator, e.g.:
@@ -65,7 +65,7 @@ export function defaultDecorateStory<TFramework extends Framework>(
    * merged in with the default context
    */
   const bindWithContext =
-    (decoratedStoryFn: LegacyStoryFn<TFramework>): PartialStoryFn<TFramework> =>
+    (decoratedStoryFn: LegacyStoryFn<TRenderer>): PartialStoryFn<TRenderer> =>
     (update) => {
       // This code path isn't possible because we always set `contextStore.value` before calling
       // `decoratedWithContextStore`, but TS doesn't know that.
diff --git a/code/lib/store/src/hooks.test.ts b/code/lib/store/src/hooks.test.ts
index c124c9f63fc5..b42e1f20555b 100644
--- a/code/lib/store/src/hooks.test.ts
+++ b/code/lib/store/src/hooks.test.ts
@@ -31,16 +31,17 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 const SOME_EVENT = 'someEvent';
-let mockChannel;
-let hooks;
-let onSomeEvent;
-let removeSomeEventListener;
+
+let mockChannel: any;
+let hooks: any;
+let onSomeEvent: any;
+let removeSomeEventListener: any;
 beforeEach(() => {
   onSomeEvent = jest.fn();
   removeSomeEventListener = jest.fn();
   mockChannel = {
     emit: jest.fn(),
-    on(event, callback) {
+    on(event: any, callback: any) {
       switch (event) {
         case STORY_RENDERED:
           callback();
@@ -51,7 +52,7 @@ beforeEach(() => {
         default:
       }
     },
-    removeListener(event, callback) {
+    removeListener(event: any, callback: any) {
       if (event === SOME_EVENT) {
         removeSomeEventListener(event, callback);
       }
@@ -63,7 +64,7 @@ beforeEach(() => {
 
 const decorateStory = applyHooks(defaultDecorateStory);
 
-const run = (storyFn, decorators: DecoratorFunction[] = [], context = {}) =>
+const run = (storyFn: any, decorators: DecoratorFunction[] = [], context = {}) =>
   decorateStory(storyFn, decorators)({ ...context, hooks } as StoryContext);
 
 describe('Preview hooks', () => {
@@ -116,7 +117,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed", () => {
       const effect = jest.fn();
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         useEffect(effect, []);
         return storyFn();
       };
@@ -126,7 +127,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed and story call comes before useEffect", () => {
       const effect = jest.fn();
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         const story = storyFn();
         useEffect(effect, []);
         return story;
@@ -140,7 +141,7 @@ describe('Preview hooks', () => {
       const story = () => {
         useEffect(effect, []);
       };
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         storyFn();
         return storyFn();
       };
@@ -348,7 +349,7 @@ describe('Preview hooks', () => {
   });
   describe('useRef', () => {
     it('attaches initial value', () => {
-      let ref;
+      let ref: any;
       const storyFn = () => {
         ref = useRef('foo');
       };
@@ -431,7 +432,7 @@ describe('Preview hooks', () => {
     });
     it('performs asynchronous state updates', () => {
       let state;
-      let setState;
+      let setState: any;
       const storyFn = jest.fn(() => {
         [state, setState] = useState('foo');
       });
@@ -484,8 +485,8 @@ describe('Preview hooks', () => {
       expect(state).toBe(3);
     });
     it('performs asynchronous state updates', () => {
-      let state;
-      let dispatch;
+      let state: any;
+      let dispatch: any;
       const storyFn = jest.fn(() => {
         [state, dispatch] = useReducer((prevState, action) => {
           switch (action) {
diff --git a/code/lib/store/src/inferArgTypes.ts b/code/lib/store/src/inferArgTypes.ts
index 76f009d31385..fab33db45862 100644
--- a/code/lib/store/src/inferArgTypes.ts
+++ b/code/lib/store/src/inferArgTypes.ts
@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
-import type { Framework, SBType, ArgTypesEnhancer } from '@storybook/types';
+import type { Renderer, SBType, ArgTypesEnhancer } from '@storybook/types';
 import { combineParameters } from './parameters';
 
 const inferType = (value: any, name: string, visited: Set<any>): SBType => {
@@ -41,7 +41,7 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
   return { name: 'object', value: {} };
 };
 
-export const inferArgTypes: ArgTypesEnhancer<Framework> = (context) => {
+export const inferArgTypes: ArgTypesEnhancer<Renderer> = (context) => {
   const { id, argTypes: userArgTypes = {}, initialArgs = {} } = context;
   const argTypes = mapValues(initialArgs, (arg, key) => ({
     name: key,
diff --git a/code/lib/store/src/inferControls.ts b/code/lib/store/src/inferControls.ts
index a603fa9b4fec..a77a5a71608a 100644
--- a/code/lib/store/src/inferControls.ts
+++ b/code/lib/store/src/inferControls.ts
@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   ArgTypesEnhancer,
   SBEnumType,
   Store_ControlsMatchers,
@@ -61,7 +61,7 @@ const inferControl = (
   }
 };
 
-export const inferControls: ArgTypesEnhancer<Framework> = (context) => {
+export const inferControls: ArgTypesEnhancer<Renderer> = (context) => {
   const {
     argTypes,
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/code/lib/store/tsconfig.json b/code/lib/store/tsconfig.json
index 25de4fbd3e60..5b3f3a56a68d 100644
--- a/code/lib/store/tsconfig.json
+++ b/code/lib/store/tsconfig.json
@@ -1,15 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/telemetry/jest.config.js b/code/lib/telemetry/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/telemetry/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index 9a01d526fda7..d15a052ff04d 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
@@ -42,8 +42,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-common": "7.0.0-alpha.51",
     "chalk": "^4.1.0",
     "detect-package-manager": "^2.0.1",
     "fetch-retry": "^5.0.2",
@@ -53,7 +53,7 @@
     "read-pkg-up": "^7.0.1"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -64,5 +64,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/telemetry/src/get-monorepo-type.test.ts b/code/lib/telemetry/src/get-monorepo-type.test.ts
index 0ddd8862bb0b..634a8ad5729d 100644
--- a/code/lib/telemetry/src/get-monorepo-type.test.ts
+++ b/code/lib/telemetry/src/get-monorepo-type.test.ts
@@ -14,7 +14,7 @@ jest.mock('@storybook/core-common', () => {
   };
 });
 
-const checkMonorepoType = ({ monorepoConfigFile, isYarnWorkspace = false }) => {
+const checkMonorepoType = ({ monorepoConfigFile, isYarnWorkspace = false }: any) => {
   const mockFiles = {
     [path.join('root', 'package.json')]: isYarnWorkspace ? '{ "workspaces": [] }' : '{}',
   };
diff --git a/code/lib/telemetry/src/sanitize.test.ts b/code/lib/telemetry/src/sanitize.test.ts
index 521ee2338f60..2f8f5b2267f7 100644
--- a/code/lib/telemetry/src/sanitize.test.ts
+++ b/code/lib/telemetry/src/sanitize.test.ts
@@ -4,7 +4,7 @@ describe(`Errors Helpers`, () => {
   describe(`sanitizeError`, () => {
     it(`Sanitizes current path from error stacktraces`, () => {
       const errorMessage = `this is a test`;
-      let e;
+      let e: any;
       try {
         throw new Error(errorMessage);
       } catch (error) {
diff --git a/code/lib/telemetry/tsconfig.json b/code/lib/telemetry/tsconfig.json
index 25de4fbd3e60..a4429176e35f 100644
--- a/code/lib/telemetry/tsconfig.json
+++ b/code/lib/telemetry/tsconfig.json
@@ -3,13 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/theming/jest.config.js b/code/lib/theming/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/lib/theming/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index ae4f99b2db4c..7dcb2ddfa44f 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/client-logger": "7.0.0-alpha.51",
     "memoizerific": "^1.11.3"
   },
   "devDependencies": {
@@ -57,13 +57,13 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@types/fs-extra": "^9.0.6",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "deep-object-diff": "^1.1.0",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "polished": "^4.2.2",
     "ts-dedent": "^2.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -79,5 +79,5 @@
     ],
     "post": "./scripts/fix-theme-type-export.ts"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/theming/tsconfig.json b/code/lib/theming/tsconfig.json
index d23f9a406fc2..52d43eaaa9b9 100644
--- a/code/lib/theming/tsconfig.json
+++ b/code/lib/theming/tsconfig.json
@@ -1,12 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/lib/types/jest.config.js b/code/lib/types/jest.config.js
new file mode 100644
index 000000000000..343e4c7a7f32
--- /dev/null
+++ b/code/lib/types/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 7a10064451d4..46eac8a8412b 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook Types",
   "keywords": [
     "storybook"
@@ -40,17 +40,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@types/babel__core": "^7.0.0",
+    "@babel/core": "^7.20.2",
+    "@types/babel__core": "^7.1.20",
     "@types/express": "^4.7.0",
     "express": "^4.17.1",
     "file-system-cache": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/csf": "0.0.2--canary.53.4879818.0",
-    "@types/node": "^16.0.0",
+    "@storybook/csf": "next",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "synchronous-promise": "^2.0.15",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -60,5 +60,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 2cfe44360031..d45ab93d4f60 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -8,7 +8,7 @@ import type {
   ComponentTitle,
   DecoratorFunction as DecoratorFunctionForFramework,
   InputType,
-  Framework,
+  Renderer,
   LegacyStoryFn as LegacyStoryFnForFramework,
   LoaderFunction as LoaderFunctionForFramework,
   Parameters,
@@ -89,8 +89,8 @@ export interface Addon_OptionsParameter extends Object {
   [key: string]: any;
 }
 
-export type Addon_StoryContext<TFramework extends Framework = Framework> =
-  StoryContextForFramework<TFramework>;
+export type Addon_StoryContext<TRenderer extends Renderer = Renderer> =
+  StoryContextForFramework<TRenderer>;
 export type Addon_StoryContextUpdate = Partial<Addon_StoryContext>;
 
 type Addon_ReturnTypeFramework<ReturnType> = {
diff --git a/code/lib/types/src/modules/client-api.ts b/code/lib/types/src/modules/client-api.ts
index d9739a80227b..ee1fddf7e0bb 100644
--- a/code/lib/types/src/modules/client-api.ts
+++ b/code/lib/types/src/modules/client-api.ts
@@ -5,7 +5,7 @@ import type {
   Args,
   ArgTypes,
   DecoratorFunction,
-  Framework,
+  Renderer,
   LoaderFunction,
   Parameters,
   LegacyStoryFn,
@@ -68,13 +68,13 @@ export interface ClientAPI_ClientApiAddons<StoryFnReturnType> {
 
 export type ClientAPI_RenderContextWithoutStoryContext = Omit<Store_RenderContext, 'storyContext'>;
 
-export interface ClientAPI_GetStorybookStory<TFramework extends Framework> {
+export interface ClientAPI_GetStorybookStory<TRenderer extends Renderer> {
   name: string;
-  render: LegacyStoryFn<TFramework>;
+  render: LegacyStoryFn<TRenderer>;
 }
 
-export interface ClientAPI_GetStorybookKind<TFramework extends Framework> {
+export interface ClientAPI_GetStorybookKind<TRenderer extends Renderer> {
   kind: string;
   fileName: string;
-  stories: ClientAPI_GetStorybookStory<TFramework>[];
+  stories: ClientAPI_GetStorybookStory<TRenderer>[];
 }
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 5cc04e9c630e..c18b53afb1a7 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -462,11 +462,13 @@ export interface CoreCommon_ResolvedAddonPreset {
   name: string;
 }
 
+export type PreviewAnnotation = string | { bare: string; absolute: string };
+
 export interface CoreCommon_ResolvedAddonVirtual {
   type: 'virtual';
   name: string;
   managerEntries?: string[];
-  previewAnnotations?: string[];
+  previewAnnotations?: PreviewAnnotation[];
   presets?: (string | { name: string; options?: any })[];
 }
 
diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts
index 96c8d1363fc2..00c46c323a69 100644
--- a/code/lib/types/src/modules/csf.ts
+++ b/code/lib/types/src/modules/csf.ts
@@ -15,7 +15,6 @@ import type {
   Conditional,
   DecoratorApplicator,
   DecoratorFunction,
-  Framework,
   Globals,
   GlobalTypes,
   IncludeExcludeOptions,
@@ -24,10 +23,11 @@ import type {
   LegacyStoryAnnotationsOrFn,
   LegacyStoryFn,
   LoaderFunction,
-  Parameters as ParametersBase,
+  Parameters,
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
+  Renderer,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,
@@ -51,6 +51,7 @@ import type {
   StoryIdentifier,
   StoryKind,
   StoryName,
+  StrictArgs,
   StrictArgTypes,
   StrictGlobalTypes,
   StrictInputType,
@@ -74,7 +75,7 @@ export type {
   Conditional,
   DecoratorApplicator,
   DecoratorFunction,
-  Framework,
+  Renderer,
   Globals,
   GlobalTypes,
   IncludeExcludeOptions,
@@ -83,6 +84,7 @@ export type {
   LegacyStoryAnnotationsOrFn,
   LegacyStoryFn,
   LoaderFunction,
+  Parameters,
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
@@ -109,6 +111,7 @@ export type {
   StoryIdentifier,
   StoryKind,
   StoryName,
+  StrictArgs,
   StrictArgTypes,
   StrictGlobalTypes,
   StrictInputType,
@@ -135,13 +138,15 @@ export type ViewMode = ViewModeBase | 'story' | 'info' | 'settings' | string | u
 
 type Layout = 'centered' | 'fullscreen' | 'padded' | 'none';
 
-export interface Parameters extends ParametersBase {
-  fileName?: string;
+export interface StorybookParameters {
   options?: Addon_OptionsParameter;
   /** The layout property defines basic styles added to the preview body where the story is rendered. If you pass 'none', no styles are applied. */
   layout?: Layout;
-  docsOnly?: boolean;
-  [key: string]: any;
+}
+
+export interface StorybookInternalParameters extends StorybookParameters {
+  fileName?: string;
+  docsOnly?: true;
 }
 
 export type Path = string;
diff --git a/code/lib/types/src/modules/store.ts b/code/lib/types/src/modules/store.ts
index 94a6a1f0c903..534945113d49 100644
--- a/code/lib/types/src/modules/store.ts
+++ b/code/lib/types/src/modules/store.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { SynchronousPromise } from 'synchronous-promise';
-import type { Framework, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf';
+import type { Renderer, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf';
 
 import type { Addon_IndexEntry, Addon_StoryIndexEntry } from './addons';
 import type {
@@ -27,7 +27,7 @@ import type {
   ViewMode,
 } from './csf';
 
-export interface WebFramework extends Framework {
+export interface WebRenderer extends Renderer {
   canvasElement: HTMLElement;
 }
 
@@ -39,34 +39,34 @@ export type Store_ModuleImportFn = (path: Path) => Store_PromiseLike<Store_Modul
 type Store_MaybePromise<T> = Promise<T> | T;
 
 export type TeardownRenderToCanvas = () => Store_MaybePromise<void>;
-export type RenderToCanvas<TFramework extends Framework> = (
-  context: Store_RenderContext<TFramework>,
-  element: TFramework['canvasElement']
+export type RenderToCanvas<TRenderer extends Renderer> = (
+  context: Store_RenderContext<TRenderer>,
+  element: TRenderer['canvasElement']
 ) => Store_MaybePromise<void | TeardownRenderToCanvas>;
 
-export type ProjectAnnotations<TFramework extends Framework> = CsfProjectAnnotations<TFramework> & {
-  renderToCanvas?: RenderToCanvas<TFramework>;
+export type ProjectAnnotations<TRenderer extends Renderer> = CsfProjectAnnotations<TRenderer> & {
+  renderToCanvas?: RenderToCanvas<TRenderer>;
 
   /* @deprecated use renderToCanvas */
-  renderToDOM?: RenderToCanvas<TFramework>;
+  renderToDOM?: RenderToCanvas<TRenderer>;
 };
 
-export type Store_NormalizedProjectAnnotations<TFramework extends Framework = Framework> =
-  ProjectAnnotations<TFramework> & {
+export type Store_NormalizedProjectAnnotations<TRenderer extends Renderer = Renderer> =
+  ProjectAnnotations<TRenderer> & {
     argTypes?: StrictArgTypes;
     globalTypes?: StrictGlobalTypes;
   };
 
-export type Store_NormalizedComponentAnnotations<TFramework extends Framework = Framework> =
-  ComponentAnnotations<TFramework> & {
+export type Store_NormalizedComponentAnnotations<TRenderer extends Renderer = Renderer> =
+  ComponentAnnotations<TRenderer> & {
     // Useful to guarantee that id & title exists
     id: ComponentId;
     title: ComponentTitle;
     argTypes?: StrictArgTypes;
   };
 
-export type Store_NormalizedStoryAnnotations<TFramework extends Framework = Framework> = Omit<
-  StoryAnnotations<TFramework>,
+export type Store_NormalizedStoryAnnotations<TRenderer extends Renderer = Renderer> = Omit<
+  StoryAnnotations<TRenderer>,
   'storyName' | 'story'
 > & {
   moduleExport: Store_ModuleExport;
@@ -74,42 +74,39 @@ export type Store_NormalizedStoryAnnotations<TFramework extends Framework = Fram
   id: StoryId;
   argTypes?: StrictArgTypes;
   name: StoryName;
-  userStoryFn?: StoryFn<TFramework>;
+  userStoryFn?: StoryFn<TRenderer>;
 };
 
-export type Store_CSFFile<TFramework extends Framework = Framework> = {
-  meta: Store_NormalizedComponentAnnotations<TFramework>;
-  stories: Record<StoryId, Store_NormalizedStoryAnnotations<TFramework>>;
+export type Store_CSFFile<TRenderer extends Renderer = Renderer> = {
+  meta: Store_NormalizedComponentAnnotations<TRenderer>;
+  stories: Record<StoryId, Store_NormalizedStoryAnnotations<TRenderer>>;
 };
 
-export type Store_Story<TFramework extends Framework = Framework> =
-  StoryContextForEnhancers<TFramework> & {
+export type Store_Story<TRenderer extends Renderer = Renderer> =
+  StoryContextForEnhancers<TRenderer> & {
     moduleExport: Store_ModuleExport;
-    originalStoryFn: StoryFn<TFramework>;
-    undecoratedStoryFn: LegacyStoryFn<TFramework>;
-    unboundStoryFn: LegacyStoryFn<TFramework>;
+    originalStoryFn: StoryFn<TRenderer>;
+    undecoratedStoryFn: LegacyStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
     applyLoaders: (
-      context: StoryContextForLoaders<TFramework>
-    ) => Promise<
-      StoryContextForLoaders<TFramework> & { loaded: StoryContext<TFramework>['loaded'] }
-    >;
-    playFunction?: (context: StoryContext<TFramework>) => Promise<void> | void;
+      context: StoryContextForLoaders<TRenderer>
+    ) => Promise<StoryContextForLoaders<TRenderer> & { loaded: StoryContext<TRenderer>['loaded'] }>;
+    playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
   };
 
-export type Store_BoundStory<TFramework extends Framework = Framework> = Store_Story<TFramework> & {
-  storyFn: PartialStoryFn<TFramework>;
+export type Store_BoundStory<TRenderer extends Renderer = Renderer> = Store_Story<TRenderer> & {
+  storyFn: PartialStoryFn<TRenderer>;
 };
 
-export declare type Store_RenderContext<TFramework extends Framework = Framework> =
-  StoryIdentifier & {
-    showMain: () => void;
-    showError: (error: { title: string; description: string }) => void;
-    showException: (err: Error) => void;
-    forceRemount: boolean;
-    storyContext: StoryContext<TFramework>;
-    storyFn: PartialStoryFn<TFramework>;
-    unboundStoryFn: LegacyStoryFn<TFramework>;
-  };
+export declare type Store_RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+  showMain: () => void;
+  showError: (error: { title: string; description: string }) => void;
+  showException: (err: Error) => void;
+  forceRemount: boolean;
+  storyContext: StoryContext<TRenderer>;
+  storyFn: PartialStoryFn<TRenderer>;
+  unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
 
 export interface Store_V2CompatIndexEntry extends Omit<Addon_StoryIndexEntry, 'type'> {
   kind: Addon_StoryIndexEntry['title'];
@@ -141,10 +138,10 @@ export interface Store_Selection {
   viewMode: ViewMode;
 }
 
-export type Store_DecoratorApplicator<TFramework extends Framework = Framework> = (
-  storyFn: LegacyStoryFn<TFramework>,
-  decorators: DecoratorFunction<TFramework>[]
-) => LegacyStoryFn<TFramework>;
+export type Store_DecoratorApplicator<TRenderer extends Renderer = Renderer> = (
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorators: DecoratorFunction<TRenderer>[]
+) => LegacyStoryFn<TRenderer>;
 
 export interface Store_StoriesSpecifier {
   directory: string;
@@ -166,14 +163,14 @@ export interface Store_NormalizedStoriesSpecifierEntry {
   importPathMatcher: RegExp;
 }
 
-export type Store_ContextStore<TFramework extends Framework> = {
-  value?: StoryContext<TFramework>;
+export type Store_ContextStore<TRenderer extends Renderer> = {
+  value?: StoryContext<TRenderer>;
 };
 
 export type Store_PropDescriptor = string[] | RegExp;
 
-export type Store_CSFExports<TFramework extends Framework = Framework> = {
-  default: ComponentAnnotations<TFramework, Args>;
+export type Store_CSFExports<TRenderer extends Renderer = Renderer> = {
+  default: ComponentAnnotations<TRenderer, Args>;
   __esModule?: boolean;
   __namedExportsOrder?: string[];
 };
@@ -185,14 +182,14 @@ export type Store_ComposedStoryPlayFn = (
   context: Store_ComposedStoryPlayContext
 ) => Promise<void> | void;
 
-export type Store_StoryFn<
-  TFramework extends Framework = Framework,
-  TArgs = Args
-> = AnnotatedStoryFn<TFramework, TArgs> & { play: Store_ComposedStoryPlayFn };
+export type Store_StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<
+  TRenderer,
+  TArgs
+> & { play: Store_ComposedStoryPlayFn };
 
-export type Store_ComposedStory<TFramework extends Framework = Framework, TArgs = Args> =
-  | StoryFn<TFramework, TArgs>
-  | StoryAnnotations<TFramework, TArgs>;
+export type Store_ComposedStory<TRenderer extends Renderer = Renderer, TArgs = Args> =
+  | StoryFn<TRenderer, TArgs>
+  | StoryAnnotations<TRenderer, TArgs>;
 
 /**
  * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
@@ -200,11 +197,11 @@ export type Store_ComposedStory<TFramework extends Framework = Framework, TArgs
  * 2. infer the actual prop type for each Story
  * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
  */
-export type Store_StoriesWithPartialProps<TFramework extends Framework, TModule> = {
+export type Store_StoriesWithPartialProps<TRenderer extends Renderer, TModule> = {
   // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
   // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
   [K in keyof TModule]: TModule[K] extends Store_ComposedStory<infer _, infer TProps>
-    ? AnnotatedStoryFn<TFramework, Partial<TProps>>
+    ? AnnotatedStoryFn<TRenderer, Partial<TProps>>
     : unknown;
 };
 
@@ -214,16 +211,16 @@ export type Store_ControlsMatchers = {
 };
 
 export interface Store_ComposeStory<
-  TFramework extends Framework = Framework,
+  TRenderer extends Renderer = Renderer,
   TArgs extends Args = Args
 > {
   (
-    storyAnnotations: AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>,
-    componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
-    projectAnnotations: ProjectAnnotations<TFramework>,
+    storyAnnotations: AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>,
+    componentAnnotations: ComponentAnnotations<TRenderer, TArgs>,
+    projectAnnotations: ProjectAnnotations<TRenderer>,
     exportsName?: string
   ): {
-    (extraArgs: Partial<TArgs>): TFramework['storyResult'];
+    (extraArgs: Partial<TArgs>): TRenderer['storyResult'];
     storyName: string;
     args: Args;
     play: Store_ComposedStoryPlayFn;
diff --git a/code/package.json b/code/package.json
index 86727c228536..2a587285220a 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "private": true,
   "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
   "keywords": [
@@ -57,7 +57,7 @@
     "changelog": "pr-log --sloppy --cherry-pick",
     "changelog:next": "pr-log --sloppy --since-prerelease",
     "check": "NODE_ENV=production node ../scripts/check-package.js",
-    "ci-tests": "yarn task --task check --no-link --start-from=install && yarn lint && yarn test",
+    "ci-tests": "yarn task --task check --no-link --start-from=install && yarn lint && yarn test && cd ../scripts && yarn test",
     "coverage": "codecov",
     "danger": "danger",
     "generate-repros": "zx ../scripts/repros-generator/index.mjs",
@@ -76,9 +76,9 @@
     "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",
-    "storybook:blocks": "BLOCKS_ONLY=true yarn storybook:ui",
-    "storybook:blocks:build": "BLOCKS_ONLY=true yarn storybook:ui:build",
-    "storybook:blocks:chromatic": "BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
+    "storybook:blocks": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui",
+    "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build",
+    "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
     "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
     "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
     "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
@@ -110,42 +110,42 @@
   ],
   "resolutions": {
     "@nrwl/cli": "14.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/experimental-utils": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/experimental-utils": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "boxen": "^5.1.2",
     "esbuild": "^0.14.48",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "serialize-javascript": "^3.1.0",
-    "typescript": "~4.6.3",
     "webpack": "5"
   },
   "dependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.2",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-block-scoping": "^7.16.7",
-    "@babel/plugin-transform-destructuring": "^7.17.3",
-    "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.2",
+    "@babel/plugin-transform-arrow-functions": "^7.18.6",
+    "@babel/plugin-transform-block-scoping": "^7.20.2",
+    "@babel/plugin-transform-destructuring": "^7.20.2",
+    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.1",
     "@compodoc/compodoc": "^1.1.18",
     "@emotion/babel-plugin": "^11.10.2",
     "@emotion/jest": "^11.10.0",
+    "@jest/globals": "^29.3.1",
     "@linear/sdk": "^1.21.0",
     "@nrwl/cli": "14.6.1",
     "@nrwl/nx-cloud": "14.6.0",
     "@nrwl/workspace": "14.6.1",
-    "@playwright/test": "1.27.0",
+    "@playwright/test": "1.28.0",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
@@ -242,32 +242,31 @@
     "@types/escodegen": "^0.0.6",
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^9.0.6",
-    "@types/jest": "^26.0.16",
     "@types/js-yaml": "^3.12.6",
     "@types/lodash": "^4.14.167",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/node-cleanup": "^2.1.1",
     "@types/prompts": "2.0.11",
-    "@types/react": "^16.14.23",
+    "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
     "@types/serve-static": "^1.13.8",
     "@types/shelljs": "^0.8.7",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-dev-middleware": "^5.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/experimental-utils": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/experimental-utils": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.5",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "^8.3.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^3.0.1",
     "chalk": "^4.1.0",
-    "chromatic": "^6.11.3",
+    "chromatic": "6.11.2",
     "codecov": "^3.8.1",
     "commander": "^6.2.1",
     "concurrently": "^5.3.0",
@@ -280,7 +279,7 @@
     "esbuild": "^0.14.48",
     "esbuild-loader": "^2.19.0",
     "esbuild-plugin-alias": "^0.2.1",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-storybook": "^0.6.6",
@@ -293,17 +292,13 @@
     "global": "^4.4.0",
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom": "^26.6.2",
-    "jest-environment-jsdom-thirteen": "^1.0.1",
-    "jest-enzyme": "^7.1.2",
-    "jest-image-snapshot": "^4.3.0",
-    "jest-jasmine2": "^26.6.3",
-    "jest-junit": "^13.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-image-snapshot": "^6.0.0",
+    "jest-junit": "^14.0.1",
     "jest-os-detection": "^1.3.1",
-    "jest-raw-loader": "^1.0.1",
-    "jest-serializer-html": "^7.0.0",
-    "jest-watch-typeahead": "^0.6.1",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^2.2.1",
     "js-yaml": "^3.14.1",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.4",
@@ -315,12 +310,12 @@
     "npmlog": "^5.0.1",
     "nx": "14.6.1",
     "p-limit": "^3.1.0",
-    "playwright": "1.27.0",
+    "playwright": "1.28.0",
     "prettier": "2.7.1",
     "process": "^0.11.10",
     "prompts": "^2.4.0",
     "raf": "^3.4.1",
-    "react": "^16.8.0",
+    "react": "^16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "remark": "^13.0.0",
@@ -335,10 +330,9 @@
     "terser-webpack-plugin": "^5.3.1",
     "trash": "^7.0.0",
     "ts-dedent": "^2.0.0",
-    "ts-jest": "^26.4.4",
     "ts-node": "^10.4.0",
     "tsup": "^6.2.2",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "util": "^0.12.4",
     "vite": "^3.1.7",
     "vite-plugin-turbosnap": "^1.0.1",
@@ -350,6 +344,7 @@
     "zx": "^7.0.3"
   },
   "devDependencies": {
+    "eslint-import-resolver-typescript": "^3.5.2",
     "expect-type": "^0.14.2"
   },
   "dependenciesMeta": {
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 3061ebb22b37..12c66c62b434 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -50,15 +50,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "html-loader": "^3.1.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "webpack": "5"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*"
@@ -75,5 +75,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/html-webpack/tsconfig.json b/code/presets/html-webpack/tsconfig.json
index d9463d503988..a4429176e35f 100644
--- a/code/presets/html-webpack/tsconfig.json
+++ b/code/presets/html-webpack/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index f4e4cd3c7279..d0c18e8221c9 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -50,15 +50,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
   "devDependencies": {
     "preact": "^10.5.13",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -76,5 +76,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/preact-webpack/tsconfig.json b/code/presets/preact-webpack/tsconfig.json
index 88fbabf6e314..77832da6336d 100644
--- a/code/presets/preact-webpack/tsconfig.json
+++ b/code/presets/preact-webpack/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 95d7dd878102..face03ce9da5 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -71,15 +71,15 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-flow": "^7.12.1",
-    "@babel/preset-react": "^7.12.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.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
-    "@storybook/react": "7.0.0-alpha.48",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
+    "@storybook/react": "7.0.0-alpha.51",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-react-docgen": "^4.2.1",
@@ -89,11 +89,11 @@
   },
   "devDependencies": {
     "@types/util-deprecate": "^1.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "^7.11.5",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "require-from-string": "^2.0.2",
@@ -123,5 +123,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
index 553dd6098728..991f084746ba 100644
--- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
+++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
@@ -1,5 +1,5 @@
 import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
-import type { TypescriptConfig } from '@storybook/core-webpack';
+import type { TypescriptOptions } from '@storybook/core-webpack';
 import * as preset from './framework-preset-react-docs';
 
 describe('framework-preset-react-docgen', () => {
@@ -14,14 +14,13 @@ describe('framework-preset-react-docgen', () => {
         plugins: ['foo-plugin'],
       };
 
-      const config = await preset.babel(babelConfig, {
+      const config = await preset.babel?.(babelConfig, {
         presets: {
-          // @ts-expect-error (Converted from ts-ignore)
           apply: async () =>
             ({
               check: false,
               reactDocgen: 'react-docgen',
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: presetsListWithDocs,
       } as any);
@@ -46,14 +45,14 @@ describe('framework-preset-react-docgen', () => {
         plugins: [],
       };
 
-      const config = await preset.webpackFinal(webpackConfig, {
+      const config = await preset.webpackFinal?.(webpackConfig, {
         presets: {
-          // @ts-expect-error (Converted from ts-ignore)
+          // @ts-expect-error (not strict)
           apply: async () =>
             ({
               check: false,
               reactDocgen: 'react-docgen-typescript',
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: presetsListWithDocs,
       });
@@ -76,25 +75,25 @@ describe('framework-preset-react-docgen', () => {
         plugins: [],
       };
 
-      const outputBabelconfig = await preset.babel(babelConfig, {
+      const outputBabelconfig = await preset.babel?.(babelConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
           apply: async () =>
             ({
               check: false,
               reactDocgen: false,
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: presetsListWithDocs,
       });
-      const outputWebpackconfig = await preset.webpackFinal(webpackConfig, {
+      const outputWebpackconfig = await preset.webpackFinal?.(webpackConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
           apply: async () =>
             ({
               check: false,
               reactDocgen: false,
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: presetsListWithDocs,
       });
@@ -122,25 +121,25 @@ describe('framework-preset-react-docgen', () => {
         plugins: [],
       };
 
-      const outputBabelconfig = await preset.babel(babelConfig, {
+      const outputBabelconfig = await preset.babel?.(babelConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
           apply: async () =>
             ({
               check: false,
               reactDocgen: 'react-docgen-typescript',
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: [],
       });
-      const outputWebpackconfig = await preset.webpackFinal(webpackConfig, {
+      const outputWebpackconfig = await preset.webpackFinal?.(webpackConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
           apply: async () =>
             ({
               check: false,
               reactDocgen: 'react-docgen-typescript',
-            } as TypescriptConfig),
+            } as Partial<TypescriptOptions>),
         },
         presetsList: [],
       });
diff --git a/code/presets/react-webpack/src/framework-preset-react.test.ts b/code/presets/react-webpack/src/framework-preset-react.test.ts
index adf443a51c06..e28b72c90819 100644
--- a/code/presets/react-webpack/src/framework-preset-react.test.ts
+++ b/code/presets/react-webpack/src/framework-preset-react.test.ts
@@ -49,13 +49,13 @@ describe('framework-preset-react', () => {
 
   describe('babel', () => {
     it('should return a config with fast refresh plugin when fast refresh is enabled', async () => {
-      const config = await preset.babel(babelConfigMock, storybookOptions as Options);
+      const config = await preset.babel?.(babelConfigMock, storybookOptions as Options);
 
-      expect(config.plugins).toEqual([[reactRefreshPath, {}, 'storybook-react-refresh']]);
+      expect(config?.plugins).toEqual([[reactRefreshPath, {}, 'storybook-react-refresh']]);
     });
 
     it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => {
-      const config = await preset.babel(
+      const config = await preset.babel?.(
         babelConfigMock,
         storybookOptionsDisabledRefresh as Options
       );
@@ -64,7 +64,7 @@ describe('framework-preset-react', () => {
     });
 
     it('should return unchanged config without fast refresh plugin when mode is not development', async () => {
-      const config = await preset.babel(babelConfigMock, {
+      const config = await preset.babel?.(babelConfigMock, {
         ...storybookOptions,
         configType: 'PRODUCTION',
       } as Options);
@@ -75,13 +75,13 @@ describe('framework-preset-react', () => {
 
   describe('webpackFinal', () => {
     it('should return a config with fast refresh plugin when fast refresh is enabled', async () => {
-      const config = await preset.webpackFinal(webpackConfigMock, storybookOptions as Options);
+      const config = await preset.webpackFinal?.(webpackConfigMock, storybookOptions as Options);
 
-      expect(config.plugins).toEqual([new ReactRefreshWebpackPlugin()]);
+      expect(config?.plugins).toEqual([new ReactRefreshWebpackPlugin()]);
     });
 
     it('should return unchanged config without fast refresh plugin when fast refresh is disabled', async () => {
-      const config = await preset.webpackFinal(
+      const config = await preset.webpackFinal?.(
         webpackConfigMock,
         storybookOptionsDisabledRefresh as Options
       );
@@ -90,7 +90,7 @@ describe('framework-preset-react', () => {
     });
 
     it('should return unchanged config without fast refresh plugin when mode is not development', async () => {
-      const config = await preset.webpackFinal(webpackConfigMock, {
+      const config = await preset.webpackFinal?.(webpackConfigMock, {
         ...storybookOptions,
         configType: 'PRODUCTION',
       } as Options);
diff --git a/code/presets/react-webpack/tsconfig.json b/code/presets/react-webpack/tsconfig.json
index 5505b0889f9e..77832da6336d 100644
--- a/code/presets/react-webpack/tsconfig.json
+++ b/code/presets/react-webpack/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 65a86253f768..cdc7103545db 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -55,10 +55,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-server": "7.0.0-alpha.48",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/server": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/core-server": "7.0.0-alpha.51",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/server": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -68,8 +68,8 @@
   },
   "devDependencies": {
     "fs-extra": "^9.0.1",
-    "jest-specific-snapshot": "^4.0.0",
-    "typescript": "~4.6.3",
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3",
     "yaml": "^1.10.0"
   },
   "engines": {
@@ -85,5 +85,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/server-webpack/tsconfig.json b/code/presets/server-webpack/tsconfig.json
index 640955dd9694..a4429176e35f 100644
--- a/code/presets/server-webpack/tsconfig.json
+++ b/code/presets/server-webpack/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 92a88b7b0188..a58fbc5e4ef7 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -65,8 +65,8 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/node-logger": "7.0.0-alpha.48",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/node-logger": "7.0.0-alpha.51",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "sveltedoc-parser": "^4.2.1",
@@ -75,7 +75,7 @@
   "devDependencies": {
     "svelte": "^3.31.2",
     "svelte-loader": "^3.1.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -97,5 +97,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/svelte-webpack/tsconfig.json b/code/presets/svelte-webpack/tsconfig.json
index 88fbabf6e314..77832da6336d 100644
--- a/code/presets/svelte-webpack/tsconfig.json
+++ b/code/presets/svelte-webpack/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index f6b77240d083..d4e6cfb6de9a 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -60,9 +60,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-loader": "^9.2.8",
@@ -71,7 +71,7 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "^2.6.12",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.14",
@@ -99,5 +99,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/vue-webpack/tsconfig.json b/code/presets/vue-webpack/tsconfig.json
index 368141ad6910..2f6c9028ccae 100644
--- a/code/presets/vue-webpack/tsconfig.json
+++ b/code/presets/vue-webpack/tsconfig.json
@@ -4,6 +4,5 @@
     "skipLibCheck": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 427d9e63ae37..5bc96518d1e4 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -60,9 +60,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-loader": "^9.2.8",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.2.33",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "^3.2.33"
   },
   "peerDependencies": {
@@ -96,5 +96,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/vue3-webpack/tsconfig.json b/code/presets/vue3-webpack/tsconfig.json
index a9b035c99817..863d7c2de0d2 100644
--- a/code/presets/vue3-webpack/tsconfig.json
+++ b/code/presets/vue3-webpack/tsconfig.json
@@ -4,6 +4,5 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index f2d7817975dd..ac6d6b58be45 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit-html",
@@ -54,9 +54,9 @@
   "dependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/core-webpack": "7.0.0-alpha.48",
-    "@types/node": "^16.0.0",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/core-webpack": "7.0.0-alpha.51",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "babel-plugin-bundled-import-meta": "^0.3.1",
     "react": "16.14.0",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "lit-html": "2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "lit-html": "^1.4.1 || ^2.0.0"
@@ -81,5 +81,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/presets/web-components-webpack/tsconfig.json b/code/presets/web-components-webpack/tsconfig.json
index d9463d503988..a4429176e35f 100644
--- a/code/presets/web-components-webpack/tsconfig.json
+++ b/code/presets/web-components-webpack/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "include": ["src/**/*"]
 }
diff --git a/code/renderers/html/jest.config.js b/code/renderers/html/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/html/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 79a6c4bd1634..80623528ac6e 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -51,19 +51,19 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*"
@@ -81,5 +81,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts
index 419013e7372a..1920c6d9d767 100644
--- a/code/renderers/html/src/docs/sourceDecorator.ts
+++ b/code/renderers/html/src/docs/sourceDecorator.ts
@@ -5,7 +5,7 @@ import { addons, useEffect } from '@storybook/addons';
 import type { PartialStoryFn } from '@storybook/types';
 import { dedent } from 'ts-dedent';
 
-import type { HtmlFramework, StoryContext } from '../types';
+import type { HtmlRenderer, StoryContext } from '../types';
 
 import type { StoryFn } from '../public-types';
 
@@ -36,7 +36,7 @@ function applyTransformSource(source: string, context: StoryContext): string {
   return transformSource(source, context);
 }
 
-export function sourceDecorator(storyFn: PartialStoryFn<HtmlFramework>, context: StoryContext) {
+export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context: StoryContext) {
   const story = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as StoryFn)(context.args, context)
     : storyFn();
diff --git a/code/renderers/html/src/public-api.ts b/code/renderers/html/src/public-api.ts
index 71028b568418..bc813beb0933 100644
--- a/code/renderers/html/src/public-api.ts
+++ b/code/renderers/html/src/public-api.ts
@@ -1,19 +1,19 @@
 /* eslint-disable prefer-destructuring */
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
-import type { HtmlFramework } from './types';
+import type { HtmlRenderer } from './types';
 
 import { renderToCanvas, render } from './render';
 
 const FRAMEWORK = 'html';
 
-interface ClientApi extends Addon_ClientStoryApi<HtmlFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<HtmlRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
 }
 
-const api = start(renderToCanvas, { render });
+const api = start<HtmlRenderer>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts
index 0591c18212b2..f2de4d1fac05 100644
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@@ -2,33 +2,37 @@ import type {
   AnnotatedStoryFn,
   Args,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
+import type { HtmlRenderer } from './types';
 
-import type { HtmlFramework } from './types';
-
-export type { Args, ArgTypes, Parameters } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { HtmlRenderer };
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<HtmlFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<HtmlRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
@@ -40,3 +44,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<HtmlRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<HtmlRenderer, TArgs>;
diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts
index 05a2d9e9721b..3b40e1e50636 100644
--- a/code/renderers/html/src/render.ts
+++ b/code/renderers/html/src/render.ts
@@ -5,11 +5,11 @@ import global from 'global';
 import { dedent } from 'ts-dedent';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { HtmlFramework } from './types';
+import type { HtmlRenderer } from './types';
 
 const { Node } = global;
 
-export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
+export const render: ArgsStoryFn<HtmlRenderer> = (args, context) => {
   const { id, component: Component } = context;
 
   if (typeof Component === 'string') {
@@ -42,8 +42,8 @@ export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
 };
 
 export function renderToCanvas(
-  { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>,
-  canvasElement: HtmlFramework['canvasElement']
+  { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlRenderer>,
+  canvasElement: HtmlRenderer['canvasElement']
 ) {
   const element = storyFn();
   showMain();
diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts
index 0aac594ea9a6..992efc87db72 100644
--- a/code/renderers/html/src/types.ts
+++ b/code/renderers/html/src/types.ts
@@ -1,7 +1,7 @@
 import type {
   ArgsStoryFn,
   StoryContext as DefaultStoryContext,
-  WebFramework,
+  WebRenderer,
 } from '@storybook/types';
 
 import type { parameters } from './config';
@@ -15,11 +15,15 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface HtmlFramework extends WebFramework {
-  component: string | HTMLElement | ArgsStoryFn<HtmlFramework>;
+/**
+ * @deprecated Use `HtmlRenderer` instead.
+ */
+export type HtmlFramework = HtmlRenderer;
+export interface HtmlRenderer extends WebRenderer {
+  component: string | HTMLElement | ArgsStoryFn<HtmlRenderer>;
   storyResult: StoryFnHtmlReturnType;
 }
 
-export type StoryContext = DefaultStoryContext<HtmlFramework> & {
-  parameters: DefaultStoryContext<HtmlFramework>['parameters'] & typeof parameters;
+export type StoryContext = DefaultStoryContext<HtmlRenderer> & {
+  parameters: DefaultStoryContext<HtmlRenderer>['parameters'] & typeof parameters;
 };
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
index c09a2ad9cee2..bdba2f4c7773 100644
--- a/code/renderers/html/template/cli/js/Button.stories.js
+++ b/code/renderers/html/template/cli/js/Button.stories.js
@@ -1,17 +1,14 @@
 import { createButton } from './Button';
 
-// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/html/writing-stories/introduction
 export default {
   title: 'Example/Button',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
   render: ({ label, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
     return createButton({ label, ...args });
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     label: { control: 'text' },
@@ -24,6 +21,7 @@ export default {
   },
 };
 
+// More on writing stories with args: https://storybook.js.org/docs/7.0/html/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
index c6f0c95c6e58..e5f8f59e7878 100644
--- a/code/renderers/html/template/cli/js/Header.stories.js
+++ b/code/renderers/html/template/cli/js/Header.stories.js
@@ -2,14 +2,14 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/7.0/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js
index 047e0ac7ca5e..a74a415ab94d 100644
--- a/code/renderers/html/template/cli/js/Page.stories.js
+++ b/code/renderers/html/template/cli/js/Page.stories.js
@@ -5,14 +5,14 @@ export default {
   title: 'Example/Page',
   render: () => createPage(),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/html/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/html/template/cli/ts/Button.stories.ts b/code/renderers/html/template/cli/ts/Button.stories.ts
index aff3afb0ce00..1a55ba472b1b 100644
--- a/code/renderers/html/template/cli/ts/Button.stories.ts
+++ b/code/renderers/html/template/cli/ts/Button.stories.ts
@@ -5,14 +5,12 @@ import { createButton } from './Button';
 // More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
     return createButton(args);
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     label: { control: 'text' },
@@ -28,7 +26,7 @@ const meta: Meta<ButtonProps> = {
 export default meta;
 type Story = StoryObj<ButtonProps>;
 
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/html/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
diff --git a/code/renderers/html/template/cli/ts/Header.stories.ts b/code/renderers/html/template/cli/ts/Header.stories.ts
index 5fee0791e4fd..740e913c70e8 100644
--- a/code/renderers/html/template/cli/ts/Header.stories.ts
+++ b/code/renderers/html/template/cli/ts/Header.stories.ts
@@ -4,14 +4,14 @@ import { createHeader } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/html/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/html/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => createHeader(args),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
     layout: 'fullscreen',
   },
-  // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/7.0/html/api/argtypes
   argTypes: {
     onLogin: { action: 'onLogin' },
     onLogout: { action: 'onLogout' },
diff --git a/code/renderers/html/template/cli/ts/Page.stories.ts b/code/renderers/html/template/cli/ts/Page.stories.ts
index 65131c380bff..67407b7b0fae 100644
--- a/code/renderers/html/template/cli/ts/Page.stories.ts
+++ b/code/renderers/html/template/cli/ts/Page.stories.ts
@@ -6,7 +6,7 @@ const meta: Meta = {
   title: 'Example/Page',
   render: () => createPage(),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/html/configure/story-layout
     layout: 'fullscreen',
   },
 };
@@ -15,7 +15,7 @@ export default meta;
 
 export const LoggedOut: StoryObj = {};
 
-// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/html/writing-tests/interaction-testing
 export const LoggedIn: StoryObj = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/html/tsconfig.json b/code/renderers/html/tsconfig.json
index f3e444ef0f7a..daa7b13b26b2 100644
--- a/code/renderers/html/tsconfig.json
+++ b/code/renderers/html/tsconfig.json
@@ -3,6 +3,5 @@
   "compilerOptions": {
     "strict": true
   },
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/renderers/preact/jest.config.js b/code/renderers/preact/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/preact/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 27c8d2331bc1..0b98102522fd 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
@@ -51,10 +51,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "preact": "^10.5.13",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "preact": "^8.0.0||^10.0.0"
@@ -80,5 +80,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/preact/src/public-api.ts b/code/renderers/preact/src/public-api.ts
index 9bb5613a82c2..81298c962771 100644
--- a/code/renderers/preact/src/public-api.ts
+++ b/code/renderers/preact/src/public-api.ts
@@ -3,9 +3,9 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas } from './render';
-import type { PreactFramework } from './types';
+import type { PreactRenderer } from './types';
 
-export interface ClientApi extends Addon_ClientStoryApi<PreactFramework['storyResult']> {
+export interface ClientApi extends Addon_ClientStoryApi<PreactRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
@@ -13,7 +13,7 @@ export interface ClientApi extends Addon_ClientStoryApi<PreactFramework['storyRe
 }
 
 const FRAMEWORK = 'preact';
-const api = start(renderToCanvas);
+const api = start<PreactRenderer>(renderToCanvas);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts
index ecee7291c1ec..33035dd43f44 100644
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@@ -3,31 +3,36 @@ import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-import type { PreactFramework } from './types';
+import type { PreactRenderer } from './types';
 
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { PreactRenderer };
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<PreactFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<PreactRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
@@ -39,3 +44,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<PreactRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<PreactRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<PreactRenderer, TArgs>;
diff --git a/code/renderers/preact/src/render.tsx b/code/renderers/preact/src/render.tsx
index c90b5bfc8da5..37403636a945 100644
--- a/code/renderers/preact/src/render.tsx
+++ b/code/renderers/preact/src/render.tsx
@@ -3,11 +3,11 @@ import * as preact from 'preact';
 import { dedent } from 'ts-dedent';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { StoryFnPreactReturnType, PreactFramework } from './types';
+import type { StoryFnPreactReturnType, PreactRenderer } from './types';
 
 const { h } = preact;
 
-export const render: ArgsStoryFn<PreactFramework> = (args, context) => {
+export const render: ArgsStoryFn<PreactRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -35,9 +35,9 @@ function preactRender(story: StoryFnPreactReturnType | null, canvasElement: Elem
 const StoryHarness: preact.FunctionalComponent<{
   name: string;
   title: string;
-  showError: Store_RenderContext<PreactFramework>['showError'];
+  showError: Store_RenderContext<PreactRenderer>['showError'];
   storyFn: () => any;
-  canvasElement: PreactFramework['canvasElement'];
+  canvasElement: PreactRenderer['canvasElement'];
 }> = ({ showError, name, title, storyFn, canvasElement }) => {
   const content = preact.h(storyFn as any, null);
   if (!content) {
@@ -54,8 +54,8 @@ const StoryHarness: preact.FunctionalComponent<{
 };
 
 export function renderToCanvas(
-  { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactFramework>,
-  canvasElement: PreactFramework['canvasElement']
+  { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactRenderer>,
+  canvasElement: PreactRenderer['canvasElement']
 ) {
   if (forceRemount) {
     preactRender(null, canvasElement);
diff --git a/code/renderers/preact/src/types.ts b/code/renderers/preact/src/types.ts
index 8864d47da626..233528349a1e 100644
--- a/code/renderers/preact/src/types.ts
+++ b/code/renderers/preact/src/types.ts
@@ -1,4 +1,4 @@
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 import type { AnyComponent } from 'preact';
 
 export type { RenderContext } from '@storybook/types';
@@ -10,7 +10,14 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface PreactFramework extends WebFramework {
+/**
+ * @dep
+ */
+/**
+ * @deprecated Use `PreactRenderer` instead.
+ */
+export type PreactFramework = PreactRenderer;
+export interface PreactRenderer extends WebRenderer {
   component: AnyComponent<any, any>;
   storyResult: StoryFnPreactReturnType;
 }
diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
index f14dee125a1f..0579c20e3c87 100644
--- a/code/renderers/preact/template/cli/Button.stories.jsx
+++ b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -1,19 +1,17 @@
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/preact/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/preact/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/preact/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     onClick: { action: 'onClick' },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/preact/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/preact/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
index 601ce7648912..88f9d9dc2d1a 100644
--- a/code/renderers/preact/template/cli/Header.stories.jsx
+++ b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -3,10 +3,10 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/preact/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/preact/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/preact/configure/story-layout
     layout: 'fullscreen',
   },
   argTypes: {
diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx
index 77903f60e15a..772a5f556257 100644
--- a/code/renderers/preact/template/cli/Page.stories.jsx
+++ b/code/renderers/preact/template/cli/Page.stories.jsx
@@ -6,14 +6,14 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/preact/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/preact/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/preact/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/preact/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/preact/tsconfig.json b/code/renderers/preact/tsconfig.json
index 52a6b92704df..bd6414b1a14d 100644
--- a/code/renderers/preact/tsconfig.json
+++ b/code/renderers/preact/tsconfig.json
@@ -4,6 +4,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/renderers/react/jest.config.js b/code/renderers/react/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/react/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 134d4e3de5bd..551aa808c669 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -52,14 +52,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/estree": "^0.0.51",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -74,13 +74,12 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.5",
-    "@jest/globals": "^26.6.2",
+    "@babel/core": "^7.20.2",
     "@types/util-deprecate": "^1.0.0",
     "expect-type": "^0.14.2",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "require-from-string": "^2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -104,5 +103,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/react/src/__test__/Button.stories.tsx b/code/renderers/react/src/__test__/Button.stories.tsx
index 373b31aad412..2daa84d9b10f 100644
--- a/code/renderers/react/src/__test__/Button.stories.tsx
+++ b/code/renderers/react/src/__test__/Button.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import type { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+import type { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '..';
 
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
diff --git a/code/renderers/react/src/__test__/Button.test.tsx b/code/renderers/react/src/__test__/Button.test.tsx
index b685cb204757..0675ee50baf3 100644
--- a/code/renderers/react/src/__test__/Button.test.tsx
+++ b/code/renderers/react/src/__test__/Button.test.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { setProjectAnnotations, composeStories, composeStory } from '@storybook/react';
+import { setProjectAnnotations, composeStories, composeStory } from '..';
 
 import * as stories from './Button.stories';
 
diff --git a/code/renderers/react/src/__test__/internals.test.tsx b/code/renderers/react/src/__test__/internals.test.tsx
index bb4d956a944e..dd4eb1b86ed0 100644
--- a/code/renderers/react/src/__test__/internals.test.tsx
+++ b/code/renderers/react/src/__test__/internals.test.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { addons } from '@storybook/addons';
 import { render, screen } from '@testing-library/react';
 
-import { composeStories, composeStory } from '@storybook/react';
+import { composeStories, composeStory } from '..';
 
 import * as stories from './Button.stories';
 
diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
index 7be5004b1650..3a27bda64639 100644
--- a/code/renderers/react/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -1,11 +1,12 @@
 import 'jest-specific-snapshot';
 import path from 'path';
 import fs from 'fs';
+// @ts-expect-error (seems broken/missing)
 import requireFromString from 'require-from-string';
 import { transformFileSync, transformSync } from '@babel/core';
 
 import { inferControls } from '@storybook/store';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import { normalizeNewlines } from '@storybook/docs-tools';
 
 import type { StoryContext } from '../types';
@@ -88,7 +89,7 @@ describe('react component properties', () => {
             const rows = inferControls({
               argTypes,
               parameters,
-            } as unknown as StoryContext<Framework>);
+            } as unknown as StoryContext<Renderer>);
             expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
           });
         }
diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
index 75e9d4616972..cbef75139433 100644
--- a/code/renderers/react/src/docs/jsxDecorator.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -9,7 +9,7 @@ import type { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/types
 import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';
 
-import type { ReactFramework } from '../types';
+import type { ReactRenderer } from '../types';
 
 import { isMemo, isForwardRef } from './lib';
 
@@ -23,14 +23,14 @@ type JSXOptions = Options & {
   /** Override the display name used for a component */
   displayName?: string | Options['displayName'];
   /** A function ran after a story is rendered */
-  transformSource?(dom: string, context?: StoryContext<ReactFramework>): string;
+  transformSource?(dom: string, context?: StoryContext<ReactRenderer>): string;
 };
 
 /** Run the user supplied transformSource function if it exists */
 const applyTransformSource = (
   domString: string,
   options: JSXOptions,
-  context?: StoryContext<ReactFramework>
+  context?: StoryContext<ReactRenderer>
 ) => {
   if (typeof options.transformSource !== 'function') {
     return domString;
@@ -132,7 +132,7 @@ const defaultOpts = {
   showDefaultProps: false,
 };
 
-export const skipJsxRender = (context: StoryContext<ReactFramework>) => {
+export const skipJsxRender = (context: StoryContext<ReactRenderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -160,8 +160,8 @@ const mdxToJsx = (node: any) => {
 };
 
 export const jsxDecorator = (
-  storyFn: PartialStoryFn<ReactFramework>,
-  context: StoryContext<ReactFramework>
+  storyFn: PartialStoryFn<ReactRenderer>,
+  context: StoryContext<ReactRenderer>
 ) => {
   const channel = addons.getChannel();
   const skip = skipJsxRender(context);
@@ -188,7 +188,7 @@ export const jsxDecorator = (
 
   // Exclude decorators from source code snippet by default
   const storyJsx = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<ReactFramework>)(context.args, context)
+    ? (context.originalStoryFn as ArgsStoryFn<ReactRenderer>)(context.args, context)
     : story;
 
   const sourceJsx = mdxToJsx(storyJsx);
diff --git a/code/renderers/react/src/docs/propTypes/generateFuncSignature.test.ts b/code/renderers/react/src/docs/propTypes/generateFuncSignature.test.ts
index c62464b01e1b..7dfb528480ea 100644
--- a/code/renderers/react/src/docs/propTypes/generateFuncSignature.test.ts
+++ b/code/renderers/react/src/docs/propTypes/generateFuncSignature.test.ts
@@ -3,12 +3,14 @@ import { generateFuncSignature, generateShortFuncSignature } from './generateFun
 
 describe('generateFuncSignature', () => {
   it('should return an empty string when there is no @params and @returns tags', () => {
+    // @ts-expect-error (invalid input)
     const result = generateFuncSignature(null, null);
 
     expect(result).toBe('');
   });
 
   it('should return a signature with a single arg when there is a @param tag with a name', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -16,6 +18,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should return a signature with a single arg when there is a @param tag with a name and a type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {SyntheticEvent} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -23,6 +26,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should return a signature with a single arg when there is a @param tag with a name, a type and a desc', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc(
       '@param {SyntheticEvent} event - React event'
     ).extractedTags;
@@ -32,6 +36,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param of record type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {{a: number}} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -39,6 +44,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param of union type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {(number|boolean)} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -46,6 +52,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param of array type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {number[]} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -53,6 +60,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param with a nullable type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {?number} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -60,6 +68,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param with a non nullable type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {!number} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -67,6 +76,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support optional @param with []', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {number} [event]').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -74,6 +84,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support optional @param with =', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {number=} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -81,6 +92,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @param of type any', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param {*} event').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -88,6 +100,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support multiple @param tags', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc(
       '@param {SyntheticEvent} event\n@param {string} customData'
     ).extractedTags;
@@ -97,6 +110,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should return a signature with a return type when there is a @returns with a type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -104,6 +118,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @returns of record type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {{a: number, b: string}}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -111,6 +126,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @returns of array type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {integer[]}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -118,6 +134,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @returns of union type', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {(number|boolean)}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -125,6 +142,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @returns type any', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {*}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -132,6 +150,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should support @returns of type void', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {void}').extractedTags;
     const result = generateFuncSignature(params, returns);
 
@@ -139,6 +158,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should return a full signature when there is a single @param tag and a @returns', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc(
       '@param {SyntheticEvent} event - React event.\n@returns {string}'
     ).extractedTags;
@@ -148,6 +168,7 @@ describe('generateFuncSignature', () => {
   });
 
   it('should return a full signature when there is a multiple @param tags and a @returns', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc(
       '@param {SyntheticEvent} event - React event.\n@param {string} data\n@returns {string}'
     ).extractedTags;
@@ -159,12 +180,14 @@ describe('generateFuncSignature', () => {
 
 describe('generateShortFuncSignature', () => {
   it('should return an empty string when there is no @params and @returns tags', () => {
+    // @ts-expect-error (invalid input)
     const result = generateShortFuncSignature(null, null);
 
     expect(result).toBe('');
   });
 
   it('should return ( ... ) when there is @params', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param event').extractedTags;
     const result = generateShortFuncSignature(params, returns);
 
@@ -172,6 +195,7 @@ describe('generateShortFuncSignature', () => {
   });
 
   it('should return ( ... ) => returnsType when there is @params and a @returns', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@param event\n@returns {string}').extractedTags;
     const result = generateShortFuncSignature(params, returns);
 
@@ -179,6 +203,7 @@ describe('generateShortFuncSignature', () => {
   });
 
   it('should return () => returnsType when there is only a @returns', () => {
+    // @ts-expect-error (unsafe)
     const { params, returns } = parseJsDoc('@returns {string}').extractedTags;
     const result = generateShortFuncSignature(params, returns);
 
diff --git a/code/renderers/react/src/docs/propTypes/handleProp.test.tsx b/code/renderers/react/src/docs/propTypes/handleProp.test.tsx
index 031e7384aa27..3a71713e250f 100644
--- a/code/renderers/react/src/docs/propTypes/handleProp.test.tsx
+++ b/code/renderers/react/src/docs/propTypes/handleProp.test.tsx
@@ -123,7 +123,7 @@ describe('enhancePropTypesProp', () => {
             value4: string
           }`;
 
-          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+          expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
         });
 
         it('should not have a deep object as summary', () => {
@@ -155,7 +155,7 @@ describe('enhancePropTypesProp', () => {
             return <div>Inlined FunctionalComponent!</div>;
           }`;
 
-          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+          expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
         });
 
         it('should not use identifier of a HTML element', () => {
@@ -173,7 +173,7 @@ describe('enhancePropTypesProp', () => {
           const expectedDetail =
             '<div>Hello world from Montreal, Quebec, Canada!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>';
 
-          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+          expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
         });
 
         it('should support element without identifier', () => {
@@ -192,7 +192,7 @@ describe('enhancePropTypesProp', () => {
               return <div>Inlined FunctionalComponent!</div>;
             }`;
 
-          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+          expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
         });
 
         describe('when it is not a known type', () => {
@@ -332,7 +332,7 @@ describe('enhancePropTypesProp', () => {
         another4: string
       }`;
 
-      expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not have a deep shape as summary', () => {
@@ -414,7 +414,7 @@ describe('enhancePropTypesProp', () => {
           ho: string
         }`;
 
-      expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should support short object in enum summary', () => {
@@ -491,7 +491,7 @@ describe('enhancePropTypesProp', () => {
           }
         }`;
 
-      expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     describe('func', () => {
@@ -620,7 +620,7 @@ describe('enhancePropTypesProp', () => {
           anotherAnother: string
         })`;
 
-        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should not have deep object in summary', () => {
@@ -700,7 +700,7 @@ describe('enhancePropTypesProp', () => {
           anotherAnother: string
         })`;
 
-        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should not have a deep shape in summary', () => {
@@ -828,7 +828,7 @@ describe('enhancePropTypesProp', () => {
           another4: string
         }]`;
 
-        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should not have deep object in summary', () => {
@@ -918,7 +918,7 @@ describe('enhancePropTypesProp', () => {
           another4: string
         }]`;
 
-        expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(type.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should not have deep shape in summary', () => {
@@ -973,8 +973,8 @@ describe('enhancePropTypesProp', () => {
 
       const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
 
-      expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long object', () => {
@@ -984,7 +984,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('object');
+      expect(defaultValue?.summary).toBe('object');
 
       const expectedDetail = `{
         foo: 'foo',
@@ -992,7 +992,7 @@ describe('enhancePropTypesProp', () => {
         another: 'another'
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not have deep object in summary', () => {
@@ -1002,7 +1002,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('object');
+      expect(defaultValue?.summary).toBe('object');
     });
 
     it('should support short function', () => {
@@ -1010,8 +1010,8 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('() => {}');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('() => {}');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long function', () => {
@@ -1023,7 +1023,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('func');
+      expect(defaultValue?.summary).toBe('func');
 
       const expectedDetail = `(foo, bar) => {
         const concat = foo + bar;
@@ -1031,7 +1031,7 @@ describe('enhancePropTypesProp', () => {
         return append
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should use the name of function when available and indicate that args are present', () => {
@@ -1041,13 +1041,13 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('concat( ... )');
+      expect(defaultValue?.summary).toBe('concat( ... )');
 
       const expectedDetail = `function concat(a, b) {
         return a + b
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should use the name of function when available', () => {
@@ -1057,13 +1057,13 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('hello()');
+      expect(defaultValue?.summary).toBe('hello()');
 
       const expectedDetail = `function hello() {
         return 'hello'
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should support short element', () => {
@@ -1071,8 +1071,8 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<div>Hey!</div>');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('<div>Hey!</div>');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long element', () => {
@@ -1084,8 +1084,8 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('element');
-      expect(defaultValue.detail).toBe(
+      expect(defaultValue?.summary).toBe('element');
+      expect(defaultValue?.detail).toBe(
         '<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
       );
     });
@@ -1095,8 +1095,8 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<Component />');
-      expect(defaultValue.detail).toBe('<Component className="toto" />');
+      expect(defaultValue?.summary).toBe('<Component />');
+      expect(defaultValue?.detail).toBe('<Component className="toto" />');
     });
 
     it("should use the name of the React component when it's available", () => {
@@ -1108,13 +1108,13 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
+      expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
 
       const expectedDetail = `function InlinedFunctionalComponent() {
         return <div>Inlined FunctionalComponent!</div>;
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not use the name of an HTML element', () => {
@@ -1122,7 +1122,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).not.toBe('<div />');
+      expect(defaultValue?.summary).not.toBe('<div />');
     });
 
     it('should support short array', () => {
@@ -1130,8 +1130,8 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('[1]');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('[1]');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long array', () => {
@@ -1143,7 +1143,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('array');
+      expect(defaultValue?.summary).toBe('array');
 
       const expectedDetail = `[{
           thing: {
@@ -1154,7 +1154,7 @@ describe('enhancePropTypesProp', () => {
           }
         }]`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not have deep array in summary', () => {
@@ -1162,7 +1162,7 @@ describe('enhancePropTypesProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('array');
+      expect(defaultValue?.summary).toBe('array');
     });
 
     describe('fromRawDefaultProp', () => {
@@ -1172,48 +1172,53 @@ describe('enhancePropTypesProp', () => {
         { type: 'symbol', defaultProp: Symbol('hey!') },
       ].forEach((x) => {
         it(`should support ${x.type}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null);
 
           const { defaultValue } = extractPropDef(component, x.defaultProp);
 
-          expect(defaultValue.summary).toBe(x.defaultProp.toString());
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe(x.defaultProp.toString());
+          expect(defaultValue?.detail).toBeUndefined();
         });
       });
 
       it('should support strings', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, 'foo');
 
-        expect(defaultValue.summary).toBe('"foo"');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('"foo"');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of primitives', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [1, 2, 3]);
 
-        expect(defaultValue.summary).toBe('[1,    2,    3]');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('[1,    2,    3]');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of short object', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
 
-        expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe("[{ 'foo': 'bar' }]");
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of long object', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
 
-        expect(defaultValue.summary).toBe('array');
+        expect(defaultValue?.summary).toBe('array');
 
         const expectedDetail = `[{
           'foo': 'bar',
@@ -1221,24 +1226,26 @@ describe('enhancePropTypesProp', () => {
           'hey': 'ho'
         }]`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should support short object', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar' });
 
-        expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe("{ 'foo': 'bar' }");
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support long object', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
 
-        expect(defaultValue.summary).toBe('object');
+        expect(defaultValue?.summary).toBe('object');
 
         const expectedDetail = `{
           'foo': 'bar',
@@ -1246,41 +1253,45 @@ describe('enhancePropTypesProp', () => {
           'hey': 'ho'
         }`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should support anonymous function', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, () => 'hey!');
 
-        expect(defaultValue.summary).toBe('func');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('func');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support named function', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, function hello() {
           return 'world!';
         });
 
-        expect(defaultValue.summary).toBe('hello()');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('hello()');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support named function with params', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
           return a + b;
         });
 
-        expect(defaultValue.summary).toBe('add( ... )');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('add( ... )');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support React element', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const defaultProp = <ReactComponent />;
@@ -1289,11 +1300,12 @@ describe('enhancePropTypesProp', () => {
 
         const { defaultValue } = extractPropDef(component, defaultProp);
 
-        expect(defaultValue.summary).toBe('<ReactComponent />');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('<ReactComponent />');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support React element with props', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         // @ts-expect-error (Converted from ts-ignore)
@@ -1303,20 +1315,22 @@ describe('enhancePropTypesProp', () => {
 
         const { defaultValue } = extractPropDef(component, defaultProp);
 
-        expect(defaultValue.summary).toBe('<ReactComponent />');
-        expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
+        expect(defaultValue?.summary).toBe('<ReactComponent />');
+        expect(defaultValue?.detail).toBe('<ReactComponent className="toto" />');
       });
 
       it('should support short HTML element', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
 
-        expect(defaultValue.summary).toBe('<div>HTML element</div>');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('<div>HTML element</div>');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support long HTML element', () => {
+        // @ts-expect-error (invalid input)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(
@@ -1324,17 +1338,18 @@ describe('enhancePropTypesProp', () => {
           <div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
         );
 
-        expect(defaultValue.summary).toBe('element');
+        expect(defaultValue?.summary).toBe('element');
 
         const expectedDetail = `<div>
           HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
         </div>`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       ['element', 'elementType'].forEach((x) => {
         it(`should support inlined React class component for ${x}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(
@@ -1346,44 +1361,48 @@ describe('enhancePropTypesProp', () => {
             }
           );
 
-          expect(defaultValue.summary).toBe('<InlinedClassComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedClassComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined anonymous React functional component for ${x}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, () => {
             return <div>Inlined FunctionalComponent!</div>;
           });
 
-          expect(defaultValue.summary).toBe('element');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('element');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined anonymous React functional component with props for ${x}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
             return <div>{foo}</div>;
           });
 
-          expect(defaultValue.summary).toBe('element');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('element');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined named React functional component for ${x}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
             return <div>Inlined FunctionalComponent!</div>;
           });
 
-          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined named React functional component with props for ${x}`, () => {
+          // @ts-expect-error (invalid input)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(
@@ -1393,8 +1412,8 @@ describe('enhancePropTypesProp', () => {
             }
           );
 
-          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
       });
     });
diff --git a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
index 3ff0c2627c2e..37527fd501df 100644
--- a/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
+++ b/code/renderers/react/src/docs/typeScript/handleProp.test.tsx
@@ -85,8 +85,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
 
-      expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long object', () => {
@@ -96,7 +96,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('object');
+      expect(defaultValue?.summary).toBe('object');
 
       const expectedDetail = `{
         foo: 'foo',
@@ -104,7 +104,7 @@ describe('enhanceTypeScriptProp', () => {
         another: 'another'
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not have deep object in summary', () => {
@@ -114,7 +114,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('object');
+      expect(defaultValue?.summary).toBe('object');
     });
 
     it('should support short function', () => {
@@ -122,8 +122,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('() => {}');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('() => {}');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long function', () => {
@@ -135,7 +135,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('func');
+      expect(defaultValue?.summary).toBe('func');
 
       const expectedDetail = `(foo, bar) => {
         const concat = foo + bar;
@@ -143,7 +143,7 @@ describe('enhanceTypeScriptProp', () => {
         return append
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should use the name of function when available and indicate that args are present', () => {
@@ -153,13 +153,13 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('concat( ... )');
+      expect(defaultValue?.summary).toBe('concat( ... )');
 
       const expectedDetail = `function concat(a, b) {
         return a + b
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should use the name of function when available', () => {
@@ -169,13 +169,13 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('hello()');
+      expect(defaultValue?.summary).toBe('hello()');
 
       const expectedDetail = `function hello() {
         return 'hello'
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should support short element', () => {
@@ -183,8 +183,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<div>Hey!</div>');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('<div>Hey!</div>');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long element', () => {
@@ -196,8 +196,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('element');
-      expect(defaultValue.detail).toBe(
+      expect(defaultValue?.summary).toBe('element');
+      expect(defaultValue?.detail).toBe(
         '<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
       );
     });
@@ -207,8 +207,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<Component />');
-      expect(defaultValue.detail).toBe('<Component className="toto" />');
+      expect(defaultValue?.summary).toBe('<Component />');
+      expect(defaultValue?.detail).toBe('<Component className="toto" />');
     });
 
     it("should use the name of the React component when it's available", () => {
@@ -220,13 +220,13 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
+      expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
 
       const expectedDetail = `function InlinedFunctionalComponent() {
         return <div>Inlined FunctionalComponent!</div>;
       }`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not use the name of an HTML element', () => {
@@ -234,7 +234,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).not.toBe('<div />');
+      expect(defaultValue?.summary).not.toBe('<div />');
     });
 
     it('should support short array', () => {
@@ -242,8 +242,8 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('[1]');
-      expect(defaultValue.detail).toBeUndefined();
+      expect(defaultValue?.summary).toBe('[1]');
+      expect(defaultValue?.detail).toBeUndefined();
     });
 
     it('should support long array', () => {
@@ -255,7 +255,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('array');
+      expect(defaultValue?.summary).toBe('array');
 
       const expectedDetail = `[{
           thing: {
@@ -266,7 +266,7 @@ describe('enhanceTypeScriptProp', () => {
           }
         }]`;
 
-      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+      expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
     });
 
     it('should not have deep array in summary', () => {
@@ -274,7 +274,7 @@ describe('enhanceTypeScriptProp', () => {
 
       const { defaultValue } = extractPropDef(component);
 
-      expect(defaultValue.summary).toBe('array');
+      expect(defaultValue?.summary).toBe('array');
     });
 
     describe('fromRawDefaultProp', () => {
@@ -284,48 +284,53 @@ describe('enhanceTypeScriptProp', () => {
         { type: 'symbol', defaultProp: Symbol('hey!') },
       ].forEach((x) => {
         it(`should support ${x.type}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null);
 
           const { defaultValue } = extractPropDef(component, x.defaultProp);
 
-          expect(defaultValue.summary).toBe(x.defaultProp.toString());
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe(x.defaultProp.toString());
+          expect(defaultValue?.detail).toBeUndefined();
         });
       });
 
       it('should support strings', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, 'foo');
 
-        expect(defaultValue.summary).toBe('"foo"');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('"foo"');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of primitives', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [1, 2, 3]);
 
-        expect(defaultValue.summary).toBe('[1,    2,    3]');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('[1,    2,    3]');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of short object', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
 
-        expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe("[{ 'foo': 'bar' }]");
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support array of long object', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
 
-        expect(defaultValue.summary).toBe('array');
+        expect(defaultValue?.summary).toBe('array');
 
         const expectedDetail = `[{
           'foo': 'bar',
@@ -333,24 +338,26 @@ describe('enhanceTypeScriptProp', () => {
           'hey': 'ho'
         }]`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should support short object', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar' });
 
-        expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe("{ 'foo': 'bar' }");
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support long object', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
 
-        expect(defaultValue.summary).toBe('object');
+        expect(defaultValue?.summary).toBe('object');
 
         const expectedDetail = `{
           'foo': 'bar',
@@ -358,41 +365,45 @@ describe('enhanceTypeScriptProp', () => {
           'hey': 'ho'
         }`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       it('should support anonymous function', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, () => 'hey!');
 
-        expect(defaultValue.summary).toBe('func');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('func');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support named function', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, function hello() {
           return 'world!';
         });
 
-        expect(defaultValue.summary).toBe('hello()');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('hello()');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support named function with params', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
           return a + b;
         });
 
-        expect(defaultValue.summary).toBe('add( ... )');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('add( ... )');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support React element', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const defaultProp = <ReactComponent />;
@@ -401,11 +412,12 @@ describe('enhanceTypeScriptProp', () => {
 
         const { defaultValue } = extractPropDef(component, defaultProp);
 
-        expect(defaultValue.summary).toBe('<ReactComponent />');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('<ReactComponent />');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support React element with props', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         // @ts-expect-error (Converted from ts-ignore)
@@ -415,20 +427,22 @@ describe('enhanceTypeScriptProp', () => {
 
         const { defaultValue } = extractPropDef(component, defaultProp);
 
-        expect(defaultValue.summary).toBe('<ReactComponent />');
-        expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
+        expect(defaultValue?.summary).toBe('<ReactComponent />');
+        expect(defaultValue?.detail).toBe('<ReactComponent className="toto" />');
       });
 
       it('should support short HTML element', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
 
-        expect(defaultValue.summary).toBe('<div>HTML element</div>');
-        expect(defaultValue.detail).toBeUndefined();
+        expect(defaultValue?.summary).toBe('<div>HTML element</div>');
+        expect(defaultValue?.detail).toBeUndefined();
       });
 
       it('should support long HTML element', () => {
+        // @ts-expect-error (not strict)
         const component = createTestComponent(null);
 
         const { defaultValue } = extractPropDef(
@@ -436,17 +450,18 @@ describe('enhanceTypeScriptProp', () => {
           <div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
         );
 
-        expect(defaultValue.summary).toBe('element');
+        expect(defaultValue?.summary).toBe('element');
 
         const expectedDetail = `<div>
           HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
         </div>`;
 
-        expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
+        expect(defaultValue?.detail?.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
       });
 
       ['element', 'elementType'].forEach((x) => {
         it(`should support inlined React class component for ${x}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(
@@ -458,44 +473,48 @@ describe('enhanceTypeScriptProp', () => {
             }
           );
 
-          expect(defaultValue.summary).toBe('<InlinedClassComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedClassComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined anonymous React functional component for ${x}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, () => {
             return <div>Inlined FunctionalComponent!</div>;
           });
 
-          expect(defaultValue.summary).toBe('element');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('element');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined anonymous React functional component with props for ${x}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
             return <div>{foo}</div>;
           });
 
-          expect(defaultValue.summary).toBe('element');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('element');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined named React functional component for ${x}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
             return <div>Inlined FunctionalComponent!</div>;
           });
 
-          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
 
         it(`should support inlined named React functional component with props for ${x}`, () => {
+          // @ts-expect-error (not strict)
           const component = createTestComponent(null, x);
 
           const { defaultValue } = extractPropDef(
@@ -505,8 +524,8 @@ describe('enhanceTypeScriptProp', () => {
             }
           );
 
-          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
-          expect(defaultValue.detail).toBeUndefined();
+          expect(defaultValue?.summary).toBe('<InlinedFunctionalComponent />');
+          expect(defaultValue?.detail).toBeUndefined();
         });
       });
     });
diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx
index b6fde0ed54ab..ca761e807b0a 100644
--- a/code/renderers/react/src/public-api.tsx
+++ b/code/renderers/react/src/public-api.tsx
@@ -1,23 +1,18 @@
 /* eslint-disable prefer-destructuring */
-import type {
-  Addon_ClientStoryApi,
-  Addon_Loadable,
-  Args,
-  DecoratorFunction,
-} from '@storybook/types';
 import { start } from '@storybook/core-client';
+import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 
-import { renderToCanvas, render } from './render';
-import type { ReactFramework } from './types';
+import { render, renderToCanvas } from './render';
+import type { ReactRenderer } from './types';
 
-interface ClientApi extends Addon_ClientStoryApi<ReactFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
 }
 const FRAMEWORK = 'react';
 
-const api = start(renderToCanvas, { render });
+const api = start<ReactRenderer>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
@@ -28,5 +23,3 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
 export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args);
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const raw: ClientApi['raw'] = api.clientApi.raw;
-
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<ReactFramework, TArgs>;
diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx
index 42aaf6217feb..68b68fd23b28 100644
--- a/code/renderers/react/src/public-types.test.tsx
+++ b/code/renderers/react/src/public-types.test.tsx
@@ -1,18 +1,17 @@
 import { describe, test } from '@jest/globals';
-import type { StoryAnnotations } from '@storybook/types';
 
 import { satisfies } from '@storybook/core-common';
+import type { Args, StoryAnnotations, StrictArgs } from '@storybook/types';
 import { expectTypeOf } from 'expect-type';
 import type { KeyboardEventHandler, ReactNode } from 'react';
 import React from 'react';
 
 import type { SetOptional } from 'type-fest';
 
-import type { DecoratorFn } from './public-api';
-import type { Meta, StoryObj } from './public-types';
-import type { ReactFramework } from './types';
+import type { Decorator, Meta, StoryObj } from './public-types';
+import type { ReactRenderer } from './types';
 
-type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactFramework, Args, RequiredArgs>;
+type ReactStory<TArgs, TRequiredArgs> = StoryAnnotations<ReactRenderer, TArgs, TRequiredArgs>;
 
 type ButtonProps = { label: string; disabled: boolean };
 const Button: (props: ButtonProps) => JSX.Element = () => <></>;
@@ -141,7 +140,7 @@ describe('Story args can be inferred', () => {
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
-  const withDecorator: DecoratorFn<{ decoratorArg: number }> = (Story, { args }) => (
+  const withDecorator: Decorator<{ decoratorArg: number }> = (Story, { args }) => (
     <>
       Decorator: {args.decoratorArg}
       <Story args={{ decoratorArg: 0 }} />
@@ -166,17 +165,31 @@ describe('Story args can be inferred', () => {
   test('Correct args are inferred when type is widened for multiple decorators', () => {
     type Props = ButtonProps & { decoratorArg: number; decoratorArg2: string };
 
-    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (Story, { args }) => (
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (Story, { args }) => (
       <>
         Decorator: {args.decoratorArg2}
         <Story />
       </>
     );
 
+    // decorator is not using args
+    const thirdDecorator: Decorator<Args> = (Story) => (
+      <>
+        <Story />
+      </>
+    );
+
+    // decorator is not using args
+    const fourthDecorator: Decorator<StrictArgs> = (Story) => (
+      <>
+        <Story />
+      </>
+    );
+
     const meta = satisfies<Meta<Props>>()({
       component: Button,
       args: { disabled: false },
-      decorators: [withDecorator, secondDecorator],
+      decorators: [withDecorator, secondDecorator, thirdDecorator, fourthDecorator],
     });
 
     const Basic: StoryObj<typeof meta> = {
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
index 531ece5874ed..d488f686a5fa 100644
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@@ -4,15 +4,18 @@ import type {
   ArgsFromMeta,
   ArgsStoryFn,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-
 import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
 import type { SetOptional, Simplify } from 'type-fest';
+import type { ReactRenderer } from './types';
 
-import type { ReactFramework } from './types';
-
-export { ReactFramework };
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { ReactRenderer };
 
 type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -22,8 +25,8 @@ type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
-  ? ComponentAnnotations<ReactFramework, ComponentProps<TCmpOrArgs>>
-  : ComponentAnnotations<ReactFramework, TCmpOrArgs>;
+  ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
+  : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
@@ -31,8 +34,8 @@ export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
-  ? AnnotatedStoryFn<ReactFramework, ComponentProps<TCmpOrArgs>>
-  : AnnotatedStoryFn<ReactFramework, TCmpOrArgs>;
+  ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
+  : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
@@ -40,26 +43,33 @@ export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<ReactFramework, any>;
+  render?: ArgsStoryFn<ReactRenderer, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
       (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
-        ArgsFromMeta<ReactFramework, TMetaOrCmpOrArgs>
+        ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        ReactFramework,
+        ReactRenderer,
         TArgs,
-        SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
+        SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>
       >
     : never
   : TMetaOrCmpOrArgs extends ComponentType<any>
-  ? StoryAnnotations<ReactFramework, ComponentProps<TMetaOrCmpOrArgs>>
-  : StoryAnnotations<ReactFramework, TMetaOrCmpOrArgs>;
+  ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
+  : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
 
-type ActionArgs<RArgs> = {
-  [P in keyof RArgs as ((...args: any[]) => void) extends RArgs[P] ? P : never]: RArgs[P];
+type ActionArgs<TArgs> = {
+  // This can be read as: filter TArgs on functions where we can assign a void function to that function.
+  // The docs addon argsEnhancers can only safely provide a default value for void functions.
+  // Other kind of required functions should be provided by the user.
+  [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any
+    ? ((...args: any[]) => void) extends TArgs[P]
+      ? P
+      : never
+    : never]: TArgs[P];
 };
 
 /**
@@ -124,3 +134,11 @@ export type Story<TArgs = Args> = StoryFn<TArgs>;
  * ```
  */
 export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
+
+/**
+ * @deprecated Use Decorator instead.
+ */
+export type DecoratorFn = DecoratorFunction<ReactRenderer>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<ReactRenderer, TArgs>;
diff --git a/code/renderers/react/src/render.tsx b/code/renderers/react/src/render.tsx
index 8b77447dd5ae..d0a2c112e722 100644
--- a/code/renderers/react/src/render.tsx
+++ b/code/renderers/react/src/render.tsx
@@ -14,14 +14,14 @@ import type { Root as ReactRoot } from 'react-dom/client';
 
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { ReactFramework, StoryContext } from './types';
+import type { ReactRenderer, StoryContext } from './types';
 
 const { FRAMEWORK_OPTIONS } = global;
 
 // A map of all rendered React 18 nodes
 const nodes = new Map<Element, ReactRoot>();
 
-export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
+export const render: ArgsStoryFn<ReactRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -135,10 +135,10 @@ export async function renderToCanvas(
     showMain,
     showException,
     forceRemount,
-  }: Store_RenderContext<ReactFramework>,
-  canvasElement: ReactFramework['canvasElement']
+  }: Store_RenderContext<ReactRenderer>,
+  canvasElement: ReactRenderer['canvasElement']
 ) {
-  const Story = unboundStoryFn as FC<StoryContext<ReactFramework>>;
+  const Story = unboundStoryFn as FC<StoryContext<ReactRenderer>>;
 
   const content = (
     <ErrorBoundary showMain={showMain} showException={showException}>
diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/testing-api.ts
index c1213f837eb7..08bfe820793b 100644
--- a/code/renderers/react/src/testing-api.ts
+++ b/code/renderers/react/src/testing-api.ts
@@ -14,7 +14,7 @@ import { deprecate } from '@storybook/client-logger';
 
 import { render } from './render';
 import type { Meta } from './public-types';
-import type { ReactFramework } from './types';
+import type { ReactRenderer } from './types';
 
 /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
  *
@@ -32,9 +32,9 @@ import type { ReactFramework } from './types';
  * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
  */
 export function setProjectAnnotations(
-  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
 ) {
-  originalSetProjectAnnotations(projectAnnotations);
+  originalSetProjectAnnotations<ReactRenderer>(projectAnnotations);
 }
 
 /** Preserved for users migrating from `@storybook/testing-react`.
@@ -42,14 +42,14 @@ export function setProjectAnnotations(
  * @deprecated Use setProjectAnnotations instead
  */
 export function setGlobalConfig(
-  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
 ) {
   deprecate(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
   setProjectAnnotations(projectAnnotations);
 }
 
 // This will not be necessary once we have auto preset loading
-const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
+const defaultProjectAnnotations: ProjectAnnotations<ReactRenderer> = {
   render,
 };
 
@@ -80,14 +80,14 @@ const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  */
-export function composeStory<TArgs = Args>(
-  story: Store_ComposedStory<ReactFramework, TArgs>,
+export function composeStory<TArgs extends Args = Args>(
+  story: Store_ComposedStory<ReactRenderer, TArgs>,
   componentAnnotations: Meta<TArgs | any>,
-  projectAnnotations?: ProjectAnnotations<ReactFramework>,
+  projectAnnotations?: ProjectAnnotations<ReactRenderer>,
   exportsName?: string
 ) {
-  return originalComposeStory<ReactFramework, TArgs>(
-    story as Store_ComposedStory<ReactFramework, Args>,
+  return originalComposeStory<ReactRenderer, TArgs>(
+    story as Store_ComposedStory<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
     defaultProjectAnnotations,
@@ -120,15 +120,15 @@ export function composeStory<TArgs = Args>(
  * @param csfExports - e.g. (import * as stories from './Button.stories')
  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  */
-export function composeStories<TModule extends Store_CSFExports<ReactFramework>>(
+export function composeStories<TModule extends Store_CSFExports<ReactRenderer>>(
   csfExports: TModule,
-  projectAnnotations?: ProjectAnnotations<ReactFramework>
+  projectAnnotations?: ProjectAnnotations<ReactRenderer>
 ) {
   // @ts-expect-error (Converted from ts-ignore)
   const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
 
   return composedStories as unknown as Omit<
-    Store_StoriesWithPartialProps<ReactFramework, TModule>,
+    Store_StoriesWithPartialProps<ReactRenderer, TModule>,
     keyof Store_CSFExports
   >;
 }
diff --git a/code/renderers/react/src/types.ts b/code/renderers/react/src/types.ts
index 7f2751988f91..ce3100384fdd 100644
--- a/code/renderers/react/src/types.ts
+++ b/code/renderers/react/src/types.ts
@@ -1,10 +1,14 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 
 export type { Store_RenderContext as RenderContext } from '@storybook/types';
 export type { StoryContext } from '@storybook/types';
 
-export interface ReactFramework extends WebFramework {
+/**
+ * @deprecated Use `ReactRenderer` instead.
+ */
+export type ReactFramework = ReactRenderer;
+export interface ReactRenderer extends WebRenderer {
   component: ComponentType<this['T']>;
   storyResult: StoryFnReactReturnType;
 }
diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js
index f71306d8a3ca..13eb502b1092 100644
--- a/code/renderers/react/template/cli/js/Button.stories.js
+++ b/code/renderers/react/template/cli/js/Button.stories.js
@@ -1,18 +1,16 @@
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/react/template/cli/js/Header.stories.js b/code/renderers/react/template/cli/js/Header.stories.js
index be2999f21267..ecf3ad03017d 100644
--- a/code/renderers/react/template/cli/js/Header.stories.js
+++ b/code/renderers/react/template/cli/js/Header.stories.js
@@ -3,10 +3,10 @@ import { Header } from './Header';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/renderers/react/template/cli/js/Page.stories.js b/code/renderers/react/template/cli/js/Page.stories.js
index 84250fdfe4dd..3f0a546592e2 100644
--- a/code/renderers/react/template/cli/js/Page.stories.js
+++ b/code/renderers/react/template/cli/js/Page.stories.js
@@ -6,14 +6,14 @@ export default {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/react/template/cli/ts/Button.stories.ts b/code/renderers/react/template/cli/ts/Button.stories.ts
index 4da1afda0f76..45457e9cda9b 100644
--- a/code/renderers/react/template/cli/ts/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts/Button.stories.ts
@@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
@@ -17,9 +15,8 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
-  // More on args: https://storybook.js.org/docs/react/writing-stories/args
   args: {
     primary: true,
     label: 'Button',
diff --git a/code/renderers/react/template/cli/ts/Header.stories.ts b/code/renderers/react/template/cli/ts/Header.stories.ts
index 728b2043ce14..18a379082fbe 100644
--- a/code/renderers/react/template/cli/ts/Header.stories.ts
+++ b/code/renderers/react/template/cli/ts/Header.stories.ts
@@ -4,10 +4,10 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
   tags: ['docsPage'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/renderers/react/template/cli/ts/Page.stories.ts b/code/renderers/react/template/cli/ts/Page.stories.ts
index 52c4cb406233..357a46f74d91 100644
--- a/code/renderers/react/template/cli/ts/Page.stories.ts
+++ b/code/renderers/react/template/cli/ts/Page.stories.ts
@@ -7,7 +7,7 @@ const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
     layout: 'fullscreen',
   },
 };
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
 
 export const LoggedOut: Story = {};
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/react/tsconfig.json b/code/renderers/react/tsconfig.json
index 48c7724b6914..357b84b3ab23 100644
--- a/code/renderers/react/tsconfig.json
+++ b/code/renderers/react/tsconfig.json
@@ -6,6 +6,5 @@
     "resolveJsonModule": true,
     "allowJs": true
   },
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/docs/**/*.test.*", "src/**/__testfixtures__/**"]
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/renderers/server/jest.config.js b/code/renderers/server/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/server/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index ad16e0a01237..fdc4e501ac2a 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
@@ -51,18 +51,18 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -77,5 +77,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/server/src/public-api.ts b/code/renderers/server/src/public-api.ts
index 29789db3ad3d..c55854ffc5ac 100644
--- a/code/renderers/server/src/public-api.ts
+++ b/code/renderers/server/src/public-api.ts
@@ -2,17 +2,17 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas, render } from './render';
-import type { ServerFramework } from './types';
+import type { ServerRenderer } from './types';
 
 const FRAMEWORK = 'server';
 
-interface ClientApi extends Addon_ClientStoryApi<ServerFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<ServerRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
 }
 
-const api = start(renderToCanvas, { render });
+const api = start<ServerRenderer>(renderToCanvas, { render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts
index e356f7fef362..dcb8d249a099 100644
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@@ -3,31 +3,35 @@ import type {
   Args,
   ComponentAnnotations,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  DecoratorFunction,
+  LoaderFunction,
+  StrictArgs,
 } from '@storybook/types';
-import type { ServerFramework } from './types';
+import type { ServerRenderer } from './types';
 
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<ServerFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<ServerRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<ServerRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
@@ -39,3 +43,8 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type { ServerRenderer };
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ServerRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<ServerRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<ServerRenderer, TArgs>;
diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts
index cb1049dc3b82..a6f31ee2817d 100644
--- a/code/renderers/server/src/render.ts
+++ b/code/renderers/server/src/render.ts
@@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import type { Store_RenderContext } from '@storybook/types';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { StoryFn, Args, ArgTypes } from './public-types';
-import type { FetchStoryHtmlType, ServerFramework } from './types';
+import type { FetchStoryHtmlType, ServerRenderer } from './types';
 
 const { fetch, Node } = global;
 
@@ -42,7 +42,7 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
   return storyArgs;
 };
 
-export const render: StoryFn<ServerFramework> = (args: Args) => {};
+export const render: StoryFn<ServerRenderer> = (args: Args) => {};
 
 export async function renderToCanvas(
   {
@@ -55,8 +55,8 @@ export async function renderToCanvas(
     storyFn,
     storyContext,
     storyContext: { parameters, args, argTypes },
-  }: Store_RenderContext<ServerFramework>,
-  canvasElement: ServerFramework['canvasElement']
+  }: Store_RenderContext<ServerRenderer>,
+  canvasElement: ServerRenderer['canvasElement']
 ) {
   // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer
   storyFn();
diff --git a/code/renderers/server/src/types.ts b/code/renderers/server/src/types.ts
index dcabd8a41e55..4b562f771fb7 100644
--- a/code/renderers/server/src/types.ts
+++ b/code/renderers/server/src/types.ts
@@ -1,11 +1,15 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 
 export type { RenderContext } from '@storybook/types';
 
 export type StoryFnServerReturnType = any;
-export type StoryContext = StoryContextBase<ServerFramework>;
+export type StoryContext = StoryContextBase<ServerRenderer>;
 
-export interface ServerFramework extends WebFramework {
+/**
+ * @deprecated Use `ServerRenderer` instead.
+ */
+export type ServerFramework = ServerRenderer;
+export interface ServerRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnServerReturnType;
 }
diff --git a/code/renderers/server/tsconfig.json b/code/renderers/server/tsconfig.json
index 43706ac831fe..f53628f70386 100644
--- a/code/renderers/server/tsconfig.json
+++ b/code/renderers/server/tsconfig.json
@@ -1,5 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/renderers/svelte/jest.config.js b/code/renderers/svelte/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/svelte/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 848fdd3cbcd9..ee491fb8defd 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
@@ -55,12 +55,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -71,7 +71,7 @@
     "expect-type": "^0.14.2",
     "svelte": "^3.31.2",
     "svelte-check": "^2.9.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
@@ -90,5 +90,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/svelte/src/decorators.ts b/code/renderers/svelte/src/decorators.ts
index 8bbb2d90e174..b4f516a944c5 100644
--- a/code/renderers/svelte/src/decorators.ts
+++ b/code/renderers/svelte/src/decorators.ts
@@ -1,7 +1,7 @@
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import SlotDecorator from '../templates/SlotDecorator.svelte';
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
 /**
  * Check if an object is a svelte component.
@@ -31,7 +31,7 @@ function unWrap(obj: any) {
  * @param story  the current story
  * @param originalStory the story decorated by the current story
  */
-function prepareStory(context: StoryContext<SvelteFramework>, story: any, originalStory?: any) {
+function prepareStory(context: StoryContext<SvelteRenderer>, story: any, originalStory?: any) {
   let result = unWrap(story);
   if (isSvelteComponent(result)) {
     // wrap the component
@@ -66,10 +66,10 @@ function prepareStory(context: StoryContext<SvelteFramework>, story: any, origin
 export function decorateStory(storyFn: any, decorators: any[]) {
   return decorators.reduce(
     (
-        previousStoryFn: LegacyStoryFn<SvelteFramework>,
-        decorator: DecoratorFunction<SvelteFramework>
+        previousStoryFn: LegacyStoryFn<SvelteRenderer>,
+        decorator: DecoratorFunction<SvelteRenderer>
       ) =>
-      (context: StoryContext<SvelteFramework>) => {
+      (context: StoryContext<SvelteRenderer>) => {
         let story;
         const decoratedStory = decorator((update) => {
           story = previousStoryFn({
@@ -89,6 +89,6 @@ export function decorateStory(storyFn: any, decorators: any[]) {
 
         return prepareStory(context, decoratedStory, story);
       },
-    (context: StoryContext<SvelteFramework>) => prepareStory(context, storyFn(context))
+    (context: StoryContext<SvelteRenderer>) => prepareStory(context, storyFn(context))
   );
 }
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts
index 061dc821d460..e00243aaa564 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { addons, useEffect } from '@storybook/addons';
 import { deprecate } from '@storybook/client-logger';
-import type { ArgTypes, Args, StoryContext, Framework } from '@storybook/types';
+import type { ArgTypes, Args, StoryContext, Renderer } from '@storybook/types';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
 
@@ -10,7 +10,7 @@ import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<Framework>) => {
+const skipSourceRender = (context: StoryContext<Renderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -148,7 +148,7 @@ function getWrapperProperties(component: any) {
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<Framework>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) => {
   const channel = addons.getChannel();
   const skip = skipSourceRender(context);
   const story = storyFn();
diff --git a/code/renderers/svelte/src/public-api.ts b/code/renderers/svelte/src/public-api.ts
index 959a2f331611..2a6a63a82454 100644
--- a/code/renderers/svelte/src/public-api.ts
+++ b/code/renderers/svelte/src/public-api.ts
@@ -1,13 +1,14 @@
 import { start } from '@storybook/core-client';
 import { decorateStory } from './decorators';
 
+import type { SvelteRenderer } from './types';
 import { render, renderToCanvas } from './render';
 
 const {
   configure: coreConfigure,
   clientApi,
   forceReRender,
-} = start(renderToCanvas, {
+} = start<SvelteRenderer>(renderToCanvas, {
   decorateStory,
   render,
 });
diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts
index a0edd3d36151..72855a7bd519 100644
--- a/code/renderers/svelte/src/public-types.test.ts
+++ b/code/renderers/svelte/src/public-types.test.ts
@@ -4,14 +4,14 @@ import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types';
 import { expectTypeOf } from 'expect-type';
 import type { ComponentProps, SvelteComponentTyped } from 'svelte';
 import Button from './__test__/Button.svelte';
-import Decorator from './__test__/Decorator.svelte';
+import Decorator1 from './__test__/Decorator.svelte';
 import Decorator2 from './__test__/Decorator2.svelte';
 
-import type { DecoratorFn, Meta, StoryObj } from './public-types';
-import type { SvelteFramework } from './types';
+import type { Decorator, Meta, StoryObj } from './public-types';
+import type { SvelteRenderer } from './types';
 
 type SvelteStory<Component extends SvelteComponentTyped, Args, RequiredArgs> = StoryAnnotations<
-  SvelteFramework<Component>,
+  SvelteRenderer<Component>,
   Args,
   RequiredArgs
 >;
@@ -27,7 +27,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<SvelteFramework<Button>, { disabled: boolean; label: string }>
+      ComponentAnnotations<SvelteRenderer<Button>, { disabled: boolean; label: string }>
     >();
   });
 
@@ -38,7 +38,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<SvelteFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<SvelteRenderer, { disabled: boolean; label: string }>
     >();
   });
 
@@ -172,11 +172,11 @@ describe('Story args can be inferred', () => {
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
-  const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
+  const withDecorator: Decorator<{ decoratorArg: string }> = (
     storyFn,
     { args: { decoratorArg } }
   ) => ({
-    Component: Decorator,
+    Component: Decorator1,
     props: { decoratorArg },
   });
 
@@ -202,7 +202,7 @@ describe('Story args can be inferred', () => {
   test('Correct args are inferred when type is widened for multiple decorators', () => {
     type Props = ComponentProps<Button> & { decoratorArg: string; decoratorArg2: string };
 
-    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (
       storyFn,
       { args: { decoratorArg2 } }
     ) => ({
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index 11355def873b..4ee935becec2 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -5,12 +5,17 @@ import type {
   ArgsStoryFn,
   ComponentAnnotations,
   DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
 
 import type { ComponentProps, ComponentType, SvelteComponentTyped } from 'svelte';
 import type { SetOptional, Simplify } from 'type-fest';
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
+
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
 
 /**
  * Metadata to configure the stories for a component.
@@ -18,16 +23,16 @@ import type { SvelteFramework } from './types';
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infer Props>
-  ? ComponentAnnotations<SvelteFramework<CmpOrArgs>, Props>
-  : ComponentAnnotations<SvelteFramework, CmpOrArgs>;
+  ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
+  : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped<infer Props>
-  ? AnnotatedStoryFn<SvelteFramework, Props>
-  : AnnotatedStoryFn<SvelteFramework, TCmpOrArgs>;
+  ? AnnotatedStoryFn<SvelteRenderer, Props>
+  : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
@@ -35,21 +40,24 @@ export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<SvelteFramework, any>;
+  render?: ArgsStoryFn<SvelteRenderer, any>;
   component?: ComponentType<infer Component>;
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<SvelteFramework, MetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        SvelteFramework<Component>,
+        SvelteRenderer<Component>,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
   : MetaOrCmpOrArgs extends SvelteComponentTyped
-  ? StoryAnnotations<SvelteFramework<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<SvelteFramework, MetaOrCmpOrArgs>;
+  ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
+  : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<SvelteFramework, TArgs>;
+export type { SvelteRenderer };
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<SvelteRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<SvelteRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<SvelteRenderer, TArgs>;
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index bcd3f421283c..ad2b2a981bfe 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -1,14 +1,15 @@
 /* eslint-disable no-param-reassign */
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { SvelteComponentTyped } from 'svelte';
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
-const componentsByDomElement = new Map<SvelteFramework['canvasElement'], SvelteComponentTyped>();
+const componentsByDomElement = new Map<SvelteRenderer['canvasElement'], SvelteComponentTyped>();
 
-function teardown(canvasElement: SvelteFramework['canvasElement']) {
+function teardown(canvasElement: SvelteRenderer['canvasElement']) {
   if (!componentsByDomElement.has(canvasElement)) {
     return;
   }
@@ -28,8 +29,8 @@ export function renderToCanvas(
     showError,
     storyContext,
     forceRemount,
-  }: Store_RenderContext<SvelteFramework>,
-  canvasElement: SvelteFramework['canvasElement']
+  }: Store_RenderContext<SvelteRenderer>,
+  canvasElement: SvelteRenderer['canvasElement']
 ) {
   const existingComponent = componentsByDomElement.get(canvasElement);
 
@@ -67,7 +68,7 @@ export function renderToCanvas(
   };
 }
 
-export const render: ArgsStoryFn<SvelteFramework> = (args, context) => {
+export const render: ArgsStoryFn<SvelteRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts
index 4a420e636e54..23e76243f702 100644
--- a/code/renderers/svelte/src/types.ts
+++ b/code/renderers/svelte/src/types.ts
@@ -1,7 +1,7 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { ComponentConstructorOptions, ComponentEvents, SvelteComponentTyped } from 'svelte';
 
-export type StoryContext = StoryContextBase<SvelteFramework>;
+export type StoryContext = StoryContextBase<SvelteRenderer>;
 
 export interface ShowErrorArgs {
   title: string;
@@ -31,8 +31,8 @@ type ComponentType<
     : P]: SvelteComponentTyped<Props, Events>[P];
 };
 
-export interface SvelteFramework<C extends SvelteComponentTyped = SvelteComponentTyped>
-  extends WebFramework {
+export interface SvelteRenderer<C extends SvelteComponentTyped = SvelteComponentTyped>
+  extends WebRenderer {
   component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
   storyResult: this['T'] extends Record<string, any>
     ? SvelteStoryResult<this['T'], ComponentEvents<C>>
diff --git a/code/renderers/svelte/template/cli/Button.stories.js b/code/renderers/svelte/template/cli/Button.stories.js
index 90ab6295aec6..1b9408a98b22 100644
--- a/code/renderers/svelte/template/cli/Button.stories.js
+++ b/code/renderers/svelte/template/cli/Button.stories.js
@@ -1,13 +1,10 @@
 import Button from './Button.svelte';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/svelte/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
   render: (args) => ({
     Component: Button,
     props: args,
@@ -27,6 +24,7 @@ export default {
   },
 };
 
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/svelte/template/cli/Header.stories.js b/code/renderers/svelte/template/cli/Header.stories.js
index dd2af26fc9ca..68494a3d2c8f 100644
--- a/code/renderers/svelte/template/cli/Header.stories.js
+++ b/code/renderers/svelte/template/cli/Header.stories.js
@@ -3,7 +3,7 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/svelte/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => ({
     Component: Header,
@@ -15,7 +15,7 @@ export default {
     },
   }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
     layout: 'fullscreen',
   },
   argTypes: {
diff --git a/code/renderers/svelte/template/cli/Page.stories.js b/code/renderers/svelte/template/cli/Page.stories.js
index ce0f8a33ed8d..ab73a661b680 100644
--- a/code/renderers/svelte/template/cli/Page.stories.js
+++ b/code/renderers/svelte/template/cli/Page.stories.js
@@ -4,18 +4,14 @@ import Page from './Page.svelte';
 export default {
   title: 'Example/Page',
   component: Page,
-  render: (args) => ({
-    Component: Page,
-    props: args,
-  }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
     layout: 'fullscreen',
   },
 };
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing
 export const LoggedIn = {
   render: (args) => ({
     Component: Page,
diff --git a/code/renderers/svelte/tsconfig.json b/code/renderers/svelte/tsconfig.json
index f660105084e7..95355eedfc5a 100644
--- a/code/renderers/svelte/tsconfig.json
+++ b/code/renderers/svelte/tsconfig.json
@@ -6,6 +6,5 @@
     "strict": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*", "src/**/*.svelte", "template/**/*", "template/**/*.svelte"],
-  "exclude": []
+  "include": ["src/**/*", "src/**/*.svelte", "template/**/*", "template/**/*.svelte"]
 }
diff --git a/code/renderers/vue/jest.config.js b/code/renderers/vue/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/vue/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index 3bd2c396a8ce..5bf4bac4c205 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Vue renderer",
   "keywords": [
     "storybook"
@@ -51,12 +51,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -64,7 +64,7 @@
     "type-fest": "2.19.0"
   },
   "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "vue": "2.6.14",
     "vue-tsc": "^1.0.9"
   },
@@ -92,5 +92,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/vue/src/decorateStory.ts b/code/renderers/vue/src/decorateStory.ts
index 6cde549fb8c2..fcbae92f50b0 100644
--- a/code/renderers/vue/src/decorateStory.ts
+++ b/code/renderers/vue/src/decorateStory.ts
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { StoryFnVueReturnType, VueFramework } from './types';
+import type { StoryFnVueReturnType, VueRenderer } from './types';
 import { extractProps } from './util';
 import { VALUES } from './render';
 
@@ -12,7 +12,7 @@ export const WRAPS = 'STORYBOOK_WRAPS';
 function prepare(
   rawStory: StoryFnVueReturnType,
   innerStory?: StoryFnVueReturnType,
-  context?: StoryContext<VueFramework>
+  context?: StoryContext<VueRenderer>
 ): VueConstructor | null {
   let story: ComponentOptions<Vue> | VueConstructor;
 
@@ -62,12 +62,12 @@ function prepare(
 }
 
 export function decorateStory(
-  storyFn: LegacyStoryFn<VueFramework>,
-  decorators: DecoratorFunction<VueFramework>[]
+  storyFn: LegacyStoryFn<VueRenderer>,
+  decorators: DecoratorFunction<VueRenderer>[]
 ) {
   return decorators.reduce(
-    (decorated: LegacyStoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
-      let story: VueFramework['storyResult'] | undefined;
+    (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
+      let story: VueRenderer['storyResult'] | undefined;
 
       const decoratedStory = decorator((update) => {
         story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
@@ -82,10 +82,10 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, story) as VueFramework['storyResult'];
+      return prepare(decoratedStory, story) as VueRenderer['storyResult'];
     },
     (context) => {
-      return prepare(storyFn(context), undefined, context) as VueFramework['storyResult'];
+      return prepare(storyFn(context), undefined, context) as VueRenderer['storyResult'];
     }
   );
 }
diff --git a/code/renderers/vue/src/public-api.ts b/code/renderers/vue/src/public-api.ts
index 51826bc601f2..553e42b76c38 100644
--- a/code/renderers/vue/src/public-api.ts
+++ b/code/renderers/vue/src/public-api.ts
@@ -2,20 +2,20 @@
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 import { renderToCanvas, render } from './render';
 import { decorateStory } from './decorateStory';
 
 const FRAMEWORK = 'vue';
 
-interface ClientApi extends Addon_ClientStoryApi<VueFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
   load: (...args: any[]) => void;
 }
 
-const api = start(renderToCanvas, { decorateStory, render });
+const api = start<VueRenderer>(renderToCanvas, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/vue/src/public-types.test.ts b/code/renderers/vue/src/public-types.test.ts
index cd0d3b079b88..0f3b90fbe04d 100644
--- a/code/renderers/vue/src/public-types.test.ts
+++ b/code/renderers/vue/src/public-types.test.ts
@@ -5,9 +5,9 @@ import type { SetOptional } from 'type-fest';
 import type { Component } from 'vue';
 import type { ExtendedVue } from 'vue/types/vue';
 import { Vue } from 'vue/types/vue';
-import type { DecoratorFn, Meta, StoryObj } from './public-types';
+import type { Decorator, Meta, StoryObj } from './public-types';
 import Button from './__tests__/Button.vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 describe('Meta', () => {
   test('Generic parameter of Meta can be a component', () => {
@@ -18,7 +18,7 @@ describe('Meta', () => {
 
     expectTypeOf(meta).toEqualTypeOf<
       ComponentAnnotations<
-        VueFramework,
+        VueRenderer,
         {
           disabled: boolean;
           label: string;
@@ -34,7 +34,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<VueFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<VueRenderer, { disabled: boolean; label: string }>
     >();
   });
 });
@@ -52,7 +52,7 @@ describe('StoryObj', () => {
     });
 
     type Actual = StoryObj<typeof meta>;
-    type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>;
+    type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
     expectTypeOf<Actual>().toEqualTypeOf<Expected>();
   });
 
@@ -60,7 +60,7 @@ describe('StoryObj', () => {
     {
       const meta = satisfies<Meta<typeof Button>>()({ component: Button });
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
     }
     {
@@ -71,11 +71,7 @@ describe('StoryObj', () => {
       // @ts-expect-error disabled not provided ❌
       const Basic: StoryObj<typeof meta> = {};
 
-      type Expected = StoryAnnotations<
-        VueFramework,
-        ButtonProps,
-        SetOptional<ButtonProps, 'label'>
-      >;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
     {
@@ -85,14 +81,14 @@ describe('StoryObj', () => {
         args: { label: 'good' },
       };
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
   });
 
   test('Component can be used as generic parameter for StoryObj', () => {
     expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
-      StoryAnnotations<VueFramework, ButtonProps>
+      StoryAnnotations<VueRenderer, ButtonProps>
     >();
   });
 });
@@ -122,11 +118,11 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
-  const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
+  const withDecorator: Decorator<{ decoratorArg: string }> = (
     storyFn,
     { args: { decoratorArg } }
   ) =>
@@ -146,14 +142,14 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
   test('Correct args are inferred when type is widened for multiple decorators', () => {
     type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
 
-    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (
       storyFn,
       { args: { decoratorArg2 } }
     ) => {
@@ -173,7 +169,7 @@ describe('Story args can be inferred', () => {
       args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
     };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 });
diff --git a/code/renderers/vue/src/public-types.ts b/code/renderers/vue/src/public-types.ts
index 6c125e0795d1..308541a8c237 100644
--- a/code/renderers/vue/src/public-types.ts
+++ b/code/renderers/vue/src/public-types.ts
@@ -5,14 +5,18 @@ import type {
   ArgsStoryFn,
   ComponentAnnotations,
   DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
 import type { SetOptional, Simplify } from 'type-fest';
 import type { Component } from 'vue';
 import type { ExtendedVue } from 'vue/types/vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { VueRenderer };
 
 /**
  * Metadata to configure the stories for a component.
@@ -20,7 +24,7 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -30,7 +34,7 @@ export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -40,20 +44,20 @@ export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<VueFramework, any>;
+  render?: ArgsStoryFn<VueRenderer, any>;
   component?: infer C;
   args?: infer DefaultArgs;
 }
   ? TMetaOrCmpOrArgs extends Component<any> // needed because StoryObj<typeof Button> falls into this branch, see test
-    ? StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
-    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>> extends infer TArgs
+    ? StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
+    : Simplify<ComponentProps<C> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs
     ? StoryAnnotations<
-        VueFramework,
+        VueRenderer,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
 type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
   ? P
@@ -78,4 +82,6 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;
diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts
index 25d5708409fe..22a896d6d939 100644
--- a/code/renderers/vue/src/render.ts
+++ b/code/renderers/vue/src/render.ts
@@ -3,12 +3,12 @@ import { dedent } from 'ts-dedent';
 import Vue from 'vue';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { CombinedVueInstance } from 'vue/types/vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
 
-const map = new Map<VueFramework['canvasElement'], Instance>();
+const map = new Map<VueRenderer['canvasElement'], Instance>();
 type Instance = CombinedVueInstance<
   Vue,
   {
@@ -20,7 +20,7 @@ type Instance = CombinedVueInstance<
   Record<never, any>
 >;
 
-const getRoot = (canvasElement: VueFramework['canvasElement']): Instance => {
+const getRoot = (canvasElement: VueRenderer['canvasElement']): Instance => {
   const cachedInstance = map.get(canvasElement);
   if (cachedInstance != null) return cachedInstance;
 
@@ -49,9 +49,9 @@ const getRoot = (canvasElement: VueFramework['canvasElement']): Instance => {
   return instance;
 };
 
-export const render: ArgsStoryFn<VueFramework> = (args, context) => {
+export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
   const { id, component: Component, argTypes } = context;
-  const component = Component as VueFramework['component'] & {
+  const component = Component as VueRenderer['component'] & {
     __docgenInfo?: { displayName: string };
     props: Record<string, any>;
   };
@@ -91,14 +91,14 @@ export function renderToCanvas(
     showError,
     showException,
     forceRemount,
-  }: Store_RenderContext<VueFramework>,
-  canvasElement: VueFramework['canvasElement']
+  }: Store_RenderContext<VueRenderer>,
+  canvasElement: VueRenderer['canvasElement']
 ) {
   const root = getRoot(canvasElement);
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
-  let mountTarget: Element | VueFramework['canvasElement'] | null;
+  let mountTarget: Element | VueRenderer['canvasElement'] | null;
 
   // Vue2 mount always replaces the mount target with Vue-generated DOM.
   // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM
diff --git a/code/renderers/vue/src/types.ts b/code/renderers/vue/src/types.ts
index a261d6acdea0..4ae4c9c4ab3c 100644
--- a/code/renderers/vue/src/types.ts
+++ b/code/renderers/vue/src/types.ts
@@ -1,4 +1,4 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { Component, AsyncComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/types';
@@ -12,9 +12,13 @@ export type StoryFnVueReturnType =
   | Component<any, any, any, any>
   | AsyncComponent<any, any, any, any>;
 
-export type StoryContext = StoryContextBase<VueFramework>;
+export type StoryContext = StoryContextBase<VueRenderer>;
 
-export interface VueFramework extends WebFramework {
+/**
+ * @deprecated Use `VueRenderer` instead.
+ */
+export type VueFramework = VueRenderer;
+export interface VueRenderer extends WebRenderer {
   component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
   storyResult: StoryFnVueReturnType;
 }
diff --git a/code/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
index 6d152edf381d..bc0b7f4e1787 100644
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ b/code/renderers/vue/template/cli/Button.stories.js
@@ -1,18 +1,15 @@
 import MyButton from './Button.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: MyButton,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { MyButton },
     template: '<my-button @onClick="onClick" v-bind="$props" />',
   }),
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     size: {
@@ -22,6 +19,7 @@ export default {
   },
 };
 
+// More on writing stories with args: https://storybook.js.org/docs/7.0/vue/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/vue/template/cli/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js
index cafa5cc82add..45d160d8862b 100644
--- a/code/renderers/vue/template/cli/Header.stories.js
+++ b/code/renderers/vue/template/cli/Header.stories.js
@@ -3,7 +3,7 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args, { argTypes }) => ({
     props: Object.keys(argTypes),
@@ -14,7 +14,7 @@ export default {
       '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
   }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js
index 5094c2e78802..60f587d873e1 100644
--- a/code/renderers/vue/template/cli/Page.stories.js
+++ b/code/renderers/vue/template/cli/Page.stories.js
@@ -9,13 +9,13 @@ export default {
     template: '<my-page />',
   }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/vue/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
diff --git a/code/renderers/vue/tsconfig.json b/code/renderers/vue/tsconfig.json
index 0c2ba872c20e..4fbfb70f6d7b 100644
--- a/code/renderers/vue/tsconfig.json
+++ b/code/renderers/vue/tsconfig.json
@@ -9,6 +9,5 @@
   "vueCompilerOptions": {
     "target": 2
   },
-  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"],
-  "exclude": []
+  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"]
 }
diff --git a/code/renderers/vue3/jest.config.js b/code/renderers/vue3/jest.config.js
new file mode 100644
index 000000000000..47b606e09fc4
--- /dev/null
+++ b/code/renderers/vue3/jest.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+  transform: {
+    ...baseConfig.transform,
+    '^.+\\.vue$': '@vue/vue3-jest',
+  },
+};
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 330a16e8b375..e61731f02337 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -51,11 +51,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -64,7 +64,8 @@
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
-    "typescript": "~4.6.3",
+    "@vue/vue3-jest": "29",
+    "typescript": "^4.9.3",
     "vue": "^3.2.41",
     "vue-tsc": "^1.0.8"
   },
@@ -91,5 +92,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts
index c066e21a1476..44275f89a636 100644
--- a/code/renderers/vue3/src/decorateStory.ts
+++ b/code/renderers/vue3/src/decorateStory.ts
@@ -3,7 +3,7 @@ import { h } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.
@@ -16,7 +16,7 @@ function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOpti
 }
 
 function prepare(
-  rawStory: VueFramework['storyResult'],
+  rawStory: VueRenderer['storyResult'],
   innerStory?: ConcreteComponent
 ): Component | null {
   const story = rawStory as ComponentOptions;
@@ -41,14 +41,14 @@ function prepare(
 }
 
 export function decorateStory(
-  storyFn: LegacyStoryFn<VueFramework>,
-  decorators: DecoratorFunction<VueFramework>[]
-): LegacyStoryFn<VueFramework> {
+  storyFn: LegacyStoryFn<VueRenderer>,
+  decorators: DecoratorFunction<VueRenderer>[]
+): LegacyStoryFn<VueRenderer> {
   return decorators.reduce(
-    (decorated: LegacyStoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
-      let story: VueFramework['storyResult'] | undefined;
+    (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
+      let story: VueRenderer['storyResult'] | undefined;
 
-      const decoratedStory: VueFramework['storyResult'] = decorator((update) => {
+      const decoratedStory: VueRenderer['storyResult'] = decorator((update) => {
         story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
         return story;
       }, context);
@@ -61,8 +61,8 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, story) as VueFramework['storyResult'];
+      return prepare(decoratedStory, story) as VueRenderer['storyResult'];
     },
-    (context) => prepare(storyFn(context)) as LegacyStoryFn<VueFramework>
+    (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
   );
 }
diff --git a/code/renderers/vue3/src/public-api.ts b/code/renderers/vue3/src/public-api.ts
index ac89d4c26509..f7a0220a0d04 100644
--- a/code/renderers/vue3/src/public-api.ts
+++ b/code/renderers/vue3/src/public-api.ts
@@ -2,14 +2,14 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import type { App } from 'vue';
 import { start } from '@storybook/core-client';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 import { decorateStory } from './decorateStory';
 
 import { render, renderToCanvas } from './render';
 
 const FRAMEWORK = 'vue3';
 
-interface ClientApi extends Addon_ClientStoryApi<VueFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
@@ -17,7 +17,7 @@ interface ClientApi extends Addon_ClientStoryApi<VueFramework['storyResult']> {
   app: App;
 }
 
-const api = start(renderToCanvas, { decorateStory, render });
+const api = start<VueRenderer>(renderToCanvas, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts
index 5cf1257f12af..6114137c9478 100644
--- a/code/renderers/vue3/src/public-types.test.ts
+++ b/code/renderers/vue3/src/public-types.test.ts
@@ -4,8 +4,8 @@ import { expectTypeOf } from 'expect-type';
 import type { SetOptional } from 'type-fest';
 import type { ComponentOptions, FunctionalComponent } from 'vue';
 import { h } from 'vue';
-import type { DecoratorFn, Meta, StoryObj } from './public-types';
-import type { VueFramework } from './types';
+import type { Decorator, Meta, StoryObj } from './public-types';
+import type { VueRenderer } from './types';
 import Button from './__tests__/Button.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
@@ -19,7 +19,7 @@ describe('Meta', () => {
 
     expectTypeOf(meta).toEqualTypeOf<
       ComponentAnnotations<
-        VueFramework,
+        VueRenderer,
         {
           readonly disabled: boolean;
           readonly label: string;
@@ -37,7 +37,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<VueFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<VueRenderer, { disabled: boolean; label: string }>
     >();
   });
 
@@ -78,7 +78,7 @@ describe('StoryObj', () => {
     });
 
     type Actual = StoryObj<typeof meta>;
-    type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>;
+    type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
     expectTypeOf<Actual>().toEqualTypeOf<Expected>();
   });
 
@@ -86,7 +86,7 @@ describe('StoryObj', () => {
     {
       const meta = satisfies<Meta<typeof Button>>()({ component: Button });
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
     }
     {
@@ -97,11 +97,7 @@ describe('StoryObj', () => {
       // @ts-expect-error disabled not provided ❌
       const Basic: StoryObj<typeof meta> = {};
 
-      type Expected = StoryAnnotations<
-        VueFramework,
-        ButtonProps,
-        SetOptional<ButtonProps, 'label'>
-      >;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
     {
@@ -111,14 +107,14 @@ describe('StoryObj', () => {
         args: { label: 'good' },
       };
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
   });
 
   test('Component can be used as generic parameter for StoryObj', () => {
     expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
-      StoryAnnotations<VueFramework, ButtonProps>
+      StoryAnnotations<VueRenderer, ButtonProps>
     >();
   });
 });
@@ -145,11 +141,11 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
-  const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
+  const withDecorator: Decorator<{ decoratorArg: string }> = (
     storyFn,
     { args: { decoratorArg } }
   ) => h(DecoratorTsVue, { decoratorArg }, h(storyFn()));
@@ -165,14 +161,14 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
   test('Correct args are inferred when type is widened for multiple decorators', () => {
     type Props = ComponentProps<typeof Button> & { decoratorArg: string; decoratorArg2: string };
 
-    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (
+    const secondDecorator: Decorator<{ decoratorArg2: string }> = (
       storyFn,
       { args: { decoratorArg2 } }
     ) => h(Decorator2TsVue, { decoratorArg2 }, h(storyFn()));
@@ -187,7 +183,7 @@ describe('Story args can be inferred', () => {
       args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
     };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 });
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index 7a37ec29e1fe..0080d21ca574 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -5,12 +5,17 @@ import type {
   ArgsStoryFn,
   ComponentAnnotations,
   DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-
 import type { SetOptional, Simplify } from 'type-fest';
 import type { ComponentOptions, ConcreteComponent, FunctionalComponent } from 'vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
+
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { VueRenderer };
 
 /**
  * Metadata to configure the stories for a component.
@@ -18,7 +23,7 @@ import type { VueFramework } from './types';
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -28,7 +33,7 @@ export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -38,20 +43,20 @@ export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<VueFramework, any>;
+  render?: ArgsStoryFn<VueRenderer, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        VueFramework,
+        VueRenderer,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
 type ComponentProps<C> = C extends ComponentOptions<infer P>
   ? P
@@ -76,4 +81,6 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<an
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;
diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts
index 7fb96f596a3c..520f31bddce2 100644
--- a/code/renderers/vue3/src/render.ts
+++ b/code/renderers/vue3/src/render.ts
@@ -2,9 +2,9 @@ import { dedent } from 'ts-dedent';
 import { createApp, h } from 'vue';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { StoryFnVueReturnType, VueFramework } from './types';
+import type { StoryFnVueReturnType, VueRenderer } from './types';
 
-export const render: ArgsStoryFn<VueFramework> = (props, context) => {
+export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -20,11 +20,11 @@ export const setup = (fn: (app: any) => void) => {
   setupFunction = fn;
 };
 
-const map = new Map<VueFramework['canvasElement'], ReturnType<typeof createApp>>();
+const map = new Map<VueRenderer['canvasElement'], ReturnType<typeof createApp>>();
 
 export function renderToCanvas(
-  { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueFramework>,
-  canvasElement: VueFramework['canvasElement']
+  { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueRenderer>,
+  canvasElement: VueRenderer['canvasElement']
 ) {
   // TODO: explain cyclical nature of these app => story => mount
   let element: StoryFnVueReturnType;
diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts
index dec8e6585eff..15809f9094e2 100644
--- a/code/renderers/vue3/src/types.ts
+++ b/code/renderers/vue3/src/types.ts
@@ -1,4 +1,4 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { ConcreteComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/types';
@@ -10,9 +10,13 @@ export interface ShowErrorArgs {
 
 export type StoryFnVueReturnType = ConcreteComponent<any>;
 
-export type StoryContext = StoryContextBase<VueFramework>;
+export type StoryContext = StoryContextBase<VueRenderer>;
 
-export interface VueFramework extends WebFramework {
+/**
+ * @deprecated Use `VueRenderer` instead.
+ */
+export type VueFramework = VueRenderer;
+export interface VueRenderer extends WebRenderer {
   // We are omitting props, as we don't use it internally, and more importantly, it completely changes the assignability of meta.component.
   // Try not omitting, and check the type errros in the test file, if you want to learn more.
   component: Omit<ConcreteComponent<this['T']>, 'props'>;
diff --git a/code/renderers/vue3/template/cli/Button.stories.js b/code/renderers/vue3/template/cli/Button.stories.js
index a8c57909a1e8..d953ca7f3ada 100644
--- a/code/renderers/vue3/template/cli/Button.stories.js
+++ b/code/renderers/vue3/template/cli/Button.stories.js
@@ -1,27 +1,10 @@
 import MyButton from './Button.vue';
 
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction
 export default {
   title: 'Example/Button',
   component: MyButton,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-  render: (args) => ({
-    // Components used in your story `template` are defined in the `components` object
-    components: {
-      MyButton,
-    },
-    // The story's `args` need to be mapped into the template through the `setup()` method
-    setup() {
-      return {
-        args,
-      };
-    },
-    // And then the `args` are bound to your component with `v-bind="args"`
-    template: '<my-button v-bind="args" />',
-  }),
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     backgroundColor: {
       control: 'color',
@@ -36,6 +19,7 @@ export default {
   },
 };
 
+// More on writing stories with args: https://storybook.js.org/docs/7.0/vue/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/vue3/template/cli/Header.stories.js b/code/renderers/vue3/template/cli/Header.stories.js
index 69e8927f9774..ae0cde92c75a 100644
--- a/code/renderers/vue3/template/cli/Header.stories.js
+++ b/code/renderers/vue3/template/cli/Header.stories.js
@@ -3,7 +3,7 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/vue/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => ({
     // Components used in your story `template` are defined in the `components` object
@@ -21,7 +21,7 @@ export default {
     template: '<my-header :user="user" />',
   }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
diff --git a/code/renderers/vue3/template/cli/Page.stories.js b/code/renderers/vue3/template/cli/Page.stories.js
index ed95225c9f69..5f14e2088ca2 100644
--- a/code/renderers/vue3/template/cli/Page.stories.js
+++ b/code/renderers/vue3/template/cli/Page.stories.js
@@ -4,21 +4,15 @@ import MyPage from './Page.vue';
 export default {
   title: 'Example/Page',
   component: MyPage,
-  render: () => ({
-    // Components used in your story `template` are defined in the `components` object
-    components: { MyPage },
-    // Here we define the `template`
-    template: '<my-page />',
-  }),
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
 export const LoggedOut = {};
 
-// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/vue/writing-tests/interaction-testing
 export const LoggedIn = {
   render: () => ({
     components: {
diff --git a/code/renderers/vue3/tsconfig.json b/code/renderers/vue3/tsconfig.json
index 50385a87bc0c..a73aa28cbf3f 100644
--- a/code/renderers/vue3/tsconfig.json
+++ b/code/renderers/vue3/tsconfig.json
@@ -6,6 +6,5 @@
     "skipLibCheck": true,
     "allowJs": true
   },
-  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"],
-  "exclude": []
+  "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"]
 }
diff --git a/code/renderers/web-components/jest.config.js b/code/renderers/web-components/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/renderers/web-components/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 785ae8f0b7d5..9694bf699de9 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.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit-html",
@@ -53,14 +53,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/core-client": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/core-client": "7.0.0-alpha.51",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -69,7 +69,7 @@
   "devDependencies": {
     "lit": "2.3.1",
     "lit-html": "2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "lit-html": "^1.4.1 || ^2.0.0"
@@ -87,5 +87,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/renderers/web-components/src/docs/custom-elements.test.ts b/code/renderers/web-components/src/docs/custom-elements.test.ts
index 89bcc338473a..e8ba140e7a54 100644
--- a/code/renderers/web-components/src/docs/custom-elements.test.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.test.ts
@@ -1,16 +1,9 @@
 /* eslint-disable no-underscore-dangle */
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
 import { extractArgTypes } from './custom-elements';
 import customElementsManifest from './__testfixtures__/custom-elements.json';
 
-declare global {
-  interface Window {
-    __STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__: any;
-  }
-}
-
 const { window } = global;
 
 describe('extractArgTypes', () => {
diff --git a/code/renderers/web-components/src/docs/sourceDecorator.ts b/code/renderers/web-components/src/docs/sourceDecorator.ts
index 8436dab16fcc..bef93cade876 100644
--- a/code/renderers/web-components/src/docs/sourceDecorator.ts
+++ b/code/renderers/web-components/src/docs/sourceDecorator.ts
@@ -5,12 +5,12 @@ import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types
 import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 
-import type { WebComponentsFramework } from '../types';
+import type { WebComponentsRenderer } from '../types';
 
 // Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
 const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
 
-function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
+function skipSourceRender(context: StoryContext<WebComponentsRenderer>) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -26,7 +26,7 @@ function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
 
 function applyTransformSource(
   source: string,
-  context: StoryContext<WebComponentsFramework>
+  context: StoryContext<WebComponentsRenderer>
 ): string {
   const { transformSource } = context.parameters.docs ?? {};
   if (typeof transformSource !== 'function') return source;
@@ -34,11 +34,11 @@ function applyTransformSource(
 }
 
 export function sourceDecorator(
-  storyFn: PartialStoryFn<WebComponentsFramework>,
-  context: StoryContext<WebComponentsFramework>
-): WebComponentsFramework['storyResult'] {
+  storyFn: PartialStoryFn<WebComponentsRenderer>,
+  context: StoryContext<WebComponentsRenderer>
+): WebComponentsRenderer['storyResult'] {
   const story = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<WebComponentsFramework>)(context.args, context)
+    ? (context.originalStoryFn as ArgsStoryFn<WebComponentsRenderer>)(context.args, context)
     : storyFn();
 
   let source: string;
diff --git a/code/renderers/web-components/src/public-api.ts b/code/renderers/web-components/src/public-api.ts
index c49454afdfab..3d5590fbf731 100644
--- a/code/renderers/web-components/src/public-api.ts
+++ b/code/renderers/web-components/src/public-api.ts
@@ -3,17 +3,17 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas } from './render';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
 
 const FRAMEWORK = 'web-components';
 
-interface ClientApi extends Addon_ClientStoryApi<WebComponentsFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<WebComponentsRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
 }
 
-const api = start(renderToCanvas);
+const api = start<WebComponentsRenderer>(renderToCanvas);
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
diff --git a/code/renderers/web-components/src/public-types.ts b/code/renderers/web-components/src/public-types.ts
index d23ac54b6106..a2c722c0e3fc 100644
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@@ -2,30 +2,37 @@ import type {
   AnnotatedStoryFn,
   Args,
   ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
   StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
 } from '@storybook/types';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
+
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { WebComponentsRenderer };
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
@@ -37,3 +44,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TA
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<WebComponentsRenderer, TArgs>;
diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts
index 075215cd452f..d95129b98c33 100644
--- a/code/renderers/web-components/src/render.ts
+++ b/code/renderers/web-components/src/render.ts
@@ -10,11 +10,11 @@ import { render as litRender } from 'lit-html';
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
 
 const { Node } = global;
 
-export const render: ArgsStoryFn<WebComponentsFramework> = (args, context) => {
+export const render: ArgsStoryFn<WebComponentsRenderer> = (args, context) => {
   const { id, component } = context;
   if (!component) {
     throw new Error(
@@ -38,8 +38,8 @@ export function renderToCanvas(
     showMain,
     showError,
     forceRemount,
-  }: Store_RenderContext<WebComponentsFramework>,
-  canvasElement: WebComponentsFramework['canvasElement']
+  }: Store_RenderContext<WebComponentsRenderer>,
+  canvasElement: WebComponentsRenderer['canvasElement']
 ) {
   const element = storyFn();
 
diff --git a/code/renderers/web-components/src/types.ts b/code/renderers/web-components/src/types.ts
index e938d2017713..d6f397db0aca 100644
--- a/code/renderers/web-components/src/types.ts
+++ b/code/renderers/web-components/src/types.ts
@@ -1,11 +1,15 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 
-export type StoryContext = StoryContextBase<WebComponentsFramework>;
+export type StoryContext = StoryContextBase<WebComponentsRenderer>;
 
-export interface WebComponentsFramework extends WebFramework {
+/**
+ * @deprecated Use `WebComponentsRenderer` instead.
+ */
+export type WebComponentsFramework = WebComponentsRenderer;
+export interface WebComponentsRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnHtmlReturnType;
 }
diff --git a/code/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
index fe2586421fbc..2f938c94ac6e 100644
--- a/code/renderers/web-components/template/cli/js/Button.stories.js
+++ b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -1,13 +1,10 @@
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 export default {
   title: 'Example/Button',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/web-components/vue/writing-docs/docs-page
   tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
   render: (args) => Button(args),
-  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     onClick: { action: 'onClick' },
@@ -18,6 +15,7 @@ export default {
   },
 };
 
+// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
diff --git a/code/renderers/web-components/template/cli/js/Page.stories.js b/code/renderers/web-components/template/cli/js/Page.stories.js
index 91cc0239c73e..61f16d6573cc 100644
--- a/code/renderers/web-components/template/cli/js/Page.stories.js
+++ b/code/renderers/web-components/template/cli/js/Page.stories.js
@@ -8,7 +8,7 @@ export default {
 
 export const LoggedIn = {
   args: {
-    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    // More on composing args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args#args-composition
     ...HeaderStories.LoggedIn.args,
   },
 };
diff --git a/code/renderers/web-components/template/cli/ts/Button.stories.ts b/code/renderers/web-components/template/cli/ts/Button.stories.ts
index a2fcc8ecd55a..b647bc45667f 100644
--- a/code/renderers/web-components/template/cli/ts/Button.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Button.stories.ts
@@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/web-components/writing-stories/introduction
 const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
   tags: ['docsPage'],
   render: (args) => Button(args),
-  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
     onClick: { action: 'onClick' },
@@ -22,7 +20,7 @@ const meta: Meta<ButtonProps> = {
 export default meta;
 type Story = StoryObj<ButtonProps>;
 
-// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
diff --git a/code/renderers/web-components/template/cli/ts/Header.stories.ts b/code/renderers/web-components/template/cli/ts/Header.stories.ts
index ed128a4f8009..4723f9855175 100644
--- a/code/renderers/web-components/template/cli/ts/Header.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Header.stories.ts
@@ -4,9 +4,9 @@ import { Header } from './Header';
 
 const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/web-components/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/web-components/writing-docs/docs-page
   tags: ['docsPage'],
-  render: (args) => Header(args),
+  render: (args: HeaderProps) => Header(args),
 };
 
 export default meta;
diff --git a/code/renderers/web-components/template/cli/ts/Page.stories.ts b/code/renderers/web-components/template/cli/ts/Page.stories.ts
index 94229aac5dfc..4a4dfcc54112 100644
--- a/code/renderers/web-components/template/cli/ts/Page.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Page.stories.ts
@@ -6,7 +6,7 @@ import * as HeaderStories from './Header.stories';
 
 const meta: Meta<PageProps> = {
   title: 'Example/Page',
-  render: (args) => Page(args),
+  render: (args: PageProps) => Page(args),
 };
 
 export default meta;
@@ -14,7 +14,7 @@ type Story = StoryObj<PageProps>;
 
 export const LoggedIn: Story = {
   args: {
-    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    // More on composing args: https://storybook.js.org/docs/7.0/web-components/writing-stories/args#args-composition
     ...HeaderStories.LoggedIn.args,
   },
 };
diff --git a/code/renderers/web-components/tsconfig.json b/code/renderers/web-components/tsconfig.json
index e94885a0058c..789b1b8985c3 100644
--- a/code/renderers/web-components/tsconfig.json
+++ b/code/renderers/web-components/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*", "template/**/*"],
-  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*", "template/**/*"]
 }
diff --git a/code/tsconfig.json b/code/tsconfig.json
index 1e99fa09f78e..645fbb05c512 100644
--- a/code/tsconfig.json
+++ b/code/tsconfig.json
@@ -14,7 +14,6 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "strictBindCallApply": true,
-    "types": ["jest"],
     "lib": ["dom", "esnext"]
   },
   "exclude": ["dist", "**/dist", "node_modules", "**/node_modules", "**/setup-jest.ts"],
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 526d46fabfb3..cc95657abc94 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -2,7 +2,7 @@ import { vite as csfPlugin } from '@storybook/csf-plugin';
 import pluginTurbosnap from 'vite-plugin-turbosnap';
 import type { StorybookConfig } from '../../frameworks/react-vite/dist';
 
-const isBlocksOnly = process.env.BLOCKS_ONLY === 'true';
+const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 
 const allStories = [
   {
@@ -18,7 +18,29 @@ const allStories = [
     titlePrefix: '@storybook-blocks',
   },
 ];
-const blocksOnlyStories = ['../blocks/src/@(blocks|controls)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))'];
+
+/**
+ * match all stories in blocks/src/blocks and blocks/src/controls EXCEPT blocks/src/blocks/internal
+ * Examples:
+ *
+ * src/blocks/Canvas.stories.tsx - MATCH
+ * src/blocks/internal/InternalCanvas.stories.tsx - IGNORED, internal stories
+ * src/blocks/internal/nested/InternalCanvas.stories.tsx - IGNORED, internal stories
+ *
+ * src/blocks/Canvas.tsx - IGNORED, not story
+ * src/blocks/nested/Canvas.stories.tsx - MATCH
+ * src/blocks/nested/deep/Canvas.stories.tsx - MATCH
+ *
+ * src/controls/Boolean.stories.tsx - MATCH
+ * src/controls/Boolean.tsx - IGNORED, not story
+ *
+ * src/components/ColorPalette.stories.tsx - MATCH
+ * src/components/ColorPalette.tsx - IGNORED, not story
+ */
+const blocksOnlyStories = [
+  '../blocks/src/@(blocks|controls)/!(internal)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))',
+  '../blocks/src/@(blocks|controls)/*.@(mdx|stories.@(tsx|ts|jsx|js))',
+];
 
 const config: StorybookConfig = {
   stories: isBlocksOnly ? blocksOnlyStories : allStories,
@@ -34,14 +56,22 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
-  viteFinal: (vite, { configType }) => ({
-    ...vite,
+  features: {
+    interactionsDebugger: true,
+  },
+  viteFinal: (viteConfig, { configType }) => ({
+    ...viteConfig,
     plugins: [
-      ...(vite.plugins || []),
+      ...(viteConfig.plugins || []),
       csfPlugin({}),
-      configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: vite.root || '' }) : [],
+      configType === 'PRODUCTION' ? pluginTurbosnap({ rootDir: viteConfig.root || '' }) : [],
     ],
-    optimizeDeps: { ...vite.optimizeDeps, force: true },
+    optimizeDeps: { ...viteConfig.optimizeDeps, force: true },
+    build: {
+      ...viteConfig.build,
+      // disable sourcemaps in CI to not run out of memory
+      sourcemap: process.env.CI !== 'true',
+    },
   }),
 };
 
diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
index 4c97aff00fd1..3cd958bd6d12 100644
--- a/code/ui/.storybook/preview.tsx
+++ b/code/ui/.storybook/preview.tsx
@@ -14,7 +14,7 @@ import { useArgs } from '@storybook/addons';
 import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-web';
 import { DocsContext } from '@storybook/preview-web';
-import type { ReactFramework } from '@storybook/react';
+import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';
 
 import { DocsContainer } from '../blocks/src/blocks/DocsContainer';
@@ -94,7 +94,7 @@ const ThemedSetRoot = () => {
 };
 
 // eslint-disable-next-line no-underscore-dangle
-const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactFramework>;
+const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
 export const loaders = [
   async () => ({ globalValue: 1 }),
diff --git a/code/ui/blocks/jest.config.js b/code/ui/blocks/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/ui/blocks/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index cc047e6a9a3e..2416acc8caa5 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -38,20 +38,21 @@
     "*.d.ts"
   ],
   "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
-    "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/docs-tools": "7.0.0-alpha.51",
+    "@storybook/preview-web": "7.0.0-alpha.51",
+    "@storybook/store": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@types/lodash": "^4.14.167",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
@@ -65,12 +66,13 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.48",
-    "@storybook/addons": "7.0.0-alpha.48",
+    "@storybook/addon-actions": "7.0.0-alpha.51",
+    "@storybook/addons": "7.0.0-alpha.51",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -80,5 +82,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx
new file mode 100644
index 000000000000..54f13a1e5c05
--- /dev/null
+++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Canvas } from './Canvas';
+import { Story as StoryComponent } from './Story';
+import * as BooleanStories from '../controls/Boolean.stories';
+
+const meta: Meta<typeof Canvas> = {
+  component: Canvas,
+  parameters: {
+    relativeCsfPaths: ['../controls/Boolean.stories'],
+  },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={BooleanStories.Undefined} />
+      </Canvas>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicStory: Story = {};
+
+export const WithSourceOpen: Story = {
+  args: {
+    withSource: 'open',
+  },
+};
+export const WithSourceClosed: Story = {
+  args: {
+    withSource: 'closed',
+  },
+};
+
+// TODO: what is the purpose of mdxSource exactly?
+export const WithMdxSource: Story = {
+  name: 'With MDX Source',
+  args: {
+    withSource: 'open',
+    mdxSource: `const thisIsCustomSource = true;
+if (isSyntaxHighlighted) {
+  console.log('syntax highlighting is working');
+}`,
+  },
+};
+
+export const WithoutSource: Story = {
+  args: {
+    withSource: 'none',
+  },
+};
+
+export const WithToolbar: Story = {
+  args: {
+    withToolbar: true,
+  },
+};
+export const WithAdditionalActions: Story = {
+  args: {
+    additionalActions: [
+      {
+        title: 'Open in GitHub',
+        onClick: () => {
+          window.open(
+            'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/controls/Boolean.stories.tsx',
+            '_blank'
+          );
+        },
+      },
+      {
+        title: 'Go to documentation',
+        onClick: () => {
+          window.open(
+            'https://storybook.js.org/docs/react/essentials/controls#annotation',
+            '_blank'
+          );
+        },
+      },
+    ],
+  },
+};
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 239bca9c8a79..4c3ad36b667f 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,68 +1,58 @@
-import type { FC, ReactElement, ReactNode, ReactNodeArray } from 'react';
-import React, { useContext } from 'react';
-import type { Framework } from '@storybook/types';
+import React, { Children, useContext } from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
+import type { Renderer } from '@storybook/types';
 import type { PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import type { SourceContextProps } from './SourceContainer';
 import { SourceContext } from './SourceContainer';
-import { getSourceProps, SourceState } from './Source';
+import { useSourceProps, SourceState } from './Source';
 import { useStories } from './useStory';
 
 export { SourceState };
 
-type CanvasProps = PurePreviewProps & {
+type CanvasProps = Omit<PurePreviewProps, 'isExpanded'> & {
   withSource?: SourceState;
   mdxSource?: string;
 };
 
-const getPreviewProps = (
+const usePreviewProps = (
   { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
-  docsContext: DocsContextProps<Framework>,
+  docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
-  let sourceState = withSource;
-  let isLoading = false;
-  if (sourceState === SourceState.NONE) {
-    return { isLoading, previewProps: props };
-  }
-  if (mdxSource) {
-    return {
-      isLoading,
-      previewProps: {
-        ...props,
-        withSource: getSourceProps({ code: decodeURI(mdxSource) }, docsContext, sourceContext),
-        isExpanded: sourceState === SourceState.OPEN,
-      },
-    };
-  }
-  const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
-  const storyChildren = childArray.filter(
-    (c: ReactElement) => c.props && (c.props.id || c.props.name || c.props.of)
-  ) as ReactElement[];
-  const targetIds = storyChildren.map(({ props: { id, of, name } }) => {
-    if (id) return id;
-    if (of) return docsContext.storyIdByModuleExport(of);
+  /*
+  get all story IDs by traversing through the children,
+  filter out any non-story children (e.g. text nodes)
+  and then get the id from each story depending on available props
+  */
+  const storyIds = (Children.toArray(children) as ReactElement[])
+    .filter((c) => c.props && (c.props.id || c.props.name || c.props.of))
+    .map(({ props: { id, of, name } }) => {
+      if (id) return id;
+      if (of) return docsContext.storyIdByModuleExport(of);
 
-    return docsContext.storyIdByName(name);
-  });
-
-  const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
-  if (!sourceState) sourceState = sourceProps.state;
-  const storyIds = targetIds.map((targetId) => {
-    return targetId;
-  });
+      return docsContext.storyIdByName(name);
+    });
 
   const stories = useStories(storyIds, docsContext);
-  isLoading = stories.some((s) => !s);
+  const isLoading = stories.some((s) => !s);
+  const sourceProps = useSourceProps(
+    mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds },
+    docsContext,
+    sourceContext
+  );
+  if (withSource === SourceState.NONE) {
+    return { isLoading, previewProps: props };
+  }
 
   return {
     isLoading,
     previewProps: {
       ...props, // pass through columns etc.
       withSource: sourceProps,
-      isExpanded: sourceState === SourceState.OPEN,
+      isExpanded: (withSource || sourceProps.state) === SourceState.OPEN,
     },
   };
 };
@@ -70,7 +60,7 @@ const getPreviewProps = (
 export const Canvas: FC<CanvasProps> = (props) => {
   const docsContext = useContext(DocsContext);
   const sourceContext = useContext(SourceContext);
-  const { isLoading, previewProps } = getPreviewProps(props, docsContext, sourceContext);
+  const { isLoading, previewProps } = usePreviewProps(props, docsContext, sourceContext);
   const { children } = props;
 
   if (isLoading) return <PreviewSkeleton />;
diff --git a/code/ui/blocks/src/blocks/Docs.tsx b/code/ui/blocks/src/blocks/Docs.tsx
index 41c0ccb84426..d5525176e3d9 100644
--- a/code/ui/blocks/src/blocks/Docs.tsx
+++ b/code/ui/blocks/src/blocks/Docs.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import type { FunctionComponent, ComponentType } from 'react';
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { Theme } from '@storybook/theming';
 
 import type { DocsContextProps } from './DocsContext';
 import { DocsContainer } from './DocsContainer';
 import { DocsPage } from './DocsPage';
 
-export type DocsProps<TFramework extends Framework = Framework> = {
+export type DocsProps<TFramework extends Renderer = Renderer> = {
   docsParameter: Parameters;
   context: DocsContextProps<TFramework>;
 };
diff --git a/code/ui/blocks/src/blocks/DocsContainer.tsx b/code/ui/blocks/src/blocks/DocsContainer.tsx
index 0ae07863fbd8..f80dc3e42dd4 100644
--- a/code/ui/blocks/src/blocks/DocsContainer.tsx
+++ b/code/ui/blocks/src/blocks/DocsContainer.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import global from 'global';
 import type { ThemeVars } from '@storybook/theming';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import { DocsWrapper, DocsContent } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
@@ -12,7 +12,7 @@ import { scrollToElement } from './utils';
 
 const { document, window: globalWindow } = global;
 
-export interface DocsContainerProps<TFramework extends Framework = Framework> {
+export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
   context: DocsContextProps<TFramework>;
   theme?: ThemeVars;
   children?: ReactNode;
diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts
index 958a57172050..0c3e301a5a70 100644
--- a/code/ui/blocks/src/blocks/DocsContext.ts
+++ b/code/ui/blocks/src/blocks/DocsContext.ts
@@ -4,7 +4,7 @@ import { createContext } from 'react';
 import { window as globalWindow } from 'global';
 
 import type { DocsContextProps } from '@storybook/preview-web';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 export type { DocsContextProps };
 
@@ -18,6 +18,6 @@ if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
   globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Framework>> = globalWindow
+export const DocsContext: Context<DocsContextProps<Renderer>> = globalWindow
   ? globalWindow.__DOCS_CONTEXT__
   : createContext(null);
diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx
index eb578b48085a..6b6454515bd9 100644
--- a/code/ui/blocks/src/blocks/Source.tsx
+++ b/code/ui/blocks/src/blocks/Source.tsx
@@ -89,7 +89,7 @@ const getSnippet = (snippet: string, story?: Store_Story<any>): string => {
 type SourceStateProps = { state: SourceState };
 type PureSourceProps = ComponentProps<typeof PureSource>;
 
-export const getSourceProps = (
+export const useSourceProps = (
   props: SourceProps,
   docsContext: DocsContextProps<any>,
   sourceContext: SourceContextProps
@@ -100,8 +100,7 @@ export const getSourceProps = (
   const singleProps = props as SingleSourceProps;
   const multiProps = props as MultiSourceProps;
 
-  let source = codeProps.code; // prefer user-specified code
-  let { format } = codeProps; // prefer user-specified code
+  let { format, code: source } = codeProps; // prefer user-specified code
 
   const targetIds = multiProps.ids || [singleProps.id || primaryId];
   const storyIds = targetIds.map((targetId) => {
@@ -151,6 +150,6 @@ export const getSourceProps = (
 export const Source: FC<PureSourceProps> = (props) => {
   const sourceContext = useContext(SourceContext);
   const docsContext = useContext(DocsContext);
-  const sourceProps = getSourceProps(props, docsContext, sourceContext);
+  const sourceProps = useSourceProps(props, docsContext, sourceContext);
   return <PureSource {...sourceProps} />;
 };
diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx
index bb09d8c635d7..38ad9646acf8 100644
--- a/code/ui/blocks/src/blocks/Story.stories.tsx
+++ b/code/ui/blocks/src/blocks/Story.stories.tsx
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Story as StoryComponent } from './Story';
@@ -6,15 +8,109 @@ import * as BooleanStories from '../controls/Boolean.stories';
 const meta: Meta<typeof StoryComponent> = {
   component: StoryComponent,
   parameters: {
-    relativeCsfPaths: ['../controls/Boolean.stories'],
+    relativeCsfPaths: ['../controls/Boolean.stories', '../blocks/Story.stories'],
   },
 };
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const BasicOf: Story = {
+export const Of: Story = {
   args: {
     of: BooleanStories.Undefined,
   },
 };
+
+export const OfWithMeta: Story = {
+  args: {
+    of: BooleanStories.True,
+    meta: BooleanStories.default,
+  },
+};
+
+const blocksAwareId = `${
+  import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-'
+}controls-boolean--false`;
+
+export const Id: Story = {
+  args: {
+    id: blocksAwareId,
+  },
+};
+
+export const Name: Story = {
+  args: {
+    name: 'True',
+  },
+};
+
+export const SimpleSizeTest: Story = {
+  render: () => {
+    return (
+      <div
+        style={{
+          background: '#fd5c9355',
+          padding: '3rem',
+          height: '1000px',
+          width: '800px',
+          // a global decorator is applying a default padding that we want to negate here
+          margin: '-4rem -20px',
+        }}
+      >
+        <p>
+          This story does nothing. Its only purpose is to show how its size renders in different
+          conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
+        </p>
+        <p>
+          It has a fixed <code>height</code> of <code>1000px</code> and a fixed <code>width</code>{' '}
+          of <code>800px</code>
+        </p>
+      </div>
+    );
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    of: SimpleSizeTest,
+    inline: true,
+  },
+};
+export const InlineWithHeight: Story = {
+  ...Inline,
+  args: {
+    of: SimpleSizeTest,
+    inline: true,
+    height: '300px',
+  },
+};
+export const Iframe: Story = {
+  ...Inline,
+  args: {
+    of: SimpleSizeTest,
+    inline: false,
+  },
+};
+export const IframeWithHeight: Story = {
+  ...Inline,
+  args: {
+    of: SimpleSizeTest,
+    inline: false,
+    height: '300px',
+  },
+};
+
+export const WithDefaultInteractions: Story = {
+  args: {
+    of: BooleanStories.Toggling,
+  },
+};
+export const WithInteractionsAutoplayInStory: Story = {
+  args: {
+    of: BooleanStories.TogglingInDocs,
+  },
+};
+
+// TODO: types suggest that <Story /> can take ProjectAnnotations, but it doesn't seem to do anything with them
+// Such as parameters, decorators, etc.
+// they seem to be taken from the story itself, and not from the <Story /> call
diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx
index be42c12850d5..53f29b738535 100644
--- a/code/ui/blocks/src/blocks/Story.tsx
+++ b/code/ui/blocks/src/blocks/Story.tsx
@@ -1,7 +1,7 @@
-import type { FC, ReactNode, ElementType, ComponentProps } from 'react';
+import type { FC, ComponentProps } from 'react';
 import React, { useContext, useRef, useEffect, useState } from 'react';
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExport,
   Store_ModuleExports,
   Store_Story as StoryType,
@@ -25,7 +25,6 @@ type CommonProps = StoryAnnotations & {
 
 type StoryDefProps = {
   name: string;
-  children: ReactNode;
 };
 
 type StoryRefProps = {
@@ -36,7 +35,6 @@ type StoryRefProps = {
 
 type StoryImportProps = {
   name: string;
-  story: ElementType;
 };
 
 export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
@@ -49,11 +47,10 @@ export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryI
   }
 
   const { name } = props as StoryDefProps;
-  const inputId = id;
-  return inputId || context.storyIdByName(name);
+  return id || context.storyIdByName(name);
 };
 
-export const getStoryProps = <TFramework extends Framework>(
+export const getStoryProps = <TFramework extends Renderer>(
   { height, inline }: StoryProps,
   story: StoryType<TFramework>
 ): PureStoryProps => {
@@ -87,14 +84,16 @@ const Story: FC<StoryProps> = (props) => {
   const [showLoader, setShowLoader] = useState(true);
 
   useEffect(() => {
-    let cleanup: () => void;
-    if (story && storyRef.current) {
-      const element = storyRef.current as HTMLElement;
-      const { autoplay } = story.parameters.docs || {};
-      cleanup = context.renderStoryToElement(story, element, { autoplay });
-      setShowLoader(false);
+    if (!(story && storyRef.current)) {
+      return () => {};
     }
-    return () => cleanup && cleanup();
+    const element = storyRef.current as HTMLElement;
+    const { autoplay } = story.parameters.docs || {};
+    const cleanup = context.renderStoryToElement(story, element, { autoplay });
+    setShowLoader(false);
+    return () => {
+      cleanup();
+    };
   }, [context, story]);
 
   if (!story) {
@@ -115,7 +114,7 @@ const Story: FC<StoryProps> = (props) => {
     return (
       <div id={storyBlockIdFromId(story.id)}>
         {height ? (
-          <style>{`#story--${story.id} { min-height: ${height}px; transform: translateZ(0); overflow: auto }`}</style>
+          <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
         ) : null}
         {showLoader && <StorySkeleton />}
         <div
@@ -134,9 +133,4 @@ const Story: FC<StoryProps> = (props) => {
   );
 };
 
-Story.defaultProps = {
-  children: null,
-  name: null,
-};
-
 export { Story };
diff --git a/code/ui/blocks/src/blocks/enhanceSource.test.ts b/code/ui/blocks/src/blocks/enhanceSource.test.ts
index 4ec16f0fe29e..d5adb5ea1047 100644
--- a/code/ui/blocks/src/blocks/enhanceSource.test.ts
+++ b/code/ui/blocks/src/blocks/enhanceSource.test.ts
@@ -1,6 +1,7 @@
 import type { StoryContext } from '@storybook/types';
 import { enhanceSource } from './enhanceSource';
 
+// @ts-expect-error (not correct)
 const emptyContext: StoryContext = {
   id: 'foo--bar',
   kind: 'foo',
@@ -15,11 +16,13 @@ describe('addon-docs enhanceSource', () => {
   describe('no source loaded', () => {
     const baseContext = emptyContext;
     it('no transformSource', () => {
+      // @ts-expect-error (not correct)
       expect(enhanceSource(baseContext)).toBeNull();
     });
     it('transformSource', () => {
       const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
       const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      // @ts-expect-error (not correct)
       expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
     });
   });
@@ -30,6 +33,7 @@ describe('addon-docs enhanceSource', () => {
       parameters: { storySource: { source } },
     };
     it('no transformSource', () => {
+      // @ts-expect-error (not correct)
       expect(enhanceSource(baseContext)).toEqual({
         docs: { source: { code: 'storySource.source' } },
       });
@@ -37,6 +41,7 @@ describe('addon-docs enhanceSource', () => {
     it('transformSource', () => {
       const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
       const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      // @ts-expect-error (not correct)
       expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
         code: 'formatted: storySource.source',
       });
@@ -45,6 +50,7 @@ describe('addon-docs enhanceSource', () => {
       const transformSource = jest.fn();
       const parameters = { ...baseContext.parameters, docs: { transformSource } };
       const context = { ...baseContext, parameters };
+      // @ts-expect-error (not correct)
       enhanceSource(context);
       expect(transformSource).toHaveBeenCalledWith(source, context);
     });
@@ -62,11 +68,13 @@ describe('addon-docs enhanceSource', () => {
       },
     };
     it('no transformSource', () => {
+      // @ts-expect-error (not correct)
       expect(enhanceSource(baseContext)).toEqual({ docs: { source: { code: 'Source' } } });
     });
     it('transformSource', () => {
       const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
       const parameters = { ...baseContext.parameters, docs: { transformSource } };
+      // @ts-expect-error (not correct)
       expect(enhanceSource({ ...baseContext, parameters }).docs.source).toEqual({
         code: 'formatted: Source',
       });
@@ -75,6 +83,7 @@ describe('addon-docs enhanceSource', () => {
       const transformSource = jest.fn();
       const parameters = { ...baseContext.parameters, docs: { transformSource } };
       const context = { ...baseContext, parameters };
+      // @ts-expect-error (not correct)
       enhanceSource(context);
       expect(transformSource).toHaveBeenCalledWith('Source', context);
     });
@@ -88,12 +97,14 @@ describe('addon-docs enhanceSource', () => {
       },
     };
     it('no transformSource', () => {
+      // @ts-expect-error (not correct)
       expect(enhanceSource(baseContext)).toBeNull();
     });
     it('transformSource', () => {
       const transformSource = (src?: string) => (src ? `formatted: ${src}` : 'no src');
       const { source } = baseContext.parameters.docs;
       const parameters = { ...baseContext.parameters, docs: { source, transformSource } };
+      // @ts-expect-error (not correct)
       expect(enhanceSource({ ...baseContext, parameters })).toBeNull();
     });
   });
diff --git a/code/ui/blocks/src/blocks/enhanceSource.ts b/code/ui/blocks/src/blocks/enhanceSource.ts
index 704d36abdba9..05d912f8e81e 100644
--- a/code/ui/blocks/src/blocks/enhanceSource.ts
+++ b/code/ui/blocks/src/blocks/enhanceSource.ts
@@ -1,5 +1,4 @@
-import type { Parameters } from '@storybook/types';
-import type { Story } from '@storybook/store';
+import type { Parameters, Store_Story } from '@storybook/types';
 import { combineParameters } from '@storybook/store';
 
 // ============================================================
@@ -77,7 +76,7 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
   return extractSource(location, lines);
 };
 
-export const enhanceSource = (story: Story<any>): Parameters => {
+export const enhanceSource = (story: Store_Story<any>): Parameters => {
   const { id, parameters } = story;
   const { storySource, docs = {} } = parameters;
   const { transformSource } = docs;
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
index d7488015851d..9329473a7595 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
+++ b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
@@ -1,16 +1,16 @@
 import type { FunctionComponent } from 'react';
 import React, { useRef } from 'react';
-import type { Framework, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ProjectAnnotations } from '@storybook/types';
 import { composeConfigs } from '@storybook/store';
 
 import { Docs } from '../Docs';
 import { ExternalPreview } from './ExternalPreview';
 
-export type ExternalDocsProps<TFramework extends Framework = Framework> = {
+export type ExternalDocsProps<TFramework extends Renderer = Renderer> = {
   projectAnnotationsList: ProjectAnnotations<TFramework>[];
 };
 
-function usePreview<TFramework extends Framework = Framework>(
+function usePreview<TFramework extends Renderer = Renderer>(
   projectAnnotations: ProjectAnnotations<TFramework>
 ) {
   const previewRef = useRef<ExternalPreview>();
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
index 697fc55b1d6a..1de088a2439e 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
+++ b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { ThemeProvider, themes, ensure } from '@storybook/theming';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 import { DocsContext } from '../DocsContext';
 import { ExternalPreview } from './ExternalPreview';
 
-let preview: ExternalPreview<Framework>;
+let preview: ExternalPreview<Renderer>;
 
 export const ExternalDocsContainer: React.FC<{ projectAnnotations: any }> = ({
   projectAnnotations,
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
index e347812b6b6c..64bb3e609ccc 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
+++ b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
@@ -9,12 +9,12 @@ import type { StoryStore } from '@storybook/store';
 import type { DocsContextProps } from '@storybook/preview-web';
 import type { Channel } from '@storybook/channels';
 
-export class ExternalDocsContext<TFramework extends Framework> extends DocsContext<TFramework> {
+export class ExternalDocsContext<TRenderer extends Renderer> extends DocsContext<TRenderer> {
   constructor(
     public channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
-    private processMetaExports: (metaExports: Store_ModuleExports) => Store_CSFFile<TFramework>
+    private processMetaExports: (metaExports: Store_ModuleExports) => Store_CSFFile<TRenderer>
   ) {
     super(channel, store, renderStoryToElement, [], true);
   }
diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
index 3f11aa9bdf46..b7d09d7a69a3 100644
--- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts
+++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
@@ -1,6 +1,6 @@
 import { Preview } from '@storybook/preview-web';
 import type {
-  Framework,
+  Renderer,
   ComponentTitle,
   Path,
   ProjectAnnotations,
@@ -27,7 +27,7 @@ class ConstantMap<TKey, TValue extends string> {
   }
 }
 
-export class ExternalPreview<TFramework extends Framework = Framework> extends Preview<TFramework> {
+export class ExternalPreview<TRenderer extends Renderer = Renderer> extends Preview<TRenderer> {
   private importPaths = new ConstantMap<MetaExports, Path>('./importPath/');
 
   private titles = new ConstantMap<MetaExports, ComponentTitle>('title-');
@@ -36,7 +36,7 @@ export class ExternalPreview<TFramework extends Framework = Framework> extends P
 
   private moduleExportsByImportPath: Record<Path, Store_ModuleExports> = {};
 
-  constructor(public projectAnnotations: ProjectAnnotations) {
+  constructor(public projectAnnotations: ProjectAnnotations<TRenderer>) {
     super(new Channel());
 
     this.initialize({
@@ -58,7 +58,7 @@ export class ExternalPreview<TFramework extends Framework = Framework> extends P
 
     const title = metaExports.default.title || this.titles.get(metaExports);
 
-    const csfFile = this.storyStore.processCSFFileWithCache<TFramework>(
+    const csfFile = this.storyStore.processCSFFileWithCache<TRenderer>(
       metaExports,
       importPath,
       title
diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
new file mode 100644
index 000000000000..926f1aa3bacc
--- /dev/null
+++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx
@@ -0,0 +1,120 @@
+/// <reference types="@types/jest" />;
+/// <reference types="@testing-library/jest-dom" />;
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { Canvas } from '../Canvas';
+import { Story as StoryComponent } from '../Story';
+import * as BooleanStories from '../../controls/Boolean.stories';
+
+const meta: Meta<typeof Canvas> = {
+  title: 'Blocks/Internal/Canvas',
+  component: Canvas,
+  parameters: {
+    relativeCsfPaths: ['../controls/Boolean.stories'],
+  },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={BooleanStories.Undefined} />
+      </Canvas>
+    );
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const expectAmountOfStoriesInSource =
+  (amount: number): Story['play'] =>
+  async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Arrange - find the "Show code" button
+    let showCodeButton = canvas.getByText('Show code');
+    await waitFor(() => {
+      showCodeButton = canvas.getByText('Show code');
+      expect(showCodeButton).toBeInTheDocument();
+    });
+
+    // Act - click button to show code
+    await userEvent.click(showCodeButton);
+
+    // Assert - check that the correct amount of stories' source is shown
+    await waitFor(async () => {
+      const booleanControlNodes = await canvas.findAllByText('BooleanControl');
+      expect(booleanControlNodes).toHaveLength(amount);
+    });
+  };
+
+export const MultipleChildren: Story = {
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={BooleanStories.True} />
+        <StoryComponent of={BooleanStories.False} />
+      </Canvas>
+    );
+  },
+  play: expectAmountOfStoriesInSource(2),
+};
+
+export const MultipleChildrenColumns: Story = {
+  args: {
+    isColumn: true,
+  },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={BooleanStories.True} />
+        <StoryComponent of={BooleanStories.False} />
+      </Canvas>
+    );
+  },
+  play: expectAmountOfStoriesInSource(2),
+};
+
+export const MultipleChildrenThreeColumns: Story = {
+  args: {
+    columns: 3,
+  },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <StoryComponent of={BooleanStories.True} />
+        <StoryComponent of={BooleanStories.True} />
+        <StoryComponent of={BooleanStories.True} />
+        <StoryComponent of={BooleanStories.False} />
+        <StoryComponent of={BooleanStories.False} />
+        <StoryComponent of={BooleanStories.False} />
+        <StoryComponent of={BooleanStories.Undefined} />
+        <StoryComponent of={BooleanStories.Undefined} />
+        <StoryComponent of={BooleanStories.Undefined} />
+      </Canvas>
+    );
+  },
+  play: expectAmountOfStoriesInSource(9),
+};
+
+export const MixedChildrenStories: Story = {
+  args: { isColumn: true },
+  render: (args) => {
+    return (
+      <Canvas {...args}>
+        <h1>Headline for Boolean Controls true</h1>
+        <StoryComponent of={BooleanStories.True} />
+        <h1>Headline for Boolean Controls undefined</h1>
+        <StoryComponent of={BooleanStories.Undefined} />
+      </Canvas>
+    );
+  },
+  play: async (args) => {
+    // this function will also expand the source code
+    await expectAmountOfStoriesInSource(2)(args);
+    const canvas = within(args.canvasElement);
+
+    // Assert - only find two headlines, those in the story, and none in the source code
+    expect(canvas.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2);
+  },
+};
diff --git a/code/ui/blocks/src/blocks/internal/README.md b/code/ui/blocks/src/blocks/internal/README.md
new file mode 100644
index 000000000000..cad12d8f0a00
--- /dev/null
+++ b/code/ui/blocks/src/blocks/internal/README.md
@@ -0,0 +1,8 @@
+# Internal `@storybook/blocks` Stories
+
+This directory contains stories that are not suitable for public documentation, but that we still want to keep to ensure things don't break.
+
+Some blocks have deprecated features that users shouldn't use moving forward, and these internal stories represents those.
+That way we can still test them and ensure the features work, until they are removed for good.
+
+This directory is not part of the (public) Blocks Storybook, but are included in the full UI Storybook.
diff --git a/code/ui/blocks/src/blocks/useStory.ts b/code/ui/blocks/src/blocks/useStory.ts
index 6904c196aab7..c97e91716439 100644
--- a/code/ui/blocks/src/blocks/useStory.ts
+++ b/code/ui/blocks/src/blocks/useStory.ts
@@ -1,23 +1,23 @@
 import { useState, useEffect } from 'react';
-import type { StoryId, Framework, Store_Story } from '@storybook/types';
+import type { StoryId, Renderer, Store_Story } from '@storybook/types';
 
 import type { DocsContextProps } from './DocsContext';
 
-export function useStory<TFramework extends Framework = Framework>(
+export function useStory<TRenderer extends Renderer = Renderer>(
   storyId: StoryId,
-  context: DocsContextProps<TFramework>
-): Store_Story<TFramework> | void {
+  context: DocsContextProps<TRenderer>
+): Store_Story<TRenderer> | void {
   const stories = useStories([storyId], context);
   return stories && stories[0];
 }
 
-export function useStories<TFramework extends Framework = Framework>(
+export function useStories<TRenderer extends Renderer = Renderer>(
   storyIds: StoryId[],
-  context: DocsContextProps<TFramework>
-): (Store_Story<TFramework> | void)[] {
+  context: DocsContextProps<TRenderer>
+): (Store_Story<TRenderer> | void)[] {
   // Legacy docs pages can reference any story by id. Those stories will need to be
   // asyncronously loaded; we use the state for this
-  const [storiesById, setStories] = useState<Record<StoryId, Store_Story<TFramework>>>({});
+  const [storiesById, setStories] = useState<Record<StoryId, Store_Story<TRenderer>>>({});
 
   useEffect(() => {
     // deepscan-disable-next-line NO_EFFECT_CALL
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgRow.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgRow.stories.tsx
index d26399daeec1..301c32e21052 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgRow.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgRow.stories.tsx
@@ -7,7 +7,7 @@ export default {
   component: ArgRow,
   title: 'Components/ArgsTable/ArgRow',
   decorators: [
-    (getStory) => (
+    (getStory: any) => (
       <ResetWrapper>
         <TableWrapper>
           <tbody>{getStory()}</tbody>
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index 31358c3c1a11..6220c2a895cb 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -55,16 +55,17 @@ const AddonPanelLayout = styled.div(({ theme }) => ({
 
 export const InAddonPanel = {
   args: { ...Normal.args, inAddonPanel: true },
-  decorators: [(storyFn) => <AddonPanelLayout>{storyFn()}</AddonPanelLayout>],
+  decorators: [(storyFn: any) => <AddonPanelLayout>{storyFn()}</AddonPanelLayout>],
 };
 
 export const InAddonPanelWithWarning = {
-  render: (args) => (
+  render: (args: any) => (
     <>
       <NoControlsWarning />
       <ArgsTable {...args} />
     </>
   ),
+  // @ts-expect-error (not strict)
   args: { ...InAddonPanel.args, updateArgs: null },
   decorators: InAddonPanel.decorators,
 };
diff --git a/code/ui/blocks/src/components/ArgsTable/SectionRow.stories.tsx b/code/ui/blocks/src/components/ArgsTable/SectionRow.stories.tsx
index 77b4f9860732..0b386d3c881b 100644
--- a/code/ui/blocks/src/components/ArgsTable/SectionRow.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/SectionRow.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { ResetWrapper } from '@storybook/components';
 import { SectionRow } from './SectionRow';
@@ -6,7 +7,7 @@ import { TableWrapper } from './ArgsTable';
 export default {
   component: SectionRow,
   decorators: [
-    (getStory) => (
+    (getStory: any) => (
       <ResetWrapper>
         <TableWrapper>
           <tbody>{getStory()}</tbody>
@@ -36,8 +37,8 @@ export const Collapsed = {
 
 export const Nested = {
   render: () => (
-    <SectionRow {...Section.args}>
-      <SectionRow {...Subsection.args}>
+    <SectionRow {...(Section.args as ComponentProps<typeof SectionRow>)}>
+      <SectionRow {...(Subsection.args as ComponentProps<typeof SectionRow>)}>
         <tr>
           <td colSpan={2}>Some content</td>
         </tr>
diff --git a/code/ui/blocks/src/components/DocsPage.stories.tsx b/code/ui/blocks/src/components/DocsPage.stories.tsx
index 1e03a93c861b..e8453029f20b 100644
--- a/code/ui/blocks/src/components/DocsPage.stories.tsx
+++ b/code/ui/blocks/src/components/DocsPage.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { Global, css } from '@storybook/theming';
 import { Source, ArgsTable, Description } from '.';
@@ -13,7 +14,7 @@ export default {
   // The goal of this decorator is to mimic some CSS reset.
   // Like Tailwind CSS or Bulma do, for example.
   decorators: [
-    (storyFn) => (
+    (storyFn: any) => (
       <>
         <Global
           styles={css`
@@ -40,7 +41,7 @@ export const Loading = () => (
     </Subtitle>
     <Description {...description.Text.args} />
     <Preview.Loading />
-    <ArgsTable {...argsTable.Loading.args} />
+    <ArgsTable {...(argsTable.Loading.args as ComponentProps<typeof ArgsTable>)} />
     <Source {...source.Loading.args} />
   </DocsPageWrapper>
 );
diff --git a/code/ui/blocks/src/components/Preview.stories.tsx b/code/ui/blocks/src/components/Preview.stories.tsx
index ea46dc350ae3..baa4bb70f50c 100644
--- a/code/ui/blocks/src/components/Preview.stories.tsx
+++ b/code/ui/blocks/src/components/Preview.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import global from 'global';
@@ -87,11 +88,11 @@ const buttonFn = () => <Button secondary>Hello Button</Button>;
 
 export const WithToolbar = () => (
   <Preview withToolbar>
-    <Story inline storyFn={buttonFn} title="with toolbar" />
+    <Story id="a" inline storyFn={buttonFn} title="with toolbar" />
   </Preview>
 );
 
-const Horizontal = styled((props) => <Spaced col={1} {...props} />)({
+const Horizontal = styled((props: ComponentProps<typeof Spaced>) => <Spaced col={1} {...props} />)({
   display: 'grid',
   gridTemplateColumns: '100px calc(100vw + 100px) 100px',
 });
@@ -108,14 +109,15 @@ export const Wide = () => (
 
 export const WithToolbarMulti = () => (
   <Preview withToolbar>
-    <Story inline storyFn={buttonFn} title="story1" />
-    <Story inline storyFn={buttonFn} title="story2" />
+    <Story id="a" inline storyFn={buttonFn} title="story1" />
+    <Story id="b" inline storyFn={buttonFn} title="story2" />
   </Preview>
 );
 
 export const WithFullscreenSingle = () => (
   <Preview withToolbar>
     <Story
+      id="a"
       inline
       storyFn={buttonFn}
       title="story1"
@@ -129,6 +131,7 @@ export const WithFullscreenSingle = () => (
 export const WithFullscreenMulti = () => (
   <Preview withToolbar>
     <Story
+      id="a"
       inline
       storyFn={buttonFn}
       title="story1"
@@ -137,6 +140,7 @@ export const WithFullscreenMulti = () => (
       }}
     />
     <Story
+      id="b"
       inline
       storyFn={buttonFn}
       title="story2"
@@ -150,6 +154,7 @@ export const WithFullscreenMulti = () => (
 export const WithCenteredSingle = () => (
   <Preview withToolbar>
     <Story
+      id="a"
       inline
       storyFn={buttonFn}
       title="story1"
@@ -163,6 +168,7 @@ export const WithCenteredSingle = () => (
 export const WithCenteredMulti = () => (
   <Preview withToolbar>
     <Story
+      id="a"
       inline
       storyFn={buttonFn}
       title="story1"
@@ -171,6 +177,7 @@ export const WithCenteredMulti = () => (
       }}
     />
     <Story
+      id="b"
       inline
       storyFn={buttonFn}
       title="story2"
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
index 726ab58e9b30..82458c745a4b 100644
--- a/code/ui/blocks/src/controls/Boolean.stories.tsx
+++ b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -1,10 +1,20 @@
+import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
+import { within, fireEvent } from '@storybook/testing-library';
+import { addons } from '@storybook/addons';
+import { RESET_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events';
 import { BooleanControl } from './Boolean';
 
 const meta = {
   component: BooleanControl,
   tags: ['docsPage'],
-  parameters: { withRawArg: 'value', controls: { include: ['value'] } },
+  parameters: {
+    withRawArg: 'value',
+    controls: { include: ['value'] },
+    notes: 'These are notes for the Boolean control stories',
+    info: 'This is info for the Boolean control stories',
+    jsx: { useBooleanShorthandSyntax: false },
+  },
   args: { name: 'boolean' },
 } as Meta<typeof BooleanControl>;
 
@@ -26,3 +36,45 @@ export const Undefined: StoryObj<typeof BooleanControl> = {
     value: undefined,
   },
 };
+
+export const Toggling: StoryObj<typeof BooleanControl> = {
+  args: {
+    value: undefined,
+  },
+  play: async ({ canvasElement, id }) => {
+    const channel = addons.getChannel();
+
+    channel.emit(RESET_STORY_ARGS, { storyId: id });
+    await new Promise<void>((resolve) => {
+      channel.once(STORY_ARGS_UPDATED, resolve);
+    });
+
+    const canvas = within(canvasElement);
+
+    // from Undefined to False
+    const setBooleanControl = canvas.getByText('Set boolean');
+    await fireEvent.click(setBooleanControl);
+
+    let toggle = await canvas.findByTitle('Change to true');
+    expect(toggle).toBeInTheDocument();
+
+    // from False to True
+    await fireEvent.click(toggle);
+    toggle = await canvas.findByTitle('Change to false');
+    expect(toggle).toBeInTheDocument();
+
+    // from True to False
+    await fireEvent.click(toggle);
+    toggle = await canvas.findByTitle('Change to true');
+    expect(toggle).toBeInTheDocument();
+  },
+};
+
+export const TogglingInDocs: StoryObj<typeof BooleanControl> = {
+  ...Toggling,
+  parameters: {
+    docs: {
+      autoplay: true,
+    },
+  },
+};
diff --git a/code/ui/blocks/src/controls/Boolean.tsx b/code/ui/blocks/src/controls/Boolean.tsx
index 8abec1e34902..556701febca0 100644
--- a/code/ui/blocks/src/controls/Boolean.tsx
+++ b/code/ui/blocks/src/controls/Boolean.tsx
@@ -86,6 +86,11 @@ const Label = styled.label(({ theme }) => ({
 const parse = (value: string | null): boolean => value === 'true';
 
 export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
+/**
+ * # Boolean control
+ * Renders a switch toggle with "True" or "False".
+ * or if the value is `undefined`, renders a button to set the boolean.
+ */
 export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur, onFocus }) => {
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
   if (value === undefined) {
@@ -95,13 +100,14 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
       </Form.Button>
     );
   }
+  const controlId = getControlId(name);
 
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 
   return (
-    <Label htmlFor={name} title={parsedValue ? 'Change to false' : 'Change to true'}>
+    <Label htmlFor={controlId} title={parsedValue ? 'Change to false' : 'Change to true'}>
       <input
-        id={getControlId(name)}
+        id={controlId}
         type="checkbox"
         onChange={(e) => onChange(e.target.checked)}
         checked={parsedValue}
diff --git a/code/ui/blocks/src/controls/options/Checkbox.tsx b/code/ui/blocks/src/controls/options/Checkbox.tsx
index e833ed1cba95..6fe2cf00255b 100644
--- a/code/ui/blocks/src/controls/options/Checkbox.tsx
+++ b/code/ui/blocks/src/controls/options/Checkbox.tsx
@@ -1,5 +1,5 @@
 import type { FC, ChangeEvent } from 'react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { styled } from '@storybook/theming';
 import { logger } from '@storybook/client-logger';
 
@@ -73,6 +73,10 @@ export const CheckboxControl: FC<CheckboxProps> = ({
     setSelected(updated);
   };
 
+  useEffect(() => {
+    setSelected(selectedKeys(value, options));
+  }, [value]);
+
   const controlId = getControlId(name);
 
   return (
diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx
index c78738a2aff0..541a2423d6d1 100644
--- a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx
+++ b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx
@@ -1086,7 +1086,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
   onChildUpdate(childKey: string, childData: any) {
     const { data, keyPath } = this.state;
     // Update data
-    // @ts-expect-error (Converted from ts-ignore)
     data[childKey] = childData;
     // Put new data
     this.setState({
@@ -1117,7 +1116,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     beforeAddAction(key, keyPath, deep, newValue)
       .then(() => {
         // Update data
-        // @ts-expect-error (Converted from ts-ignore)
         data[key] = newValue;
         this.setState({
           data,
@@ -1143,7 +1141,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     return () => {
       const { beforeRemoveAction, logger } = this.props;
       const { data, keyPath, nextDeep: deep } = this.state;
-      // @ts-expect-error (Converted from ts-ignore)
       const oldValue = data[key];
       // Before Remove Action
       beforeRemoveAction(key, keyPath, deep, oldValue)
@@ -1156,7 +1153,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
             type: deltaTypes.REMOVE_DELTA_TYPE,
           };
 
-          // @ts-expect-error (Converted from ts-ignore)
           delete data[key];
           this.setState({ data });
 
@@ -1182,14 +1178,12 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
       const { data, keyPath, nextDeep: deep } = this.state;
 
       // Old value
-      // @ts-expect-error (Converted from ts-ignore)
       const oldValue = data[key];
 
       // Before update action
       beforeUpdateAction(key, keyPath, deep, oldValue, value)
         .then(() => {
           // Update value
-          // @ts-expect-error (Converted from ts-ignore)
           data[key] = value;
           // Set state
           this.setState({
diff --git a/code/ui/blocks/tsconfig.json b/code/ui/blocks/tsconfig.json
index 3fe5e6e0dffa..fe3d69acb7ce 100644
--- a/code/ui/blocks/tsconfig.json
+++ b/code/ui/blocks/tsconfig.json
@@ -1,16 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "esnext",
     "rootDir": "./src",
     "types": ["jest"]
   },
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/ui/components/jest.config.js b/code/ui/components/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/ui/components/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index c5290bd6cded..a2ed822ea3a2 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -51,10 +51,10 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0-alpha.48",
+    "@storybook/client-logger": "7.0.0-alpha.51",
     "@storybook/csf": "next",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "memoizerific": "^1.11.3",
     "util-deprecate": "^1.0.2"
   },
@@ -67,12 +67,12 @@
     "global": "^4.4.0",
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.2.2",
-    "prettier": ">=2.5",
+    "prettier": "^2.7.1",
     "react-popper-tooltip": "^3.1.1",
     "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
     "ts-dedent": "^2.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -87,5 +87,5 @@
     ],
     "platform": "neutral"
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/ui/components/src/Loader/Loader.stories.tsx b/code/ui/components/src/Loader/Loader.stories.tsx
index d4763280fe4d..b40944cc4060 100644
--- a/code/ui/components/src/Loader/Loader.stories.tsx
+++ b/code/ui/components/src/Loader/Loader.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PureLoader as Loader } from './Loader';
 
-const withBackground = (storyFn) => (
+const withBackground = (storyFn: any) => (
   <div
     style={{
       position: 'fixed',
diff --git a/code/ui/components/src/Zoom/Zoom.stories.tsx b/code/ui/components/src/Zoom/Zoom.stories.tsx
index 914fe35d7427..5aadccabf667 100644
--- a/code/ui/components/src/Zoom/Zoom.stories.tsx
+++ b/code/ui/components/src/Zoom/Zoom.stories.tsx
@@ -24,10 +24,11 @@ const EXAMPLE_ELEMENT = (
   />
 );
 
-const TemplateElement = (args) => <Zoom.Element {...args} />;
+const TemplateElement = (args: any) => <Zoom.Element {...args} />;
 
 export const ElementActualSize = TemplateElement.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 ElementActualSize.args = {
   scale: 1,
   children: EXAMPLE_ELEMENT,
@@ -35,6 +36,7 @@ ElementActualSize.args = {
 
 export const ElementZoomedIn = TemplateElement.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 ElementZoomedIn.args = {
   scale: 0.7,
   children: EXAMPLE_ELEMENT,
@@ -42,6 +44,7 @@ ElementZoomedIn.args = {
 
 export const ElementZoomedOut = TemplateElement.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 ElementZoomedOut.args = {
   scale: 3,
   children: EXAMPLE_ELEMENT,
@@ -54,7 +57,7 @@ const style: CSSProperties = {
   position: 'relative',
 };
 
-const TemplateIFrame = (args) => {
+const TemplateIFrame = (args: any) => {
   const iFrameRef = React.useRef<HTMLIFrameElement>(null);
   const [scale, setScale] = useState(1);
   const [loaded, hasLoaded] = useState(false);
@@ -80,6 +83,7 @@ const TemplateIFrame = (args) => {
 };
 export const IFrameActualSize = TemplateIFrame.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 IFrameActualSize.args = {
   scale: 1,
   active: true,
@@ -87,28 +91,33 @@ IFrameActualSize.args = {
 
 // The iFrame stories are disabled because useGlobals works in practice
 // but, for some reason breaks in the stories for Zoom.iFrame
+// @ts-expect-error (to be converted to CSF3)
 IFrameActualSize.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
 export const IFrameZoomedIn = TemplateIFrame.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 IFrameZoomedIn.args = {
   scale: 0.7,
   active: true,
 };
 
+// @ts-expect-error (to be converted to CSF3)
 IFrameZoomedIn.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
 export const IFrameZoomedOut = TemplateIFrame.bind({});
 
+// @ts-expect-error (to be converted to CSF3)
 IFrameZoomedOut.args = {
   scale: 3,
   active: true,
 };
 
+// @ts-expect-error (to be converted to CSF3)
 IFrameZoomedOut.parameters = {
   chromatic: { disableSnapshot: true },
 };
diff --git a/code/ui/components/src/addon-panel/addon-panel.tsx b/code/ui/components/src/addon-panel/addon-panel.tsx
index 9e8bb2f49ac8..89e32c0b8592 100644
--- a/code/ui/components/src/addon-panel/addon-panel.tsx
+++ b/code/ui/components/src/addon-panel/addon-panel.tsx
@@ -25,10 +25,7 @@ export interface AddonPanelProps {
 
 export const AddonPanel = ({ active, children }: AddonPanelProps) => {
   return (
-    // the transform is to prevent a bug where the content would be invisible
     // the hidden attribute is an valid html element that's both accessible and works to visually hide content
-    <div hidden={!active} style={{ transform: 'translateX(0px)' }}>
-      {useUpdate(active, children)}
-    </div>
+    <div hidden={!active}>{useUpdate(active, children)}</div>
   );
 };
diff --git a/code/ui/components/src/form/form.stories.tsx b/code/ui/components/src/form/form.stories.tsx
index de690d17176a..993000e6085b 100644
--- a/code/ui/components/src/form/form.stories.tsx
+++ b/code/ui/components/src/form/form.stories.tsx
@@ -43,7 +43,7 @@ const sharedArgTypes = {
 };
 
 export const Field = {
-  render: (args) => (
+  render: (args: any) => (
     <FieldComponent key="key" {...args}>
       <InputComponents.Select value="val2" onChange={action('onChange')}>
         <option value="val1">Value 1</option>
@@ -63,7 +63,7 @@ export const Field = {
 };
 
 export const Select = {
-  render: (args) => (
+  render: (args: any) => (
     <Flexed>
       <InputComponents.Select onChange={action('onChange')} {...args}>
         <option value="val1">Value 1</option>
@@ -85,7 +85,7 @@ export const Select = {
 };
 
 export const Button = {
-  render: (args) => (
+  render: (args: any) => (
     <Flexed>
       <InputComponents.Button {...args}>Form Button</InputComponents.Button>
     </Flexed>
@@ -94,7 +94,7 @@ export const Button = {
 };
 
 export const Textarea = {
-  render: (args) => (
+  render: (args: any) => (
     <Flexed>
       <InputComponents.Textarea {...args} />
     </Flexed>
@@ -110,7 +110,7 @@ export const Textarea = {
 };
 
 export const Input = {
-  render: (args) => (
+  render: (args: any) => (
     <Flexed>
       <InputComponents.Input {...args} />
     </Flexed>
diff --git a/code/ui/components/src/icon/icon.stories.tsx b/code/ui/components/src/icon/icon.stories.tsx
index 8bf3fd4fb834..d2ea3a028c67 100644
--- a/code/ui/components/src/icon/icon.stories.tsx
+++ b/code/ui/components/src/icon/icon.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled, css } from '@storybook/theming';
 
@@ -58,7 +59,7 @@ export default {
   component: Icons,
 };
 
-export const Basic = (args) => <Icons {...args} />;
+export const Basic = (args: ComponentProps<typeof Icons>) => <Icons {...args} />;
 Basic.args = { icon: 'watch' };
 
 export const Labels = () => (
diff --git a/code/ui/components/src/spaced/Spaced.stories.tsx b/code/ui/components/src/spaced/Spaced.stories.tsx
index 6acde870ab34..26d4c3afafe7 100644
--- a/code/ui/components/src/spaced/Spaced.stories.tsx
+++ b/code/ui/components/src/spaced/Spaced.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -17,7 +18,7 @@ export default {
   component: Spaced,
 };
 
-export const Default = (args) => (
+export const Default = (args: ComponentProps<typeof Spaced>) => (
   <div>
     <PlaceholderBlock color="silver" />
     <Spaced {...args}>
@@ -30,7 +31,7 @@ export const Default = (args) => (
 );
 
 export const Column = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof Spaced>) => (
     <div>
       <PlaceholderBlock color="silver" />
       <Spaced {...args}>
@@ -43,7 +44,7 @@ export const Column = {
   ),
 };
 export const Row = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof Spaced>) => (
     <div>
       <PlaceholderInline color="silver" />
       <Spaced {...args}>
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index a1e19cd73479..22609a6f5543 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react';
+import type { ComponentProps } from 'react';
+import React from 'react';
 import { ThemeProvider, themes, ensure } from '@storybook/theming';
 import { SyntaxHighlighter } from './lazy-syntaxhighlighter';
 
@@ -149,7 +150,7 @@ export const UnsupportedDark = {
       }
     }`,
   },
-  render: (args) => (
+  render: (args: ComponentProps<typeof SyntaxHighlighter>) => (
     <ThemeProvider theme={ensure(themes.dark)}>
       <SyntaxHighlighter {...args} />
     </ThemeProvider>
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 7cab27104b33..4d29727d340b 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -5,30 +5,19 @@ import { styled } from '@storybook/theming';
 import global from 'global';
 import memoize from 'memoizerific';
 
-// @ts-expect-error (Converted from ts-ignore)
 import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
-// @ts-expect-error (Converted from ts-ignore)
 import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-// @ts-expect-error (Converted from ts-ignore)
 import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
 // @ts-expect-error (Converted from ts-ignore)
 import jsExtras from 'react-syntax-highlighter/dist/esm/languages/prism/js-extras';
-// @ts-expect-error (Converted from ts-ignore)
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-// @ts-expect-error (Converted from ts-ignore)
 import graphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
-// @ts-expect-error (Converted from ts-ignore)
 import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
-// @ts-expect-error (Converted from ts-ignore)
 import md from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
-// @ts-expect-error (Converted from ts-ignore)
 import yml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-// @ts-expect-error (Converted from ts-ignore)
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-// @ts-expect-error (Converted from ts-ignore)
 import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
 
-// @ts-expect-error (Converted from ts-ignore)
 import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 // @ts-expect-error (Converted from ts-ignore)
 import { createElement } from 'react-syntax-highlighter/dist/esm/index';
diff --git a/code/ui/components/src/tabs/tabs.stories.tsx b/code/ui/components/src/tabs/tabs.stories.tsx
index a977c46eecb1..9aaa4fb3c457 100644
--- a/code/ui/components/src/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/tabs/tabs.stories.tsx
@@ -1,4 +1,4 @@
-import type { Key } from 'react';
+import type { ComponentProps, Key } from 'react';
 import React, { Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 import { logger } from '@storybook/client-logger';
@@ -35,7 +35,7 @@ function fibonacci(num: number, memo?: FibonacciMap): number {
 interface Panels {
   [key: string]: {
     title: string;
-    color: string;
+    color?: string;
     render: ({ active, key }: { active: boolean; key: Key }) => JSX.Element;
   };
 }
@@ -136,7 +136,7 @@ export default {
 } as Meta;
 
 export const StatefulStatic = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <TabsState initial="test2" {...args}>
       <div id="test1" title="With a function">
         {({ active, selected }: { active: boolean; selected: string }) =>
@@ -151,7 +151,7 @@ export const StatefulStatic = {
 };
 
 export const StatefulStaticWithSetButtonTextColors = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <div>
       <TabsState initial="test2" {...args}>
         <div id="test1" title="With a function" color="#e00000">
@@ -167,7 +167,7 @@ export const StatefulStaticWithSetButtonTextColors = {
   ),
 };
 export const StatefulStaticWithSetBackgroundColor = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <div>
       <TabsState initial="test2" backgroundColor="rgba(0,0,0,.05)" {...args}>
         <div id="test1" title="With a function" color="#e00000">
@@ -184,7 +184,7 @@ export const StatefulStaticWithSetBackgroundColor = {
 };
 
 export const StatefulDynamic = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <TabsState initial="test3" {...args}>
       {Object.entries(panels).map(([k, v]) => (
         <div key={k} id={k} title={v.title}>
@@ -195,10 +195,10 @@ export const StatefulDynamic = {
   ),
 };
 export const StatefulNoInitial = {
-  render: (args) => <TabsState {...args}>{content}</TabsState>,
+  render: (args: ComponentProps<typeof TabsState>) => <TabsState {...args}>{content}</TabsState>,
 };
 export const StatelessBordered = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <Tabs
       bordered
       absolute={false}
@@ -213,7 +213,7 @@ export const StatelessBordered = {
   ),
 };
 export const StatelessWithTools = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <Tabs
       selected="test3"
       actions={{
@@ -236,7 +236,7 @@ export const StatelessWithTools = {
   ),
 };
 export const StatelessAbsolute = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <Tabs
       absolute
       selected="test3"
@@ -250,7 +250,7 @@ export const StatelessAbsolute = {
   ),
 };
 export const StatelessAbsoluteBordered = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <Tabs
       absolute
       bordered
@@ -265,7 +265,7 @@ export const StatelessAbsoluteBordered = {
   ),
 };
 export const StatelessEmpty = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof TabsState>) => (
     <Tabs
       actions={{
         onSelect,
diff --git a/code/ui/components/src/tooltip/ListItem.stories.tsx b/code/ui/components/src/tooltip/ListItem.stories.tsx
index 60825da56c21..38344eb63356 100644
--- a/code/ui/components/src/tooltip/ListItem.stories.tsx
+++ b/code/ui/components/src/tooltip/ListItem.stories.tsx
@@ -7,7 +7,7 @@ export default {
 };
 
 export const All = {
-  render: (args) => (
+  render: () => (
     <div>
       <ListItem loading />
       <ListItem title="Default" />
diff --git a/code/ui/components/src/tooltip/Tooltip.stories.tsx b/code/ui/components/src/tooltip/Tooltip.stories.tsx
index 1c677ed615f4..fc9e8802bae7 100644
--- a/code/ui/components/src/tooltip/Tooltip.stories.tsx
+++ b/code/ui/components/src/tooltip/Tooltip.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { styled } from '@storybook/theming';
 import { Tooltip } from './Tooltip';
@@ -25,7 +26,7 @@ export default {
 
 export const BasicDefault = {
   // args: mockPopperProps,
-  render: (args) => (
+  render: (args: ComponentProps<typeof Tooltip>) => (
     <Tooltip {...args}>
       <Content>Text</Content>
     </Tooltip>
@@ -37,7 +38,7 @@ export const BasicDefaultBottom = {
     // ...mockPopperProps,
     placement: 'bottom',
   },
-  render: (args) => (
+  render: (args: ComponentProps<typeof Tooltip>) => (
     <Tooltip {...args}>
       <Content>Text</Content>
     </Tooltip>
@@ -49,7 +50,7 @@ export const BasicDefaultLeft = {
     // ...mockPopperProps,
     placement: 'left',
   },
-  render: (args) => (
+  render: (args: ComponentProps<typeof Tooltip>) => (
     <Tooltip {...args}>
       <Content>Text</Content>
     </Tooltip>
@@ -61,7 +62,7 @@ export const BasicDefaultRight = {
     // ...mockPopperProps,
     placement: 'right',
   },
-  render: (args) => (
+  render: (args: ComponentProps<typeof Tooltip>) => (
     <Tooltip {...args}>
       <Content>Text</Content>
     </Tooltip>
@@ -73,7 +74,7 @@ export const WithoutChrome = {
     // ...mockPopperProps,
     hasChrome: false,
   },
-  render: (args) => (
+  render: (args: ComponentProps<typeof Tooltip>) => (
     <Tooltip {...args}>
       <Content>Text</Content>
     </Tooltip>
diff --git a/code/ui/components/src/tooltip/TooltipNote.stories.tsx b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
index b0b0808803fe..f21030c62b75 100644
--- a/code/ui/components/src/tooltip/TooltipNote.stories.tsx
+++ b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
@@ -5,7 +5,7 @@ import { TooltipNote } from './TooltipNote';
 export default {
   component: TooltipNote,
   decorators: [
-    (storyFn) => (
+    (storyFn: any) => (
       <div
         style={{
           height: '300px',
diff --git a/code/ui/components/src/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
index 4a00f948f2cd..6792be11b086 100644
--- a/code/ui/components/src/tooltip/WithTooltip.stories.tsx
+++ b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
@@ -48,7 +48,7 @@ const Tooltip: FunctionComponent<TooltipProps> = ({ onHide }) => (
 export default {
   component: WithTooltip,
   decorators: [
-    (storyFn) => (
+    (storyFn: any) => (
       <ViewPort>
         <BackgroundBox>
           <Spacer />
diff --git a/code/ui/components/src/typography/link/link.stories.tsx b/code/ui/components/src/typography/link/link.stories.tsx
index e696d44c876b..7df61e61995f 100644
--- a/code/ui/components/src/typography/link/link.stories.tsx
+++ b/code/ui/components/src/typography/link/link.stories.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Link } from './link';
@@ -44,7 +45,7 @@ export const NoCancelWHref = {
 };
 
 export const StyledLinks = {
-  render: (args) => (
+  render: (args: ComponentProps<typeof Link>) => (
     <div>
       <Link href="http://google.com" {...args}>
         Default
diff --git a/code/ui/components/tsconfig.json b/code/ui/components/tsconfig.json
index f8b60c90fdef..73a65ef2ef6e 100644
--- a/code/ui/components/tsconfig.json
+++ b/code/ui/components/tsconfig.json
@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/ui/manager/jest.config.js b/code/ui/manager/jest.config.js
new file mode 100644
index 000000000000..4396fbc7010d
--- /dev/null
+++ b/code/ui/manager/jest.config.js
@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index a5aba95f6530..91fa164105b8 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "7.0.0-alpha.48",
+  "version": "7.0.0-alpha.51",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -53,17 +53,17 @@
   },
   "devDependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
-    "@storybook/channel-postmessage": "7.0.0-alpha.48",
-    "@storybook/channel-websocket": "7.0.0-alpha.48",
-    "@storybook/channels": "7.0.0-alpha.48",
-    "@storybook/client-logger": "7.0.0-alpha.48",
-    "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
-    "@storybook/router": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
-    "@storybook/types": "7.0.0-alpha.48",
+    "@storybook/addons": "7.0.0-alpha.51",
+    "@storybook/api": "7.0.0-alpha.51",
+    "@storybook/channel-postmessage": "7.0.0-alpha.51",
+    "@storybook/channel-websocket": "7.0.0-alpha.51",
+    "@storybook/channels": "7.0.0-alpha.51",
+    "@storybook/client-logger": "7.0.0-alpha.51",
+    "@storybook/components": "7.0.0-alpha.51",
+    "@storybook/core-events": "7.0.0-alpha.51",
+    "@storybook/router": "7.0.0-alpha.51",
+    "@storybook/theming": "7.0.0-alpha.51",
+    "@storybook/types": "7.0.0-alpha.51",
     "@testing-library/react": "^11.2.2",
     "@types/semver": "^7.3.4",
     "copy-to-clipboard": "^3.3.1",
@@ -77,7 +77,7 @@
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "qs": "^6.10.0",
-    "react": "^16.8.0",
+    "react": "^16.14.0",
     "react-dom": "^16.8.0",
     "react-draggable": "^4.4.3",
     "react-helmet-async": "^1.0.7",
@@ -87,7 +87,7 @@
     "shelljs": "^0.8.5",
     "store2": "^2.12.0",
     "ts-dedent": "^2.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
   },
   "publishConfig": {
     "access": "public"
@@ -100,5 +100,5 @@
       "./src/runtime.ts"
     ]
   },
-  "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd"
+  "gitHead": "4fec76c3f5135854d9834ebc1cf2f1f325696ded"
 }
diff --git a/code/ui/manager/src/app.stories.tsx b/code/ui/manager/src/app.stories.tsx
index 19c1390964ba..bd2e737eb26a 100644
--- a/code/ui/manager/src/app.stories.tsx
+++ b/code/ui/manager/src/app.stories.tsx
@@ -13,7 +13,7 @@ export default {
     layout: 'fullscreen',
   },
   decorators: [
-    (StoryFn) => (
+    (StoryFn: any) => (
       <HelmetProvider key="helmet.Provider">
         <LocationProvider>
           <ThemeStack>
diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx
index 3631e29f4cea..8cb1a9605516 100644
--- a/code/ui/manager/src/components/layout/app.mockdata.tsx
+++ b/code/ui/manager/src/components/layout/app.mockdata.tsx
@@ -58,7 +58,7 @@ export const panels: Addon_Collection = {
 };
 
 const realSidebarProps: SidebarProps = {
-  stories: mockDataset.withRoot,
+  stories: mockDataset.withRoot as SidebarProps['stories'],
   menu: [],
   refs: {},
   storiesConfigured: true,
diff --git a/code/ui/manager/src/components/layout/mobile.stories.tsx b/code/ui/manager/src/components/layout/mobile.stories.tsx
index ff0eb280a4c6..1a9121a8cc91 100644
--- a/code/ui/manager/src/components/layout/mobile.stories.tsx
+++ b/code/ui/manager/src/components/layout/mobile.stories.tsx
@@ -33,6 +33,9 @@ export const InitialCanvas = ({ props }: { props: MobileProps }) => (
 export const InitialAddons = ({ props }: { props: MobileProps }) => (
   <Mobile {...props} options={{ ...props.options, initialActive: ActiveTabs.ADDONS }} />
 );
+export const NoPanel = ({ props }: { props: MobileProps }) => (
+  <Mobile {...props} options={{ ...props.options, showPanel: false }} />
+);
 
 export const Fullscreen = ({ props }: { props: MobileProps }) => (
   <Mobile
diff --git a/code/ui/manager/src/components/layout/mobile.tsx b/code/ui/manager/src/components/layout/mobile.tsx
index e611891ccb5b..f74f8369ff73 100644
--- a/code/ui/manager/src/components/layout/mobile.tsx
+++ b/code/ui/manager/src/components/layout/mobile.tsx
@@ -134,11 +134,7 @@ export interface Page {
 }
 
 export interface MobileProps {
-  options: {
-    initialActive: ActiveTabsType;
-    showToolbar: boolean;
-    isFullscreen: boolean;
-  };
+  options: Pick<State['layout'], 'isFullscreen' | 'showPanel' | 'initialActive' | 'showToolbar'>;
   Sidebar: ComponentType<any>;
   Preview: ComponentType<any>;
   Panel: ComponentType<any>;
@@ -204,7 +200,7 @@ class Mobile extends Component<MobileProps, MobileState> {
                 <Route key={key}>{key}</Route>
               ))}
             </TabButton>
-            {viewMode ? (
+            {viewMode && options.showPanel ? (
               <TabButton
                 onClick={() => this.setState({ active: ADDONS })}
                 active={active === ADDONS}
diff --git a/code/ui/manager/src/components/preview/FramesRenderer.tsx b/code/ui/manager/src/components/preview/FramesRenderer.tsx
index b457e62383fd..21ca40879d47 100644
--- a/code/ui/manager/src/components/preview/FramesRenderer.tsx
+++ b/code/ui/manager/src/components/preview/FramesRenderer.tsx
@@ -58,12 +58,12 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
   const active = getActive(refId);
 
   const styles = useMemo<CSSObject>(() => {
-    // add #storybook-root to make the selector high enough in specificity
+    // add #root to make the selector high enough in specificity
     return {
-      '#storybook-root [data-is-storybook="false"]': {
+      '#root [data-is-storybook="false"]': {
         display: 'none',
       },
-      '#storybook-root [data-is-storybook="true"]': {
+      '#root [data-is-storybook="true"]': {
         display: 'block',
       },
     };
diff --git a/code/ui/manager/src/components/preview/preview.mockdata.tsx b/code/ui/manager/src/components/preview/preview.mockdata.tsx
index f4f172766c69..5e2d69dcdf9a 100644
--- a/code/ui/manager/src/components/preview/preview.mockdata.tsx
+++ b/code/ui/manager/src/components/preview/preview.mockdata.tsx
@@ -25,6 +25,7 @@ export const previewProps: PreviewProps = {
   } as any as API,
   entry: {
     type: 'story',
+    tags: [],
     id: 'story--id',
     parent: 'root',
     depth: 1,
diff --git a/code/ui/manager/src/components/preview/preview.stories.tsx b/code/ui/manager/src/components/preview/preview.stories.tsx
index 877209165e0c..dba22a1fd4ca 100644
--- a/code/ui/manager/src/components/preview/preview.stories.tsx
+++ b/code/ui/manager/src/components/preview/preview.stories.tsx
@@ -15,7 +15,7 @@ import { previewProps } from './preview.mockdata';
 
 const provider = new PrettyFakeProvider();
 const staticNavigator = {
-  createHref(to) {
+  createHref(to: any) {
     return typeof to === 'string' ? to : createPath(to);
   },
 
@@ -41,6 +41,7 @@ export default {
         pathname: locationProp.pathname || '/',
         search: locationProp.search || '',
         hash: locationProp.hash || '',
+        // @ts-expect-error (invalid input)
         state: null,
         key: 'default',
       };
diff --git a/code/ui/manager/src/components/sidebar/Explorer.stories.tsx b/code/ui/manager/src/components/sidebar/Explorer.stories.tsx
index c1c69a3b2bde..0e10b70d134a 100644
--- a/code/ui/manager/src/components/sidebar/Explorer.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Explorer.stories.tsx
@@ -26,6 +26,7 @@ const simple: Record<string, RefType> = {
     id: 'storybook_internal',
     url: 'iframe.html',
     ready: true,
+    // @ts-expect-error (invalid input)
     stories: mockDataset.withRoot,
   },
 };
@@ -38,6 +39,7 @@ const withRefs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: true,
     type: 'auto-inject',
+    // @ts-expect-error (invalid input)
     stories: mockDataset.noRoot,
   },
   injected: {
@@ -46,6 +48,7 @@ const withRefs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: false,
     type: 'auto-inject',
+    // @ts-expect-error (invalid input)
     stories: mockDataset.noRoot,
   },
   unknown: {
@@ -54,6 +57,7 @@ const withRefs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: true,
     type: 'unknown',
+    // @ts-expect-error (invalid input)
     stories: mockDataset.noRoot,
   },
   lazy: {
@@ -62,6 +66,7 @@ const withRefs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: false,
     type: 'lazy',
+    // @ts-expect-error (invalid input)
     stories: mockDataset.withRoot,
   },
 };
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index 8db327961407..b4e06a9b3902 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -63,6 +63,7 @@ export const Expanded = () => {
     </DoubleThemeRenderingHack>
   );
 };
+// @ts-expect-error (needs to be converted to CSF3)
 Expanded.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const menuButton = await canvas.findByRole('button');
@@ -74,6 +75,7 @@ Expanded.play = async ({ canvasElement }) => {
 export const ExpandedWithoutReleaseNotes = () => {
   const menu = useMenu(
     {
+      // @ts-expect-error (invalid)
       getShortcutKeys: () => ({}),
       getAddonsShortcuts: () => ({}),
       versionUpdateAvailable: () => false,
@@ -92,6 +94,7 @@ export const ExpandedWithoutReleaseNotes = () => {
     </DoubleThemeRenderingHack>
   );
 };
+// @ts-expect-error (needs to be converted to CSF3)
 ExpandedWithoutReleaseNotes.play = async (context) => {
   const canvas = within(context.canvasElement);
   await Expanded.play(context);
diff --git a/code/ui/manager/src/components/sidebar/Refs.stories.tsx b/code/ui/manager/src/components/sidebar/Refs.stories.tsx
index 3784dad74c99..1727b323c465 100644
--- a/code/ui/manager/src/components/sidebar/Refs.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Refs.stories.tsx
@@ -43,6 +43,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: false,
     type: 'lazy',
+    // @ts-expect-error (invalid input)
     stories,
   },
   empty: {
@@ -59,6 +60,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'unknown',
     ready: false,
+    // @ts-expect-error (invalid input)
     stories,
   },
   startInjected_loading: {
@@ -67,6 +69,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'auto-inject',
     ready: false,
+    // @ts-expect-error (invalid input)
     stories,
   },
   startInjected_ready: {
@@ -75,6 +78,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'auto-inject',
     ready: true,
+    // @ts-expect-error (invalid input)
     stories,
   },
   versions: {
@@ -82,6 +86,7 @@ const refs: Record<string, RefType> = {
     title: 'It has versions',
     url: 'https://example.com',
     type: 'lazy',
+    // @ts-expect-error (invalid input)
     stories,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
   },
@@ -90,6 +95,7 @@ const refs: Record<string, RefType> = {
     title: 'It has versions',
     url: 'https://example.com',
     type: 'lazy',
+    // @ts-expect-error (invalid input)
     stories,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com/v2' },
   },
@@ -113,6 +119,7 @@ const refs: Record<string, RefType> = {
     id: 'long',
     title: 'This storybook has a very very long name for some reason',
     url: 'https://example.com',
+    // @ts-expect-error (invalid input)
     stories,
     type: 'lazy',
     versions: {
diff --git a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx
index 7f80fdcd365b..ff5dba200ba8 100644
--- a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx
@@ -34,6 +34,7 @@ const combinedDataset = (refs: Record<string, StoriesHash>): CombinedDataset =>
   return { hash, entries: Object.entries(hash) };
 };
 
+// @ts-expect-error (invalid input)
 const dataset = combinedDataset({ internal: mockDataset.withRoot, composed: mockDataset.noRoot });
 
 const internal = Object.values(dataset.hash.internal.stories).map((item) =>
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index bdb774aca6ce..9f863bfd7d2d 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -32,6 +32,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     ready: false,
     type: 'lazy',
+    // @ts-expect-error (needs to be converted to CSF3)
     stories,
   },
 };
@@ -40,7 +41,7 @@ export const Simple = () => (
   <Sidebar
     storiesConfigured
     menu={menu}
-    stories={stories}
+    stories={stories as any}
     storyId={storyId}
     refId={refId}
     refs={{}}
@@ -66,7 +67,7 @@ export const WithRefs = () => (
   <Sidebar
     storiesConfigured
     menu={menu}
-    stories={stories}
+    stories={stories as any}
     storyId={storyId}
     refId={refId}
     refs={refs}
@@ -77,7 +78,7 @@ export const LoadingWithRefs = () => (
   <Sidebar
     storiesConfigured={false}
     menu={menu}
-    stories={stories}
+    stories={stories as any}
     storyId={storyId}
     refId={refId}
     refs={refs}
diff --git a/code/ui/manager/src/components/sidebar/Tree.stories.tsx b/code/ui/manager/src/components/sidebar/Tree.stories.tsx
index b3babb5c0642..f80ef84945c1 100644
--- a/code/ui/manager/src/components/sidebar/Tree.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.stories.tsx
@@ -25,6 +25,7 @@ export const Full = () => {
   const [selectedId, setSelectedId] = React.useState(storyId);
   return (
     <Tree
+      docsMode={false}
       isBrowsing
       isMain
       refId={refId}
@@ -58,6 +59,7 @@ const tooltipStories = Object.keys(stories).reduce((acc, key) => {
 }, {} as StoriesHash);
 
 const singleStoryComponent: StoriesHash = {
+  // @ts-expect-error (invalid input)
   single: {
     type: 'component',
     name: 'Single',
@@ -67,6 +69,7 @@ const singleStoryComponent: StoriesHash = {
     children: ['single--single'],
     renderLabel: () => <span>🔥 Single</span>,
   },
+  // @ts-expect-error (invalid input)
   'single--single': {
     type: 'story',
     id: 'single--single',
@@ -86,6 +89,7 @@ export const SingleStoryComponents = () => {
   const [selectedId, setSelectedId] = React.useState('tooltip-tooltipbuildlist--default');
   return (
     <Tree
+      docsMode={false}
       isBrowsing
       isMain
       refId={refId}
@@ -99,6 +103,7 @@ export const SingleStoryComponents = () => {
 };
 
 const docsOnlySinglesStoryComponent: StoriesHash = {
+  // @ts-expect-error (invalid input)
   single: {
     type: 'component',
     name: 'Single',
@@ -107,6 +112,7 @@ const docsOnlySinglesStoryComponent: StoriesHash = {
     depth: 0,
     children: ['single--docs'],
   },
+  // @ts-expect-error (invalid input)
   'single--docs': {
     type: 'docs',
     id: 'single--docs',
@@ -121,6 +127,7 @@ export const DocsOnlySingleStoryComponents = () => {
   const [selectedId, setSelectedId] = React.useState('tooltip-tooltipbuildlist--default');
   return (
     <Tree
+      docsMode={false}
       isBrowsing
       isMain
       refId={refId}
diff --git a/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx b/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx
index 562ab63f51a7..a5e1fe902964 100644
--- a/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/TreeNode.stories.tsx
@@ -14,7 +14,7 @@ export const Types = () => (
     <ComponentNode>Component</ComponentNode>
     <GroupNode>Group</GroupNode>
     <StoryNode>Story</StoryNode>
-    <DocumentNode>Document</DocumentNode>
+    <DocumentNode docsMode={false}>Document</DocumentNode>
   </>
 );
 
@@ -33,7 +33,9 @@ export const Expandable = () => (
 
 export const Nested = () => (
   <>
-    <DocumentNode depth={0}>Zero</DocumentNode>
+    <DocumentNode docsMode={false} depth={0}>
+      Zero
+    </DocumentNode>
     <GroupNode isExpandable isExpanded depth={0}>
       Zero
     </GroupNode>
diff --git a/code/ui/manager/src/settings/shortcuts.test.js b/code/ui/manager/src/settings/shortcuts.test.js
index 4bc9b1577cdd..730df69161a7 100644
--- a/code/ui/manager/src/settings/shortcuts.test.js
+++ b/code/ui/manager/src/settings/shortcuts.test.js
@@ -30,7 +30,7 @@ describe('ShortcutsScreen', () => {
         <ShortcutsScreen shortcutKeys={shortcutKeys} {...makeActions()} />
       </ThemeProvider>
     );
-    expect(comp).toExist();
+    expect(comp.exists()).toBeTruthy();
   });
 
   it('handles a full mount', () => {
diff --git a/code/ui/manager/tsconfig.json b/code/ui/manager/tsconfig.json
index f8b60c90fdef..73a65ef2ef6e 100644
--- a/code/ui/manager/tsconfig.json
+++ b/code/ui/manager/tsconfig.json
@@ -1,13 +1,5 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {},
-  "include": ["src/**/*"],
-  "exclude": [
-    "src/**/*.test.*",
-    "src/**/tests/**/*",
-    "src/**/__tests__/**/*",
-    "src/**/*.stories.*",
-    "src/**/*.mockdata.*",
-    "src/**/__testfixtures__/**"
-  ]
+  "include": ["src/**/*"]
 }
diff --git a/code/workspace.json b/code/workspace.json
index a5a0e8b7e18f..8b7bb4af3eef 100644
--- a/code/workspace.json
+++ b/code/workspace.json
@@ -231,10 +231,15 @@
       "root": "lib/instrumenter",
       "type": "library"
     },
+    "@storybook/manager": {
+      "implicitDependencies": [],
+      "root": "ui/manager",
+      "type": "library"
+    },
     "@storybook/nextjs": {
+      "implicitDependencies": [],
       "root": "frameworks/nextjs",
-      "type": "library",
-      "implicitDependencies": []
+      "type": "library"
     },
     "@storybook/node-logger": {
       "implicitDependencies": [],
@@ -296,6 +301,11 @@
       "root": "presets/web-components-webpack",
       "type": "library"
     },
+    "@storybook/preview": {
+      "implicitDependencies": [],
+      "root": "lib/preview",
+      "type": "library"
+    },
     "@storybook/preview-web": {
       "implicitDependencies": [],
       "root": "lib/preview-web",
@@ -371,11 +381,6 @@
       "root": "lib/types",
       "type": "library"
     },
-    "@storybook/manager": {
-      "implicitDependencies": [],
-      "root": "ui/manager",
-      "type": "library"
-    },
     "@storybook/vue": {
       "implicitDependencies": [],
       "root": "renderers/vue",
diff --git a/code/yarn.lock b/code/yarn.lock
index 94bd1fa12d23..48d5aee89119 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -29,24 +29,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-devkit/architect@npm:0.1303.9, @angular-devkit/architect@npm:^0.1303.5":
-  version: 0.1303.9
-  resolution: "@angular-devkit/architect@npm:0.1303.9"
+"@angular-devkit/architect@npm:0.1303.10, @angular-devkit/architect@npm:^0.1303.5":
+  version: 0.1303.10
+  resolution: "@angular-devkit/architect@npm:0.1303.10"
   dependencies:
-    "@angular-devkit/core": 13.3.9
+    "@angular-devkit/core": 13.3.10
     rxjs: 6.6.7
-  checksum: 65d4925d8f11a21a55e49aa7953b2660e75cb016b67a16316431b8710e54f912cca27405438b5caedd82be3d52c4261be2d2cad7c654984a43854be209e9b934
+  checksum: 94856fdcebd4bc50467e51f0080e8877c9447a0aa1cdec5d771c7d824ad48005c09e9f5914158819c1554aa0e203518bff6da7fe77e9f6d3ff11c444f27e1bd9
   languageName: node
   linkType: hard
 
 "@angular-devkit/build-angular@npm:^13.3.5":
-  version: 13.3.9
-  resolution: "@angular-devkit/build-angular@npm:13.3.9"
+  version: 13.3.10
+  resolution: "@angular-devkit/build-angular@npm:13.3.10"
   dependencies:
     "@ampproject/remapping": 2.2.0
-    "@angular-devkit/architect": 0.1303.9
-    "@angular-devkit/build-webpack": 0.1303.9
-    "@angular-devkit/core": 13.3.9
+    "@angular-devkit/architect": 0.1303.10
+    "@angular-devkit/build-webpack": 0.1303.10
+    "@angular-devkit/core": 13.3.10
     "@babel/core": 7.16.12
     "@babel/generator": 7.16.8
     "@babel/helper-annotate-as-pure": 7.16.7
@@ -57,7 +57,7 @@ __metadata:
     "@babel/runtime": 7.16.7
     "@babel/template": 7.16.7
     "@discoveryjs/json-ext": 0.5.6
-    "@ngtools/webpack": 13.3.9
+    "@ngtools/webpack": 13.3.10
     ansi-colors: 4.1.1
     babel-loader: 8.2.5
     babel-plugin-istanbul: 6.1.1
@@ -78,7 +78,7 @@ __metadata:
     less: 4.1.2
     less-loader: 10.2.0
     license-webpack-plugin: 4.0.2
-    loader-utils: 3.2.0
+    loader-utils: 3.2.1
     mini-css-extract-plugin: 2.5.3
     minimatch: 3.0.5
     open: 8.4.0
@@ -133,26 +133,26 @@ __metadata:
       optional: true
     tailwindcss:
       optional: true
-  checksum: 1ab0f873b942caacfd70d22e53d0b036d5aff3a461865cc87a7e6a35877158d36925200cf00e6de140f8b8ade5b099a76622e3d1e96d786fb687bb3fcff40b29
+  checksum: e4bcc8613be63be42bb59312ee9aedd59b73754eed99c86f1e0cddb8ae5430147c4e97a23b27580cc6e55c788dcf2451859188520155f9cdb6880ff760213eb9
   languageName: node
   linkType: hard
 
-"@angular-devkit/build-webpack@npm:0.1303.9":
-  version: 0.1303.9
-  resolution: "@angular-devkit/build-webpack@npm:0.1303.9"
+"@angular-devkit/build-webpack@npm:0.1303.10":
+  version: 0.1303.10
+  resolution: "@angular-devkit/build-webpack@npm:0.1303.10"
   dependencies:
-    "@angular-devkit/architect": 0.1303.9
+    "@angular-devkit/architect": 0.1303.10
     rxjs: 6.6.7
   peerDependencies:
     webpack: ^5.30.0
     webpack-dev-server: ^4.0.0
-  checksum: 82f7e1869f76eeca6996085257077507c8e0e3ddd564f0a8341cbfca80cbe84f176018f452e579de01cfc7267b5965bec328fb90f82adc760f8437e40d195228
+  checksum: 2bb8a9e3bc86af4049d5b4c0bb87d10098ecf3548b28106687c94862c5b54759c1d74832d7b70e069aadcd09e4c3021482f304eea795fd7a2afd8815206ff7b4
   languageName: node
   linkType: hard
 
-"@angular-devkit/core@npm:13.3.9, @angular-devkit/core@npm:^13.3.5":
-  version: 13.3.9
-  resolution: "@angular-devkit/core@npm:13.3.9"
+"@angular-devkit/core@npm:13.3.10, @angular-devkit/core@npm:^13.3.5":
+  version: 13.3.10
+  resolution: "@angular-devkit/core@npm:13.3.10"
   dependencies:
     ajv: 8.9.0
     ajv-formats: 2.1.1
@@ -165,31 +165,31 @@ __metadata:
   peerDependenciesMeta:
     chokidar:
       optional: true
-  checksum: 8b65b182f7d58be632d92138dd4aa425f3d2c521c1a35b8fa1d878923a77b8e2a7cbbede5c7abfa7bd8dca58063c6b97a99228ebfa5cf230d87fdb2d38e78a4e
+  checksum: 01f34e9ed9bac36e020392ad8506fa5c67bf8b48f80f746990f17d4151f83b8440e332c089db85d855d9b512e10af0dd3ec8a50153c2ef1d569ef2f524538ded
   languageName: node
   linkType: hard
 
-"@angular-devkit/schematics@npm:13.3.9, @angular-devkit/schematics@npm:^13.2.4":
-  version: 13.3.9
-  resolution: "@angular-devkit/schematics@npm:13.3.9"
+"@angular-devkit/schematics@npm:13.3.10, @angular-devkit/schematics@npm:^13.2.4":
+  version: 13.3.10
+  resolution: "@angular-devkit/schematics@npm:13.3.10"
   dependencies:
-    "@angular-devkit/core": 13.3.9
+    "@angular-devkit/core": 13.3.10
     jsonc-parser: 3.0.0
     magic-string: 0.25.7
     ora: 5.4.1
     rxjs: 6.6.7
-  checksum: 62510f9378c70c574af0e9392a2f0cc7b19744d1fb4c4e42e125241956df15e52fb60ebd043849a5a5d2a1ecf34e7a95b107aad78b0d8047db5970c76fe323da
+  checksum: c7b63056e0ea7dd669e87d9de2093cbe65fed270703cf52b2362367bb1e7031478a3b06f363009fb0aff510c45fd806bfe38b7dacc91057921378975d36d7db1
   languageName: node
   linkType: hard
 
 "@angular/cli@npm:^13.3.5":
-  version: 13.3.9
-  resolution: "@angular/cli@npm:13.3.9"
+  version: 13.3.10
+  resolution: "@angular/cli@npm:13.3.10"
   dependencies:
-    "@angular-devkit/architect": 0.1303.9
-    "@angular-devkit/core": 13.3.9
-    "@angular-devkit/schematics": 13.3.9
-    "@schematics/angular": 13.3.9
+    "@angular-devkit/architect": 0.1303.10
+    "@angular-devkit/core": 13.3.10
+    "@angular-devkit/schematics": 13.3.10
+    "@schematics/angular": 13.3.10
     "@yarnpkg/lockfile": 1.1.0
     ansi-colors: 4.1.1
     debug: 4.3.3
@@ -207,7 +207,7 @@ __metadata:
     uuid: 8.3.2
   bin:
     ng: bin/ng.js
-  checksum: 86392a69ee49b6de5ac5412e5b1b9ea9c6015710cd4591bd10cd8f093e455b645955492030ca84181fa2e7681e4e178b29a2303c74bcc6575687b9ca8f07b33e
+  checksum: 16c20bac50e34d147ad2e93700c6c52070f06dd1838b43de89b5821bacca1ff63ef525a75b3ba63f708e0113a66173de91e601529252f973657a12e26eb8f43c
   languageName: node
   linkType: hard
 
@@ -332,17 +332,17 @@ __metadata:
   linkType: hard
 
 "@axe-core/puppeteer@npm:^4.2.0":
-  version: 4.4.5
-  resolution: "@axe-core/puppeteer@npm:4.4.5"
+  version: 4.5.2
+  resolution: "@axe-core/puppeteer@npm:4.5.2"
   dependencies:
-    axe-core: ^4.4.3
+    axe-core: ^4.5.2
   peerDependencies:
-    puppeteer: ">=1.10.0 <= 16"
-  checksum: 4e2d856ed5ae203f819dd23983714fd4cd91b9243c78bc261ea75a2a78ad148b1b022ea7adfe2549a621ea42c7752eb1949ae598be60e11e0e66d87044bf3d48
+    puppeteer: ">=1.10.0 <= 18"
+  checksum: be626f6ac63a883e2a291490625f7dceab486c0b0753995ee1cc73473162ef581cdddb8760f8be499c9c7303712f5dded2d95f9195845cdda3f1d16b3047e94e
   languageName: node
   linkType: hard
 
-"@babel/cli@npm:^7.17.6":
+"@babel/cli@npm:^7.19.3":
   version: 7.19.3
   resolution: "@babel/cli@npm:7.19.3"
   dependencies:
@@ -378,10 +378,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.16.8, @babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.19.3, @babel/compat-data@npm:^7.19.4":
-  version: 7.19.4
-  resolution: "@babel/compat-data@npm:7.19.4"
-  checksum: f6c3cec531e9c8ab2b0a7db64775f6f00e88ce1f727114cffb900c989ed3bcc42edee86cbe9c1d9f42ca2dbc490bcec91840cbe258dc7e0db82a4ea396ca1779
+"@babel/compat-data@npm:^7.16.8, @babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.0, @babel/compat-data@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/compat-data@npm:7.20.1"
+  checksum: d27b97d47be1b8928153525e1ffa1faa9068c2eae65bf4c0fbce1595841f6f52f7492a625c911688d32a91cb31f082ee1f72f3b9e43a970361215b38e2c28fc5
   languageName: node
   linkType: hard
 
@@ -431,26 +431,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.5, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.18.13, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.2, @babel/core@npm:^7.7.5, @babel/core@npm:^7.8.0":
-  version: 7.19.6
-  resolution: "@babel/core@npm:7.19.6"
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.19.6, @babel/core@npm:^7.20.2, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+  version: 7.20.2
+  resolution: "@babel/core@npm:7.20.2"
   dependencies:
     "@ampproject/remapping": ^2.1.0
     "@babel/code-frame": ^7.18.6
-    "@babel/generator": ^7.19.6
-    "@babel/helper-compilation-targets": ^7.19.3
-    "@babel/helper-module-transforms": ^7.19.6
-    "@babel/helpers": ^7.19.4
-    "@babel/parser": ^7.19.6
+    "@babel/generator": ^7.20.2
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-module-transforms": ^7.20.2
+    "@babel/helpers": ^7.20.1
+    "@babel/parser": ^7.20.2
     "@babel/template": ^7.18.10
-    "@babel/traverse": ^7.19.6
-    "@babel/types": ^7.19.4
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.2
     convert-source-map: ^1.7.0
     debug: ^4.1.0
     gensync: ^1.0.0-beta.2
     json5: ^2.2.1
     semver: ^6.3.0
-  checksum: 58a095dac601444128ca17ffa08bd08cb3ea31305f49389ff882a2df450937f6929108810e94742306f5ccb13cd113244a9012a2f50bdbd7539873d6fd767521
+  checksum: 7c2a040db56f9807a7b11f19a056a842864512b5f3e5ca00491dae8501b9a19a57ae8c268373bc425bc734d47d6d01db711cc6e662bfb24794baa15e73f6fd20
   languageName: node
   linkType: hard
 
@@ -465,14 +465,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.16.8, @babel/generator@npm:^7.19.6, @babel/generator@npm:^7.4.0, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7":
-  version: 7.19.6
-  resolution: "@babel/generator@npm:7.19.6"
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.16.8, @babel/generator@npm:^7.20.1, @babel/generator@npm:^7.20.2, @babel/generator@npm:^7.20.4, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7":
+  version: 7.20.4
+  resolution: "@babel/generator@npm:7.20.4"
   dependencies:
-    "@babel/types": ^7.19.4
+    "@babel/types": ^7.20.2
     "@jridgewell/gen-mapping": ^0.3.2
     jsesc: ^2.5.1
-  checksum: 7c28a778310b718af5889a225bb004b51c86c0ddba5397cc3b90782fb6acf386bee29d4c23faa5d0e7fa8132a652213c1e08dbf01751f5aaada6e6f01a43258e
+  checksum: 48181434693f3348804f01dad53b5fd293319bc71119662bdfa64ccc3c32c5cf1a51b2ea3f7091310c950a894f418e05f3c957ee3f7f1790443487a93608d57e
   languageName: node
   linkType: hard
 
@@ -504,34 +504,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.16.7, @babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.18.9, @babel/helper-compilation-targets@npm:^7.19.0, @babel/helper-compilation-targets@npm:^7.19.3":
-  version: 7.19.3
-  resolution: "@babel/helper-compilation-targets@npm:7.19.3"
+"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.16.7, @babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.18.9, @babel/helper-compilation-targets@npm:^7.20.0":
+  version: 7.20.0
+  resolution: "@babel/helper-compilation-targets@npm:7.20.0"
   dependencies:
-    "@babel/compat-data": ^7.19.3
+    "@babel/compat-data": ^7.20.0
     "@babel/helper-validator-option": ^7.18.6
     browserslist: ^4.21.3
     semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 05f5ea8c9310f6064d508e06c5523e3e7dee988056be7505fbdecdc9564027946d3163405b49c8f3dd27c819280c34fb99ab810e181de572c77e79c9ae303201
+  checksum: d4250dec03d1eef1e2c3f1bed1ebf4e0b6899762111023d07c1c6cb1ce7f8456344bf488355f0780e92fc6ce0e25f977ae50b8b638291d55d0154f13b99c7530
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.19.0":
-  version: 7.19.0
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.19.0"
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.20.2"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.18.6
     "@babel/helper-environment-visitor": ^7.18.9
     "@babel/helper-function-name": ^7.19.0
     "@babel/helper-member-expression-to-functions": ^7.18.9
     "@babel/helper-optimise-call-expression": ^7.18.6
-    "@babel/helper-replace-supers": ^7.18.9
+    "@babel/helper-replace-supers": ^7.19.1
     "@babel/helper-split-export-declaration": ^7.18.6
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: f61b98942d40d904e697c14fb24f30975c639f7d40e011a80b22fb22f5e423abe857ad7bba56318592a268420426d82c94a9193e8f761a8cd0717080549ca7ac
+  checksum: 93ae5401481b59b9fbed64c77b1c83d6e83f361fe2963fd521cf6863b8ff70b7173499de8662900c33d7487c0913ee866d5a0d87d4c19a873f479df99605e686
   languageName: node
   linkType: hard
 
@@ -616,19 +616,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.16.7, @babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.19.6":
-  version: 7.19.6
-  resolution: "@babel/helper-module-transforms@npm:7.19.6"
+"@babel/helper-module-transforms@npm:^7.16.7, @babel/helper-module-transforms@npm:^7.18.6, @babel/helper-module-transforms@npm:^7.19.6, @babel/helper-module-transforms@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-module-transforms@npm:7.20.2"
   dependencies:
     "@babel/helper-environment-visitor": ^7.18.9
     "@babel/helper-module-imports": ^7.18.6
-    "@babel/helper-simple-access": ^7.19.4
+    "@babel/helper-simple-access": ^7.20.2
     "@babel/helper-split-export-declaration": ^7.18.6
     "@babel/helper-validator-identifier": ^7.19.1
     "@babel/template": ^7.18.10
-    "@babel/traverse": ^7.19.6
-    "@babel/types": ^7.19.4
-  checksum: c6d5fd5cb299591b005144ee2e142d6bba06f8c2a87c9b19e2e9a5189f39a59e313266a6ca0213cdd185e4757c47accc2f3e346b5004da0a69da87e214bd7f09
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.2
+  checksum: 9c5e9853a5b83cb7f4ec5ac15ae0e57a9ea47be47c57bb7ef56b6b3d55eb30547bfa9acb90f6a2b25f94764765c10de196908eba745a27b2bcf4fefcbb314ee7
   languageName: node
   linkType: hard
 
@@ -641,10 +641,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
-  version: 7.19.0
-  resolution: "@babel/helper-plugin-utils@npm:7.19.0"
-  checksum: 9ae9c09cf7e3b6023be2bb66f3ca3b5fa8c2b21b58bd09819d494fcd7ab2a1844056c8dfd609ffb474e3c857a1bc979fa7a60931b0c71d69a3e939ba724498ac
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.16.7, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.19.0, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+  version: 7.20.2
+  resolution: "@babel/helper-plugin-utils@npm:7.20.2"
+  checksum: bf4de040e57b7ddff36ea599e963c391eb246d5a95207bb9ef3e33073c451bcc0821e3a9cc08dfede862a6dcc110d7e6e7d9a483482f852be358c5b60add499c
   languageName: node
   linkType: hard
 
@@ -662,7 +662,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.18.6, @babel/helper-replace-supers@npm:^7.18.9, @babel/helper-replace-supers@npm:^7.19.1":
+"@babel/helper-replace-supers@npm:^7.18.6, @babel/helper-replace-supers@npm:^7.19.1":
   version: 7.19.1
   resolution: "@babel/helper-replace-supers@npm:7.19.1"
   dependencies:
@@ -675,21 +675,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-simple-access@npm:^7.19.4":
-  version: 7.19.4
-  resolution: "@babel/helper-simple-access@npm:7.19.4"
+"@babel/helper-simple-access@npm:^7.19.4, @babel/helper-simple-access@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-simple-access@npm:7.20.2"
   dependencies:
-    "@babel/types": ^7.19.4
-  checksum: 23e36b7a5063200e8ec722746ac41baad70d4c192f3fff5a435e02f599cde5f2b20bb23ff15833fe8763ffebd7677be900f7f9286b848363a97adc9aab642016
+    "@babel/types": ^7.20.2
+  checksum: 79cea28155536c74b37839748caea534bc413fac8c512e6101e9eecfe83f670db77bc782bdb41114caecbb1e2a73007ff6015d6a5ce58cae5363b8c5bd2dcee9
   languageName: node
   linkType: hard
 
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.18.9":
-  version: 7.18.9
-  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.18.9"
+  version: 7.20.0
+  resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.20.0"
   dependencies:
-    "@babel/types": ^7.18.9
-  checksum: 243996398085f93ccde0174beffae3fd1c0d2a762df61713b32f1bd01b16e6eaccb47f38437706b2239e2b26673412e500e380c4b1f2413f801df4c7a6805e78
+    "@babel/types": ^7.20.0
+  checksum: 8529fb760ffbc3efc22ec5a079039fae65f40a90e9986642a85c1727aabdf6a79929546412f6210593970d2f97041f73bdd316e481d61110d6edcac1f97670a9
   languageName: node
   linkType: hard
 
@@ -735,14 +735,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.16.7, @babel/helpers@npm:^7.19.4, @babel/helpers@npm:^7.8.4":
-  version: 7.19.4
-  resolution: "@babel/helpers@npm:7.19.4"
+"@babel/helpers@npm:^7.16.7, @babel/helpers@npm:^7.20.1, @babel/helpers@npm:^7.8.4":
+  version: 7.20.1
+  resolution: "@babel/helpers@npm:7.20.1"
   dependencies:
     "@babel/template": ^7.18.10
-    "@babel/traverse": ^7.19.4
-    "@babel/types": ^7.19.4
-  checksum: e13cca08375f5fe816f01173f6cffc685c3b0605bf7fd94ac76495209f57d69e352fa93bf0ff87f63d705d53b5d5e75abd0b5c2e653776c744911140e5ae7c7e
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.0
+  checksum: be1096271946b265ea1b9391d3fa1a8690230858081f6ba35ef3c0030ec0113aa9c350a764c65b1d162584c73a853c1ed2dac294e9dd113885097b172078f0b6
   languageName: node
   linkType: hard
 
@@ -757,12 +757,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.13.12, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.12, @babel/parser@npm:^7.16.4, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.19.6, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6":
-  version: 7.19.6
-  resolution: "@babel/parser@npm:7.19.6"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.12, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.16.12, @babel/parser@npm:^7.16.4, @babel/parser@npm:^7.16.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.18.4, @babel/parser@npm:^7.20.1, @babel/parser@npm:^7.20.2, @babel/parser@npm:^7.20.3, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.8.6, @babel/parser@npm:^7.8.7, @babel/parser@npm:^7.9.6":
+  version: 7.20.3
+  resolution: "@babel/parser@npm:7.20.3"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 1cebcfd242bf424adea11c364f54c4339796291b3b124f20f08dca800ece217588db09f23202f520c671e3ff9a9f97ca645c4f98df0127149d0c60331c7d3e39
+  checksum: 6bd67dd32683cd3a8d4c5ed19085fc47582361eb28cf1dbd03f655350827002e3d8abc8be7c9e3a79d17668bf855899a4bd7f261b7fafcc82870bd9de18f9016
   languageName: node
   linkType: hard
 
@@ -803,9 +803,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-async-generator-functions@npm:^7.16.8, @babel/plugin-proposal-async-generator-functions@npm:^7.19.1":
-  version: 7.19.1
-  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.19.1"
+"@babel/plugin-proposal-async-generator-functions@npm:^7.16.8, @babel/plugin-proposal-async-generator-functions@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.1"
   dependencies:
     "@babel/helper-environment-visitor": ^7.18.9
     "@babel/helper-plugin-utils": ^7.19.0
@@ -813,7 +813,7 @@ __metadata:
     "@babel/plugin-syntax-async-generators": ^7.8.4
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: e2b93724dedf2571957d3e46d0710553f2a01794f9abab1c2f896132a70a5d4a3aafd3687b4a848ccddcfa911d40f0b17e4a89351e5de50d31d0d88519da941c
+  checksum: b99ba70c51143921bc84f37b59cf1cbb6b264301e49048fcc4964a15865e865c3ddb48d4ac7a3d2a48c186eb8964ff975370a99082b23484b046d3206f988590
   languageName: node
   linkType: hard
 
@@ -842,18 +842,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.17.2":
-  version: 7.19.6
-  resolution: "@babel/plugin-proposal-decorators@npm:7.19.6"
+"@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-proposal-decorators@npm:7.20.2"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.19.0
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-create-class-features-plugin": ^7.20.2
+    "@babel/helper-plugin-utils": ^7.20.2
     "@babel/helper-replace-supers": ^7.19.1
     "@babel/helper-split-export-declaration": ^7.18.6
     "@babel/plugin-syntax-decorators": ^7.19.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 41390c8d0fe87072915eac1687bab638be8430b88494b2f40d1cf2ee2a64c08777b1f18949bb8e8dc76d341e79f0d26eca3ad8bd5c751ce02f9a9955bafb1a82
+  checksum: 814699de0c0ca8eda6161b70ad0e454107bbb366d4c3fa9e20e15a824cd08429c6bbe7d6ea474e3ceaedd4594e23f0a5d06c481c81f2dca33b35f7ad273c081a
   languageName: node
   linkType: hard
 
@@ -869,7 +869,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-export-default-from@npm:^7.16.7":
+"@babel/plugin-proposal-export-default-from@npm:^7.18.10":
   version: 7.18.10
   resolution: "@babel/plugin-proposal-export-default-from@npm:7.18.10"
   dependencies:
@@ -941,18 +941,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-object-rest-spread@npm:^7.16.7, @babel/plugin-proposal-object-rest-spread@npm:^7.17.3, @babel/plugin-proposal-object-rest-spread@npm:^7.19.4":
-  version: 7.19.4
-  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.19.4"
+"@babel/plugin-proposal-object-rest-spread@npm:^7.16.7, @babel/plugin-proposal-object-rest-spread@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.2"
   dependencies:
-    "@babel/compat-data": ^7.19.4
-    "@babel/helper-compilation-targets": ^7.19.3
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/compat-data": ^7.20.1
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-plugin-utils": ^7.20.2
     "@babel/plugin-syntax-object-rest-spread": ^7.8.3
-    "@babel/plugin-transform-parameters": ^7.18.8
+    "@babel/plugin-transform-parameters": ^7.20.1
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 0c51c3ef25890ee69bec275db6d4a79b475b809dcb473cd64d5afed96f60be51d928a59356beb69e40b1328c34715e400b48322c6af823ba3792bbe52d7cc7d9
+  checksum: 2d803fd45b42312580cab2197ce9bbd4d12b60c9560bfacb2398178baf3d5c9d29538959a40463021b831c32eeb2a4fa109f1069361f6de80a17a4344ba80b7a
   languageName: node
   linkType: hard
 
@@ -1118,14 +1118,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.18.6"
+"@babel/plugin-syntax-import-assertions@npm:^7.20.0":
+  version: 7.20.0
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.20.0"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.19.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b2673462593bac392d09679b3f6273784d2c5b8424d5c9c37cc9318e66d190b585789f0ec8aea76a4eeb945210f3193757461e34f4ffec3a0011d338512f384d
+  checksum: 0ac0176984ad799b39264070007737c514ea95e4b3c3c515ecddef958629abcd3c8e8810fd60fb63de5a8f3f7022dd2c7af7580b819a9207acc372c8b8ec878e
   languageName: node
   linkType: hard
 
@@ -1151,7 +1151,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6":
+"@babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
   dependencies:
@@ -1250,14 +1250,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.18.6, @babel/plugin-syntax-typescript@npm:^7.7.2":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-typescript@npm:7.18.6"
+"@babel/plugin-syntax-typescript@npm:^7.20.0, @babel/plugin-syntax-typescript@npm:^7.7.2":
+  version: 7.20.0
+  resolution: "@babel/plugin-syntax-typescript@npm:7.20.0"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.19.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b0acbed3a038c47142e5301d11b40aeedc05b55738d00204964f38608ee46135a7fa36439eeeaeba1ae3608a529a1660d61eb7d1d70978130ca940bd7ca645a3
+  checksum: c57bb9b717b3b7324cc0c094d411bac23f6d78ed5e4e06fb89e3e8de37437e649c53440d8c29ecb3875f398ad1a9e8acc96e3af6b3802e83f7eab855de319e80
   languageName: node
   linkType: hard
 
@@ -1309,33 +1309,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.16.7, @babel/plugin-transform-block-scoping@npm:^7.19.4, @babel/plugin-transform-block-scoping@npm:^7.8.3":
-  version: 7.19.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.19.4"
+"@babel/plugin-transform-block-scoping@npm:^7.16.7, @babel/plugin-transform-block-scoping@npm:^7.20.2, @babel/plugin-transform-block-scoping@npm:^7.8.3":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.20.2"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-plugin-utils": ^7.20.2
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 442e93711e3951d4f14e9ef1bc15220273a3d99cb5c1f1c785dac9e32f69eab9d9f3849c82fab8f9590116b0151ae5d2026029276448552e2201733aa394135d
+  checksum: e1cf333d384c642c9f44c57fe14f384e11e91627e7df37256821891686e0464f1c3b7de93312ec46155a8f1313019f31aed6ce878d22259764f8835509ecb60a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.16.7, @babel/plugin-transform-classes@npm:^7.19.0":
-  version: 7.19.0
-  resolution: "@babel/plugin-transform-classes@npm:7.19.0"
+"@babel/plugin-transform-classes@npm:^7.16.7, @babel/plugin-transform-classes@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-classes@npm:7.20.2"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-compilation-targets": ^7.19.0
+    "@babel/helper-compilation-targets": ^7.20.0
     "@babel/helper-environment-visitor": ^7.18.9
     "@babel/helper-function-name": ^7.19.0
     "@babel/helper-optimise-call-expression": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/helper-replace-supers": ^7.18.9
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/helper-replace-supers": ^7.19.1
     "@babel/helper-split-export-declaration": ^7.18.6
     globals: ^11.1.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 843db7da466b6e40f9da96827051d970ed7800c1acccb24b702ddc8b05e87cfbbbf53bd4b0f3ffd5b8365db03ea97a5cd6e9efc3ec176a7697a1a4601d7071e8
+  checksum: b9956a774a1d10d20e157abe4e1834156c46152ec3b5231b2f4a0e7fe4e2b934465d5e39872d424b4baa55944f95646ca6f2b23070ac3a824223fea918981d11
   languageName: node
   linkType: hard
 
@@ -1350,14 +1350,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.16.7, @babel/plugin-transform-destructuring@npm:^7.17.3, @babel/plugin-transform-destructuring@npm:^7.19.4":
-  version: 7.19.4
-  resolution: "@babel/plugin-transform-destructuring@npm:7.19.4"
+"@babel/plugin-transform-destructuring@npm:^7.16.7, @babel/plugin-transform-destructuring@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-destructuring@npm:7.20.2"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-plugin-utils": ^7.20.2
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 09f6e41b10e5c798bd9c2b09b7243b5c06088c220494aff699e604306797188698bb9f00f50963bb89707af11f979b888ff7ff0eb498a5200d64b759fc0ece34
+  checksum: 1989312c031636103d1fc83a6edf9e24f8445a5395a72b8dc9741f98c31dacbf13db7831b651975d9d7ee57381abce299fae8b4bde599f8efa00dd8b7eb8e298
   languageName: node
   linkType: hard
 
@@ -1454,7 +1454,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.16.7, @babel/plugin-transform-modules-amd@npm:^7.18.6":
+"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.16.7, @babel/plugin-transform-modules-amd@npm:^7.19.6":
   version: 7.19.6
   resolution: "@babel/plugin-transform-modules-amd@npm:7.19.6"
   dependencies:
@@ -1466,7 +1466,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.16.8, @babel/plugin-transform-modules-commonjs@npm:^7.18.6, @babel/plugin-transform-modules-commonjs@npm:^7.2.0":
+"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.16.8, @babel/plugin-transform-modules-commonjs@npm:^7.19.6, @babel/plugin-transform-modules-commonjs@npm:^7.2.0":
   version: 7.19.6
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.19.6"
   dependencies:
@@ -1479,7 +1479,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.16.7, @babel/plugin-transform-modules-systemjs@npm:^7.19.0":
+"@babel/plugin-transform-modules-systemjs@npm:^7.16.7, @babel/plugin-transform-modules-systemjs@npm:^7.19.6":
   version: 7.19.6
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.19.6"
   dependencies:
@@ -1551,14 +1551,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.16.7, @babel/plugin-transform-parameters@npm:^7.18.8":
-  version: 7.18.8
-  resolution: "@babel/plugin-transform-parameters@npm:7.18.8"
+"@babel/plugin-transform-parameters@npm:^7.16.7, @babel/plugin-transform-parameters@npm:^7.20.1":
+  version: 7.20.3
+  resolution: "@babel/plugin-transform-parameters@npm:7.20.3"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.20.2
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: ca12c2cdb67012fc7d886941bf194225054cb11a117dd2b6a065ca5433f38368e8cf1e23f0fb81ccfc026991e95c7444a4cb594f4fd27b9e292304c0f96724ca
+  checksum: 34cd3b5c9019cad22e3ec1f7ec16cdab4858fb45073a7ddac8f269e5151c4ce8edece04ef76376767572024b506c1a30024b840371d014df61cd869a889ad16c
   languageName: node
   linkType: hard
 
@@ -1606,7 +1606,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.18.6":
+"@babel/plugin-transform-react-jsx-source@npm:^7.19.6":
   version: 7.19.6
   resolution: "@babel/plugin-transform-react-jsx-source@npm:7.19.6"
   dependencies:
@@ -1617,7 +1617,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.18.10, @babel/plugin-transform-react-jsx@npm:^7.18.6":
+"@babel/plugin-transform-react-jsx@npm:^7.18.6, @babel/plugin-transform-react-jsx@npm:^7.19.0":
   version: 7.19.0
   resolution: "@babel/plugin-transform-react-jsx@npm:7.19.0"
   dependencies:
@@ -1756,15 +1756,15 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.18.6":
-  version: 7.19.3
-  resolution: "@babel/plugin-transform-typescript@npm:7.19.3"
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-typescript@npm:7.20.2"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.19.0
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/plugin-syntax-typescript": ^7.18.6
+    "@babel/helper-create-class-features-plugin": ^7.20.2
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/plugin-syntax-typescript": ^7.20.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 4933ff4ab278c3777c2cb382df96784ba2de4ef305a785a4bd7c600df0befd73826b34fb330c96706c0a720788721c35cb139c635f6963aa8778ab9bda6856f4
+  checksum: 0b4a42b5953c658f31d0a9ebdead733a9d4850b0ae767d4f7bca6e55c8ffcc27afd0cfe88347fe85bea45a3292a5d362f55f1fa369fc48eb9aa66f49991bcb68
   languageName: node
   linkType: hard
 
@@ -1885,17 +1885,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:^7.16.11, @babel/preset-env@npm:^7.16.5":
-  version: 7.19.4
-  resolution: "@babel/preset-env@npm:7.19.4"
+"@babel/preset-env@npm:^7.16.11, @babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/preset-env@npm:7.20.2"
   dependencies:
-    "@babel/compat-data": ^7.19.4
-    "@babel/helper-compilation-targets": ^7.19.3
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/compat-data": ^7.20.1
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-plugin-utils": ^7.20.2
     "@babel/helper-validator-option": ^7.18.6
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.18.6
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.18.9
-    "@babel/plugin-proposal-async-generator-functions": ^7.19.1
+    "@babel/plugin-proposal-async-generator-functions": ^7.20.1
     "@babel/plugin-proposal-class-properties": ^7.18.6
     "@babel/plugin-proposal-class-static-block": ^7.18.6
     "@babel/plugin-proposal-dynamic-import": ^7.18.6
@@ -1904,7 +1904,7 @@ __metadata:
     "@babel/plugin-proposal-logical-assignment-operators": ^7.18.9
     "@babel/plugin-proposal-nullish-coalescing-operator": ^7.18.6
     "@babel/plugin-proposal-numeric-separator": ^7.18.6
-    "@babel/plugin-proposal-object-rest-spread": ^7.19.4
+    "@babel/plugin-proposal-object-rest-spread": ^7.20.2
     "@babel/plugin-proposal-optional-catch-binding": ^7.18.6
     "@babel/plugin-proposal-optional-chaining": ^7.18.9
     "@babel/plugin-proposal-private-methods": ^7.18.6
@@ -1915,7 +1915,7 @@ __metadata:
     "@babel/plugin-syntax-class-static-block": ^7.14.5
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-export-namespace-from": ^7.8.3
-    "@babel/plugin-syntax-import-assertions": ^7.18.6
+    "@babel/plugin-syntax-import-assertions": ^7.20.0
     "@babel/plugin-syntax-json-strings": ^7.8.3
     "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
     "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
@@ -1928,10 +1928,10 @@ __metadata:
     "@babel/plugin-transform-arrow-functions": ^7.18.6
     "@babel/plugin-transform-async-to-generator": ^7.18.6
     "@babel/plugin-transform-block-scoped-functions": ^7.18.6
-    "@babel/plugin-transform-block-scoping": ^7.19.4
-    "@babel/plugin-transform-classes": ^7.19.0
+    "@babel/plugin-transform-block-scoping": ^7.20.2
+    "@babel/plugin-transform-classes": ^7.20.2
     "@babel/plugin-transform-computed-properties": ^7.18.9
-    "@babel/plugin-transform-destructuring": ^7.19.4
+    "@babel/plugin-transform-destructuring": ^7.20.2
     "@babel/plugin-transform-dotall-regex": ^7.18.6
     "@babel/plugin-transform-duplicate-keys": ^7.18.9
     "@babel/plugin-transform-exponentiation-operator": ^7.18.6
@@ -1939,14 +1939,14 @@ __metadata:
     "@babel/plugin-transform-function-name": ^7.18.9
     "@babel/plugin-transform-literals": ^7.18.9
     "@babel/plugin-transform-member-expression-literals": ^7.18.6
-    "@babel/plugin-transform-modules-amd": ^7.18.6
-    "@babel/plugin-transform-modules-commonjs": ^7.18.6
-    "@babel/plugin-transform-modules-systemjs": ^7.19.0
+    "@babel/plugin-transform-modules-amd": ^7.19.6
+    "@babel/plugin-transform-modules-commonjs": ^7.19.6
+    "@babel/plugin-transform-modules-systemjs": ^7.19.6
     "@babel/plugin-transform-modules-umd": ^7.18.6
     "@babel/plugin-transform-named-capturing-groups-regex": ^7.19.1
     "@babel/plugin-transform-new-target": ^7.18.6
     "@babel/plugin-transform-object-super": ^7.18.6
-    "@babel/plugin-transform-parameters": ^7.18.8
+    "@babel/plugin-transform-parameters": ^7.20.1
     "@babel/plugin-transform-property-literals": ^7.18.6
     "@babel/plugin-transform-regenerator": ^7.18.6
     "@babel/plugin-transform-reserved-words": ^7.18.6
@@ -1958,7 +1958,7 @@ __metadata:
     "@babel/plugin-transform-unicode-escapes": ^7.18.10
     "@babel/plugin-transform-unicode-regex": ^7.18.6
     "@babel/preset-modules": ^0.1.5
-    "@babel/types": ^7.19.4
+    "@babel/types": ^7.20.2
     babel-plugin-polyfill-corejs2: ^0.3.3
     babel-plugin-polyfill-corejs3: ^0.6.0
     babel-plugin-polyfill-regenerator: ^0.4.1
@@ -1966,11 +1966,11 @@ __metadata:
     semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: a0c1e9e575c497d71ccf84242276356abb6c4fede7c52733785e988131458433dd2329bd96921465c23b30d2cad19977c23617b657d986dac3d6fed544b45a29
+  checksum: 8e4c86d9acf2557eaca4c55ffe69bb76f30d675f2576e5e1b872ef671acec7c80df3759d77cd33ff934d5a49f26950c4d9e63718c4c3295455bc2df88788d7ad
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1, @babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.16.7":
+"@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-flow@npm:7.18.6"
   dependencies:
@@ -1998,7 +1998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.12.10, @babel/preset-react@npm:^7.16.7":
+"@babel/preset-react@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-react@npm:7.18.6"
   dependencies:
@@ -2014,7 +2014,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.18.6":
+"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-typescript@npm:7.18.6"
   dependencies:
@@ -2043,12 +2043,12 @@ __metadata:
   linkType: hard
 
 "@babel/runtime-corejs3@npm:^7.10.2":
-  version: 7.19.6
-  resolution: "@babel/runtime-corejs3@npm:7.19.6"
+  version: 7.20.1
+  resolution: "@babel/runtime-corejs3@npm:7.20.1"
   dependencies:
     core-js-pure: ^3.25.1
-    regenerator-runtime: ^0.13.4
-  checksum: df8d369446b24bc2f6d7428963f9976b83cba0449e8906b057c1a0e5c49177cd68f6e1cbcfa9efd2f1dc70c1dd9e71bfa2458e27e3d4569ea6478c8d77643803
+    regenerator-runtime: ^0.13.10
+  checksum: 95859391570f788875e4c2d10e56998cff165c81b3366508f7c224cf9358b7cd52cf5c62eebcfb9e1c32f8bb6d6bf2e7658620c4c56d6ab0612aa152e2f0469a
   languageName: node
   linkType: hard
 
@@ -2079,12 +2079,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
-  version: 7.19.4
-  resolution: "@babel/runtime@npm:7.19.4"
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.1, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+  version: 7.20.1
+  resolution: "@babel/runtime@npm:7.20.1"
   dependencies:
-    regenerator-runtime: ^0.13.4
-  checksum: 3ad7f298262cf1f060a3bf2be9f65afa3c034c9c7a2e7c9d3ec41ab58c944c86756d0e0fdfc08d178f983f48d6b5613c15253d83216fbe02b6141c13d28f12e5
+    regenerator-runtime: ^0.13.10
+  checksum: ec10f4c4cb23d6473b5451ecc44f8993629d56f02dbaa597f40920b3ade49d9ff0f82e752cf768afb48cf9c9e73febab9da393e239a318b2fc8a11136622eea4
   languageName: node
   linkType: hard
 
@@ -2119,7 +2119,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
+"@babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
   dependencies:
@@ -2130,32 +2130,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.16.10, @babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.4, @babel/traverse@npm:^7.19.6, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6":
-  version: 7.19.6
-  resolution: "@babel/traverse@npm:7.19.6"
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.16.10, @babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.20.1, @babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2, @babel/traverse@npm:^7.8.6":
+  version: 7.20.1
+  resolution: "@babel/traverse@npm:7.20.1"
   dependencies:
     "@babel/code-frame": ^7.18.6
-    "@babel/generator": ^7.19.6
+    "@babel/generator": ^7.20.1
     "@babel/helper-environment-visitor": ^7.18.9
     "@babel/helper-function-name": ^7.19.0
     "@babel/helper-hoist-variables": ^7.18.6
     "@babel/helper-split-export-declaration": ^7.18.6
-    "@babel/parser": ^7.19.6
-    "@babel/types": ^7.19.4
+    "@babel/parser": ^7.20.1
+    "@babel/types": ^7.20.0
     debug: ^4.1.0
     globals: ^11.1.0
-  checksum: 19fa31560fec222b7683003f75e724f77410319e6548c72fee268e17be7e481963f43b8fceb6cdd0557338e547646448f681369da07fc79d7e966485ed910fb8
+  checksum: 6b2611f26bcc52bcdf515ed4932c316b20511f4595ca26a1db71b18273d7e2aaf435156708f968914bbf34a2dfac7c3e6618fffc9169eed5537dcdb85143da5a
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.4, @babel/types@npm:^7.2.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
-  version: 7.19.4
-  resolution: "@babel/types@npm:7.19.4"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.16.7, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.8, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
+  version: 7.20.2
+  resolution: "@babel/types@npm:7.20.2"
   dependencies:
     "@babel/helper-string-parser": ^7.19.4
     "@babel/helper-validator-identifier": ^7.19.1
     to-fast-properties: ^2.0.0
-  checksum: 62d0d24fc87e36666874725b05bb0895a8834f09713ec76bf28eb2b615aa80287fd3f29801a923b9ff8a90d7f8ffd4b40bc7bc4840e4a530e165cdab3e6bfb78
+  checksum: 62bb4665a9fcb149a8791f42c0509c23f6bd5da01c8319d4f49a16b5b49e2bfb97c5f7a99cf7935f94994da059feabaf90c29e3f380684f5328fc33fafb09984
   languageName: node
   linkType: hard
 
@@ -2173,18 +2173,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cnakazawa/watch@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "@cnakazawa/watch@npm:1.0.4"
-  dependencies:
-    exec-sh: ^0.3.2
-    minimist: ^1.2.0
-  bin:
-    watch: cli.js
-  checksum: 8678b6f582bdc5ffe59c0d45c2ad21f4ea1d162ec7ddb32e85078fca481c26958f27bcdef6007b8e9a066da090ccf9d31e1753f8de1e5f32466a04227d70dc31
-  languageName: node
-  linkType: hard
-
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -2428,48 +2416,48 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.10.0, @emotion/babel-plugin@npm:^11.10.2":
-  version: 11.10.2
-  resolution: "@emotion/babel-plugin@npm:11.10.2"
+"@emotion/babel-plugin@npm:^11.10.2, @emotion/babel-plugin@npm:^11.10.5":
+  version: 11.10.5
+  resolution: "@emotion/babel-plugin@npm:11.10.5"
   dependencies:
     "@babel/helper-module-imports": ^7.16.7
     "@babel/plugin-syntax-jsx": ^7.17.12
     "@babel/runtime": ^7.18.3
     "@emotion/hash": ^0.9.0
     "@emotion/memoize": ^0.8.0
-    "@emotion/serialize": ^1.1.0
+    "@emotion/serialize": ^1.1.1
     babel-plugin-macros: ^3.1.0
     convert-source-map: ^1.5.0
     escape-string-regexp: ^4.0.0
     find-root: ^1.1.0
     source-map: ^0.5.7
-    stylis: 4.0.13
+    stylis: 4.1.3
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 571876a4b1445c07c1a54721ab5ae72dbe4194586bceacf2b1891dce5e86755bff7e84c00af9fd047d8b96bf6a407ad8d6fcc2c788174857f84ec3c316c5c35c
+  checksum: b877d089c07ad7e571f7d1b8393c21b8ab54dc24b4b7533827c00549a4fe5345af55869f57c139f7dec09615b93ca66195aa31023bbc5af89cf3ec85e80a2281
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.10.0, @emotion/cache@npm:^11.10.3":
-  version: 11.10.3
-  resolution: "@emotion/cache@npm:11.10.3"
+"@emotion/cache@npm:^11.10.3, @emotion/cache@npm:^11.10.5":
+  version: 11.10.5
+  resolution: "@emotion/cache@npm:11.10.5"
   dependencies:
     "@emotion/memoize": ^0.8.0
-    "@emotion/sheet": ^1.2.0
+    "@emotion/sheet": ^1.2.1
     "@emotion/utils": ^1.2.0
     "@emotion/weak-memoize": ^0.3.0
-    stylis: 4.0.13
-  checksum: 5dde04418566adbd0c83042acb1b85f354dc40bad83e33f951694a36d00559ceea2dfcf533b9d9381f1bb5df8dbb436a94725b6558762da7c83f3171f1c0dbbe
+    stylis: 4.1.3
+  checksum: eeb6891ab04cf17ace0e175742550b97c30df777d6c5b145e91c4c9fbd783c29b4dabe12a8c786b78f37176313a8295c9b90c69d875e6caab5f7e4677a18be91
   languageName: node
   linkType: hard
 
-"@emotion/css-prettifier@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/css-prettifier@npm:1.1.0"
+"@emotion/css-prettifier@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@emotion/css-prettifier@npm:1.1.1"
   dependencies:
     "@emotion/memoize": ^0.8.0
-    stylis: 4.0.13
-  checksum: 0ca881d7096678de456ed74ca2a28ed7f7a473829f7b91f8d9480d1404afb14f36adfbe8a5f789ef7cfabd08ac3dd9aa56d6285babd6b6ed031f2e92dc23fe1b
+    stylis: 4.1.3
+  checksum: b921139e04d443ea3c8170cb90ae3c758e9effacdba99c5edab5d69400bcf464da283d20a92b4a1e8c74bb3e5feb8ebaee2e74ff5c84d5eab9989b000e5c7c42
   languageName: node
   linkType: hard
 
@@ -2490,23 +2478,23 @@ __metadata:
   linkType: hard
 
 "@emotion/jest@npm:^11.10.0, @emotion/jest@npm:^11.8.0":
-  version: 11.10.0
-  resolution: "@emotion/jest@npm:11.10.0"
+  version: 11.10.5
+  resolution: "@emotion/jest@npm:11.10.5"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@emotion/css-prettifier": ^1.1.0
+    "@emotion/css-prettifier": ^1.1.1
     chalk: ^4.1.0
     specificity: ^0.4.1
-    stylis: 4.0.13
+    stylis: 4.1.3
   peerDependencies:
-    "@types/jest": ^26.0.14 || ^27.0.0 || ^28.0.0
+    "@types/jest": ^26.0.14 || ^27.0.0 || ^28.0.0 || ^29.0.0
     enzyme-to-json: ^3.2.1
   peerDependenciesMeta:
     "@types/jest":
       optional: true
     enzyme-to-json:
       optional: true
-  checksum: d1d566e3958fb17d1bc3fe37b398546bdfc92666a34c0281a27108d7630219af0c90ec05633ec7fc55794a5f714d517d1ee9489435620b40ec9982136ad6e16a
+  checksum: 4629a2eac0bf1aa5a590c0fecedfa908325f3c7f66f13811058162e1fe94e2fc5282dbe321f9cb1593a3220e193e88e054ab138276c3f425b4a202ce1d135f17
   languageName: node
   linkType: hard
 
@@ -2518,13 +2506,13 @@ __metadata:
   linkType: hard
 
 "@emotion/react@npm:^11.10.4":
-  version: 11.10.4
-  resolution: "@emotion/react@npm:11.10.4"
+  version: 11.10.5
+  resolution: "@emotion/react@npm:11.10.5"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.10.0
-    "@emotion/cache": ^11.10.0
-    "@emotion/serialize": ^1.1.0
+    "@emotion/babel-plugin": ^11.10.5
+    "@emotion/cache": ^11.10.5
+    "@emotion/serialize": ^1.1.1
     "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
     "@emotion/utils": ^1.2.0
     "@emotion/weak-memoize": ^0.3.0
@@ -2537,38 +2525,38 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: da447676d10050b14534f9e903d8a058d4cdfa82f58caf4da5c150a55b2019a8b45187989085faa4b075db92f7df7abe188eb76fe5377a57516631ccf299367b
+  checksum: 911fdc54a44304e70e8f2721ba2c323695171856d5337c761ff5f952f2e651d54b1b5b68319573a0d9a5a847d13f622c2d951317176ea701607d349f8a9cd0f5
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/serialize@npm:1.1.0"
+"@emotion/serialize@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@emotion/serialize@npm:1.1.1"
   dependencies:
     "@emotion/hash": ^0.9.0
     "@emotion/memoize": ^0.8.0
     "@emotion/unitless": ^0.8.0
     "@emotion/utils": ^1.2.0
     csstype: ^3.0.2
-  checksum: a122fc4c34425bc76d0c72b14c8e0617ccc72709fbbed695c506ca493dc478df15eba0c1ec45807e7dd248430b2e0dbf8ba8fe9035832087138e0f8e51ac4100
+  checksum: ea353abbf530ede8b74fe4df30eb626f245f710ce0bfcb9d34e72630a1dede688fddf02b1143f33a1a4ef5b66b70715a3c1cd6a12ec43f5b585ed60d4f3e8712
   languageName: node
   linkType: hard
 
-"@emotion/sheet@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@emotion/sheet@npm:1.2.0"
-  checksum: 8d759a5211e09ef260604fd97737641b00c4bc476974202f298dfc0ad3b1c42838b512ad55547296d0082a50ce9be68251a276d7d0cf97c93a53d287a087a1e5
+"@emotion/sheet@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@emotion/sheet@npm:1.2.1"
+  checksum: 88268c00005d310df3ebb249b839ad0b234943da5a0cc614b232b9bd4ae600292dca9b0f61c45cde3a592c77459e880d77a2aa73af20ec3c0d579afccc3f71af
   languageName: node
   linkType: hard
 
 "@emotion/styled@npm:^11.10.4":
-  version: 11.10.4
-  resolution: "@emotion/styled@npm:11.10.4"
+  version: 11.10.5
+  resolution: "@emotion/styled@npm:11.10.5"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.10.0
+    "@emotion/babel-plugin": ^11.10.5
     "@emotion/is-prop-valid": ^1.2.0
-    "@emotion/serialize": ^1.1.0
+    "@emotion/serialize": ^1.1.1
     "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
     "@emotion/utils": ^1.2.0
   peerDependencies:
@@ -2580,7 +2568,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 8067243991d31025967e993410298ca4c558e05e3b99e319d2734b022478001ac5b0fae7a010ba7fd5a74b762d264a17e5bddffbe09841c19857ab9b077077f3
+  checksum: 63f974c508df651115ff28b2230feddfc27e0cfcb1a4b0dbdf03c57dfdb06edfc6858b298c0c475326d5a3b25982271625d75d107b4c85c2c0166c12fc0091b8
   languageName: node
   linkType: hard
 
@@ -2817,13 +2805,13 @@ __metadata:
   linkType: hard
 
 "@humanwhocodes/config-array@npm:^0.11.6":
-  version: 0.11.6
-  resolution: "@humanwhocodes/config-array@npm:0.11.6"
+  version: 0.11.7
+  resolution: "@humanwhocodes/config-array@npm:0.11.7"
   dependencies:
     "@humanwhocodes/object-schema": ^1.2.1
     debug: ^4.1.1
-    minimatch: ^3.0.4
-  checksum: 28bc0630d11c77c45aeff7cbab79159c9cce88ff1f3bc0e4cb9ff4fb271b6d3bfebcbc1ec56ae7f2b28cb31f0903ba98960b6730e66b232cc5d8f374b7d3239d
+    minimatch: ^3.0.5
+  checksum: 88b24aa7ff7ba7f4313de530b7c162cb4bcd75451a7765eb2810b2841c61989f184a1f7ef76f3160df8a8735615fda64075e9da83273190731e5a26e03c6920c
   languageName: node
   linkType: hard
 
@@ -2861,45 +2849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/console@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/console@npm:24.9.0"
-  dependencies:
-    "@jest/source-map": ^24.9.0
-    chalk: ^2.0.1
-    slash: ^2.0.0
-  checksum: 7fffdd61898c1ecc9d05023a28fdcb5447a87ee78bdd0a8e4e9b8e6a8f770a1093ff46e2816fe5e1321cc0f07623cc46ea937890de5a746f59d18588aa82bd91
-  languageName: node
-  linkType: hard
-
-"@jest/console@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/console@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    chalk: ^4.0.0
-    jest-message-util: ^26.6.2
-    jest-util: ^26.6.2
-    slash: ^3.0.0
-  checksum: e85a68b1ef49e5ecadb0055812c2493a92592b5206c26e78ce6b21869aff2847e4c808beae1dd353738c24fd51fa9d5bf135ced62931844a5d57f9ff4f40743a
-  languageName: node
-  linkType: hard
-
-"@jest/console@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/console@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    chalk: ^4.0.0
-    jest-message-util: ^27.5.1
-    jest-util: ^27.5.1
-    slash: ^3.0.0
-  checksum: 6cb46d721698aaeb0d57ace967f7a36bbefc20719d420ea8bf8ec8adf9994cb1ec11a93bbd9b1514c12a19b5dd99dcbbd1d3e22fd8bea8e41e845055b03ac18d
-  languageName: node
-  linkType: hard
-
 "@jest/console@npm:^28.1.1, @jest/console@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/console@npm:28.1.3"
@@ -2914,72 +2863,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/core@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "@jest/core@npm:26.6.3"
+"@jest/console@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/console@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/reporters": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/types": ^29.3.1
     "@types/node": "*"
-    ansi-escapes: ^4.2.1
     chalk: ^4.0.0
-    exit: ^0.1.2
-    graceful-fs: ^4.2.4
-    jest-changed-files: ^26.6.2
-    jest-config: ^26.6.3
-    jest-haste-map: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-resolve-dependencies: ^26.6.3
-    jest-runner: ^26.6.3
-    jest-runtime: ^26.6.3
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    jest-watcher: ^26.6.2
-    micromatch: ^4.0.2
-    p-each-series: ^2.1.0
-    rimraf: ^3.0.0
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
     slash: ^3.0.0
-    strip-ansi: ^6.0.0
-  checksum: 3a4816997f1e206e0dfc6ad236f53b8a554a9b705aa78a62bc754697b8adf8314187a5ac8cfbd31ee6a38feec1412dc17c85cefe39e6d9e21f5e7e2697452e7e
+  checksum: f4773d50b6588eb44daffdf808891f32a827e3f99ae8cca74efb5a9fc117655e418e97e13fcbbf530062321fa940ba88d028e66d27bdf97e41231b2e5b114626
   languageName: node
   linkType: hard
 
-"@jest/core@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/core@npm:27.5.1"
+"@jest/core@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/core@npm:29.3.1"
   dependencies:
-    "@jest/console": ^27.5.1
-    "@jest/reporters": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/console": ^29.3.1
+    "@jest/reporters": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
     ansi-escapes: ^4.2.1
     chalk: ^4.0.0
-    emittery: ^0.8.1
+    ci-info: ^3.2.0
     exit: ^0.1.2
     graceful-fs: ^4.2.9
-    jest-changed-files: ^27.5.1
-    jest-config: ^27.5.1
-    jest-haste-map: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-regex-util: ^27.5.1
-    jest-resolve: ^27.5.1
-    jest-resolve-dependencies: ^27.5.1
-    jest-runner: ^27.5.1
-    jest-runtime: ^27.5.1
-    jest-snapshot: ^27.5.1
-    jest-util: ^27.5.1
-    jest-validate: ^27.5.1
-    jest-watcher: ^27.5.1
+    jest-changed-files: ^29.2.0
+    jest-config: ^29.3.1
+    jest-haste-map: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-resolve-dependencies: ^29.3.1
+    jest-runner: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
+    jest-watcher: ^29.3.1
     micromatch: ^4.0.4
-    rimraf: ^3.0.0
+    pretty-format: ^29.3.1
     slash: ^3.0.0
     strip-ansi: ^6.0.0
   peerDependencies:
@@ -2987,43 +2914,7 @@ __metadata:
   peerDependenciesMeta:
     node-notifier:
       optional: true
-  checksum: 8c858fe99cec9eabde8c894d4313171b923e1d4b8f66884b1fa1b7a0123db9f94b797f77d888a2b57d4832e7e46cd67aa1e2f227f1544643478de021c4b84db2
-  languageName: node
-  linkType: hard
-
-"@jest/environment@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/environment@npm:24.9.0"
-  dependencies:
-    "@jest/fake-timers": ^24.9.0
-    "@jest/transform": ^24.9.0
-    "@jest/types": ^24.9.0
-    jest-mock: ^24.9.0
-  checksum: 267128ede9193374bfd1f1c9e4df8c0b31c17dcf853401b591639c39187ea3552c2ff2f3e8a75191b2dcb1e55a6c499fce2713edaa64d81fa6674ca27895e0ba
-  languageName: node
-  linkType: hard
-
-"@jest/environment@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/environment@npm:26.6.2"
-  dependencies:
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    jest-mock: ^26.6.2
-  checksum: b489afb2fa9bbde360f222bc905abd9abd77ae5802b16ca7a34d018405ad7df57a506c01efae8ff8b566c211314ec74b3f37a1cb850623e15eb1e6d020582197
-  languageName: node
-  linkType: hard
-
-"@jest/environment@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/environment@npm:27.5.1"
-  dependencies:
-    "@jest/fake-timers": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    jest-mock: ^27.5.1
-  checksum: 50e40b4f0a351a83f21af03c5cffd9f061729aee8f73131dbb32b39838c575a89d313e946ded91c08e16cf58ff470d74d6b3a48f664cec5c70a946aff45310b3
+  checksum: 06a930365498e9cf902537746090c6ce2d98c1c394d81a458f0a74c287a5321306cad25c1aec1f55222b9e3d514d7f8de6e8d44eea3bc6d63ae75b618eb473bc
   languageName: node
   linkType: hard
 
@@ -3039,6 +2930,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/environment@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/environment@npm:29.3.1"
+  dependencies:
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-mock: ^29.3.1
+  checksum: 46982c52649854e7766b8129a81a59fefefb898f853fe2a1394e72c5492a183f4e596eb91f3d4ba614a7117869ccf2c509ba190747c96085de4fa8300bb65226
+  languageName: node
+  linkType: hard
+
 "@jest/expect-utils@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/expect-utils@npm:28.1.3"
@@ -3048,12 +2951,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/expect-utils@npm:^29.2.2":
-  version: 29.2.2
-  resolution: "@jest/expect-utils@npm:29.2.2"
+"@jest/expect-utils@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/expect-utils@npm:29.3.1"
   dependencies:
     jest-get-type: ^29.2.0
-  checksum: 1241e80d307724df38668334cecff28c6dce28e5eeda1893b1f8be8b74dcb286ed4f8f40db0b15c32e3fd376563a69a8ffce30189a357fc4bd75a0450ae4e6d9
+  checksum: dc58ff9c5c7e893c056f3560cb1445771dcc1555df0b5aeff4808c6425ca9b921eae5b4f92b433b89c401e445694f5484b352f06620bac9e7cb97b8f56ee3e21
   languageName: node
   linkType: hard
 
@@ -3067,42 +2970,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/fake-timers@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/fake-timers@npm:24.9.0"
+"@jest/expect@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/expect@npm:29.3.1"
   dependencies:
-    "@jest/types": ^24.9.0
-    jest-message-util: ^24.9.0
-    jest-mock: ^24.9.0
-  checksum: ce0d8146bfd2e2822eb45aaf6965a858bd4e6a490fd30f0f3bc5941edd2fca33942e1a37bba3d85d3dbc275c18cb362e8c4f0805a2e246ec09bbeb6b4c8b1364
-  languageName: node
-  linkType: hard
-
-"@jest/fake-timers@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/fake-timers@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@sinonjs/fake-timers": ^6.0.1
-    "@types/node": "*"
-    jest-message-util: ^26.6.2
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-  checksum: 861b033ead8c749f0fecffb84cbe88603291d9db66129494d0059dee101616a2aa646fc32c8cab468826eeb32647d2b0b4f72869f048163cb3406ddd2902ece0
-  languageName: node
-  linkType: hard
-
-"@jest/fake-timers@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/fake-timers@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    "@sinonjs/fake-timers": ^8.0.1
-    "@types/node": "*"
-    jest-message-util: ^27.5.1
-    jest-mock: ^27.5.1
-    jest-util: ^27.5.1
-  checksum: df6113d11f572219ac61d3946b6cc1aaa8632e3afed9ff959bdb46e122e7cc5b5a16451a88d5fca7cc8daa66333adde3cf70d96c936f3d8406276f6e6e2cbacd
+    expect: ^29.3.1
+    jest-snapshot: ^29.3.1
+  checksum: 705bdad3f5af7c87d252a26dab890ac7f560d53439b364b4260f68b2dba271464bd7de7cfe2b03db7abaccc409da4da338075f870a1c31a1b4770bab6e67c53f
   languageName: node
   linkType: hard
 
@@ -3120,25 +2994,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/globals@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/globals@npm:26.6.2"
+"@jest/fake-timers@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/fake-timers@npm:29.3.1"
   dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/types": ^26.6.2
-    expect: ^26.6.2
-  checksum: 6516baa19339a62c8f5eeb2ef3871bfa5bd5645016f1eb87dbe52a37658e7b33b836a1325ba40db250df5d06c08dd1cb1532fbfac5712f4041561525b59bb03f
-  languageName: node
-  linkType: hard
-
-"@jest/globals@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/globals@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/types": ^27.5.1
-    expect: ^27.5.1
-  checksum: b7309297f13b02bf748782772ab2054bbd11f10eb13e9b4660b33acb8c2c4bc7ee07aa1175045feb27ce3a6916b2d3982a3c5350ea1f9c2c3852334942077471
+    "@jest/types": ^29.3.1
+    "@sinonjs/fake-timers": ^9.1.2
+    "@types/node": "*"
+    jest-message-util: ^29.3.1
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: b2fe1ea5d8ff3aa9ef099550d5897adba0ed53f8971e134ad589a52346b1f6914df986ef5c847264f7446a7dcae66946f4107cb1087b630a447cf13ad334b59b
   languageName: node
   linkType: hard
 
@@ -3153,6 +3019,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/globals@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/globals@npm:29.3.1"
+  dependencies:
+    "@jest/environment": ^29.3.1
+    "@jest/expect": ^29.3.1
+    "@jest/types": ^29.3.1
+    jest-mock: ^29.3.1
+  checksum: cda0fc6e1f8fd5a72f576c227db7a0b5ec47baa168e7aae0aca2b8f8d08d97b0c563a154460b96dcbaf3991584111a852ce783ceb66fc526cf440faa668b3893
+  languageName: node
+  linkType: hard
+
 "@jest/reporters@npm:28.1.1":
   version: 28.1.1
   resolution: "@jest/reporters@npm:28.1.1"
@@ -3191,77 +3069,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/reporters@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/reporters@npm:26.6.2"
+"@jest/reporters@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/reporters@npm:29.3.1"
   dependencies:
     "@bcoe/v8-coverage": ^0.2.3
-    "@jest/console": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
-    chalk: ^4.0.0
-    collect-v8-coverage: ^1.0.0
-    exit: ^0.1.2
-    glob: ^7.1.2
-    graceful-fs: ^4.2.4
-    istanbul-lib-coverage: ^3.0.0
-    istanbul-lib-instrument: ^4.0.3
-    istanbul-lib-report: ^3.0.0
-    istanbul-lib-source-maps: ^4.0.0
-    istanbul-reports: ^3.0.2
-    jest-haste-map: ^26.6.2
-    jest-resolve: ^26.6.2
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    node-notifier: ^8.0.0
-    slash: ^3.0.0
-    source-map: ^0.6.0
-    string-length: ^4.0.1
-    terminal-link: ^2.0.0
-    v8-to-istanbul: ^7.0.0
-  dependenciesMeta:
-    node-notifier:
-      optional: true
-  checksum: 311f8c467fc2e810ca884cd9ef032c6c58a88c4c54b41a7c85ae6da5a27b3d4c7042938f62611cf19a336a0d487976b348b8f3414cced2802b815d81bf7c1d5f
-  languageName: node
-  linkType: hard
-
-"@jest/reporters@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/reporters@npm:27.5.1"
-  dependencies:
-    "@bcoe/v8-coverage": ^0.2.3
-    "@jest/console": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/console": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@jridgewell/trace-mapping": ^0.3.15
     "@types/node": "*"
     chalk: ^4.0.0
     collect-v8-coverage: ^1.0.0
     exit: ^0.1.2
-    glob: ^7.1.2
+    glob: ^7.1.3
     graceful-fs: ^4.2.9
     istanbul-lib-coverage: ^3.0.0
     istanbul-lib-instrument: ^5.1.0
     istanbul-lib-report: ^3.0.0
     istanbul-lib-source-maps: ^4.0.0
     istanbul-reports: ^3.1.3
-    jest-haste-map: ^27.5.1
-    jest-resolve: ^27.5.1
-    jest-util: ^27.5.1
-    jest-worker: ^27.5.1
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+    jest-worker: ^29.3.1
     slash: ^3.0.0
-    source-map: ^0.6.0
     string-length: ^4.0.1
-    terminal-link: ^2.0.0
-    v8-to-istanbul: ^8.1.0
+    strip-ansi: ^6.0.0
+    v8-to-istanbul: ^9.0.1
   peerDependencies:
     node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
   peerDependenciesMeta:
     node-notifier:
       optional: true
-  checksum: fd66b17ca8af0464759d12525cfd84ae87403132da61f18ee76a2f07ecd64427797f7ad6e56d338ffa9f956cce153444edf1e5775093e9be2903aaf4d0e049bc
+  checksum: c961d44d868d019f6a722e31370785ffe91f1746ee65337c5bb1c557cc053bfc0a54fc07d703c6d3d2ad16e87241f2d22ee59895161049fafd4f94f893cdb9bf
   languageName: node
   linkType: hard
 
@@ -3283,47 +3124,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/source-map@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/source-map@npm:24.9.0"
-  dependencies:
-    callsites: ^3.0.0
-    graceful-fs: ^4.1.15
-    source-map: ^0.6.0
-  checksum: 3c897d605a5ca36cff02aac53bbb7d47fc4c50d7565b678d8d3353979933297260b5baf74cc4140809447b9e0700262385ba77f64f76068abad3ba66481dcdf4
-  languageName: node
-  linkType: hard
-
-"@jest/source-map@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/source-map@npm:26.6.2"
-  dependencies:
-    callsites: ^3.0.0
-    graceful-fs: ^4.2.4
-    source-map: ^0.6.0
-  checksum: fad0b35abf71b9e35b63d4ea7ddafb227a176fa44b84b8efc749ec3911991203f4a58019dd403af8380de4de752f0d40c9fe4c69f76a0866d266e964a02042cb
-  languageName: node
-  linkType: hard
-
-"@jest/source-map@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/source-map@npm:27.5.1"
+"@jest/source-map@npm:^28.1.2":
+  version: 28.1.2
+  resolution: "@jest/source-map@npm:28.1.2"
   dependencies:
+    "@jridgewell/trace-mapping": ^0.3.13
     callsites: ^3.0.0
     graceful-fs: ^4.2.9
-    source-map: ^0.6.0
-  checksum: 7d9937675ba4cb2f27635b13be0f86588d18cf3b2d5442e818e702ea87afa5048c5f8892c749857fd7dd884fd6e14f799851ec9af61940813a690c6d5a70979e
+  checksum: 535036de941aa98bff1c46a77fb2e98ec1f78f5b101a8c8b3c1a7e3e863a1a71ea3aef111afc4ef9d44c39b4e7e7c8384412d0a685138a92c6d522fdb8cd5b3b
   languageName: node
   linkType: hard
 
-"@jest/source-map@npm:^28.1.2":
-  version: 28.1.2
-  resolution: "@jest/source-map@npm:28.1.2"
+"@jest/source-map@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "@jest/source-map@npm:29.2.0"
   dependencies:
-    "@jridgewell/trace-mapping": ^0.3.13
+    "@jridgewell/trace-mapping": ^0.3.15
     callsites: ^3.0.0
     graceful-fs: ^4.2.9
-  checksum: 535036de941aa98bff1c46a77fb2e98ec1f78f5b101a8c8b3c1a7e3e863a1a71ea3aef111afc4ef9d44c39b4e7e7c8384412d0a685138a92c6d522fdb8cd5b3b
+  checksum: 6b63d7a1deb59f59fdd7c6f5700069401ec6228e788f3446a6f9ead2e4926c394e1d00eced3f77296a218089c0a173d2aeb5c7b9fd6205ddb160a9f28e644ea8
   languageName: node
   linkType: hard
 
@@ -3339,41 +3158,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/test-result@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/test-result@npm:24.9.0"
-  dependencies:
-    "@jest/console": ^24.9.0
-    "@jest/types": ^24.9.0
-    "@types/istanbul-lib-coverage": ^2.0.0
-  checksum: 450d068a39ace6219883d820c9fa17d9e455bd5c03b03f0a5d3924d860cdd2e36234cc15367bc42f18421ac42365c33fbe6077d860b7659b719d4d39de9d1331
-  languageName: node
-  linkType: hard
-
-"@jest/test-result@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/test-result@npm:26.6.2"
-  dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/istanbul-lib-coverage": ^2.0.0
-    collect-v8-coverage: ^1.0.0
-  checksum: 4b6f480ebf917f2f6beb5ebefc1c6dedaa768030706f184be9a545e3ad457bde802bae78c50e06f68310084921fb048e030a8eca2adfd7df9f46a6663abb0b98
-  languageName: node
-  linkType: hard
-
-"@jest/test-result@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/test-result@npm:27.5.1"
-  dependencies:
-    "@jest/console": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/istanbul-lib-coverage": ^2.0.0
-    collect-v8-coverage: ^1.0.0
-  checksum: 4fb8cbefda8f645c57e2fc0d0df169b0bf5f6cb456b42dc09f5138595b736e800d8d83e3fd36a47fd801a2359988c841792d7fc46784bec908c88b39b6581749
-  languageName: node
-  linkType: hard
-
 "@jest/test-result@npm:^28.1.1, @jest/test-result@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/test-result@npm:28.1.3"
@@ -3386,28 +3170,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/test-sequencer@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "@jest/test-sequencer@npm:26.6.3"
-  dependencies:
-    "@jest/test-result": ^26.6.2
-    graceful-fs: ^4.2.4
-    jest-haste-map: ^26.6.2
-    jest-runner: ^26.6.3
-    jest-runtime: ^26.6.3
-  checksum: 670cf1161a22716f8396baf2a2d9d1741ad169f8a0115f6b0c4f88f2cfc29fec9179bbcfd87f579a46a69b38af47abd5656fb7ded5face06c3960d8e1cdbbdae
-  languageName: node
-  linkType: hard
-
-"@jest/test-sequencer@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/test-sequencer@npm:27.5.1"
+"@jest/test-result@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/test-result@npm:29.3.1"
   dependencies:
-    "@jest/test-result": ^27.5.1
-    graceful-fs: ^4.2.9
-    jest-haste-map: ^27.5.1
-    jest-runtime: ^27.5.1
-  checksum: f43ecfc5b4c736c7f6e8521c13ef7b447ad29f96732675776be69b2631eb76019793a02ad58e69baf7ffbce1cc8d5b62ca30294091c4ad3acbdce6c12b73d049
+    "@jest/console": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/istanbul-lib-coverage": ^2.0.0
+    collect-v8-coverage: ^1.0.0
+  checksum: 6433a278119d5cdca1f92d1727850c9092a816a95bd5f3efb86b413599f1281d3f4e44ce564e25428ee1759c46cf8916e86fe077c0d94026a4b9ca40cb6722ed
   languageName: node
   linkType: hard
 
@@ -3423,73 +3194,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/transform@npm:24.9.0"
-  dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/types": ^24.9.0
-    babel-plugin-istanbul: ^5.1.0
-    chalk: ^2.0.1
-    convert-source-map: ^1.4.0
-    fast-json-stable-stringify: ^2.0.0
-    graceful-fs: ^4.1.15
-    jest-haste-map: ^24.9.0
-    jest-regex-util: ^24.9.0
-    jest-util: ^24.9.0
-    micromatch: ^3.1.10
-    pirates: ^4.0.1
-    realpath-native: ^1.1.0
-    slash: ^2.0.0
-    source-map: ^0.6.1
-    write-file-atomic: 2.4.1
-  checksum: 3def8fce5a23ddd29984e0d31a8924e12a3d9ce96c9ca0cd20412232511656931dee54833f71897566c99ee1c975b53d2ef3dc69ce62191eb78d2f7e1414cb9e
-  languageName: node
-  linkType: hard
-
-"@jest/transform@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/transform@npm:26.6.2"
+"@jest/test-sequencer@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/test-sequencer@npm:29.3.1"
   dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/types": ^26.6.2
-    babel-plugin-istanbul: ^6.0.0
-    chalk: ^4.0.0
-    convert-source-map: ^1.4.0
-    fast-json-stable-stringify: ^2.0.0
-    graceful-fs: ^4.2.4
-    jest-haste-map: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-util: ^26.6.2
-    micromatch: ^4.0.2
-    pirates: ^4.0.1
-    slash: ^3.0.0
-    source-map: ^0.6.1
-    write-file-atomic: ^3.0.0
-  checksum: 1a1d636528d9b122b87b870633763c67f131533fce61e5db536dfbbea0bbfe8fe130daededb686ccc230389473a2b8ece5d0e1eaf380066d8902bde48579de31
-  languageName: node
-  linkType: hard
-
-"@jest/transform@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/transform@npm:27.5.1"
-  dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/types": ^27.5.1
-    babel-plugin-istanbul: ^6.1.1
-    chalk: ^4.0.0
-    convert-source-map: ^1.4.0
-    fast-json-stable-stringify: ^2.0.0
+    "@jest/test-result": ^29.3.1
     graceful-fs: ^4.2.9
-    jest-haste-map: ^27.5.1
-    jest-regex-util: ^27.5.1
-    jest-util: ^27.5.1
-    micromatch: ^4.0.4
-    pirates: ^4.0.4
+    jest-haste-map: ^29.3.1
     slash: ^3.0.0
-    source-map: ^0.6.1
-    write-file-atomic: ^3.0.0
-  checksum: 2d1819dad9621a562a1ff6eceefeb5ae0900063c50e982b9f08e48d7328a0c343520ba27ce291cb72c113d4f441ef4a95285b9d4ef6604cffd53740e951c99b6
+  checksum: 30399c44fcbacbe2b538b720d4857f2edf5be29b7ce7ea9c1a4af87d7526b5a0896d379bcf7a61608f18f86732edfbade24ec3b7091f9e26bb4bd0fe8a68fb79
   languageName: node
   linkType: hard
 
@@ -3516,14 +3229,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/types@npm:24.9.0"
+"@jest/transform@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/transform@npm:29.3.1"
   dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.0
-    "@types/istanbul-reports": ^1.1.1
-    "@types/yargs": ^13.0.0
-  checksum: 990b03f5e27de292a7fea6b12cd87256dd281263afe37020cad5dceb0b775945a528bafdbc2e41bf8a29c346f94a7aa5580517c5c65a2b33f245f43d3b9b4694
+    "@babel/core": ^7.11.6
+    "@jest/types": ^29.3.1
+    "@jridgewell/trace-mapping": ^0.3.15
+    babel-plugin-istanbul: ^6.1.1
+    chalk: ^4.0.0
+    convert-source-map: ^2.0.0
+    fast-json-stable-stringify: ^2.1.0
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-util: ^29.3.1
+    micromatch: ^4.0.4
+    pirates: ^4.0.4
+    slash: ^3.0.0
+    write-file-atomic: ^4.0.1
+  checksum: 5e43dea16b6985f7f28bb7f1d8f7c8e1a980dd3325265ef48e8bbc7ba02530e26094541693ac1fb8dd791b7615adf3ef0b537d60ee8fe8299b1ab84f445451e0
   languageName: node
   linkType: hard
 
@@ -3567,9 +3292,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^29.2.1":
-  version: 29.2.1
-  resolution: "@jest/types@npm:29.2.1"
+"@jest/types@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/types@npm:29.3.1"
   dependencies:
     "@jest/schemas": ^29.0.0
     "@types/istanbul-lib-coverage": ^2.0.0
@@ -3577,7 +3302,7 @@ __metadata:
     "@types/node": "*"
     "@types/yargs": ^17.0.8
     chalk: ^4.0.0
-  checksum: 4f3ed71cec9bc9511d2bdb3637c587269a3e0f846610bfd085db1b34ae96c37eee805100f4ec094382549802a20327e79d4fcaf91a47a9d4a7d7fb7106b7baa9
+  checksum: c1ae1a66fbe403c82578d55cc5a061bffce2426f830c9365d0ab033f48580f3beb378631efe85e420709ff898fca6f7dd8fca9eb412dfed3d88a80c422065188
   languageName: node
   linkType: hard
 
@@ -3659,7 +3384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.13, @jridgewell/trace-mapping@npm:^0.3.14, @jridgewell/trace-mapping@npm:^0.3.7, @jridgewell/trace-mapping@npm:^0.3.8, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.13, @jridgewell/trace-mapping@npm:^0.3.14, @jridgewell/trace-mapping@npm:^0.3.15, @jridgewell/trace-mapping@npm:^0.3.7, @jridgewell/trace-mapping@npm:^0.3.8, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.17
   resolution: "@jridgewell/trace-mapping@npm:0.3.17"
   dependencies:
@@ -4484,9 +4209,9 @@ __metadata:
   linkType: hard
 
 "@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.4.0":
-  version: 1.4.1
-  resolution: "@lit/reactive-element@npm:1.4.1"
-  checksum: 7bc477c1e383618d2b859e0e1f26064497c85a027c561aef7b1a658fb0a28a24771284d9f5a54cc0d34b1114c729e585d3d21e2a0c3a1a2f4f644aea9c4ad852
+  version: 1.4.2
+  resolution: "@lit/reactive-element@npm:1.4.2"
+  checksum: 97e73098a9e6d13b65d7df7b8de1bdea752f128dc260923c38ef8e02a849068c4cacca48bac1abf6ef2db56b75b373ae6d1757fb36ba6a6d743bb3014e28005d
   languageName: node
   linkType: hard
 
@@ -4537,112 +4262,112 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/env@npm:12.3.1"
-  checksum: 22c6478903a60b32544b3fe5e1cf2463f4bedc51c42eccc9b806cac9c8045dee5d83c63a117d58ff209806c273b5349f23ff9e7beabcdbdacf66739f13cf41a2
+"@next/env@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/env@npm:12.3.3"
+  checksum: 3eecf70e002f6f5c608a3e550f07ab1503b87a3d822f5d8435f3857627510e1442bb82f7734398477b2d0b86dda084aa5ffffd4b52c21af97e1da5f225f4d0d5
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm-eabi@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-android-arm-eabi@npm:12.3.1"
+"@next/swc-android-arm-eabi@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-android-arm-eabi@npm:12.3.3"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm64@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-android-arm64@npm:12.3.1"
+"@next/swc-android-arm64@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-android-arm64@npm:12.3.3"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-darwin-arm64@npm:12.3.1"
+"@next/swc-darwin-arm64@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-darwin-arm64@npm:12.3.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-darwin-x64@npm:12.3.1"
+"@next/swc-darwin-x64@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-darwin-x64@npm:12.3.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-freebsd-x64@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-freebsd-x64@npm:12.3.1"
+"@next/swc-freebsd-x64@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-freebsd-x64@npm:12.3.3"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm-gnueabihf@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.3.1"
+"@next/swc-linux-arm-gnueabihf@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.3.3"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-linux-arm64-gnu@npm:12.3.1"
+"@next/swc-linux-arm64-gnu@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-linux-arm64-gnu@npm:12.3.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-linux-arm64-musl@npm:12.3.1"
+"@next/swc-linux-arm64-musl@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-linux-arm64-musl@npm:12.3.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-linux-x64-gnu@npm:12.3.1"
+"@next/swc-linux-x64-gnu@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-linux-x64-gnu@npm:12.3.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-linux-x64-musl@npm:12.3.1"
+"@next/swc-linux-x64-musl@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-linux-x64-musl@npm:12.3.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-win32-arm64-msvc@npm:12.3.1"
+"@next/swc-win32-arm64-msvc@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-win32-arm64-msvc@npm:12.3.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-win32-ia32-msvc@npm:12.3.1"
+"@next/swc-win32-ia32-msvc@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-win32-ia32-msvc@npm:12.3.3"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:12.3.1":
-  version: 12.3.1
-  resolution: "@next/swc-win32-x64-msvc@npm:12.3.1"
+"@next/swc-win32-x64-msvc@npm:12.3.3":
+  version: 12.3.3
+  resolution: "@next/swc-win32-x64-msvc@npm:12.3.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@ngtools/webpack@npm:13.3.9":
-  version: 13.3.9
-  resolution: "@ngtools/webpack@npm:13.3.9"
+"@ngtools/webpack@npm:13.3.10":
+  version: 13.3.10
+  resolution: "@ngtools/webpack@npm:13.3.10"
   peerDependencies:
     "@angular/compiler-cli": ^13.0.0
     typescript: ">=4.4.3 <4.7"
     webpack: ^5.30.0
-  checksum: 2cc1c86403f381e6ca69f84e28c72b6648f0f4fdd8cb525a2e9f34352a7541d7f4f04ed7c8086b5ba1dec7adb6378934a4d60cb2b34b0715a594d27d82cc273c
+  checksum: 721453a31ee33d8482b8014a779cd0ffcd57a929f3ff3e6c7179232e21f4861c31b4c32fbd22ff22ed2aaf306efc8b86da3917e912289b05451cb8c37c9eeebe
   languageName: node
   linkType: hard
 
@@ -5190,21 +4915,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.27.0":
-  version: 1.27.0
-  resolution: "@playwright/test@npm:1.27.0"
+"@pkgr/utils@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@pkgr/utils@npm:2.3.1"
+  dependencies:
+    cross-spawn: ^7.0.3
+    is-glob: ^4.0.3
+    open: ^8.4.0
+    picocolors: ^1.0.0
+    tiny-glob: ^0.2.9
+    tslib: ^2.4.0
+  checksum: 50c2480c3580c0f75b9325271deeb4f4cb24f6a29f1ebc5a7de0c6991380e23625fd554ecdbc7d7e93ad6dab92532a254f7490433cf2b8f1b18d75c9e01636ea
+  languageName: node
+  linkType: hard
+
+"@playwright/test@npm:1.28.0":
+  version: 1.28.0
+  resolution: "@playwright/test@npm:1.28.0"
   dependencies:
     "@types/node": "*"
-    playwright-core: 1.27.0
+    playwright-core: 1.28.0
   bin:
     playwright: cli.js
-  checksum: 4b732c22edf4a1612b1d21bcb67f9d9c39d64a49632311b6bd8ffcae53983737603e349b5ced28759ba96334a3a5f44effcbf12f22cc8f5e5ee9f43387e0f0c6
+  checksum: f4ec34e050516f250c489499563d767b604d9c219e20abb296e127eb8d891cda4cb4b53205e6e2d0813e98dd18361e0c141d3c1fde1ba521d7a2d24af04723ee
   languageName: node
   linkType: hard
 
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.5":
-  version: 0.5.8
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.8"
+  version: 0.5.9
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.9"
   dependencies:
     ansi-html-community: ^0.0.8
     common-path-prefix: ^3.0.0
@@ -5212,7 +4951,7 @@ __metadata:
     error-stack-parser: ^2.0.6
     find-up: ^5.0.0
     html-entities: ^2.1.0
-    loader-utils: ^2.0.0
+    loader-utils: ^2.0.3
     schema-utils: ^3.0.0
     source-map: ^0.7.3
   peerDependencies:
@@ -5237,7 +4976,7 @@ __metadata:
       optional: true
     webpack-plugin-serve:
       optional: true
-  checksum: dc304daf9fc7e0d5729fd790434112b5331541b4531f80ed4767ef78b24614cac8efeb51c3047cd4b15ee598fc93ee58b197801019aa1067fd084193877826ea
+  checksum: 387594d4e5b6f1dd6d8c82da2ce9e878d667c5d6de2bf3659a3b4cd2bb5a0567fb5ddae55372d7cca4c6cb70b546ab386662e0dfbe84b6431589ad3d206137a6
   languageName: node
   linkType: hard
 
@@ -5277,14 +5016,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@schematics/angular@npm:13.3.9":
-  version: 13.3.9
-  resolution: "@schematics/angular@npm:13.3.9"
+"@schematics/angular@npm:13.3.10":
+  version: 13.3.10
+  resolution: "@schematics/angular@npm:13.3.10"
   dependencies:
-    "@angular-devkit/core": 13.3.9
-    "@angular-devkit/schematics": 13.3.9
+    "@angular-devkit/core": 13.3.10
+    "@angular-devkit/schematics": 13.3.10
     jsonc-parser: 3.0.0
-  checksum: 4d0fbc19713efb1aa4e7420996496e347c87a377690e4073eb996c4c9f5842d7c2c9be462eb05bebb06740b92e9af802d9bb38afb5d251b8fd0850297461847c
+  checksum: 3ac02db43bb7ff4fab77684d1460e22db693f2ef905bf4ddb76c6a9bf99b478596da77f9a68bc193b544727c54e5e9ad800aab59c3948f01f167bf87ad1f7dfd
   languageName: node
   linkType: hard
 
@@ -5342,29 +5081,11 @@ __metadata:
   linkType: hard
 
 "@sinonjs/commons@npm:^1.7.0":
-  version: 1.8.3
-  resolution: "@sinonjs/commons@npm:1.8.3"
+  version: 1.8.5
+  resolution: "@sinonjs/commons@npm:1.8.5"
   dependencies:
     type-detect: 4.0.8
-  checksum: e4d2471feb19f735654f798fcdf389b90fab5913da609f566b04c4cdd9131a97e897d565251d35389aeebcca70a22ab4ed2291c7f7927706ead12e4f94841bf1
-  languageName: node
-  linkType: hard
-
-"@sinonjs/fake-timers@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@sinonjs/fake-timers@npm:6.0.1"
-  dependencies:
-    "@sinonjs/commons": ^1.7.0
-  checksum: a77bead4d71b40d6f7f9a3ad66a00269aa2c078260f43f594b8aed4676c6c4e7c2b642d4b8e34df314e1c971589455f7b4267ab831bf44ffdccc0bda599850ad
-  languageName: node
-  linkType: hard
-
-"@sinonjs/fake-timers@npm:^8.0.1":
-  version: 8.1.0
-  resolution: "@sinonjs/fake-timers@npm:8.1.0"
-  dependencies:
-    "@sinonjs/commons": ^1.7.0
-  checksum: d6b795f9ddaf044daf184c151555ca557ccd23636f2ee3d2f76a9d128329f81fc1aac412f6f67239ab92cb9390aad9955b71df93cf4bd442c68b1f341e381ab6
+  checksum: ac25e2e1b232353fd3bb65d7a15db7651e4fa7c63327cc9164a51ea93cacd61730ea4c80335e4474b39b527ac3acbb0d533d12f9052d94b7cb59e690cdf5466d
   languageName: node
   linkType: hard
 
@@ -5381,21 +5102,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
   dependencies:
-    "@storybook/addon-highlight": 7.0.0-alpha.48
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addon-highlight": 7.0.0-alpha.51
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@testing-library/react": ^11.2.2
     axe-core: ^4.2.0
     global: ^4.4.0
     lodash: ^4.17.21
     react-sizeme: ^3.0.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5407,17 +5128,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@7.0.0-alpha.48, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/lodash": ^4.14.167
     dequal: ^2.0.2
     global: ^4.4.0
@@ -5427,7 +5148,7 @@ __metadata:
     react-inspector: ^6.0.0
     telejson: ^6.0.8
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     uuid-browser: ^3.1.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5440,21 +5161,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@7.0.0-alpha.48, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5466,20 +5187,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@7.0.0-alpha.48, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/blocks": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/blocks": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -5493,37 +5214,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@7.0.0-alpha.48, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@7.0.0-alpha.51, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
-    "@babel/core": ^7.12.10
-    "@babel/plugin-transform-react-jsx": ^7.12.12
-    "@jest/transform": ^26.6.2
+    "@babel/core": ^7.20.2
+    "@babel/plugin-transform-react-jsx": ^7.19.0
+    "@jest/transform": ^29.3.1
     "@mdx-js/react": ^2.1.5
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/blocks": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/csf-plugin": 7.0.0-alpha.48
-    "@storybook/csf-tools": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
+    "@storybook/blocks": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/csf-plugin": 7.0.0-alpha.51
+    "@storybook/csf-tools": 7.0.0-alpha.51
     "@storybook/mdx2-csf": next
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/postinstall": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    dequal: ^2.0.2
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/postinstall": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     fs-extra: ^9.0.1
     global: ^4.4.0
     remark-external-links: ^8.0.0
     remark-slug: ^6.0.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5539,63 +5252,37 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-essentials@workspace:addons/essentials"
   dependencies:
-    "@babel/core": ^7.12.10
-    "@storybook/addon-actions": 7.0.0-alpha.48
-    "@storybook/addon-backgrounds": 7.0.0-alpha.48
-    "@storybook/addon-controls": 7.0.0-alpha.48
-    "@storybook/addon-docs": 7.0.0-alpha.48
-    "@storybook/addon-highlight": 7.0.0-alpha.48
-    "@storybook/addon-measure": 7.0.0-alpha.48
-    "@storybook/addon-outline": 7.0.0-alpha.48
-    "@storybook/addon-toolbars": 7.0.0-alpha.48
-    "@storybook/addon-viewport": 7.0.0-alpha.48
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/vue": 7.0.0-alpha.48
-    "@types/jest": ^26.0.16
+    "@babel/core": ^7.20.2
+    "@storybook/addon-actions": 7.0.0-alpha.51
+    "@storybook/addon-backgrounds": 7.0.0-alpha.51
+    "@storybook/addon-controls": 7.0.0-alpha.51
+    "@storybook/addon-docs": 7.0.0-alpha.51
+    "@storybook/addon-highlight": 7.0.0-alpha.51
+    "@storybook/addon-measure": 7.0.0-alpha.51
+    "@storybook/addon-outline": 7.0.0-alpha.51
+    "@storybook/addon-toolbars": 7.0.0-alpha.51
+    "@storybook/addon-viewport": 7.0.0-alpha.51
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/vue": 7.0.0-alpha.51
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": ^7.9.6
-  peerDependenciesMeta:
-    "@storybook/angular":
-      optional: true
-    "@storybook/html":
-      optional: true
-    "@storybook/vue":
-      optional: true
-    "@storybook/vue3":
-      optional: true
-    "@storybook/web-components":
-      optional: true
-    lit:
-      optional: true
-    lit-html:
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-    svelte:
-      optional: true
-    sveltedoc-parser:
-      optional: true
-    vue:
-      optional: true
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-highlight@7.0.0-alpha.48, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
+"@storybook/addon-highlight@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@types/webpack-env": ^1.16.0
     global: ^4.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -5604,24 +5291,24 @@ __metadata:
   resolution: "@storybook/addon-interactions@workspace:addons/interactions"
   dependencies:
     "@devtools-ds/object-inspector": ^1.1.2
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/instrumenter": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/instrumenter": 7.0.0-alpha.51
     "@storybook/jest": ^0.0.10
     "@storybook/testing-library": 0.0.14-next.0
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     formik: ^2.2.9
     global: ^4.4.0
     jest-mock: ^27.0.6
     polished: ^4.2.2
     ts-dedent: ^2.2.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5637,15 +5324,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-jest@workspace:addons/jest"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
     global: ^4.4.0
     react-sizeme: ^3.0.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     upath: ^1.2.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5662,16 +5349,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@workspace:addons/links"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     prop-types: ^15.7.2
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5683,18 +5370,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@7.0.0-alpha.48, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
+"@storybook/addon-measure@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5706,19 +5393,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-outline@7.0.0-alpha.48, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
+"@storybook/addon-outline@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5736,14 +5423,14 @@ __metadata:
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
     "@storybook/csf": next
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@types/jest-image-snapshot": ^4.1.3
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@types/jest-image-snapshot": ^5.1.0
     "@types/puppeteer": ^5.4.0
-    jest-image-snapshot: ^4.3.0
+    jest-image-snapshot: ^6.0.0
     puppeteer: ^2.0.0 || ^3.0.0
   peerDependencies:
-    "@storybook/addon-storyshots": 7.0.0-alpha.48
+    "@storybook/addon-storyshots": 7.0.0-alpha.51
     puppeteer: ">=2.0.0"
   peerDependenciesMeta:
     puppeteer:
@@ -5758,33 +5445,32 @@ __metadata:
     "@angular/core": ^13.3.6
     "@angular/platform-browser-dynamic": ^13.3.6
     "@emotion/jest": ^11.8.0
-    "@jest/transform": ^26.6.2
-    "@storybook/addon-docs": 7.0.0-alpha.48
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/angular": 7.0.0-alpha.48
+    "@jest/transform": ^29.3.1
+    "@storybook/addon-docs": 7.0.0-alpha.51
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/angular": 7.0.0-alpha.51
     "@storybook/babel-plugin-require-context-hook": 1.0.1
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@storybook/react": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@storybook/vue": 7.0.0-alpha.48
-    "@storybook/vue3": 7.0.0-alpha.48
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/react": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@storybook/vue": 7.0.0-alpha.51
+    "@storybook/vue3": 7.0.0-alpha.51
     "@types/glob": ^7.1.3
-    "@types/jest": ^26.0.16
-    "@types/jest-specific-snapshot": ^0.5.3
-    babel-loader: ^8.2.5
+    "@types/jest-specific-snapshot": ^0.5.6
+    babel-loader: ^8.3.0
     core-js: ^3.8.2
     enzyme: ^3.11.0
     enzyme-to-json: ^3.6.1
     glob: ^7.1.6
     global: ^4.4.0
     jest-preset-angular: ^8.3.2
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     jest-vue-preprocessor: ^1.7.1
     preact-render-to-string: ^5.1.19
-    pretty-format: ^26.6.2
+    pretty-format: ^28.0.0
     react-test-renderer: ^16
     read-pkg-up: ^7.0.1
     rxjs: ^6.6.3
@@ -5845,19 +5531,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@workspace:addons/storysource"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/source-loader": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@types/react": ^16.14.23
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/source-loader": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@types/react": ^16.14.34
     "@types/react-syntax-highlighter": 11.0.5
     estraverse: ^5.2.0
     prop-types: ^15.7.2
     react-syntax-highlighter: ^15.5.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5870,8 +5556,8 @@ __metadata:
   linkType: soft
 
 "@storybook/addon-svelte-csf@npm:^2.0.0":
-  version: 2.0.8
-  resolution: "@storybook/addon-svelte-csf@npm:2.0.8"
+  version: 2.0.10
+  resolution: "@storybook/addon-svelte-csf@npm:2.0.10"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -5881,20 +5567,20 @@ __metadata:
   peerDependenciesMeta:
     svelte-loader:
       optional: true
-  checksum: c4ded876963fdaa9c436a8d926dc843839d08b45febf37c8b28b73bd96eb16f808121a510bafc048c8ce194eea5f5505d12125e28317fdb0c2d3f722167878a1
+  checksum: fc128896f0d7416fd671d7e392a11ced20f150dbddbac39a2e9f9948145409fdba1380d800a40ffc663a664829e01cffa71d2ec1ec4845c18f804117025a9d85
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@7.0.0-alpha.48, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    typescript: ~4.6.3
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5906,20 +5592,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@7.0.0-alpha.48, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
     global: ^4.4.0
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5931,17 +5617,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@7.0.0-alpha.48, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@7.0.0-alpha.51, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
   version: 0.0.0-use.local
   resolution: "@storybook/addons@workspace:lib/addons"
   dependencies:
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5971,7 +5657,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/angular@7.0.0-alpha.48, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
+"@storybook/angular@7.0.0-alpha.51, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:frameworks/angular"
   dependencies:
@@ -5987,32 +5673,33 @@ __metadata:
     "@angular/platform-browser": ^13.3.6
     "@angular/platform-browser-dynamic": ^13.3.6
     "@nrwl/workspace": 14.6.1
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/core-server": 7.0.0-alpha.48
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
-    "@types/react": ^16.14.23
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
     "@types/rimraf": ^3.0.2
     "@types/semver": ^7.3.4
     "@types/tmp": ^0.2.3
+    "@types/webpack-env": ^1.18.0
     core-js: ^3.8.2
     cross-spawn: ^7.0.3
     find-up: ^5.0.0
     global: ^4.4.0
-    jest: ^27.5.1
+    jest: ^29.3.1
     jest-preset-angular: ^12.0.0
-    jest-specific-snapshot: ^5.0.0
+    jest-specific-snapshot: ^6.0.0
     react: ^16.14.0
     react-dom: ^16.14.0
     read-pkg-up: ^7.0.1
@@ -6022,7 +5709,7 @@ __metadata:
     tmp: ^0.2.1
     ts-dedent: ^2.0.0
     tsconfig-paths-webpack-plugin: ^3.5.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
     webpack: 5
     zone.js: ^0.11.0
@@ -6051,19 +5738,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@7.0.0-alpha.48, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
+"@storybook/api@7.0.0-alpha.51, @storybook/api@workspace:*, @storybook/api@workspace:lib/api":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/api"
   dependencies:
-    "@jest/globals": ^26.6.2
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/lodash": ^4.14.167
     "@types/qs": ^6
     dequal: ^2.0.2
@@ -6076,7 +5762,7 @@ __metadata:
     store2: ^2.12.0
     telejson: ^6.0.8
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6119,23 +5805,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@7.0.0-alpha.48, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks":
+"@storybook/blocks@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addon-actions": 7.0.0-alpha.51
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/color-convert": ^2.0.0
     "@types/lodash": ^4.14.167
     color-convert: ^2.0.1
@@ -6150,17 +5836,18 @@ __metadata:
     util-deprecate: ^1.0.2
   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/builder-manager@7.0.0-alpha.48, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:lib/builder-manager":
+"@storybook/builder-manager@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/manager": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/manager": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
     "@types/ejs": ^3.1.1
     "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10
     browser-assert: ^1.2.1
@@ -6171,26 +5858,26 @@ __metadata:
     fs-extra: ^9.0.1
     process: ^0.11.10
     slash: ^3.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util: ^0.12.4
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-vite@7.0.0-alpha.48, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:lib/builder-vite":
+"@storybook/builder-vite@7.0.0-alpha.51, @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:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.0.5
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
     "@storybook/mdx2-csf": next
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/source-loader": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/source-loader": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/express": ^4.17.13
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@vitejs/plugin-react": ^2.0.0
     browser-assert: ^1.2.1
     es-module-lexer: ^0.9.3
@@ -6198,40 +5885,39 @@ __metadata:
     glob-promise: ^4.2.0
     magic-string: ^0.26.1
     slash: ^3.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.3
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@7.0.0-alpha.48, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@types/case-sensitive-paths-webpack-plugin": ^2.1.6
-    "@types/node": ^16.0.0
+    "@babel/core": ^7.20.2
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/semver": ^7.3.4
     "@types/terser-webpack-plugin": ^5.2.0
     "@types/webpack-dev-middleware": ^5.3.0
     "@types/webpack-hot-middleware": ^2.25.6
     "@types/webpack-virtual-modules": ^0.1.1
-    babel-loader: ^8.2.5
+    babel-loader: ^8.3.0
     babel-plugin-named-exports-order: ^0.0.2
     browser-assert: ^1.2.1
     case-sensitive-paths-webpack-plugin: ^2.4.0
@@ -6245,7 +5931,7 @@ __metadata:
     style-loader: ^3.3.1
     terser-webpack-plugin: ^5.3.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util: ^0.12.4
     util-deprecate: ^1.0.2
     webpack: 5
@@ -6261,37 +5947,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@7.0.0-alpha.48, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     global: ^4.4.0
     qs: ^6.10.0
     telejson: ^6.0.8
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-websocket@7.0.0-alpha.48, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
+"@storybook/channel-websocket@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
     global: ^4.4.0
     telejson: ^6.0.8
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@7.0.0-alpha.48, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@7.0.0-alpha.51, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6306,22 +5992,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@7.0.0-alpha.48, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@7.0.0-alpha.51, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
   dependencies:
-    "@babel/core": ^7.12.10
-    "@babel/preset-env": ^7.12.11
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/codemod": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-server": 7.0.0-alpha.48
-    "@storybook/csf-tools": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/telemetry": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@babel/core": ^7.20.2
+    "@babel/preset-env": ^7.20.2
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/codemod": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/csf-tools": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/telemetry": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/cross-spawn": ^6.0.2
-    "@types/degit": ^2.8.3
     "@types/prompts": ^2.0.9
     "@types/puppeteer-core": ^2.1.0
     "@types/semver": ^7.3.4
@@ -6332,7 +6017,6 @@ __metadata:
     chalk: ^4.1.0
     commander: ^6.2.1
     cross-spawn: ^7.0.3
-    degit: ^2.8.4
     detect-indent: ^6.1.0
     envinfo: ^7.7.3
     execa: ^5.0.0
@@ -6340,6 +6024,7 @@ __metadata:
     find-up: ^5.0.0
     fs-extra: ^9.0.1
     get-port: ^5.1.1
+    giget: ^1.0.0
     globby: ^11.0.2
     jscodeshift: ^0.13.1
     leven: ^3.1.0
@@ -6350,7 +6035,7 @@ __metadata:
     shelljs: ^0.8.5
     strip-json-comments: ^3.1.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     update-notifier: ^6.0.2
     util-deprecate: ^1.0.2
   bin:
@@ -6359,23 +6044,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@7.0.0-alpha.48, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/qs": ^6.9.5
     "@types/webpack-env": ^1.16.4
     global: ^4.4.0
     qs: ^6.10.0
     synchronous-promise: ^2.0.15
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6383,12 +6068,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@7.0.0-alpha.48, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@7.0.0-alpha.51, @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:
     global: ^4.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6402,37 +6087,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@7.0.0-alpha.48, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/codemod@7.0.0-alpha.51, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
-    "@babel/types": ^7.12.11
+    "@babel/types": ^7.20.2
     "@storybook/csf": next
-    "@storybook/csf-tools": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/csf-tools": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     cross-spawn: ^7.0.3
     globby: ^11.0.2
-    jest: ^26.6.3
-    jest-specific-snapshot: ^4.0.0
+    jest: ^29.3.1
+    jest-specific-snapshot: ^6.0.0
     jscodeshift: ^0.13.1
     lodash: ^4.17.21
-    prettier: ">=2.2.1 <=3.0.0"
+    prettier: ^2.7.1
     recast: ^0.19.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util: ^0.12.4
   languageName: unknown
   linkType: soft
 
-"@storybook/components@7.0.0-alpha.48, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
+"@storybook/components@7.0.0-alpha.51, @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.0-alpha.48
+    "@storybook/client-logger": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
     "@types/util-deprecate": ^1.0.0
@@ -6441,12 +6126,12 @@ __metadata:
     memoizerific: ^1.11.3
     overlayscrollbars: ^1.13.1
     polished: ^4.2.2
-    prettier: ">=2.5"
+    prettier: ^2.7.1
     react-popper-tooltip: ^3.1.1
     react-syntax-highlighter: ^15.4.5
     react-textarea-autosize: ^8.3.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6454,23 +6139,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-client@7.0.0-alpha.48, @storybook/core-client@workspace:*, @storybook/core-client@workspace:lib/core-client":
+"@storybook/core-client@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependenciesMeta:
     typescript:
@@ -6478,17 +6163,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@7.0.0-alpha.48, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@7.0.0-alpha.51, @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:
-    "@babel/core": ^7.12.10
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@types/babel__core": ^7.0.0
+    "@babel/core": ^7.20.2
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@types/babel__core": ^7.1.20
     "@types/express": ^4.7.0
-    "@types/mock-fs": ^4.13.0
-    "@types/node": ^16.0.0
+    "@types/mock-fs": ^4.13.1
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/picomatch": ^2.3.0
     "@types/pretty-hrtime": ^1.0.0
     chalk: ^4.1.0
@@ -6501,7 +6186,7 @@ __metadata:
     glob: ^7.1.6
     handlebars: ^4.7.7
     lazy-universal-dotenv: ^3.0.1
-    mock-fs: ^4.13.0
+    mock-fs: ^5.2.0
     picomatch: ^2.3.0
     pkg-dir: ^5.0.0
     pretty-hrtime: ^1.0.3
@@ -6509,8 +6194,8 @@ __metadata:
     slash: ^3.0.0
     telejson: ^6.0.8
     ts-dedent: ^2.0.0
-    type-fest: ^2.17.0
-    typescript: ~4.6.3
+    type-fest: ^2.19.0
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6521,11 +6206,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@7.0.0-alpha.48, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@7.0.0-alpha.51, @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:
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6538,27 +6223,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@7.0.0-alpha.48, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/builder-manager": 7.0.0-alpha.51
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/csf-tools": 7.0.0-alpha.48
+    "@storybook/csf-tools": 7.0.0-alpha.51
     "@storybook/docs-mdx": 0.0.1-canary.12433cf.0
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/telemetry": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/telemetry": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/compression": ^1.7.0
     "@types/ip": ^1.1.0
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
@@ -6576,7 +6261,7 @@ __metadata:
     globby: ^11.0.2
     ip: ^2.0.0
     jest-os-detection: ^1.3.1
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     lodash: ^4.17.21
     node-fetch: ^2.6.7
     open: ^8.4.0
@@ -6588,8 +6273,7 @@ __metadata:
     slash: ^3.0.0
     telejson: ^6.0.8
     ts-dedent: ^2.0.0
-    ts-jest: ^26.4.4
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
     watchpack: ^2.2.0
     webpack: 5
@@ -6605,45 +6289,45 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-webpack@7.0.0-alpha.48, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack":
+"@storybook/core-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     webpack: 5
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-plugin@7.0.0-alpha.48, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin":
+"@storybook/csf-plugin@7.0.0-alpha.51, @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.0-alpha.48
-    typescript: ~4.6.3
+    "@storybook/csf-tools": 7.0.0-alpha.51
+    typescript: ^4.9.3
     unplugin: ^0.10.2
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@7.0.0-alpha.48, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@7.0.0-alpha.51, @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:
-    "@babel/generator": ^7.12.11
-    "@babel/parser": ^7.12.11
-    "@babel/traverse": ^7.12.11
-    "@babel/types": ^7.12.11
+    "@babel/generator": ^7.20.4
+    "@babel/parser": ^7.20.3
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.2
     "@storybook/csf": next
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/types": 7.0.0-alpha.51
     "@types/fs-extra": ^9.0.6
     fs-extra: ^9.0.1
     js-yaml: ^3.14.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6656,17 +6340,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:0.0.2--canary.53.4879818.0":
-  version: 0.0.2--canary.53.4879818.0
-  resolution: "@storybook/csf@npm:0.0.2--canary.53.4879818.0"
-  dependencies:
-    expect-type: ^0.14.2
-    lodash: ^4.17.15
-    type-fest: ^2.19.0
-  checksum: 23f5e01d4d090d6454df0b06831a238a2d30f725c145ef5e9f2a4c9ae5d260e7ed85d288cc6750e0efc78650cac24b1104bdc12fafc09a8469a70b1f8f6c123d
-  languageName: node
-  linkType: hard
-
 "@storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
@@ -6677,13 +6350,13 @@ __metadata:
   linkType: hard
 
 "@storybook/csf@npm:next":
-  version: 0.0.2-next.2
-  resolution: "@storybook/csf@npm:0.0.2-next.2"
+  version: 0.0.2-next.7
+  resolution: "@storybook/csf@npm:0.0.2-next.7"
   dependencies:
     expect-type: ^0.14.2
     lodash: ^4.17.15
     type-fest: ^2.19.0
-  checksum: 744e701c826826af065faf3ea3d932a761396fc5e348d097dbe66528e8184b2f5ae67dec8432262e0341dba87997c1d77020697803884e2766f29a4d2fc9f90d
+  checksum: 3920626fdd6dc4875ba95ae46fa0776051f544a479029ee7d561b87602511010161750a42b0d5e1371ec336b47262e1098524c834805ca686d9bc2de5cae0e4e
   languageName: node
   linkType: hard
 
@@ -6699,19 +6372,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@7.0.0-alpha.48, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
+"@storybook/docs-tools@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@babel/core": ^7.20.2
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     doctrine: ^3.0.0
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     lodash: ^4.17.21
     require-from-string: ^2.0.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6719,19 +6392,19 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/ember@workspace:frameworks/ember"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     ember-source: ~3.28.1
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     read-pkg-up: ^7.0.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     "@types/ember__component": 4.0.8
@@ -6763,51 +6436,51 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/html": 7.0.0-alpha.48
-    "@storybook/preset-html-webpack": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/html": 7.0.0-alpha.51
+    "@storybook/preset-html-webpack": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
   languageName: unknown
   linkType: soft
 
-"@storybook/html@7.0.0-alpha.48, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
+"@storybook/html@7.0.0-alpha.51, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:renderers/html"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@7.0.0-alpha.48, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@7.0.0-alpha.51, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
   version: 0.0.0-use.local
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     core-js: ^3.8.2
     global: ^4.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -6891,22 +6564,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager@7.0.0-alpha.48, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager":
+"@storybook/manager@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/components": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/router": 7.0.0-alpha.48
-    "@storybook/theming": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/components": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/router": 7.0.0-alpha.51
+    "@storybook/theming": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@testing-library/react": ^11.2.2
     "@types/semver": ^7.3.4
     copy-to-clipboard: ^3.3.1
@@ -6920,7 +6593,7 @@ __metadata:
     memoizerific: ^1.11.3
     polished: ^4.2.2
     qs: ^6.10.0
-    react: ^16.8.0
+    react: ^16.14.0
     react-dom: ^16.8.0
     react-draggable: ^4.4.3
     react-helmet-async: ^1.0.7
@@ -6930,16 +6603,16 @@ __metadata:
     shelljs: ^0.8.5
     store2: ^2.12.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
 "@storybook/mdx2-csf@npm:next":
-  version: 0.1.0-next.5
-  resolution: "@storybook/mdx2-csf@npm:0.1.0-next.5"
+  version: 0.1.0-next.6
+  resolution: "@storybook/mdx2-csf@npm:0.1.0-next.6"
   dependencies:
-    loader-utils: ^2.0.0
-  checksum: 6c7050500dc6bfceb23d61cb8b2171468f7d5a2bbc7dac0a0f6a4e6515b98c013d8318b87c4b7ef2381755013cca1e5306dc50de64601e80f9c983e3604522c7
+    loader-utils: ^2.0.4
+  checksum: b3a3f0321824ca45f42524dce56d94eaab978d9f000318da4300d9448c5c7693aad70b70f6cffc39494b39c4bc6772f5765639810dfd77a18a58715b498b5e5c
   languageName: node
   linkType: hard
 
@@ -6947,16 +6620,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
   dependencies:
-    "@babel/preset-typescript": ^7.18.6
-    "@storybook/addon-actions": 7.0.0-alpha.48
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/preset-react-webpack": 7.0.0-alpha.48
-    "@storybook/react": 7.0.0-alpha.48
-    "@types/loader-utils": ^2.0.3
-    "@types/node": ^14.14.20 || ^16.0.0
+    "@storybook/addon-actions": 7.0.0-alpha.51
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/preset-react-webpack": 7.0.0-alpha.51
+    "@storybook/react": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     find-up: ^5.0.0
     fs-extra: ^9.0.1
     image-size: ^1.0.0
@@ -6970,7 +6641,7 @@ __metadata:
     ts-dedent: ^2.0.0
     tsconfig-paths: ^4.0.0
     tsconfig-paths-webpack-plugin: ^3.5.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     webpack: ^5.65.0
   peerDependencies:
     "@babel/core": ^7.11.5
@@ -6989,7 +6660,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/node-logger@7.0.0-alpha.48, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@7.0.0-alpha.51, @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:
@@ -6998,18 +6669,18 @@ __metadata:
     chalk: ^4.1.0
     npmlog: ^5.0.1
     pretty-hrtime: ^1.0.3
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/postinstall@7.0.0-alpha.48, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@7.0.0-alpha.51, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
-    jest: ^26.6.3
-    jest-specific-snapshot: ^4.0.0
+    jest: ^29.3.1
+    jest-specific-snapshot: ^6.0.0
     jscodeshift: ^0.13.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -7017,86 +6688,86 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preact-webpack5@workspace:frameworks/preact-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preact": 7.0.0-alpha.48
-    "@storybook/preset-preact-webpack": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preact": 7.0.0-alpha.51
+    "@storybook/preset-preact-webpack": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     preact: ^10.5.13
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     preact: ^8.0.0||^10.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@7.0.0-alpha.48, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
+"@storybook/preact@7.0.0-alpha.51, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
   version: 0.0.0-use.local
   resolution: "@storybook/preact@workspace:renderers/preact"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     preact: ^10.5.13
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     preact: ^8.0.0||^10.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-html-webpack@7.0.0-alpha.48, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
+"@storybook/preset-html-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     html-loader: ^3.1.0
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     webpack: 5
   peerDependencies:
     "@babel/core": "*"
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-preact-webpack@7.0.0-alpha.48, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack":
+"@storybook/preset-preact-webpack@7.0.0-alpha.51, @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.12.12
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@babel/plugin-transform-react-jsx": ^7.19.0
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     preact: ^10.5.13
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     preact: ^8.0.0||^10.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-react-webpack@7.0.0-alpha.48, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack":
+"@storybook/preset-react-webpack@7.0.0-alpha.51, @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.12.1
-    "@babel/preset-react": ^7.12.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.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/react": 7.0.0-alpha.48
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/react": 7.0.0-alpha.51
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/semver": ^7.3.4
     "@types/util-deprecate": ^1.0.0
     babel-plugin-add-react-displayname: ^0.0.5
@@ -7104,10 +6775,10 @@ __metadata:
     fs-extra: ^9.0.1
     react-refresh: ^0.11.0
     semver: ^7.3.7
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": ^7.11.5
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     require-from-string: ^2.0.2
@@ -7120,40 +6791,40 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-server-webpack@7.0.0-alpha.48, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack":
+"@storybook/preset-server-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@storybook/server": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/server": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     fs-extra: ^9.0.1
     global: ^4.4.0
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     react: 16.14.0
     react-dom: 16.14.0
     safe-identifier: ^0.4.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     yaml: ^1.10.0
     yaml-loader: ^0.8.0
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-svelte-webpack@7.0.0-alpha.48, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack":
+"@storybook/preset-svelte-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
     react: 16.14.0
     react-dom: 16.14.0
     svelte: ^3.31.2
     svelte-loader: ^3.1.2
     sveltedoc-parser: ^4.2.1
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     svelte: ^3.1.0
@@ -7161,17 +6832,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue-webpack@7.0.0-alpha.48, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack":
+"@storybook/preset-vue-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-loader: ^9.2.8
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: ^2.6.12
     vue-docgen-api: ^4.44.23
     vue-docgen-loader: ^1.5.1
@@ -7188,18 +6859,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue3-webpack@7.0.0-alpha.48, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack":
+"@storybook/preset-vue3-webpack@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     "@vue/compiler-sfc": ^3.2.33
     react: 16.14.0
     react-dom: 16.14.0
     ts-loader: ^9.2.8
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: ^3.2.33
     vue-docgen-api: ^4.46.0
     vue-docgen-loader: ^1.5.1
@@ -7213,37 +6884,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-web-components-webpack@7.0.0-alpha.48, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack":
+"@storybook/preset-web-components-webpack@7.0.0-alpha.51, @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.12.11
-    "@storybook/core-webpack": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@babel/preset-env": ^7.20.2
+    "@storybook/core-webpack": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     babel-loader: ^7.0.0 || ^8.0.0
     babel-plugin-bundled-import-meta: ^0.3.1
     lit-html: 2.0.2
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     lit-html: ^1.4.1 || ^2.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-web@7.0.0-alpha.48, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channels": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channels": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     ansi-to-html: ^0.6.11
     global: ^4.4.0
     lodash: ^4.17.21
@@ -7251,8 +6922,7 @@ __metadata:
     react: 16.14.0
     synchronous-promise: ^2.0.15
     ts-dedent: ^2.0.0
-    ts-jest: ^28.0.8
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   languageName: unknown
   linkType: soft
@@ -7281,19 +6951,19 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": ^0.0.5
     "@rollup/pluginutils": ^4.2.0
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-vite": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/react": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-vite": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/react": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2
     magic-string: ^0.26.1
     react-docgen: ^6.0.0-alpha.3
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7305,12 +6975,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-webpack5@workspace:frameworks/react-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/preset-react-webpack": 7.0.0-alpha.48
-    "@storybook/react": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
-    jest-specific-snapshot: ^4.0.0
-    typescript: ~4.6.3
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/preset-react-webpack": 7.0.0-alpha.51
+    "@storybook/react": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
+    jest-specific-snapshot: ^6.0.0
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": ^7.11.5
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7323,20 +6993,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/react@7.0.0-alpha.48, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
+"@storybook/react@7.0.0-alpha.51, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:renderers/react"
   dependencies:
-    "@babel/core": ^7.11.5
-    "@jest/globals": ^26.6.2
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@babel/core": ^7.20.2
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     "@types/estree": ^0.0.51
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/util-deprecate": ^1.0.0
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
@@ -7345,14 +7014,14 @@ __metadata:
     expect-type: ^0.14.2
     global: ^4.4.0
     html-tags: ^3.1.0
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     lodash: ^4.17.21
     prop-types: ^15.7.2
     react-element-to-jsx-string: ^15.0.0
     require-from-string: ^2.0.2
     ts-dedent: ^2.0.0
     type-fest: ^2.19.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7367,31 +7036,32 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/root@workspace:."
   dependencies:
-    "@babel/cli": ^7.17.6
-    "@babel/core": ^7.17.5
-    "@babel/plugin-proposal-class-properties": ^7.16.7
-    "@babel/plugin-proposal-decorators": ^7.17.2
-    "@babel/plugin-proposal-export-default-from": ^7.16.7
-    "@babel/plugin-proposal-object-rest-spread": ^7.17.3
-    "@babel/plugin-proposal-private-methods": ^7.16.11
+    "@babel/cli": ^7.19.3
+    "@babel/core": ^7.20.2
+    "@babel/plugin-proposal-class-properties": ^7.18.6
+    "@babel/plugin-proposal-decorators": ^7.20.2
+    "@babel/plugin-proposal-export-default-from": ^7.18.10
+    "@babel/plugin-proposal-object-rest-spread": ^7.20.2
+    "@babel/plugin-proposal-private-methods": ^7.18.6
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
-    "@babel/plugin-transform-arrow-functions": ^7.16.7
-    "@babel/plugin-transform-block-scoping": ^7.16.7
-    "@babel/plugin-transform-destructuring": ^7.17.3
-    "@babel/plugin-transform-shorthand-properties": ^7.16.7
-    "@babel/preset-env": ^7.16.11
-    "@babel/preset-flow": ^7.16.7
-    "@babel/preset-react": ^7.16.7
-    "@babel/preset-typescript": ^7.16.7
-    "@babel/runtime": ^7.17.2
+    "@babel/plugin-transform-arrow-functions": ^7.18.6
+    "@babel/plugin-transform-block-scoping": ^7.20.2
+    "@babel/plugin-transform-destructuring": ^7.20.2
+    "@babel/plugin-transform-shorthand-properties": ^7.18.6
+    "@babel/preset-env": ^7.20.2
+    "@babel/preset-flow": ^7.18.6
+    "@babel/preset-react": ^7.18.6
+    "@babel/preset-typescript": ^7.18.6
+    "@babel/runtime": ^7.20.1
     "@compodoc/compodoc": ^1.1.18
     "@emotion/babel-plugin": ^11.10.2
     "@emotion/jest": ^11.10.0
+    "@jest/globals": ^29.3.1
     "@linear/sdk": ^1.21.0
     "@nrwl/cli": 14.6.1
     "@nrwl/nx-cloud": 14.6.0
     "@nrwl/workspace": 14.6.1
-    "@playwright/test": 1.27.0
+    "@playwright/test": 1.28.0
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -7488,32 +7158,31 @@ __metadata:
     "@types/escodegen": ^0.0.6
     "@types/express": ^4.17.11
     "@types/fs-extra": ^9.0.6
-    "@types/jest": ^26.0.16
     "@types/js-yaml": ^3.12.6
     "@types/lodash": ^4.14.167
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/node-cleanup": ^2.1.1
     "@types/prompts": 2.0.11
-    "@types/react": ^16.14.23
+    "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
     "@types/semver": ^7.3.4
     "@types/serve-static": ^1.13.8
     "@types/shelljs": ^0.8.7
     "@types/terser-webpack-plugin": ^5.2.0
     "@types/webpack-dev-middleware": ^5.3.0
-    "@typescript-eslint/eslint-plugin": ^5.40.1
-    "@typescript-eslint/experimental-utils": ^5.40.1
-    "@typescript-eslint/parser": ^5.40.1
+    "@typescript-eslint/eslint-plugin": ^5.43.0
+    "@typescript-eslint/experimental-utils": ^5.43.0
+    "@typescript-eslint/parser": ^5.43.0
     "@vitejs/plugin-react": ^2.1.0
     babel-core: ^7.0.0-bridge.0
     babel-eslint: ^10.1.0
-    babel-jest: ^26.6.3
-    babel-loader: ^8.2.5
+    babel-jest: ^29.3.1
+    babel-loader: ^8.3.0
     babel-plugin-add-react-displayname: ^0.0.5
     babel-plugin-dynamic-import-node: ^2.3.3
     babel-plugin-macros: ^3.0.1
     chalk: ^4.1.0
-    chromatic: ^6.11.3
+    chromatic: 6.11.2
     codecov: ^3.8.1
     commander: ^6.2.1
     concurrently: ^5.3.0
@@ -7526,7 +7195,8 @@ __metadata:
     esbuild: ^0.14.48
     esbuild-loader: ^2.19.0
     esbuild-plugin-alias: ^0.2.1
-    eslint: ^8.26.0
+    eslint: ^8.27.0
+    eslint-import-resolver-typescript: ^3.5.2
     eslint-plugin-import: ^2.26.0
     eslint-plugin-react: ^7.31.10
     eslint-plugin-storybook: ^0.6.6
@@ -7540,17 +7210,13 @@ __metadata:
     global: ^4.4.0
     http-server: ^0.12.3
     husky: ^4.3.7
-    jest: ^26.6.3
-    jest-environment-jsdom: ^26.6.2
-    jest-environment-jsdom-thirteen: ^1.0.1
-    jest-enzyme: ^7.1.2
-    jest-image-snapshot: ^4.3.0
-    jest-jasmine2: ^26.6.3
-    jest-junit: ^13.0.0
+    jest: ^29.3.1
+    jest-environment-jsdom: ^29.3.1
+    jest-image-snapshot: ^6.0.0
+    jest-junit: ^14.0.1
     jest-os-detection: ^1.3.1
-    jest-raw-loader: ^1.0.1
-    jest-serializer-html: ^7.0.0
-    jest-watch-typeahead: ^0.6.1
+    jest-serializer-html: ^7.1.0
+    jest-watch-typeahead: ^2.2.1
     js-yaml: ^3.14.1
     lerna: ^3.22.1
     lint-staged: ^10.5.4
@@ -7562,13 +7228,13 @@ __metadata:
     npmlog: ^5.0.1
     nx: 14.6.1
     p-limit: ^3.1.0
-    playwright: 1.27.0
+    playwright: 1.28.0
     prettier: 2.7.1
     process: ^0.11.10
     prompts: ^2.4.0
     puppeteer: ^2.1.1
     raf: ^3.4.1
-    react: ^16.8.0
+    react: ^16.14.0
     read-pkg-up: ^7.0.1
     regenerator-runtime: ^0.13.7
     remark: ^13.0.0
@@ -7583,11 +7249,10 @@ __metadata:
     terser-webpack-plugin: ^5.3.1
     trash: ^7.0.0
     ts-dedent: ^2.0.0
-    ts-jest: ^26.4.4
     ts-loader: ^9.2.8
     ts-node: ^10.4.0
     tsup: ^6.2.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util: ^0.12.4
     verdaccio: ^4.10.0
     verdaccio-auth-memory: ^9.7.2
@@ -7628,11 +7293,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@7.0.0-alpha.48, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@7.0.0-alpha.51, @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.0-alpha.48
+    "@storybook/client-logger": 7.0.0-alpha.51
     dequal: ^2.0.2
     global: ^4.4.0
     lodash: ^4.17.21
@@ -7641,7 +7306,7 @@ __metadata:
     react-router-dom: 6.0.2
     ts-dedent: ^2.0.0
     ts-node: ^10.4.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7680,60 +7345,60 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server-webpack5@workspace:frameworks/server-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preset-server-webpack": 7.0.0-alpha.48
-    "@storybook/server": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preset-server-webpack": 7.0.0-alpha.51
+    "@storybook/server": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/server@7.0.0-alpha.48, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
+"@storybook/server@7.0.0-alpha.51, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@7.0.0-alpha.48, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@7.0.0-alpha.51, @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": next
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/types": 7.0.0-alpha.51
     estraverse: ^5.2.0
-    jest-specific-snapshot: ^4.0.0
+    jest-specific-snapshot: ^6.0.0
     lodash: ^4.17.21
-    prettier: ">=2.2.1 <=3.0.0"
-    typescript: ~4.6.3
+    prettier: ^2.7.1
+    typescript: ^4.9.3
   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/store@7.0.0-alpha.48, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
+"@storybook/store@7.0.0-alpha.51, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
   version: 0.0.0-use.local
   resolution: "@storybook/store@workspace:lib/store"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-events": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-events": 7.0.0-alpha.51
     "@storybook/csf": next
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/types": 7.0.0-alpha.51
     dequal: ^2.0.2
     global: ^4.4.0
     lodash: ^4.17.21
@@ -7741,7 +7406,7 @@ __metadata:
     slash: ^3.0.0
     synchronous-promise: ^2.0.15
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util-deprecate: ^1.0.2
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7754,20 +7419,20 @@ __metadata:
   resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite"
   dependencies:
     "@storybook/addon-svelte-csf": ^2.0.0
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-vite": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/svelte": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-vite": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/svelte": 7.0.0-alpha.51
     "@sveltejs/vite-plugin-svelte": ^1.0.0
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     magic-string: ^0.26.1
     svelte: ^3.0.0
     sveltedoc-parser: ^4.2.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.3
   peerDependencies:
     "@storybook/addon-svelte-csf": ^2.0.0
@@ -7781,15 +7446,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preset-svelte-webpack": 7.0.0-alpha.48
-    "@storybook/svelte": 7.0.0-alpha.48
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preset-svelte-webpack": 7.0.0-alpha.51
+    "@storybook/svelte": 7.0.0-alpha.51
     react: 16.14.0
     react-dom: 16.14.0
     svelte: ^3.48.0
     svelte-loader: ^3.1.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     svelte: ^3.48.0
@@ -7797,16 +7462,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@7.0.0-alpha.48, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
+"@storybook/svelte@7.0.0-alpha.51, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:renderers/svelte"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     expect-type: ^0.14.2
     global: ^4.4.0
     react: 16.14.0
@@ -7815,19 +7480,19 @@ __metadata:
     svelte-check: ^2.9.2
     sveltedoc-parser: ^4.2.1
     type-fest: 2.19.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     "@babel/core": "*"
     svelte: ^3.1.0
   languageName: unknown
   linkType: soft
 
-"@storybook/telemetry@7.0.0-alpha.48, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
+"@storybook/telemetry@7.0.0-alpha.51, @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.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
     chalk: ^4.1.0
     detect-package-manager: ^2.0.1
     fetch-retry: ^5.0.2
@@ -7835,7 +7500,7 @@ __metadata:
     isomorphic-unfetch: ^3.1.0
     nanoid: ^3.3.1
     read-pkg-up: ^7.0.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -7852,7 +7517,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@7.0.0-alpha.48, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@7.0.0-alpha.51, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
@@ -7861,16 +7526,16 @@ __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.0-alpha.48
+    "@storybook/client-logger": 7.0.0-alpha.51
     "@types/fs-extra": ^9.0.6
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     deep-object-diff: ^1.1.0
     fs-extra: ^9.0.1
     global: ^4.4.0
     memoizerific: ^1.11.3
     polished: ^4.2.2
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -7892,19 +7557,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/types@7.0.0-alpha.48, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
+"@storybook/types@7.0.0-alpha.51, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
-    "@babel/core": ^7.12.10
-    "@storybook/csf": 0.0.2--canary.53.4879818.0
-    "@types/babel__core": ^7.0.0
+    "@babel/core": ^7.20.2
+    "@storybook/csf": next
+    "@types/babel__core": ^7.1.20
     "@types/express": ^4.7.0
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     express: ^4.17.1
     file-system-cache: ^2.0.0
     synchronous-promise: ^2.0.15
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   languageName: unknown
   linkType: soft
 
@@ -7912,17 +7577,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-vite": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/core-server": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/vue": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-vite": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/vue": 7.0.0-alpha.51
     magic-string: ^0.26.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.3
     vue: ^2.7.10
     vue-docgen-api: ^4.40.0
@@ -7935,14 +7600,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preset-vue-webpack": 7.0.0-alpha.48
-    "@storybook/vue": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preset-vue-webpack": 7.0.0-alpha.51
+    "@storybook/vue": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: ^2.6.12
     vue-loader: ^15.7.0
     vue-template-compiler: ^2.6.14
@@ -7960,18 +7625,18 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-vite": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/core-server": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/vue3": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-vite": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/vue3": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     "@vitejs/plugin-vue": ^3.0.0
     magic-string: ^0.26.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.3
     vue-docgen-api: ^4.40.0
   languageName: unknown
@@ -7981,15 +7646,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-webpack5@workspace:frameworks/vue3-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preset-vue3-webpack": 7.0.0-alpha.48
-    "@storybook/vue3": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preset-vue3-webpack": 7.0.0-alpha.51
+    "@storybook/vue3": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     "@vue/compiler-sfc": 3.0.0
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: 3.0.0
   peerDependencies:
     "@babel/core": "*"
@@ -7999,22 +7664,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@7.0.0-alpha.48, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3":
+"@storybook/vue3@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
+    "@vue/vue3-jest": 29
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
     type-fest: 2.19.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: ^3.2.41
     vue-tsc: ^1.0.8
   peerDependencies:
@@ -8027,22 +7693,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@7.0.0-alpha.48, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
+"@storybook/vue@7.0.0-alpha.51, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
   version: 0.0.0-use.local
   resolution: "@storybook/vue@workspace:renderers/vue"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
     type-fest: 2.19.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vue: 2.6.14
     vue-tsc: ^1.0.9
   peerDependencies:
@@ -8060,18 +7726,18 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite"
   dependencies:
-    "@storybook/addons": 7.0.0-alpha.48
-    "@storybook/builder-vite": 7.0.0-alpha.48
-    "@storybook/channel-postmessage": 7.0.0-alpha.48
-    "@storybook/channel-websocket": 7.0.0-alpha.48
-    "@storybook/client-api": 7.0.0-alpha.48
-    "@storybook/core-server": 7.0.0-alpha.48
-    "@storybook/node-logger": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/web-components": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/builder-vite": 7.0.0-alpha.51
+    "@storybook/channel-postmessage": 7.0.0-alpha.51
+    "@storybook/channel-websocket": 7.0.0-alpha.51
+    "@storybook/client-api": 7.0.0-alpha.51
+    "@storybook/core-server": 7.0.0-alpha.51
+    "@storybook/node-logger": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/web-components": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     magic-string: ^0.26.1
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     vite: ^3.1.0
   languageName: unknown
   linkType: soft
@@ -8080,40 +7746,40 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5"
   dependencies:
-    "@babel/preset-env": ^7.12.11
-    "@storybook/builder-webpack5": 7.0.0-alpha.48
-    "@storybook/core-common": 7.0.0-alpha.48
-    "@storybook/preset-web-components-webpack": 7.0.0-alpha.48
-    "@storybook/web-components": 7.0.0-alpha.48
-    "@types/node": ^16.0.0
+    "@babel/preset-env": ^7.20.2
+    "@storybook/builder-webpack5": 7.0.0-alpha.51
+    "@storybook/core-common": 7.0.0-alpha.51
+    "@storybook/preset-web-components-webpack": 7.0.0-alpha.51
+    "@storybook/web-components": 7.0.0-alpha.51
+    "@types/node": ^16.0.0 || ^18.0.0
     lit-html: 2.0.2
     react: 16.14.0
     react-dom: 16.14.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     lit-html: ^1.4.1 || ^2.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/web-components@7.0.0-alpha.48, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components":
+"@storybook/web-components@7.0.0-alpha.51, @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/addons": 7.0.0-alpha.48
-    "@storybook/api": 7.0.0-alpha.48
-    "@storybook/client-logger": 7.0.0-alpha.48
-    "@storybook/core-client": 7.0.0-alpha.48
-    "@storybook/docs-tools": 7.0.0-alpha.48
-    "@storybook/preview-web": 7.0.0-alpha.48
-    "@storybook/store": 7.0.0-alpha.48
-    "@storybook/types": 7.0.0-alpha.48
+    "@storybook/addons": 7.0.0-alpha.51
+    "@storybook/api": 7.0.0-alpha.51
+    "@storybook/client-logger": 7.0.0-alpha.51
+    "@storybook/core-client": 7.0.0-alpha.51
+    "@storybook/docs-tools": 7.0.0-alpha.51
+    "@storybook/preview-web": 7.0.0-alpha.51
+    "@storybook/store": 7.0.0-alpha.51
+    "@storybook/types": 7.0.0-alpha.51
     global: ^4.4.0
     lit: 2.3.1
     lit-html: 2.0.2
     react: 16.14.0
     react-dom: 16.14.0
     ts-dedent: ^2.0.0
-    typescript: ~4.6.3
+    typescript: ^4.9.3
   peerDependencies:
     lit-html: ^1.4.1 || ^2.0.0
   languageName: unknown
@@ -8127,14 +7793,15 @@ __metadata:
   linkType: hard
 
 "@sveltejs/vite-plugin-svelte@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "@sveltejs/vite-plugin-svelte@npm:1.1.0"
+  version: 1.2.0
+  resolution: "@sveltejs/vite-plugin-svelte@npm:1.2.0"
   dependencies:
     debug: ^4.3.4
     deepmerge: ^4.2.2
     kleur: ^4.1.5
     magic-string: ^0.26.7
-    svelte-hmr: ^0.15.0
+    svelte-hmr: ^0.15.1
+    vitefu: ^0.2.1
   peerDependencies:
     diff-match-patch: ^1.0.5
     svelte: ^3.44.0
@@ -8142,7 +7809,7 @@ __metadata:
   peerDependenciesMeta:
     diff-match-patch:
       optional: true
-  checksum: 36cdbcd7dca912623d5c478525f44b3cb4880d9a0260a19f76affbef334715fd0e08ef504b9fbda709e3c463c1d645139c347ab59e1ffdf6e4eb7df002b88b96
+  checksum: 48611772657a77c9f762bc6712d343f090e407178a114d144b76b90cad6073dcd7c4f247eac4586306e15caa7ff6a0bcf0a7423e3ec7f211634f43a7282ed453
   languageName: node
   linkType: hard
 
@@ -8307,16 +7974,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7":
-  version: 7.1.19
-  resolution: "@types/babel__core@npm:7.1.19"
+"@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.20":
+  version: 7.1.20
+  resolution: "@types/babel__core@npm:7.1.20"
   dependencies:
     "@babel/parser": ^7.1.0
     "@babel/types": ^7.0.0
     "@types/babel__generator": "*"
     "@types/babel__template": "*"
     "@types/babel__traverse": "*"
-  checksum: d07442fee0a1331405c80efc06dd74fe815fc9ac1351de54c4eaf06fea9e516992a6f6a139361d78df5828b0a94977f33c977d9391b09949b959fd20d80f48d8
+  checksum: f88025726047188c9ee96790294d5bb56bf452f6b65f80389788e8b11c16aab77fd709e2d1c07117ddee4e8a267615a88434b0570318301554daf304e20d7ad3
   languageName: node
   linkType: hard
 
@@ -8339,7 +8006,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.4, @types/babel__traverse@npm:^7.0.6":
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
   version: 7.18.2
   resolution: "@types/babel__traverse@npm:7.18.2"
   dependencies:
@@ -8367,15 +8034,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/case-sensitive-paths-webpack-plugin@npm:^2.1.6":
-  version: 2.1.6
-  resolution: "@types/case-sensitive-paths-webpack-plugin@npm:2.1.6"
-  dependencies:
-    "@types/webpack": ^4
-  checksum: 9f379718393f04937be69e742f9b67e346ecca5badb37a02eb1b740a4f37e1c52033b3a9fef04b82e31b9f58ae72ae02cf1027a57ecd969ff5e1b4e6796375d6
-  languageName: node
-  linkType: hard
-
 "@types/cheerio@npm:*, @types/cheerio@npm:^0.22.22":
   version: 0.22.31
   resolution: "@types/cheerio@npm:0.22.31"
@@ -8454,13 +8112,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/degit@npm:^2.8.3":
-  version: 2.8.3
-  resolution: "@types/degit@npm:2.8.3"
-  checksum: 1693dc0033aa5aa5c339b76d570c462e3e0ff41e22a7cc2d0164276199ddbd6ed18813042868355bc5f60ee257c0b18bce904c193008685b790392454ec9fcbd
-  languageName: node
-  linkType: hard
-
 "@types/detect-port@npm:^1.3.2":
   version: 1.3.2
   resolution: "@types/detect-port@npm:1.3.2"
@@ -8510,12 +8161,12 @@ __metadata:
   linkType: hard
 
 "@types/eslint@npm:*":
-  version: 8.4.8
-  resolution: "@types/eslint@npm:8.4.8"
+  version: 8.4.10
+  resolution: "@types/eslint@npm:8.4.10"
   dependencies:
     "@types/estree": "*"
     "@types/json-schema": "*"
-  checksum: 42b6857b9673c6e881805c130ab6730e5440a3e8bc932fc71b8a8e42ac23c64e34e74484ec3551e07e47d0eeb99cebc9e94160e36ac3c3c087e8fbaf1c2e5b56
+  checksum: ff245f08f2a687a78314f7f5054af833ea17fc392587196d11c9811efe396f3bdf4aaba20c4be763607315ebb81c68da64f58726d14ab1d2ca4a98aaa758e1c9
   languageName: node
   linkType: hard
 
@@ -8603,7 +8254,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/graceful-fs@npm:^4.1.2, @types/graceful-fs@npm:^4.1.3":
+"@types/graceful-fs@npm:^4.1.3":
   version: 4.1.5
   resolution: "@types/graceful-fs@npm:4.1.5"
   dependencies:
@@ -8676,16 +8327,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-reports@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@types/istanbul-reports@npm:1.1.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": "*"
-    "@types/istanbul-lib-report": "*"
-  checksum: 80b76715f4ac74a4ddfc82d7942b2faaefbe9fdce8e7dfdfa497b3fb60a3e707b632c6e70e1565cfe30045eaebaf7aad0d6c3d102652d1da8fdb0bf095924eb3
-  languageName: node
-  linkType: hard
-
 "@types/istanbul-reports@npm:^3.0.0":
   version: 3.0.1
   resolution: "@types/istanbul-reports@npm:3.0.1"
@@ -8695,18 +8336,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest-image-snapshot@npm:^4.1.3":
-  version: 4.3.2
-  resolution: "@types/jest-image-snapshot@npm:4.3.2"
+"@types/jest-image-snapshot@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "@types/jest-image-snapshot@npm:5.1.0"
   dependencies:
     "@types/jest": "*"
     "@types/pixelmatch": "*"
     ssim.js: ^3.1.1
-  checksum: 092784f55a10685768971ae3ca9361f31407e6fe1e415898a2cd0bdea0d9c3e716ebb50a3f490fccc3b42b8847043bb498a0c4ac0ab2cc6e9b40e229df460c91
+  checksum: c25db75b38960a84cc999a8b07f6f244d22e5e2c9965f78dc15c4249ec71a403363a50ee69884cdf66fcaf5a9ef125363316929fa1925d38868b3937c110138b
   languageName: node
   linkType: hard
 
-"@types/jest-specific-snapshot@npm:^0.5.3":
+"@types/jest-specific-snapshot@npm:^0.5.6":
   version: 0.5.6
   resolution: "@types/jest-specific-snapshot@npm:0.5.6"
   dependencies:
@@ -8716,22 +8357,12 @@ __metadata:
   linkType: hard
 
 "@types/jest@npm:*, @types/jest@npm:>=26.0.0":
-  version: 29.2.0
-  resolution: "@types/jest@npm:29.2.0"
+  version: 29.2.3
+  resolution: "@types/jest@npm:29.2.3"
   dependencies:
     expect: ^29.0.0
     pretty-format: ^29.0.0
-  checksum: b992f309b18b919aa25a74e7d5f9ec3d4712d5a5251ec7cb4b393ac586ca675e046cbbdff6612defc1177052150dab371777a18f208b236676d2994375315049
-  languageName: node
-  linkType: hard
-
-"@types/jest@npm:^26.0.16":
-  version: 26.0.24
-  resolution: "@types/jest@npm:26.0.24"
-  dependencies:
-    jest-diff: ^26.0.0
-    pretty-format: ^26.0.0
-  checksum: 1085ac96af43566518daf3aca60cb7881bfe2ffe1f5343738933e386ebf909095fde15273c3e99c685854dfc833b05b156fb5daf68707c0daa1c0c0db13a665b
+  checksum: fffd007edfb13f80ca5da3385922fafed807a00d7f3236377d90b27314c811f4ef8c0089ec37e8049ae33fb3ce3b75d9fc32f92261a5782fb4e3920beca86042
   languageName: node
   linkType: hard
 
@@ -8753,6 +8384,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jsdom@npm:^20.0.0":
+  version: 20.0.1
+  resolution: "@types/jsdom@npm:20.0.1"
+  dependencies:
+    "@types/node": "*"
+    "@types/tough-cookie": "*"
+    parse5: ^7.0.0
+  checksum: 3d4b2a3eab145674ee6da482607c5e48977869109f0f62560bf91ae1a792c9e847ac7c6aaf243ed2e97333cb3c51aef314ffa54a19ef174b8f9592dfcb836b25
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
@@ -8767,20 +8409,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/loader-utils@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "@types/loader-utils@npm:2.0.3"
-  dependencies:
-    "@types/node": "*"
-    "@types/webpack": ^4
-  checksum: e4998224ca40a05a395469894215e3d700c4cc71415efb296269bca6b1fa3b00ee07e79206f1113e30f844e55a8829f1293526cb0379d96821a8840b7ef7a80f
-  languageName: node
-  linkType: hard
-
 "@types/lodash@npm:^4.14.167":
-  version: 4.14.186
-  resolution: "@types/lodash@npm:4.14.186"
-  checksum: 6e0c73ead3eb5073e37c9b8141004369776fba31a3876d2b647d590b78256e414b770753f767a548a70ad23408ac5cc83b174adfd5dba2bb88b833f2763c632b
+  version: 4.14.189
+  resolution: "@types/lodash@npm:4.14.189"
+  checksum: af4a0178e52e55682c7fc5b7376eed1e64ce3879800940b1e608e14e97566fcdc9c830bf0db3c19052bfdf17129062fa02044ed4b8a30381fe16384de6ca307e
   languageName: node
   linkType: hard
 
@@ -8835,7 +8467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mock-fs@npm:^4.13.0":
+"@types/mock-fs@npm:^4.13.1":
   version: 4.13.1
   resolution: "@types/mock-fs@npm:4.13.1"
   dependencies:
@@ -8868,17 +8500,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^18.7.20":
-  version: 18.11.5
-  resolution: "@types/node@npm:18.11.5"
-  checksum: 1c279db0eaebc3ba45a2802bbd7043f6ef84bda199adc26ff1321cb5cc3e6870278b4dc4c2a2736055f68193c2359063117be6e28ef0c169d3e7c8d2d8b3e753
-  languageName: node
-  linkType: hard
-
-"@types/node@npm:^14.14.20 || ^16.0.0, @types/node@npm:^16.0.0":
-  version: 16.18.0
-  resolution: "@types/node@npm:16.18.0"
-  checksum: cab5add5b756c572461302b685910c1bd8ba98af516f82ea7061b5f4afa0fb3b90ee2c4d82ac722afb0058522835d5d0fa364e8f2f4aa69a363212ec0f401676
+"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^16.0.0 || ^18.0.0, @types/node@npm:^18.7.20":
+  version: 18.11.9
+  resolution: "@types/node@npm:18.11.9"
+  checksum: aeaa925406f841c41679b32def9391a9892171e977105e025050e9f66e2830b4c50d0d974a1af0077ead3337a1f3bdf49ee7e7f402ebf2e034a3f97d9d240dba
   languageName: node
   linkType: hard
 
@@ -8933,7 +8558,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prettier@npm:^2.0.0, @types/prettier@npm:^2.1.5":
+"@types/prettier@npm:^2.1.5":
   version: 2.7.1
   resolution: "@types/prettier@npm:2.7.1"
   checksum: 1acbc69eb6f36cf04256ab2a7a05737b670a81d96de9f5f4d765d8c1f5f68978a6a5800dc059968075ef2492a26a39f6ccdff72a4d8639144297235548b789cc
@@ -9028,11 +8653,11 @@ __metadata:
   linkType: hard
 
 "@types/react-dom@npm:^16.9.14":
-  version: 16.9.16
-  resolution: "@types/react-dom@npm:16.9.16"
+  version: 16.9.17
+  resolution: "@types/react-dom@npm:16.9.17"
   dependencies:
     "@types/react": ^16
-  checksum: 1d3feea5f32d70644a94e6b3d15371585bd5f3defe3981a936f299d5a0ebd6ef0208057201c990e7feaab3c2092bb9e889ae74ee316e3a48e15069e72a8e1575
+  checksum: c9c36d071f5e7480a74948ceed0cf2080194f9e0922de69a3c877629b1e7cb5f87e47afaea7d095a2dccfcf273746416f7780dd68830ea89dba68499758db10b
   languageName: node
   linkType: hard
 
@@ -9045,14 +8670,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^16, @types/react@npm:^16.14.23":
-  version: 16.14.33
-  resolution: "@types/react@npm:16.14.33"
+"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^16, @types/react@npm:^16.14.34":
+  version: 16.14.34
+  resolution: "@types/react@npm:16.14.34"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: c77955b60c61ab2797649ba0d92a51f50b513e12246891502eda3d9ac34fb9a1f314403b5101d1d3a14e3e5f6d2b0f3e5745b4892a093102dfbafe8ce35d8fbd
+  checksum: 0cc204f87badeabd4641beb415e82b574152596e65304f5e63cd41948b23036f3e7ae658a86aa5357c2ab4f0f4f9402dfd5077c3df0c5294130a45d92add9bac
   languageName: node
   linkType: hard
 
@@ -9100,9 +8725,9 @@ __metadata:
   linkType: hard
 
 "@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4":
-  version: 7.3.12
-  resolution: "@types/semver@npm:7.3.12"
-  checksum: bd76432b8f58f6d853d0aa938377d7da623b21ae477797940cc84445203669b7acea042c66336976db3c26a7c27e8afc71707fec01ec1d83d5e4d191ea008182
+  version: 7.3.13
+  resolution: "@types/semver@npm:7.3.13"
+  checksum: 73295bb1fee46f8c76c7a759feeae5a3022f5bedfdc17d16982092e4b33af17560234fb94861560c20992a702a1e1b9a173bb623a96f95f80892105f5e7d25e3
   languageName: node
   linkType: hard
 
@@ -9160,13 +8785,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stack-utils@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@types/stack-utils@npm:1.0.1"
-  checksum: 4c4a8c48ba556bbe5fad2232cd9598b7f5f3e110451a3ad5cdf7e42204abf3d1abd30a9e6679d576e8e901e1f6b38e744af1f75f384e697c89bee53e5443b8c9
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -9283,7 +8901,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack-env@npm:^1.16.0, @types/webpack-env@npm:^1.16.4, @types/webpack-env@npm:^1.17.0":
+"@types/webpack-env@npm:^1.16.0, @types/webpack-env@npm:^1.16.4, @types/webpack-env@npm:^1.17.0, @types/webpack-env@npm:^1.18.0":
   version: 1.18.0
   resolution: "@types/webpack-env@npm:1.18.0"
   checksum: ac2e91b025ea31b98b0271ccb40da789c5b54693c1efb18265a54c03b303b750501f080a44e99d7ce0a5422d68d535e600e851df4b8f2240444eca7ac3159719
@@ -9358,15 +8976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^13.0.0":
-  version: 13.0.12
-  resolution: "@types/yargs@npm:13.0.12"
-  dependencies:
-    "@types/yargs-parser": "*"
-  checksum: 81fdac6832d69f2f2a33bb3d77887f571677d5a9ccfd5a171ff3e76252a6c6a9773850a0df6ba9ed0328433a36596488ec4e2ce5d9bc49d713a59bbfef8e12a0
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^15.0.0":
   version: 15.0.14
   resolution: "@types/yargs@npm:15.0.14"
@@ -9403,15 +9012,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.40.1":
-  version: 5.41.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.41.0"
+"@typescript-eslint/eslint-plugin@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.41.0
-    "@typescript-eslint/type-utils": 5.41.0
-    "@typescript-eslint/utils": 5.41.0
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/type-utils": 5.43.0
+    "@typescript-eslint/utils": 5.43.0
     debug: ^4.3.4
     ignore: ^5.2.0
+    natural-compare-lite: ^1.4.0
     regexpp: ^3.2.0
     semver: ^7.3.7
     tsutils: ^3.21.0
@@ -9421,54 +9031,54 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3954e4885a75c201e8f180d5710d43e26d61d156eed3007c00f0d5e37b96a94a361bbee1929982b982dbc98b3c8eae013b3bd85d307b3fd5a408afab4397c601
+  checksum: 98f984ab9e0fbae0536a49f1d32c367ff54e3dbf4619710370c917abac865c90b363435a79b8860f6cdc34941661e3e321eca558f0584aaf0b937953ffb3d7cc
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:^5.40.1":
-  version: 5.41.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.41.0"
+"@typescript-eslint/experimental-utils@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/utils": 5.41.0
+    "@typescript-eslint/utils": 5.43.0
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 63cdd0b5918042f46a1bb9d6ec7e98bf9edb3d3bf964921bec9c0f7f99b4a8bdd2c5e440c2eadeb6e4a69db09611dfbfc4cd27e58b6b076a8611393f0be24acd
+  checksum: 28fbb4e62059dcb88b6397e81aa30053fbe30ccec76cdc6d947c305c8062e7b47306a13918483a63e4e97ca0871a9b22a481f4ef2b8316bac81e030becbfb3b1
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.40.1":
-  version: 5.41.0
-  resolution: "@typescript-eslint/parser@npm:5.41.0"
+"@typescript-eslint/parser@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/parser@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.41.0
-    "@typescript-eslint/types": 5.41.0
-    "@typescript-eslint/typescript-estree": 5.41.0
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/typescript-estree": 5.43.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: d07df9fe001cc79df1e57460312dcbede03f4d524b99350fb9ef5af896b132bb747d96865a28dbae3566393c212e779315e67aa582072a59bb23d3675ab9ad2b
+  checksum: e32a411b08d22e5e33f1d8160ce45882ec7596d360de459bda2d30cc4f0eec71d0b05c99567c33529c18789e48e430f0b89634cf43481db010b3ab5ecca0f5a6
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.41.0"
+"@typescript-eslint/scope-manager@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.41.0
-    "@typescript-eslint/visitor-keys": 5.41.0
-  checksum: 76c1fb1d0838d333d0dd2caa52e18b471ff7b711899cd541fa0a011289fc79115e8617da4279273103a4e1b4d2cc7f8d0ddb1c396642a41acdd5b7fa6379aa55
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/visitor-keys": 5.43.0
+  checksum: f30f7ae64cf518123959c6189508372041a60acad8b412c5fe628214707161f7cb66730aca575be0bca2ccee83c2b59de6c1c139cfb269f6b344cd0921a466b4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/type-utils@npm:5.41.0"
+"@typescript-eslint/type-utils@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/type-utils@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.41.0
-    "@typescript-eslint/utils": 5.41.0
+    "@typescript-eslint/typescript-estree": 5.43.0
+    "@typescript-eslint/utils": 5.43.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -9476,23 +9086,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 2bf0e893b210a0f6a021bdaa9c16a3d98d65b38e4e4af4e7b056b1a9a6535dee7c73f3aff80f008d98152488bc1e468b05ef48bb93f14385eb1e9d9329693736
+  checksum: 4ed87a1856ab556d2c456c6696ad791dc71b7ae4e745281eba148418695b2a5848403a607352516c8f2007b10dd4b0884a356e8edda51f1d6fcb52d4216c600a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/types@npm:5.41.0"
-  checksum: 015a7a550f451ad9a78937254429f55bc2e0d1c2e7de263180fdbf55735a20dd39b4beac42a24e8568a5aaf3b5db4704f69518f15a1b7e973135f0939c272019
+"@typescript-eslint/types@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/types@npm:5.43.0"
+  checksum: 93feae3f3a51100f46076649cc02bcd80bdeec88670a8fdfa63927b614f90b039cf1ec4f98367107112e744b567d35eec5fedc465aaea0a92aa835933dfc45e5
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.41.0"
+"@typescript-eslint/typescript-estree@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.41.0
-    "@typescript-eslint/visitor-keys": 5.41.0
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/visitor-keys": 5.43.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -9501,35 +9111,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3a1c1f3b7026dcdaac920adeb3565fb2102aa8c69cb653a51e24cdd7ca0c2cdfcd2cc1f1c461ac9f88533f570fdf9094df5d0eaf4093245b4572568feabf1192
+  checksum: ba08a7093d285966bef5938d3874bbad647ca929bae245e3d67ef22062868e540661b42c13a3166b052d8d6738f18ab83df9207fbd632ffdf255001f2f329ce8
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/utils@npm:5.41.0"
+"@typescript-eslint/utils@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/utils@npm:5.43.0"
   dependencies:
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.41.0
-    "@typescript-eslint/types": 5.41.0
-    "@typescript-eslint/typescript-estree": 5.41.0
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/typescript-estree": 5.43.0
     eslint-scope: ^5.1.1
     eslint-utils: ^3.0.0
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 9248526d537374c5ab0bf471d112ff5f8cb6403c65632865dd55585757d02361ffacda47849032415921b9237552cfb96f18e5c431c430dfaa2085f36fe3613d
+  checksum: 8e8ce2c710601cdaba8919382f81383aa0c4e8f0d01755cd35c7ad08e145b09bd43e1b7fa032bc685490057c89b84fc1082c3f4bde0bed20ef54363fcb7200c0
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.41.0":
-  version: 5.41.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.41.0"
+"@typescript-eslint/visitor-keys@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.41.0
+    "@typescript-eslint/types": 5.43.0
     eslint-visitor-keys: ^3.3.0
-  checksum: 5dfce8e4980dabbbaf3b85eb68913251c153c2602d7e32ea52ccd3c8d702b1c298f0b8339d1b61016f01d539556eb4bc386e33c339f64da19bb1ee42ce11fe65
+  checksum: 8a5511dcfffd0167d0db9f71b995ca79353b7fe196a91a6c64e2161640ad5fb622f402930bac81febde204fe7946940e395d3e31f9c8df69cb2a1349c5ac7ef7
   languageName: node
   linkType: hard
 
@@ -9593,29 +9203,29 @@ __metadata:
   linkType: hard
 
 "@vitejs/plugin-react@npm:^2.0.0, @vitejs/plugin-react@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@vitejs/plugin-react@npm:2.1.0"
+  version: 2.2.0
+  resolution: "@vitejs/plugin-react@npm:2.2.0"
   dependencies:
-    "@babel/core": ^7.18.13
-    "@babel/plugin-transform-react-jsx": ^7.18.10
+    "@babel/core": ^7.19.6
+    "@babel/plugin-transform-react-jsx": ^7.19.0
     "@babel/plugin-transform-react-jsx-development": ^7.18.6
     "@babel/plugin-transform-react-jsx-self": ^7.18.6
-    "@babel/plugin-transform-react-jsx-source": ^7.18.6
-    magic-string: ^0.26.2
+    "@babel/plugin-transform-react-jsx-source": ^7.19.6
+    magic-string: ^0.26.7
     react-refresh: ^0.14.0
   peerDependencies:
     vite: ^3.0.0
-  checksum: e63e973e4de450e55215d5de705a388c1d72f08bacae44810225386fbed2ec49f8257603e9f86c2d6aa443e4b36d9f10a4d39b5aa2f566ed682d01836ddf65c8
+  checksum: 85fe5c740fbe8aa5dd4c3516a02a937dff0e2b0858cfa7cf8a69b998b7d05e08c296a087fde66f9171367f5c9d10d6e4bc026df1fa1e2ec528f49e7eaabeeae1
   languageName: node
   linkType: hard
 
 "@vitejs/plugin-vue@npm:^3.0.0":
-  version: 3.1.2
-  resolution: "@vitejs/plugin-vue@npm:3.1.2"
+  version: 3.2.0
+  resolution: "@vitejs/plugin-vue@npm:3.2.0"
   peerDependencies:
     vite: ^3.0.0
     vue: ^3.2.25
-  checksum: 53867c9367f1133305e858541a9094a44c5e60d82d0c68d5eb41194dcac01ecd273252786046b3e523d40112374ac7f47558f7b292394a4529355d64b82c04cf
+  checksum: a2583817306e7a8ae8d3224a97f3a0b302e474a7f2b1174d3b79a9b92bc4c846825a797162fdc70b36be96d637533c25f3f8cf6e66e3787f3105ec60304695cd
   languageName: node
   linkType: hard
 
@@ -9687,15 +9297,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/compiler-core@npm:3.2.41"
+"@vue/compiler-core@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/compiler-core@npm:3.2.45"
   dependencies:
     "@babel/parser": ^7.16.4
-    "@vue/shared": 3.2.41
+    "@vue/shared": 3.2.45
     estree-walker: ^2.0.2
     source-map: ^0.6.1
-  checksum: 9f1023c2f0e8834a8056f5d0a4ac5d751b351d901e8cd03163aca10e317b08c599d326ef5de70a3d2ba1c7ee333e7a2289fc72ce4f6ac0496e750b044689f803
+  checksum: 5efbbb4ceca47c34e74b3e40dc68768317c0f15f23f428d72a04d62c27bbb1b37a0d2ba4423dd2d3e7e2a4eda34b730758da2b23dd14b13cc625de3083e55639
   languageName: node
   linkType: hard
 
@@ -9709,24 +9319,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.2.41, @vue/compiler-dom@npm:^3.2.0, @vue/compiler-dom@npm:^3.2.40":
-  version: 3.2.41
-  resolution: "@vue/compiler-dom@npm:3.2.41"
+"@vue/compiler-dom@npm:3.2.45, @vue/compiler-dom@npm:^3.2.0, @vue/compiler-dom@npm:^3.2.40":
+  version: 3.2.45
+  resolution: "@vue/compiler-dom@npm:3.2.45"
   dependencies:
-    "@vue/compiler-core": 3.2.41
-    "@vue/shared": 3.2.41
-  checksum: 5dbbd925d4603668f5edcb134c8e8718e22738b7890e1cd6f2e8621aabf42a96df2f851f722f1176ca1744345fc74000c941b7cf4dc323dbbcd70da87ccdf378
+    "@vue/compiler-core": 3.2.45
+    "@vue/shared": 3.2.45
+  checksum: 3984ff10f3c34c61f036bcd5379525f4ddb3f68e3fc531b265e1de2d5704359e3f16f88e39584e26a1bd8c9e4bc01f60ce67073fe9ca01a4080a77aa97255033
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:2.7.13":
-  version: 2.7.13
-  resolution: "@vue/compiler-sfc@npm:2.7.13"
+"@vue/compiler-sfc@npm:2.7.14":
+  version: 2.7.14
+  resolution: "@vue/compiler-sfc@npm:2.7.14"
   dependencies:
     "@babel/parser": ^7.18.4
     postcss: ^8.4.14
     source-map: ^0.6.1
-  checksum: 3a55e888b7b0b998cdfac6f000f16214efc5a159f41642a76c4de1778f3f8fbafbc3447d2ad78b09c3b90615b23108675119d4359372856c5a51e9169a797da9
+  checksum: 29fe06d8da1f8721488468653be671aaa48d63fcd03c47261164cb770b4ecbde1e1455e6affbc9ef062f2729da6988000ba470fc43a2f8a454a61d51af68725d
   languageName: node
   linkType: hard
 
@@ -9756,21 +9366,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.2.41, @vue/compiler-sfc@npm:^3.2.0, @vue/compiler-sfc@npm:^3.2.33, @vue/compiler-sfc@npm:^3.2.40":
-  version: 3.2.41
-  resolution: "@vue/compiler-sfc@npm:3.2.41"
+"@vue/compiler-sfc@npm:3.2.45, @vue/compiler-sfc@npm:^3.2.0, @vue/compiler-sfc@npm:^3.2.33, @vue/compiler-sfc@npm:^3.2.40":
+  version: 3.2.45
+  resolution: "@vue/compiler-sfc@npm:3.2.45"
   dependencies:
     "@babel/parser": ^7.16.4
-    "@vue/compiler-core": 3.2.41
-    "@vue/compiler-dom": 3.2.41
-    "@vue/compiler-ssr": 3.2.41
-    "@vue/reactivity-transform": 3.2.41
-    "@vue/shared": 3.2.41
+    "@vue/compiler-core": 3.2.45
+    "@vue/compiler-dom": 3.2.45
+    "@vue/compiler-ssr": 3.2.45
+    "@vue/reactivity-transform": 3.2.45
+    "@vue/shared": 3.2.45
     estree-walker: ^2.0.2
     magic-string: ^0.25.7
     postcss: ^8.1.10
     source-map: ^0.6.1
-  checksum: 327fb7acff404ac007c8eabefe485efb4d070e347bffca2c170232f502021fac01fabeda5f4f91a7b0b175b48cef184e053da9a2ef46b7ab188b8383bef188cb
+  checksum: 4e277066b3e89e8081a318dfc2aaf2bf8dfd4f14d93b9c868e51d994c45a766091703ba4299a7c83efff3749aee7ce2be67de666e8cc2f73fa23fdd833ad3b2c
   languageName: node
   linkType: hard
 
@@ -9784,13 +9394,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/compiler-ssr@npm:3.2.41"
+"@vue/compiler-ssr@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/compiler-ssr@npm:3.2.45"
   dependencies:
-    "@vue/compiler-dom": 3.2.41
-    "@vue/shared": 3.2.41
-  checksum: 508361b2799097d86abd740548eabf7a20f9a6e1af29cda23dad07ed0b7d72569371492619f80ba2283c3e87c66016985a531cf2110742dabafe5566ca22e6eb
+    "@vue/compiler-dom": 3.2.45
+    "@vue/shared": 3.2.45
+  checksum: f7b587eb154d7686b8b92ecc16057cdc5875a4834115429a64343cc71df20e481310166784b24c1caeca15b84e0b761c526fd9438d10b505b5b7c899a47223b1
   languageName: node
   linkType: hard
 
@@ -9814,16 +9424,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity-transform@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/reactivity-transform@npm:3.2.41"
+"@vue/reactivity-transform@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/reactivity-transform@npm:3.2.45"
   dependencies:
     "@babel/parser": ^7.16.4
-    "@vue/compiler-core": 3.2.41
-    "@vue/shared": 3.2.41
+    "@vue/compiler-core": 3.2.45
+    "@vue/shared": 3.2.45
     estree-walker: ^2.0.2
     magic-string: ^0.25.7
-  checksum: 8f4350efa220ed3ba8f0c4721a54ae4a2c043a8cff2d8d7227525df59f09145bb76a842f30fd3b0684c083b3e776653b464d737c7c53e43ce0739ac3d958a24a
+  checksum: 28f74ee0d178c478d67569a7f22748dc0c4423d4e16b8befb2de8641ff8d5f4cb988693bf75951231bfd02a7bdd97a4b525100d282f7453c465ca28cc1d3e7df
   languageName: node
   linkType: hard
 
@@ -9836,12 +9446,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.2.41, @vue/reactivity@npm:^3.2.40":
-  version: 3.2.41
-  resolution: "@vue/reactivity@npm:3.2.41"
+"@vue/reactivity@npm:3.2.45, @vue/reactivity@npm:^3.2.40":
+  version: 3.2.45
+  resolution: "@vue/reactivity@npm:3.2.45"
   dependencies:
-    "@vue/shared": 3.2.41
-  checksum: f76b7e3f12c441ff018ea1cb8c080365d135d87ddc075a10c87ea440a2c95e5d5ac04bb83dda0ce1f498fb390afff5d3d0c06d0a0fb46ca535df70c66dc3be90
+    "@vue/shared": 3.2.45
+  checksum: 5a9906292709fc27e48f44ada181be214788d56978efde433aa834bdb05240023fab2aa8b886398a01f3e515c27cd3758f3253d44382064d5c077b89d617719f
   languageName: node
   linkType: hard
 
@@ -9855,13 +9465,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/runtime-core@npm:3.2.41"
+"@vue/runtime-core@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/runtime-core@npm:3.2.45"
   dependencies:
-    "@vue/reactivity": 3.2.41
-    "@vue/shared": 3.2.41
-  checksum: 9c21632c5a3330283649a9175ae03cebe27776a7615d10b9e8f2a98e4002951a9913be7b2810623c06d6481cb56b62e2f5e6f9a5d29d79f75d66ec10b528cdc2
+    "@vue/reactivity": 3.2.45
+    "@vue/shared": 3.2.45
+  checksum: 29d79e31a9463ab58e33667003aed43b8601942b1df66c451c096ed6f62b3483e94324c5412b6ed2f1154dfec89121d8a40103aac79c10377f34143bf9a8b94a
   languageName: node
   linkType: hard
 
@@ -9876,26 +9486,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/runtime-dom@npm:3.2.41"
+"@vue/runtime-dom@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/runtime-dom@npm:3.2.45"
   dependencies:
-    "@vue/runtime-core": 3.2.41
-    "@vue/shared": 3.2.41
+    "@vue/runtime-core": 3.2.45
+    "@vue/shared": 3.2.45
     csstype: ^2.6.8
-  checksum: 744d50eb98b5a00b31ef6c318a04b9d9786f35d9f255689aba7c15e7be927c14f4d4379b704cde97f0ba467b3f36c46efcc7d0b119c9bde3419a966a21081f78
+  checksum: fef0d3052f4e8ce573e7dccbaf018dbc7a1485bcc9d7640608e4d4371fd505eeb187ccc47723fd560cec3bf0e2ca1dc998ec5f0d9db2e2f7c2277accc614f9a1
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.2.41":
-  version: 3.2.41
-  resolution: "@vue/server-renderer@npm:3.2.41"
+"@vue/server-renderer@npm:3.2.45":
+  version: 3.2.45
+  resolution: "@vue/server-renderer@npm:3.2.45"
   dependencies:
-    "@vue/compiler-ssr": 3.2.41
-    "@vue/shared": 3.2.41
+    "@vue/compiler-ssr": 3.2.45
+    "@vue/shared": 3.2.45
   peerDependencies:
-    vue: 3.2.41
-  checksum: 3aa31b70e46e0171e2c07562aa09bc1e75ccc6c876c146c3d25b4674d9394de46ba9ff338105ae81d7ff679763c9ecfe48e6d7382d52de163319481132cfc55a
+    vue: 3.2.45
+  checksum: 5c0a80e1d5405ea1e83652088a3b30f6763483da3d8df28d140f7578028f96bfbecf4a1761cb6af742b8494fe071f97813c44e7f2b6711a5b82955bba8124f1b
   languageName: node
   linkType: hard
 
@@ -9906,10 +9516,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.2.41, @vue/shared@npm:^3.2.40":
-  version: 3.2.41
-  resolution: "@vue/shared@npm:3.2.41"
-  checksum: bc46bf36e856a10646639561b346a76594e8a1afa992e3394056a6e0b534c6c71b1330e13960ba9788bb36265a5e761ac4c562daad0d168265d496fc3e7d6575
+"@vue/shared@npm:3.2.45, @vue/shared@npm:^3.2.40":
+  version: 3.2.45
+  resolution: "@vue/shared@npm:3.2.45"
+  checksum: ce80448852705badcd481a93e7701344d3302485e3127e2fa2e69f7a28818bd419326c351d521f882dfaa7ecf711944867e34b1230b7fcc3810ada9c99f014c7
+  languageName: node
+  linkType: hard
+
+"@vue/vue3-jest@npm:29":
+  version: 29.2.0
+  resolution: "@vue/vue3-jest@npm:29.2.0"
+  dependencies:
+    "@babel/plugin-transform-modules-commonjs": ^7.2.0
+    chalk: ^2.1.0
+    convert-source-map: ^1.6.0
+    css-tree: ^2.0.1
+    source-map: 0.5.6
+    tsconfig: ^7.0.0
+  peerDependencies:
+    "@babel/core": 7.x
+    babel-jest: 29.x
+    jest: 29.x
+    typescript: ">= 4.3"
+    vue: ^3.0.0-0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: c62c0b3bb56d8d062d9d3dd709c267cc2b1da42cc541d0c5bde3404bf200ee0cd4a2e517609fe4c6e19df80b2e4c5c3181dcf63f0aca6c11d4c5870edd69c3ab
   languageName: node
   linkType: hard
 
@@ -10119,7 +9752,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abab@npm:^2.0.0, abab@npm:^2.0.3, abab@npm:^2.0.5, abab@npm:^2.0.6":
+"abab@npm:^2.0.0, abab@npm:^2.0.5, abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
   checksum: 0b245c3c3ea2598fe0025abf7cc7bb507b06949d51e8edae5d12c1b847a0a0c09639abcb94788332b4e2044ac4491c1e8f571b51c7826fd4b0bda1685ad4a278
@@ -10188,7 +9821,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-globals@npm:^4.1.0, acorn-globals@npm:^4.3.0, acorn-globals@npm:^4.3.2":
+"acorn-globals@npm:^4.3.2":
   version: 4.3.4
   resolution: "acorn-globals@npm:4.3.4"
   dependencies:
@@ -10208,6 +9841,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn-globals@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "acorn-globals@npm:7.0.1"
+  dependencies:
+    acorn: ^8.1.0
+    acorn-walk: ^8.0.2
+  checksum: 7437f58e92d99292dbebd0e79531af27d706c9f272f31c675d793da6c82d897e75302a8744af13c7f7978a8399840f14a353b60cf21014647f71012982456d2b
+  languageName: node
+  linkType: hard
+
 "acorn-import-assertions@npm:^1.7.6":
   version: 1.8.0
   resolution: "acorn-import-assertions@npm:1.8.0"
@@ -10251,23 +9894,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.1.1":
+"acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
   version: 8.2.0
   resolution: "acorn-walk@npm:8.2.0"
   checksum: dbe92f5b2452c93e960c5594e666dd1fae141b965ff2cb4a1e1d0381e3e4db4274c5ce4ffa3d681a86ca2a8d4e29d5efc0670a08e23fd2800051ea387df56ca2
   languageName: node
   linkType: hard
 
-"acorn@npm:^5.5.3":
-  version: 5.7.4
-  resolution: "acorn@npm:5.7.4"
-  bin:
-    acorn: bin/acorn
-  checksum: b29e61d48fa31ae69d38d74bb213b77b32de6317f125890a6cb76b44d173adccbcd3a07fc9a86acdfe8ab0a80f42b5ec6290df8b7944e0506504ac3b716232bd
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^6.0.1, acorn@npm:^6.0.4":
+"acorn@npm:^6.0.1":
   version: 6.4.2
   resolution: "acorn@npm:6.4.2"
   bin:
@@ -10285,7 +9919,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0":
   version: 8.8.1
   resolution: "acorn@npm:8.8.1"
   bin:
@@ -10453,14 +10087,14 @@ __metadata:
   linkType: hard
 
 "ajv@npm:^8.0.0, ajv@npm:^8.2.0, ajv@npm:^8.8.0":
-  version: 8.11.0
-  resolution: "ajv@npm:8.11.0"
+  version: 8.11.2
+  resolution: "ajv@npm:8.11.2"
   dependencies:
     fast-deep-equal: ^3.1.1
     json-schema-traverse: ^1.0.0
     require-from-string: ^2.0.2
     uri-js: ^4.2.2
-  checksum: 8a4b1b639a53d52169b94dd1cdd03716fe7bbc1fc676006957ba82497e764f4bd44b92f75e37c8804ea3176ee3c224322e22779d071fb01cd89aefaaa42c9414
+  checksum: 152450e03f45e6ff09dab02d9647340e7bf7bcffbe88047b1c5ad7518cc278aa812f1f41606958772a93861b06b8abc91ddb9e124626aab253a9efef875d8e2c
   languageName: node
   linkType: hard
 
@@ -10511,7 +10145,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.1":
+"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0":
   version: 4.3.2
   resolution: "ansi-escapes@npm:4.3.2"
   dependencies:
@@ -10520,6 +10154,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-escapes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "ansi-escapes@npm:6.0.0"
+  dependencies:
+    type-fest: ^3.0.0
+  checksum: 398d05fabb13e1a28988f45863ea4c9b7ae658c5d838a03cb8530c6988b451329c1502e0ddeab2502a27d316ce851bb9f4a2943b7f55b3d840b46aa1ef1aee20
+  languageName: node
+  linkType: hard
+
 "ansi-gray@npm:^0.1.1":
   version: 0.1.1
   resolution: "ansi-gray@npm:0.1.1"
@@ -10573,13 +10216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "ansi-styles@npm:2.2.1"
-  checksum: 7c68aed4f1857389e7a12f85537ea5b40d832656babbf511cc7ecd9efc52889b9c3e5653a71a6aade783c3c5e0aa223ad4ff8e83c27ac8a666514e6c79068cab
-  languageName: node
-  linkType: hard
-
 "ansi-styles@npm:^3.2.0, ansi-styles@npm:^3.2.1":
   version: 3.2.1
   resolution: "ansi-styles@npm:3.2.1"
@@ -10630,16 +10266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "anymatch@npm:2.0.0"
-  dependencies:
-    micromatch: ^3.1.4
-    normalize-path: ^2.1.1
-  checksum: a0d745e52f0233048724b9c9d7b1d8a650f7a50151a0f1d2cce1857b09fd096052d334f8c570cc88596edef8249ae778f767db94025cd00f81e154a37bb7e34e
-  languageName: node
-  linkType: hard
-
 "anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
@@ -10765,11 +10391,11 @@ __metadata:
   linkType: hard
 
 "aria-query@npm:^5.0.0":
-  version: 5.1.1
-  resolution: "aria-query@npm:5.1.1"
+  version: 5.1.3
+  resolution: "aria-query@npm:5.1.3"
   dependencies:
     deep-equal: ^2.0.5
-  checksum: 8be9b1e6e4e4c296082d13620555914749195a55ad1f10f0013f8cdaa2e1ce3adfb8ecca9e5b06b865e79ce505d8ab264e3edec158ade5ca154fe7d21a66fc6b
+  checksum: edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
   languageName: node
   linkType: hard
 
@@ -10844,15 +10470,15 @@ __metadata:
   linkType: hard
 
 "array-includes@npm:^3.1.4, array-includes@npm:^3.1.5":
-  version: 3.1.5
-  resolution: "array-includes@npm:3.1.5"
+  version: 3.1.6
+  resolution: "array-includes@npm:3.1.6"
   dependencies:
     call-bind: ^1.0.2
     define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-    get-intrinsic: ^1.1.1
+    es-abstract: ^1.20.4
+    get-intrinsic: ^1.1.3
     is-string: ^1.0.7
-  checksum: a328af3cc590e077863d6a9fa673eda0ddac8e64d05da6696a18ab376f8bc633fc29c98b858a860ab93e4a98be8aef5e62ac00142275acd4090e7b077d2e1909
+  checksum: d0caeaa57bea7d14b8480daee30cf8611899321006b15a6cd872b831bd7aaed7649f8764e060d01c5d33b8d9e998e5de5c87f4901874e1c1f467f429b7db2929
   languageName: node
   linkType: hard
 
@@ -10894,64 +10520,64 @@ __metadata:
   linkType: hard
 
 "array.prototype.filter@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "array.prototype.filter@npm:1.0.1"
+  version: 1.0.2
+  resolution: "array.prototype.filter@npm:1.0.2"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.0
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
     es-array-method-boxes-properly: ^1.0.0
     is-string: ^1.0.7
-  checksum: e1254222151c4535e69e42e9852295c09337e239a6f62276f7a0b15e099bbdf25447bcfa465873124b1a6a6553c118311193f8be2ba2b9d1988e54cdbf003aff
+  checksum: f49da13cb9110c7caede682e22b32208aaaea3b5d9760e5b417e3d62d72b5a092f0c26ad648879900cd9694371fc75e47f80a08b6a1eb5e3cc15976e8f4bc0c7
   languageName: node
   linkType: hard
 
 "array.prototype.find@npm:^2.1.1":
-  version: 2.2.0
-  resolution: "array.prototype.find@npm:2.2.0"
+  version: 2.2.1
+  resolution: "array.prototype.find@npm:2.2.1"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.4
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
     es-shim-unscopables: ^1.0.0
-  checksum: 5b757cca258e3613ec1b3f19653dd00fa70d604e01303666056aad50f9359de4b8666d2b23626a5e9ca8633616f7da8eb80b68048aebebd1a6f6b8f6545380cc
+  checksum: 09211690d57a114a0d7de39dbd812f7844322aaed74aaa353ff2b7ee9f5a416581ca72a4c0c1cdf520cf5bad62aa33f8ca7d972afa83204ebedcb72582f08a49
   languageName: node
   linkType: hard
 
 "array.prototype.flat@npm:^1.2.3, array.prototype.flat@npm:^1.2.5":
-  version: 1.3.0
-  resolution: "array.prototype.flat@npm:1.3.0"
+  version: 1.3.1
+  resolution: "array.prototype.flat@npm:1.3.1"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.2
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
     es-shim-unscopables: ^1.0.0
-  checksum: 59010c65c428c68eafa5ffe3d7fc304c7e3a4ebcbb229e87ee2f51507f6eb439371e80297e25e7f59f84741db4712fe006c4c570f7a54a3018b9b563afd72601
+  checksum: 8eda91d6925cc84b73ebf5a3d406ff28745d93a22ef6a0afb967755107081a937cf6c4555d3c18354870b2c5366c0ff51b3f597c11079e689869810a418b1b4f
   languageName: node
   linkType: hard
 
 "array.prototype.flatmap@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "array.prototype.flatmap@npm:1.3.0"
+  version: 1.3.1
+  resolution: "array.prototype.flatmap@npm:1.3.1"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.2
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
     es-shim-unscopables: ^1.0.0
-  checksum: f837de45bd1f22eb0aaf5fd79324e18a1461d6cf93edc4d48ef4695587cb5bf051c1e3de87477fbd7bb70fe6c71c8d11f10ea3c8c797553709ad1d11e649d120
+  checksum: 2bd58a0e79d5d90cb4f5ef0e287edf8b28e87c65428f54025ac6b7b4c204224b92811c266f296c53a2dbc93872117c0fcea2e51d3c9e8cecfd5024d4a4a57db4
   languageName: node
   linkType: hard
 
-"array.prototype.reduce@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "array.prototype.reduce@npm:1.0.4"
+"array.prototype.reduce@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "array.prototype.reduce@npm:1.0.5"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.2
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
     es-array-method-boxes-properly: ^1.0.0
     is-string: ^1.0.7
-  checksum: 1a71487c9f1e75447b7abd97f1abadb39f6f6aecbb2073c35231574e9be6faee2588e828aca2ae302b5646f069b30cb5d80b4e3144c18f8f6bcc78fcadfee7e7
+  checksum: 0c6c589d22d6cda4a32458c6fd57a41f420a4fa6cd184a3f6fe7b507f457bc4a073aff6accd595bcd6ac29cad856e7ac306549f127acdb098f401eea13c54901
   languageName: node
   linkType: hard
 
@@ -11167,11 +10793,11 @@ __metadata:
   linkType: hard
 
 "autoprefixer@npm:^10.4.2":
-  version: 10.4.12
-  resolution: "autoprefixer@npm:10.4.12"
+  version: 10.4.13
+  resolution: "autoprefixer@npm:10.4.13"
   dependencies:
     browserslist: ^4.21.4
-    caniuse-lite: ^1.0.30001407
+    caniuse-lite: ^1.0.30001426
     fraction.js: ^4.2.0
     normalize-range: ^0.1.2
     picocolors: ^1.0.0
@@ -11180,7 +10806,7 @@ __metadata:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: 29e2ce3658afe9940450764266a896718b983429dfd8ef58fe55e0d3b103c0ff83712a343fcf5a7d3831616d15970ba17d729ac17d7433c5a7ec8a9c1af2fc15
+  checksum: 55ef1feb555516f68c740b3a0050d89b663c4a806a52ff23b184869ddf511b561fa56d66b2adb533bfef3798aee87b31132474582968d84fa59da133f837a230
   languageName: node
   linkType: hard
 
@@ -11205,10 +10831,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:^4.2.0, axe-core@npm:^4.4.3":
-  version: 4.5.0
-  resolution: "axe-core@npm:4.5.0"
-  checksum: 7ca80c6815174eaf4355d88f0622e2f2d2982312a2cf152ec0775aef5c6059da042e50e11a018ee7faa5b06bdcae9e75a3a55164ca6f4249122841a3255f3b4e
+"axe-core@npm:^4.2.0, axe-core@npm:^4.4.3, axe-core@npm:^4.5.2":
+  version: 4.5.2
+  resolution: "axe-core@npm:4.5.2"
+  checksum: 8f6e12fe08daacb875d471a6860eaf93dcac0e08bd26438b0c52751b826c130288f03b18b1e71ed6e15a9318df6d7a7e9522501ea50433c85a383b1e4dc9cdbc
   languageName: node
   linkType: hard
 
@@ -11253,60 +10879,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-jest@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "babel-jest@npm:26.6.3"
-  dependencies:
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/babel__core": ^7.1.7
-    babel-plugin-istanbul: ^6.0.0
-    babel-preset-jest: ^26.6.2
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    slash: ^3.0.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 355e431fbd663fd43dcf68c93edcf66e31c3295c35754739edb3ce39435fdc407de75540b310b370e6eb924af528839b6effb8de21870ad12423aac31e258221
-  languageName: node
-  linkType: hard
-
-"babel-jest@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "babel-jest@npm:27.5.1"
+"babel-jest@npm:^28.1.1":
+  version: 28.1.3
+  resolution: "babel-jest@npm:28.1.3"
   dependencies:
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/transform": ^28.1.3
     "@types/babel__core": ^7.1.14
     babel-plugin-istanbul: ^6.1.1
-    babel-preset-jest: ^27.5.1
+    babel-preset-jest: ^28.1.3
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
     slash: ^3.0.0
   peerDependencies:
     "@babel/core": ^7.8.0
-  checksum: 3ec8fdabba150431e430ab98d31ba62a1e0bc0fb2fd8d9236cb7dffda740de99c0b04f24da54ff0b5814dce9f81ff0c35a61add53c0734775996a11a7ba38318
+  checksum: 612a6317c176d2d890d9e7c5fc1379a6b2aca784522c1242db9dbcc6e18f2cdaa793e3d649346d37333576b37953fadd53a415787e32ec0fac8b79c35aaafd11
   languageName: node
   linkType: hard
 
-"babel-jest@npm:^28.1.1":
-  version: 28.1.3
-  resolution: "babel-jest@npm:28.1.3"
+"babel-jest@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "babel-jest@npm:29.3.1"
   dependencies:
-    "@jest/transform": ^28.1.3
+    "@jest/transform": ^29.3.1
     "@types/babel__core": ^7.1.14
     babel-plugin-istanbul: ^6.1.1
-    babel-preset-jest: ^28.1.3
+    babel-preset-jest: ^29.2.0
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
     slash: ^3.0.0
   peerDependencies:
     "@babel/core": ^7.8.0
-  checksum: 612a6317c176d2d890d9e7c5fc1379a6b2aca784522c1242db9dbcc6e18f2cdaa793e3d649346d37333576b37953fadd53a415787e32ec0fac8b79c35aaafd11
+  checksum: 0ac669113d54a331e43cf3a5f39895bb8feadaad76c741027197c9c63dedff1835f1414877931dcb2daca614d8b50bc3c9c671fd44b46dca365fbec1c42e661a
   languageName: node
   linkType: hard
 
-"babel-loader@npm:8.2.5, babel-loader@npm:^7.0.0 || ^8.0.0, babel-loader@npm:^8.2.5":
+"babel-loader@npm:8.2.5":
   version: 8.2.5
   resolution: "babel-loader@npm:8.2.5"
   dependencies:
@@ -11321,6 +10928,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-loader@npm:^7.0.0 || ^8.0.0, babel-loader@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "babel-loader@npm:8.3.0"
+  dependencies:
+    find-cache-dir: ^3.3.1
+    loader-utils: ^2.0.0
+    make-dir: ^3.1.0
+    schema-utils: ^2.6.5
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    webpack: ">=2"
+  checksum: 7b83bae35a12fbc5cdf250e2d36a288305fe5b6d20ab044ab7c09bbf456c8895b80af7a4f1e8b64b5c07a4fd48d4b5144dab40b4bc72a4fed532dc000362f38f
+  languageName: node
+  linkType: hard
+
 "babel-plugin-add-react-displayname@npm:^0.0.5":
   version: 0.0.5
   resolution: "babel-plugin-add-react-displayname@npm:0.0.5"
@@ -11388,7 +11010,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.0.0, babel-plugin-istanbul@npm:^6.1.1":
+"babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1":
   version: 6.1.1
   resolution: "babel-plugin-istanbul@npm:6.1.1"
   dependencies:
@@ -11401,51 +11023,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-istanbul@npm:^5.1.0":
-  version: 5.2.0
-  resolution: "babel-plugin-istanbul@npm:5.2.0"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.0.0
-    find-up: ^3.0.0
-    istanbul-lib-instrument: ^3.3.0
-    test-exclude: ^5.2.3
-  checksum: 0691eda883872913c01be6c0afa209c868fa538f12cafd2cd6b9271edbbbe9842ece42bbf51c55864f67b19aae294a69cfdd175b1a52a5f998bfe32d8859ec74
-  languageName: node
-  linkType: hard
-
-"babel-plugin-jest-hoist@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "babel-plugin-jest-hoist@npm:26.6.2"
-  dependencies:
-    "@babel/template": ^7.3.3
-    "@babel/types": ^7.3.3
-    "@types/babel__core": ^7.0.0
-    "@types/babel__traverse": ^7.0.6
-  checksum: 2fcddf7b338e38453d6a42c23db5b790e4188fcbffeba8ff74a62b7d64fe5a642b009a7bd780e47840c382600628de2a6486a92bb151648c64028a6c628e9bfd
-  languageName: node
-  linkType: hard
-
-"babel-plugin-jest-hoist@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "babel-plugin-jest-hoist@npm:27.5.1"
+"babel-plugin-jest-hoist@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-plugin-jest-hoist@npm:28.1.3"
   dependencies:
     "@babel/template": ^7.3.3
     "@babel/types": ^7.3.3
-    "@types/babel__core": ^7.0.0
+    "@types/babel__core": ^7.1.14
     "@types/babel__traverse": ^7.0.6
-  checksum: 2f08ebde32d9d2bffff75524bda44812995b3fcab6cbf259e1db52561b6c8d829f4688db77ef277054a362c9a61826e121a2a4853b0bf93d077ebb3b69685f8e
+  checksum: 4a47f1673bdfcc15b0968d5577119b1abc6eb199a2d627be56c60872fba7b65455cbc7d631896d33e6ec27831bf43600a1d66616d3bc3a37a8784c1596339eeb
   languageName: node
   linkType: hard
 
-"babel-plugin-jest-hoist@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "babel-plugin-jest-hoist@npm:28.1.3"
+"babel-plugin-jest-hoist@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "babel-plugin-jest-hoist@npm:29.2.0"
   dependencies:
     "@babel/template": ^7.3.3
     "@babel/types": ^7.3.3
     "@types/babel__core": ^7.1.14
     "@types/babel__traverse": ^7.0.6
-  checksum: 4a47f1673bdfcc15b0968d5577119b1abc6eb199a2d627be56c60872fba7b65455cbc7d631896d33e6ec27831bf43600a1d66616d3bc3a37a8784c1596339eeb
+  checksum: 37888f5161cfefefebe7f81c6fb3cc3a38ff793f1b1d6196a5b5b3a72f778476cdfb78eb4a4e1bc09903f952bfc28c4854a88433e2dd31366512c85e493e32f9
   languageName: node
   linkType: hard
 
@@ -11581,39 +11179,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "babel-preset-jest@npm:26.6.2"
-  dependencies:
-    babel-plugin-jest-hoist: ^26.6.2
-    babel-preset-current-node-syntax: ^1.0.0
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: b6e0efe33b485eb2fba019026933e46d680605b3bf84a6b7378f1df8344b890f66318c49129921dd98bf5819694316312a97b50b16d9aa377faf8624f9f0db5b
-  languageName: node
-  linkType: hard
-
-"babel-preset-jest@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "babel-preset-jest@npm:27.5.1"
+"babel-preset-jest@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-preset-jest@npm:28.1.3"
   dependencies:
-    babel-plugin-jest-hoist: ^27.5.1
+    babel-plugin-jest-hoist: ^28.1.3
     babel-preset-current-node-syntax: ^1.0.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: fc2f7fd03d8cddb36e0a07a94f1bb1826f7d7dae1f3519ed170c7a5e56c863aecbdb3fd2b034674a53210088478f000318b06415bad511bcf203c5729e5dd079
+  checksum: b30f4102012f9474be4649ea8dba848614ae995418173c5d4a0e606785f03320aea1e8889b5f163f0336c06d5901100b47cd77a45c54fcbf149ff06ad4fa907c
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "babel-preset-jest@npm:28.1.3"
+"babel-preset-jest@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "babel-preset-jest@npm:29.2.0"
   dependencies:
-    babel-plugin-jest-hoist: ^28.1.3
+    babel-plugin-jest-hoist: ^29.2.0
     babel-preset-current-node-syntax: ^1.0.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: b30f4102012f9474be4649ea8dba848614ae995418173c5d4a0e606785f03320aea1e8889b5f163f0336c06d5901100b47cd77a45c54fcbf149ff06ad4fa907c
+  checksum: bc72a6a64dd77b1075cbeaa53ee925b33e78d32e44fe3676c57941baa3ae8f59f6e2f399cef5b2d3ce2eecefb41e401ed4e276f4310f36519f4821c57227fb16
   languageName: node
   linkType: hard
 
@@ -11776,15 +11362,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bindings@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "bindings@npm:1.5.0"
-  dependencies:
-    file-uri-to-path: 1.0.0
-  checksum: 3dab2491b4bb24124252a91e656803eac24292473e56554e35bbfe3cc1875332cfa77600c3bac7564049dc95075bf6fcc63a4609920ff2d64d0fe405fcf0d4ba
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -12283,14 +11860,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bundle-require@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "bundle-require@npm:3.1.0"
+"bundle-require@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "bundle-require@npm:3.1.2"
   dependencies:
     load-tsconfig: ^0.2.0
   peerDependencies:
     esbuild: ">=0.13"
-  checksum: 6bd8f68caeb191dfa7348d9da75f9599989babf335c67c8dc1a5372c773967c76010bdd8971cae19c6bc807e82a540314cb89abfbe6fa1d9c27e14e093b6d0ec
+  checksum: 73f77df391a46f2cefc3bfc4777cd0169a47db1e69a64a16cb6a37208a03992ef68f02921e18ae4fba3387e076f37bcac8388077cba316ce9fd96105aec43f89
   languageName: node
   linkType: hard
 
@@ -12515,9 +12092,9 @@ __metadata:
   linkType: hard
 
 "call-me-maybe@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "call-me-maybe@npm:1.0.1"
-  checksum: 551991433adc2d257d24a5dea5049addc75b182cc7f64860d41bb5ec2c2f1f72efcd6f34be475e70bbb62fde9f9ba380c1a52c922daf2b4111f25fee2509550f
+  version: 1.0.2
+  resolution: "call-me-maybe@npm:1.0.2"
+  checksum: 8eff5dbb61141ebb236ed71b4e9549e488bcb5451c48c11e5667d5c75b0532303788a1101e6978cafa2d0c8c1a727805599c2741e3e0982855c9f1d78cd06c9f
   languageName: node
   linkType: hard
 
@@ -12623,7 +12200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.0.0, camelcase@npm:^6.2.0":
+"camelcase@npm:^6.2.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 0d701658219bd3116d12da3eab31acddb3f9440790c0792e0d398f0a520a6a4058018e546862b6fba89d7ae990efaeb97da71e1913e9ebf5a8b5621a3d55c710
@@ -12641,19 +12218,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001299, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001407":
-  version: 1.0.30001425
-  resolution: "caniuse-lite@npm:1.0.30001425"
-  checksum: ae6c3ef46ef62fa18ca31ab049d00ce63ed84bf3c4aa8e2a723b3907eb15341b6456538cab6a52f228bd90b201deba62c105767989b35294dd8ff9188ac0a1fc
-  languageName: node
-  linkType: hard
-
-"capture-exit@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "capture-exit@npm:2.0.0"
-  dependencies:
-    rsvp: ^4.8.4
-  checksum: d68df1e15937809501644a49c0267ef323b5b6a0cae5c08bbdceafd718aa08241844798bfdd762cf6756bc2becd83122aabc25b5222192f18093113bec670617
+"caniuse-lite@npm:^1.0.30001299, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001426":
+  version: 1.0.30001431
+  resolution: "caniuse-lite@npm:1.0.30001431"
+  checksum: 720e53b7e4afbb91cc7683d64037da23b98a3199b4d34cecbba3e702646910873c21df8e3aa7cea1c37095a99ca9aff24deff610dbccd61c0436907234d77e90
   languageName: node
   linkType: hard
 
@@ -12705,20 +12273,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "chalk@npm:1.1.3"
-  dependencies:
-    ansi-styles: ^2.2.1
-    escape-string-regexp: ^1.0.2
-    has-ansi: ^2.0.0
-    strip-ansi: ^3.0.0
-    supports-color: ^2.0.0
-  checksum: 28c3e399ec286bb3a7111fd4225ebedb0d7b813aef38a37bca7c498d032459c265ef43404201d5fbb8d888d29090899c95335b4c0cda13e8b126ff15c541cef8
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^2.0.0, chalk@npm:^2.0.1, chalk@npm:^2.1.0, chalk@npm:^2.3.0, chalk@npm:^2.3.1, chalk@npm:^2.4.2":
+"chalk@npm:^2.0.0, chalk@npm:^2.1.0, chalk@npm:^2.3.0, chalk@npm:^2.3.1, chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -12753,6 +12308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"char-regex@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "char-regex@npm:2.0.1"
+  checksum: ec592229ac3ef18f2ea1f5676ae9a829c37150db55fd7f709edce1bcdc9f506de22ae19388d853704806e51af71fe9239bcb7e7be583296951bfbf2a9a9763a2
+  languageName: node
+  linkType: hard
+
 "character-entities-html4@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-entities-html4@npm:1.1.4"
@@ -12894,9 +12456,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^6.11.3":
-  version: 6.11.4
-  resolution: "chromatic@npm:6.11.4"
+"chromatic@npm:6.11.2":
+  version: 6.11.2
+  resolution: "chromatic@npm:6.11.2"
   dependencies:
     "@discoveryjs/json-ext": ^0.5.7
     "@types/webpack-env": ^1.17.0
@@ -12904,7 +12466,7 @@ __metadata:
     chroma: bin/main.cjs
     chromatic: bin/main.cjs
     chromatic-cli: bin/main.cjs
-  checksum: 403544ebe647013c5d5db2188c07426094febe6e3254fc782f8218410792f25e20fabb16d9746f3d8864f255589e90fc620f1902f66a5796713ca665a40e5b96
+  checksum: 9692af67638cd90be498f9fcbca5b2397204faf04b5ccdc97118950412ebe1140a240955426e174dfcfdecb9483db8236aa70af3c26dc9c17ef73d8415d4e229
   languageName: node
   linkType: hard
 
@@ -12923,9 +12485,9 @@ __metadata:
   linkType: hard
 
 "ci-info@npm:^3.2.0":
-  version: 3.5.0
-  resolution: "ci-info@npm:3.5.0"
-  checksum: 96491dffabccce7dfcad83569eb306669bf9a25af978e823042ec87d4821d20663e17f18b6da7f42f85a8f7f8c0ae7f41673f3a649c94a260f9ac1d6349690be
+  version: 3.6.1
+  resolution: "ci-info@npm:3.6.1"
+  checksum: 7d5147d627590157b340a795e97b23e20b9633ea34ccc943ef4dfae4ab5cc50b9a83b7e6c513b99f864dc5cca60b4d5fdbfc063381a02730b2bf6cd514af3949
   languageName: node
   linkType: hard
 
@@ -12938,20 +12500,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"circular-json-es6@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "circular-json-es6@npm:2.0.2"
-  checksum: eaaceb3dbdf113996d96af2cf0779be1544420baf3c07fada7e239aacdd4d866c0cad794095f1cef505c614ec5e1bc88c84f1b38d2004ffcac2fa87ee1a1807b
-  languageName: node
-  linkType: hard
-
-"cjs-module-lexer@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "cjs-module-lexer@npm:0.6.0"
-  checksum: a4fe091f5551e8580d74c0afbf767893ea0ace49f8e33eecb54ae8e325661f31d44752171b4ec52d33aca90c4d854114afe315aa6021780a3c49a0f4a67924b5
-  languageName: node
-  linkType: hard
-
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.2.2
   resolution: "cjs-module-lexer@npm:1.2.2"
@@ -13261,7 +12809,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^2.0.10, colorette@npm:^2.0.16":
+"colorette@npm:^2.0.10, colorette@npm:^2.0.16, colorette@npm:^2.0.19":
   version: 2.0.19
   resolution: "colorette@npm:2.0.19"
   checksum: 2bcc9134095750fece6e88167011499b964b78bf0ea953469130ddb1dba3c8fe6c03debb0ae181e710e2be10900d117460f980483a7df4ba4a1bac3b182ecb64
@@ -13302,9 +12850,9 @@ __metadata:
   linkType: hard
 
 "comma-separated-tokens@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "comma-separated-tokens@npm:2.0.2"
-  checksum: 5884b75fa52cb47c5d55f22401ca590db3e37a46e9b2ad7c7dc26fea17cca55c5c1a4db3247af1ce292eaf69241af213d7c44fc7c2e83a4b64f852014335c22b
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: 91f90f1aae320f1755d6957ef0b864fe4f54737f3313bd95e0802686ee2ca38bff1dd381964d00ae5db42912dd1f4ae5c2709644e82706ffc6f6842a813cdd67
   languageName: node
   linkType: hard
 
@@ -13687,6 +13235,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "convert-source-map@npm:2.0.0"
+  checksum: 8f2f7a27a1a011cc6cc88cc4da2d7d0cfa5ee0369508baae3d98c260bb3ac520691464e5bbe4ae7cdf09860c1d69ecc6f70c63c6e7c7f7e3f18ec08484dc7d9b
+  languageName: node
+  linkType: hard
+
 "cookie-signature@npm:1.0.6":
   version: 1.0.6
   resolution: "cookie-signature@npm:1.0.6"
@@ -13749,11 +13304,11 @@ __metadata:
   linkType: hard
 
 "copy-to-clipboard@npm:^3.3.1":
-  version: 3.3.2
-  resolution: "copy-to-clipboard@npm:3.3.2"
+  version: 3.3.3
+  resolution: "copy-to-clipboard@npm:3.3.3"
   dependencies:
     toggle-selection: ^1.0.6
-  checksum: 295b987e47d3e89a421db4a6060276167bee0f14245e0e447613c060a9af806610a2958a0b9bc4512c7329a1d38fb4baf903979b443c63b03d2bc9968ce66ab6
+  checksum: 3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
   languageName: node
   linkType: hard
 
@@ -13774,18 +13329,18 @@ __metadata:
   linkType: hard
 
 "core-js-compat@npm:^3.20.2, core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.25.1":
-  version: 3.26.0
-  resolution: "core-js-compat@npm:3.26.0"
+  version: 3.26.1
+  resolution: "core-js-compat@npm:3.26.1"
   dependencies:
     browserslist: ^4.21.4
-  checksum: c93684da7bda013e5f356f59472f76a6d5976b7ce1ae7a781ab922949db2995040bb81bd41b6a15e2b7da09870485a05854abee2ace29aaf9c1b92c57e3461b7
+  checksum: 2d798049758900a7fd83958e02d1d46d35157dbaa6f916c358f735bfe3095cdf5b54dc999363e654445a94417005eb548b9acc47e1d18eda3d1a43cf05b350a5
   languageName: node
   linkType: hard
 
 "core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.25.1":
-  version: 3.26.0
-  resolution: "core-js-pure@npm:3.26.0"
-  checksum: d2fd6f787903c77d9ea4f3c961bd79e4632e12ae2ddf55ecba0bbb186d31e46b0649e98f9d9a8def2a5127ad2272f31650f54e84f80b833dd822291730c6dd77
+  version: 3.26.1
+  resolution: "core-js-pure@npm:3.26.1"
+  checksum: a58ec9bfc88b87d39a31c099a4701cb44a2b0856b182630341fe12a9170e60c087345e566b52479f5111349ae6eb52a74926bfee5d6553dfd15cb5a161470e57
   languageName: node
   linkType: hard
 
@@ -13804,9 +13359,9 @@ __metadata:
   linkType: hard
 
 "core-js@npm:^3.0.4, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
-  version: 3.26.0
-  resolution: "core-js@npm:3.26.0"
-  checksum: 5b61da1cccea18b42e64dafe7270b3a12e31f6fca97f7bbebd565b89acd71c2bbb45605ceb164f5b0aa7e41843f6ae8ecc16d4833a081ac269969220c50fd8d6
+  version: 3.26.1
+  resolution: "core-js@npm:3.26.1"
+  checksum: 82d36c6f54fc0349998fa7fc67d200ba272f1cd1674c6786dc17f9d259d6555fc05662044528eae73ad6e90f71d503ab5c060ad4745492ef804308209f9aec13
   languageName: node
   linkType: hard
 
@@ -13854,15 +13409,15 @@ __metadata:
   linkType: hard
 
 "cosmiconfig@npm:^7.0.0, cosmiconfig@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "cosmiconfig@npm:7.0.1"
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
   dependencies:
     "@types/parse-json": ^4.0.0
     import-fresh: ^3.2.1
     parse-json: ^5.0.0
     path-type: ^4.0.0
     yaml: ^1.10.0
-  checksum: 3cd38525ba22e13da0ef9f4be131df226c94f5b96fb50f6297eb17baeedefe15cf5819f8c73cde69f71cc5034e712c86bd20c7756883dd8094087680ecc25932
+  checksum: b923ff6af581638128e5f074a5450ba12c0300b71302398ea38dbeabd33bbcaa0245ca9adbedfcf284a07da50f99ede5658c80bb3e39e2ce770a99d28a21ef03
   languageName: node
   linkType: hard
 
@@ -13984,20 +13539,20 @@ __metadata:
   linkType: hard
 
 "css-loader@npm:^6.7.1":
-  version: 6.7.1
-  resolution: "css-loader@npm:6.7.1"
+  version: 6.7.2
+  resolution: "css-loader@npm:6.7.2"
   dependencies:
     icss-utils: ^5.1.0
-    postcss: ^8.4.7
+    postcss: ^8.4.18
     postcss-modules-extract-imports: ^3.0.0
     postcss-modules-local-by-default: ^4.0.0
     postcss-modules-scope: ^3.0.0
     postcss-modules-values: ^4.0.0
     postcss-value-parser: ^4.2.0
-    semver: ^7.3.5
+    semver: ^7.3.8
   peerDependencies:
     webpack: ^5.0.0
-  checksum: c9e900e2a6012a988ab36cf87598fa1e74cd570ab25dbcc8a5d7f10a91a0f9549ff3656b9bbb2bf26b9f5a39f76b9b4b148513c4085c23b73c9c1d5cc2f7de12
+  checksum: 41e8246c7ccc9507ace5bdfed902c4d0b6db59038b933f70d477d2b010827da3e78ec58a44444d8ad22c46470f188194c7aeaf9fb9afb21e881bd704ce8f605a
   languageName: node
   linkType: hard
 
@@ -14038,6 +13593,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-tree@npm:^2.0.1":
+  version: 2.2.1
+  resolution: "css-tree@npm:2.2.1"
+  dependencies:
+    mdn-data: 2.0.28
+    source-map-js: ^1.0.1
+  checksum: 47e87b0f02f8ac22f57eceb65c58011dd142d2158128882a0bf963cf2eabb81a4ebbc2e3790c8289be7919fa8b83750c7b69272bd66772c708143b772ba3c186
+  languageName: node
+  linkType: hard
+
 "css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
@@ -14091,14 +13656,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssom@npm:0.3.x, cssom@npm:>= 0.3.2 < 0.4.0, cssom@npm:^0.3.4, cssom@npm:~0.3.6":
-  version: 0.3.8
-  resolution: "cssom@npm:0.3.8"
-  checksum: d74017b209440822f9e24d8782d6d2e808a8fdd58fa626a783337222fe1c87a518ba944d4c88499031b4786e68772c99dfae616638d71906fe9f203aeaf14411
-  languageName: node
-  linkType: hard
-
-"cssom@npm:^0.4.1, cssom@npm:^0.4.4":
+"cssom@npm:^0.4.1":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
   checksum: 0d4fc70255ea3afbd4add79caffa3b01720929da91105340600d8c0f06c31716f933c6314c3d43b62b57c9637bc2eb35296a9e2db427e8b572ee38a4be2b5f82
@@ -14112,12 +13670,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssstyle@npm:^1.0.0, cssstyle@npm:^1.1.1":
-  version: 1.4.0
-  resolution: "cssstyle@npm:1.4.0"
-  dependencies:
-    cssom: 0.3.x
-  checksum: 213df71e2f78d43608aca51d5eeb2dbcb6224fb7bb222e9f5d4c8b0d6abdca0681774642e4c35304a74d447178ca6b4f492685984491260cd286743b4fd88f27
+"cssom@npm:~0.3.6":
+  version: 0.3.8
+  resolution: "cssom@npm:0.3.8"
+  checksum: d74017b209440822f9e24d8782d6d2e808a8fdd58fa626a783337222fe1c87a518ba944d4c88499031b4786e68772c99dfae616638d71906fe9f203aeaf14411
   languageName: node
   linkType: hard
 
@@ -14263,7 +13819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-urls@npm:^1.0.0, data-urls@npm:^1.1.0":
+"data-urls@npm:^1.1.0":
   version: 1.1.0
   resolution: "data-urls@npm:1.1.0"
   dependencies:
@@ -14274,18 +13830,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-urls@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "data-urls@npm:2.0.0"
-  dependencies:
-    abab: ^2.0.3
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^8.0.0
-  checksum: 1246442178eb756afb1d99e54669a119eafb3e69c73300d14089687c50c64f9feadd93c973f496224a12f89daa94267a6114aecd70e9b279c09d908c5be44d01
-  languageName: node
-  linkType: hard
-
-"data-urls@npm:^3.0.1":
+"data-urls@npm:^3.0.1, data-urls@npm:^3.0.2":
   version: 3.0.2
   resolution: "data-urls@npm:3.0.2"
   dependencies:
@@ -14392,12 +13937,12 @@ __metadata:
   linkType: hard
 
 "decamelize-keys@npm:^1.0.0, decamelize-keys@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "decamelize-keys@npm:1.1.0"
+  version: 1.1.1
+  resolution: "decamelize-keys@npm:1.1.1"
   dependencies:
     decamelize: ^1.1.0
     map-obj: ^1.0.0
-  checksum: 95d4e3692cf7cf6568042658b780f16475a2145910a3d4e996a8d1686c2328c061365643b67b19fee5ea4a03448afc65c9fbb844400c0ecd7dadad175a72e6ef
+  checksum: 4ca385933127437658338c65fb9aead5f21b28d3dd3ccd7956eb29aab0953b5d3c047fbc207111672220c71ecf7a4d34f36c92851b7bbde6fca1a02c541bdd7d
   languageName: node
   linkType: hard
 
@@ -14408,7 +13953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decimal.js@npm:^10.2.1, decimal.js@npm:^10.3.1":
+"decimal.js@npm:^10.3.1, decimal.js@npm:^10.4.1":
   version: 10.4.2
   resolution: "decimal.js@npm:10.4.2"
   checksum: 2f50de33c9c9fcd4c7ffd74cd02edecadeaa4d954e14ef721ee1d381d293c9237b1a90f54198b91f06fd5d3bb8b97079bba54fbc9ccd205d9e6bc8ffa82f6202
@@ -14447,15 +13992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal-ident@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "deep-equal-ident@npm:1.1.1"
-  dependencies:
-    lodash.isequal: ^3.0
-  checksum: c81139d54181a4a15b829ce31effa96e197f3e48fd51a1758c1a583c08060f9e4ca658943702610df5e70a64206122d4e955e612adfc88c6f0a3a717b7ea0878
-  languageName: node
-  linkType: hard
-
 "deep-equal@npm:^1.0.0, deep-equal@npm:^1.0.1":
   version: 1.1.1
   resolution: "deep-equal@npm:1.1.1"
@@ -14471,25 +14007,25 @@ __metadata:
   linkType: hard
 
 "deep-equal@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "deep-equal@npm:2.0.5"
+  version: 2.1.0
+  resolution: "deep-equal@npm:2.1.0"
   dependencies:
-    call-bind: ^1.0.0
-    es-get-iterator: ^1.1.1
-    get-intrinsic: ^1.0.1
-    is-arguments: ^1.0.4
-    is-date-object: ^1.0.2
-    is-regex: ^1.1.1
+    call-bind: ^1.0.2
+    es-get-iterator: ^1.1.2
+    get-intrinsic: ^1.1.3
+    is-arguments: ^1.1.1
+    is-date-object: ^1.0.5
+    is-regex: ^1.1.4
     isarray: ^2.0.5
-    object-is: ^1.1.4
+    object-is: ^1.1.5
     object-keys: ^1.1.1
-    object.assign: ^4.1.2
-    regexp.prototype.flags: ^1.3.0
-    side-channel: ^1.0.3
-    which-boxed-primitive: ^1.0.1
+    object.assign: ^4.1.4
+    regexp.prototype.flags: ^1.4.3
+    side-channel: ^1.0.4
+    which-boxed-primitive: ^1.0.2
     which-collection: ^1.0.1
-    which-typed-array: ^1.1.2
-  checksum: e36a16ef53a4d3010f6bb9a3f7945cb0c15910590fa04444cfa965d6e1cd77b75418e2e7e45083f22bd769c18b606fc6e24b6a05232405bb51d9b897ee7c55f5
+    which-typed-array: ^1.1.8
+  checksum: dbe6bdf8bcddc0e5f91d79601bc563bf615bcae4fc385068ad8ce8f911c347b7097fd57137b0a9b465fdb0ca2a08af705d5be3e10342366cef671dc3a5b41b6e
   languageName: node
   linkType: hard
 
@@ -14508,9 +14044,9 @@ __metadata:
   linkType: hard
 
 "deep-object-diff@npm:^1.1.0":
-  version: 1.1.7
-  resolution: "deep-object-diff@npm:1.1.7"
-  checksum: 49a9d24de19c1355e253d1399209c60fc8696d8e7fc57346ac4bcb295ca0e944f004d4a96a24e9627bcb58a858cb4b05194f6da845b0157be6a65a2f248e05f3
+  version: 1.1.9
+  resolution: "deep-object-diff@npm:1.1.9"
+  checksum: 12cfd1b000d16c9192fc649923c972f8aac2ddca4f71a292f8f2c1e2d5cf3c9c16c85e73ab3e7d8a89a5ec6918d6460677d0b05bd160f7bd50bb4816d496dc24
   languageName: node
   linkType: hard
 
@@ -14618,12 +14154,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"degit@npm:^2.8.4":
-  version: 2.8.4
-  resolution: "degit@npm:2.8.4"
-  bin:
-    degit: degit
-  checksum: 25ae9daf8010b450ffe8307c5ca903fe8bfaa8bb8622da12f81f2b6c3b1bb24e96fe3ab0b4ec4a1a19684f674b2158a8a3a2178c481882cc4991c7a0859ec40a
+"defu@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "defu@npm:6.1.1"
+  checksum: ee442ce5289b3060a6cef85fdf6a29dbf2b9b6c39ac30a6ee5c8885671cd34214aae2ebb131fb071454122d3a3ce6d304931f53a732d98938ef396e12c04aa71
   languageName: node
   linkType: hard
 
@@ -14773,20 +14307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff-sequences@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "diff-sequences@npm:26.6.2"
-  checksum: a576b78f542377ce2bb032aa91aaf12376c6f562f79b2570f5fe16b4c18acff78de144ae44f0d86bedfe9c29ef38aa027db963850213e07bbc1c1a3b2834e861
-  languageName: node
-  linkType: hard
-
-"diff-sequences@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "diff-sequences@npm:27.5.1"
-  checksum: a52566d891b89a666f48ba69f54262fa8293ae6264ae04da82c7bf3b6661cba75561de0729f18463179d56003cc0fd69aa09845f2c2cd7a353b1ec1e1a96beb9
-  languageName: node
-  linkType: hard
-
 "diff-sequences@npm:^28.1.1":
   version: 28.1.1
   resolution: "diff-sequences@npm:28.1.1"
@@ -14794,10 +14314,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff-sequences@npm:^29.2.0":
-  version: 29.2.0
-  resolution: "diff-sequences@npm:29.2.0"
-  checksum: 4b83cda386c251f772c6983e3dfbe36d6d563c6b223e8845c98469417d2f2e35839dc4cf23dbabc3ccecaf30bf8e188481fee6f1660cb3e8fbfa9a27506790ef
+"diff-sequences@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "diff-sequences@npm:29.3.1"
+  checksum: adbacc8d56c42f73c12a90e253c2b7024d2cd52c30bd81a3960a9cfd35164f8ecd3d8dd82ded38b0e48585923b56bd28f9aae942e6d1b23f444213b9d786b925
   languageName: node
   linkType: hard
 
@@ -14978,15 +14498,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domexception@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "domexception@npm:2.0.1"
-  dependencies:
-    webidl-conversions: ^5.0.0
-  checksum: 24a3a07b85420671bc805ead7305e0f2ec9e55f104889b64c5a9fa7d93681e514f05c65f947bd9401b3da67f77b92fe7861bd15f4d0d418c4d32e34a2cd55d38
-  languageName: node
-  linkType: hard
-
 "domexception@npm:^4.0.0":
   version: 4.0.0
   resolution: "domexception@npm:4.0.0"
@@ -15040,9 +14551,9 @@ __metadata:
   linkType: hard
 
 "dompurify@npm:^2.2.6":
-  version: 2.4.0
-  resolution: "dompurify@npm:2.4.0"
-  checksum: b091e8f1a5106a7bcfc9947ea654a91e1c7fc28c9264578c0ccca3527d62f4ec9b6df8cfd91b3c21696d5182950a37b1b79e3c5d669256c7730107cb6d9c64f1
+  version: 2.4.1
+  resolution: "dompurify@npm:2.4.1"
+  checksum: 4563459e959f01748d2499bf6afc9e7fd47721df42d93e6f2c04857b7685c112ecafc741877185423b04c1a77b3951c7c8e6c60d9bc283ff55abd7afef36ea48
   languageName: node
   linkType: hard
 
@@ -15431,8 +14942,8 @@ __metadata:
   linkType: hard
 
 "ember-source@npm:~3.28.1":
-  version: 3.28.9
-  resolution: "ember-source@npm:3.28.9"
+  version: 3.28.10
+  resolution: "ember-source@npm:3.28.10"
   dependencies:
     "@babel/helper-module-imports": ^7.8.3
     "@babel/plugin-transform-block-scoping": ^7.8.3
@@ -15460,7 +14971,7 @@ __metadata:
     resolve: ^1.17.0
     semver: ^7.3.4
     silent-error: ^1.1.1
-  checksum: d6a26354a147a5a33dcf9cefe883cdb6ec7979aa1599b4cbaa86c765dd7a32be607ea7fb6e681545ba49b719509937b25c9de27345f5e7871f15f74b1c47ddd7
+  checksum: 5dc9fa1d16084fc6b2c3b4210a26246ba8d8d6ae21e381b4d2d3810ed397e06bc699f2d5c7d86abfe5426e9ba808b350e5a244c1e2c81d8beabe63b81b2b2f92
   languageName: node
   linkType: hard
 
@@ -15471,17 +14982,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emittery@npm:^0.7.1":
-  version: 0.7.2
-  resolution: "emittery@npm:0.7.2"
-  checksum: a90d8b59a14de5f3c2bf9d9884867ab6f62d1da1363b660e1429543286f627372c07b70d78465e739f4a616ba1e6638f63c831ef0da146b89c7935f1e5a96ad5
-  languageName: node
-  linkType: hard
-
-"emittery@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "emittery@npm:0.8.1"
-  checksum: 1302868b6e258909964339f28569b97658d75c1030271024ac2f50f84957eab6a6a04278861a9c1d47131b9dfb50f25a5d017750d1c99cd86763e19a93b838bf
+"emittery@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "emittery@npm:0.13.1"
+  checksum: 1573d0ae29ab34661b6c63251ff8f5facd24ccf6a823f19417ae8ba8c88ea450325788c67f16c99edec8de4b52ce93a10fe441ece389fd156e88ee7dab9bfa35
   languageName: node
   linkType: hard
 
@@ -15641,15 +15145,15 @@ __metadata:
   linkType: hard
 
 "enzyme-adapter-react-16@npm:^1.15.5":
-  version: 1.15.6
-  resolution: "enzyme-adapter-react-16@npm:1.15.6"
+  version: 1.15.7
+  resolution: "enzyme-adapter-react-16@npm:1.15.7"
   dependencies:
-    enzyme-adapter-utils: ^1.14.0
-    enzyme-shallow-equal: ^1.0.4
+    enzyme-adapter-utils: ^1.14.1
+    enzyme-shallow-equal: ^1.0.5
     has: ^1.0.3
-    object.assign: ^4.1.2
-    object.values: ^1.1.2
-    prop-types: ^15.7.2
+    object.assign: ^4.1.4
+    object.values: ^1.1.5
+    prop-types: ^15.8.1
     react-is: ^16.13.1
     react-test-renderer: ^16.0.0-0
     semver: ^5.7.0
@@ -15657,50 +15161,38 @@ __metadata:
     enzyme: ^3.0.0
     react: ^16.0.0-0
     react-dom: ^16.0.0-0
-  checksum: 28f940fe6c1d314117890d20fff336c0836ba75f3c68b88abda800269ef4dfd04ba6846459981f55695fb94d46d7d4224f90396c0fda4c27e38b16a3748b4ad4
+  checksum: 7cb69fcdc4bf2390ffe440cfa906c698b90d533032180b5b6ddf5ace1edac0e09a687b7f36706e1bba3b02a91585d8d5bd0317c237b5f5eab00bdb5512f330ee
   languageName: node
   linkType: hard
 
-"enzyme-adapter-utils@npm:^1.14.0":
-  version: 1.14.0
-  resolution: "enzyme-adapter-utils@npm:1.14.0"
+"enzyme-adapter-utils@npm:^1.14.1":
+  version: 1.14.1
+  resolution: "enzyme-adapter-utils@npm:1.14.1"
   dependencies:
     airbnb-prop-types: ^2.16.0
-    function.prototype.name: ^1.1.3
+    function.prototype.name: ^1.1.5
     has: ^1.0.3
-    object.assign: ^4.1.2
-    object.fromentries: ^2.0.3
-    prop-types: ^15.7.2
+    object.assign: ^4.1.4
+    object.fromentries: ^2.0.5
+    prop-types: ^15.8.1
     semver: ^5.7.1
   peerDependencies:
     react: 0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0
-  checksum: 9d02d69115ecf5864ce25b4bc1a55358ebb039e8330c867bad93cae5195713e6e5bc474777f23cb5c76800265d879000612d9f791c9f33a5b214f726798f1b4f
-  languageName: node
-  linkType: hard
-
-"enzyme-matchers@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "enzyme-matchers@npm:7.1.2"
-  dependencies:
-    circular-json-es6: ^2.0.1
-    deep-equal-ident: ^1.1.1
-  peerDependencies:
-    enzyme: ">=3.4.0"
-  checksum: 21c947d7122c33ada71596c40e5611c6108c6591c9d5ba0fb6bea8633792fdd894881696e3e1b394154b42cca885c3d1d89263ef9a3b1e301db25fdfb6fca394
+  checksum: f07423c9181ed22fda4d761ec54aca6d9fb65d8b95da48c1471d39892f8af3d3fa54c971ed73a16acbc9a483ccda3a58f97a590bf95b4d5f77f99ae37c1ac8bb
   languageName: node
   linkType: hard
 
-"enzyme-shallow-equal@npm:^1.0.1, enzyme-shallow-equal@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "enzyme-shallow-equal@npm:1.0.4"
+"enzyme-shallow-equal@npm:^1.0.1, enzyme-shallow-equal@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "enzyme-shallow-equal@npm:1.0.5"
   dependencies:
     has: ^1.0.3
-    object-is: ^1.1.2
-  checksum: c94ad4eb012610719e0cd2e0780225c20880052cf61b7120af43a84ea1414b170a19ed9853fdfc4f5910e7f4159445d168179d2fe7e93fe10da0bdeeb93a2348
+    object-is: ^1.1.5
+  checksum: 30ace0c5be2d454fb001a50dd30791c18e1f86b3b7238456b464921017f6add73ea6b2a2527f1e96958d8bfe84d0afcba30b0c9e4087ebda2feb42b7800419c4
   languageName: node
   linkType: hard
 
-"enzyme-to-json@npm:^3.3.0, enzyme-to-json@npm:^3.6.1":
+"enzyme-to-json@npm:^3.6.1":
   version: 3.6.2
   resolution: "enzyme-to-json@npm:3.6.2"
   dependencies:
@@ -15786,7 +15278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1, es-abstract@npm:^1.19.2, es-abstract@npm:^1.19.4, es-abstract@npm:^1.19.5, es-abstract@npm:^1.20.0, es-abstract@npm:^1.20.1":
+"es-abstract@npm:^1.19.0, es-abstract@npm:^1.20.4":
   version: 1.20.4
   resolution: "es-abstract@npm:1.20.4"
   dependencies:
@@ -15825,7 +15317,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.1":
+"es-get-iterator@npm:^1.1.2":
   version: 1.1.2
   resolution: "es-get-iterator@npm:1.1.2"
   dependencies:
@@ -16087,11 +15579,13 @@ __metadata:
   linkType: hard
 
 "esbuild-register@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "esbuild-register@npm:3.3.3"
+  version: 3.4.1
+  resolution: "esbuild-register@npm:3.4.1"
+  dependencies:
+    debug: ^4.3.4
   peerDependencies:
     esbuild: ">=0.12 <1"
-  checksum: b99e094646e6de94afafd201794e5d2e0250377cabd544cc3d7da5ccf879f38174e26a6530ecd1fa20494842f4af50360769510dbcf57ff1ce4ba6d0e84ae273
+  checksum: 6364c96f83fc4720d907d6342605f5891986c2a30fbc0a249047195ea5b02c0f7e4e698aa262875b37088f44ca741331d35c026d2606778d114fe082d560957d
   languageName: node
   linkType: hard
 
@@ -16112,11 +15606,11 @@ __metadata:
   linkType: hard
 
 "esbuild-wasm@npm:>=0.13.8":
-  version: 0.15.12
-  resolution: "esbuild-wasm@npm:0.15.12"
+  version: 0.15.14
+  resolution: "esbuild-wasm@npm:0.15.14"
   bin:
     esbuild: bin/esbuild
-  checksum: 112e1a35e05bcaa932b26182ffa574162ce745cc9dd6f8e6a471ea48e2841d49e18026bc32577eb1cbdf2f6ac639042a49a16c6aefc3e67cb88375c3b6e57a51
+  checksum: 174eaa1c598bbddef045965dba60181dccb3f2ac90098da6e4994e315371bce227c688d866e292621385c9a31ba8a0b756386aa0ca197b0158fda37a28d52ff0
   languageName: node
   linkType: hard
 
@@ -16236,7 +15730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-string-regexp@npm:^1.0.2, escape-string-regexp@npm:^1.0.5":
+"escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
   checksum: a968ad453dd0c2724e14a4f20e177aaf32bb384ab41b674a8454afe9a41c5e6fe8903323e0a1052f56289d04bd600f81278edf140b0fcc02f5cac98d0f5b5371
@@ -16257,7 +15751,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escodegen@npm:^1.11.0, escodegen@npm:^1.11.1, escodegen@npm:^1.9.1":
+"escodegen@npm:^1.11.1":
   version: 1.14.3
   resolution: "escodegen@npm:1.14.3"
   dependencies:
@@ -16389,6 +15883,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-import-resolver-typescript@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "eslint-import-resolver-typescript@npm:3.5.2"
+  dependencies:
+    debug: ^4.3.4
+    enhanced-resolve: ^5.10.0
+    get-tsconfig: ^4.2.0
+    globby: ^13.1.2
+    is-core-module: ^2.10.0
+    is-glob: ^4.0.3
+    synckit: ^0.8.4
+  peerDependencies:
+    eslint: "*"
+    eslint-plugin-import: "*"
+  checksum: 7947cccc80d439132cb75ec7a74bf710fef72b3b0d6d804246265836f143e86520608a5a3c3313aec0e21a8b0ca0eb99101236895ea89b71559d0cf9c9ac377a
+  languageName: node
+  linkType: hard
+
 "eslint-module-utils@npm:^2.7.3":
   version: 2.7.4
   resolution: "eslint-module-utils@npm:2.7.4"
@@ -16597,8 +16109,8 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-storybook@npm:^0.6.6":
-  version: 0.6.6
-  resolution: "eslint-plugin-storybook@npm:0.6.6"
+  version: 0.6.7
+  resolution: "eslint-plugin-storybook@npm:0.6.7"
   dependencies:
     "@storybook/csf": ^0.0.1
     "@typescript-eslint/experimental-utils": ^5.3.0
@@ -16606,7 +16118,7 @@ __metadata:
     ts-dedent: ^2.2.0
   peerDependencies:
     eslint: ">=6"
-  checksum: aad2d3bda6b1a676b685029cb8ee1140bd5aeb40d29394b320175e6ebd47ce025d96990ae6bef905cf631dde181216bb9283a1ef9a483028fd8aa72d4d2b98ec
+  checksum: 55b7ac0acfb088824db475863ba2f488865cbd7fc5d23acb30e2d7fc8bc044e15b79e1ec307abc8d97c5f207f87012f74fae7b85dc0e623575b40bea137b1e21
   languageName: node
   linkType: hard
 
@@ -16662,9 +16174,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.26.0":
-  version: 8.26.0
-  resolution: "eslint@npm:8.26.0"
+"eslint@npm:^8.27.0":
+  version: 8.27.0
+  resolution: "eslint@npm:8.27.0"
   dependencies:
     "@eslint/eslintrc": ^1.3.3
     "@humanwhocodes/config-array": ^0.11.6
@@ -16707,7 +16219,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: da97a44bac58770d44dc6a2daa57cbb67ac888c060dde5a87c7785ea34a2cea61568d5238d375a14bfd548ffff7cd61691ab5a81c4625c7c97412b2d45b63843
+  checksum: 8fc3ecac3c620ca8758b63428981dee35758a312e607dfec0fd3815b9847b49e466ed7d0e2cadeb35e2a46d7f430581cc38e1e26bfd77728dde4e34bd9bd8686
   languageName: node
   linkType: hard
 
@@ -16730,13 +16242,13 @@ __metadata:
   linkType: hard
 
 "espree@npm:^9.4.0":
-  version: 9.4.0
-  resolution: "espree@npm:9.4.0"
+  version: 9.4.1
+  resolution: "espree@npm:9.4.1"
   dependencies:
     acorn: ^8.8.0
     acorn-jsx: ^5.3.2
     eslint-visitor-keys: ^3.3.0
-  checksum: 95f1f9ac49fa112bfc2d2e82fd9e85192367090a9ee03b1e43594e85e29a3458b603b4cf7cd5ccfb156da2b94d07e7f5428474c830faa6f19db47a0b86dd3656
+  checksum: f7c8f891f3b247c76ed16259522c772bb35e6a9cb5f5b2e0f111ffc60624e7533c89a0aa1f830d8f8baa2b7676313bb9ce7f64ae00ccffc223ebbf880ab691ee
   languageName: node
   linkType: hard
 
@@ -16985,13 +16497,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exec-sh@npm:^0.3.2":
-  version: 0.3.6
-  resolution: "exec-sh@npm:0.3.6"
-  checksum: de29ed40c263989ea151cfc8561c9a41a443185d1998b0ff7aee248323af3b46db3a1dc5341816297d0c02dca472b188640490aa4ba3cae017f531f98102607d
-  languageName: node
-  linkType: hard
-
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -17024,7 +16529,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^4.0.0, execa@npm:^4.0.2, execa@npm:^4.1.0":
+"execa@npm:^4.0.2, execa@npm:^4.1.0":
   version: 4.1.0
   resolution: "execa@npm:4.1.0"
   dependencies:
@@ -17096,32 +16601,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "expect@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    ansi-styles: ^4.0.0
-    jest-get-type: ^26.3.0
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-regex-util: ^26.0.0
-  checksum: e84ab6c96e99eaf92586e5c554317413352082b66be952ba338bf690e15106c0b6350ac99d0d66237d675cc75963811255120d47172a8e764b1d6a9ae2b6b1b4
-  languageName: node
-  linkType: hard
-
-"expect@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "expect@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    jest-get-type: ^27.5.1
-    jest-matcher-utils: ^27.5.1
-    jest-message-util: ^27.5.1
-  checksum: 020e237c7191a584bc25a98181c3969cdd62fa1c044e4d81d5968e24075f39bc2349fcee48de82431033823b525e7cf5ac410b253b3115392f1026cb27258811
-  languageName: node
-  linkType: hard
-
 "expect@npm:^28.1.3":
   version: 28.1.3
   resolution: "expect@npm:28.1.3"
@@ -17135,16 +16614,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:^29.0.0":
-  version: 29.2.2
-  resolution: "expect@npm:29.2.2"
+"expect@npm:^29.0.0, expect@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "expect@npm:29.3.1"
   dependencies:
-    "@jest/expect-utils": ^29.2.2
+    "@jest/expect-utils": ^29.3.1
     jest-get-type: ^29.2.0
-    jest-matcher-utils: ^29.2.2
-    jest-message-util: ^29.2.1
-    jest-util: ^29.2.1
-  checksum: 4e9a08548b4bf9240ab68c5a9de22fe4460abfd6a65fbf9eac724266406cae6851bc51044a6edea46e666924b709c984eb221125394dee9b99e17138c62d1216
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: 0662836949648b65ea80c0fc4777818bd384c00d2ad3d442ec1bea69a604097f94673a432245ae750b09bc8d292f381a31dcc59cf0433a9b2adfba501e257d63
   languageName: node
   linkType: hard
 
@@ -17430,7 +16909,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-json-stable-stringify@npm:2.1.0, fast-json-stable-stringify@npm:2.x, fast-json-stable-stringify@npm:^2.0.0":
+"fast-json-stable-stringify@npm:2.1.0, fast-json-stable-stringify@npm:2.x, fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
   checksum: 7f081eb0b8a64e0057b3bb03f974b3ef00135fbf36c1c710895cd9300f13c94ba809bb3a81cf4e1b03f6e5285610a61abbd7602d0652de423144dfee5a389c9b
@@ -17575,13 +17054,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-uri-to-path@npm:1.0.0":
-  version: 1.0.0
-  resolution: "file-uri-to-path@npm:1.0.0"
-  checksum: 3b545e3a341d322d368e880e1c204ef55f1d45cdea65f7efc6c6ce9e0c4d22d802d5629320eb779d006fe59624ac17b0e848d83cc5af7cd101f206cb704f5519
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.1":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -17809,9 +17281,9 @@ __metadata:
   linkType: hard
 
 "flow-parser@npm:0.*":
-  version: 0.190.1
-  resolution: "flow-parser@npm:0.190.1"
-  checksum: d6a142b2c58b82715dd00b5258717c4754cdd7aa849dbefe522947757c198a0c1ade5a0ef82aa2c06ccf4d1fe4bb9cf67330a4d61d1f50ffe2932b4be6d51ecd
+  version: 0.193.0
+  resolution: "flow-parser@npm:0.193.0"
+  checksum: 25b2770c00a4c7ee7596fa4c2a4d5e422c6bbac96162778a37523fddbf4bf49942efd45984c6156f9b515dbad45c0927e78792ab11543b0b31b654427920858c
   languageName: node
   linkType: hard
 
@@ -18214,18 +17686,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^1.2.7":
-  version: 1.2.13
-  resolution: "fsevents@npm:1.2.13"
-  dependencies:
-    bindings: ^1.5.0
-    nan: ^2.12.1
-  checksum: 4427ff08db9ee7327f2c3ad58ec56f9096a917eed861bfffaa2e2be419479cdf37d00750869ab9ecbf5f59f32ad999bd59577d73fc639193e6c0ce52bb253e02
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
   version: 2.3.2
   resolution: "fsevents@npm:2.3.2"
   dependencies:
@@ -18235,17 +17696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
-  version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
-  dependencies:
-    bindings: ^1.5.0
-    nan: ^2.12.1
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
@@ -18261,7 +17712,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.3, function.prototype.name@npm:^1.1.5":
+"function.prototype.name@npm:^1.1.2, function.prototype.name@npm:^1.1.5":
   version: 1.1.5
   resolution: "function.prototype.name@npm:1.1.5"
   dependencies:
@@ -18373,7 +17824,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.0.1, get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3":
+"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3":
   version: 1.1.3
   resolution: "get-intrinsic@npm:1.1.3"
   dependencies:
@@ -18483,6 +17934,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-tsconfig@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "get-tsconfig@npm:4.2.0"
+  checksum: a60b2665d57894f844116cd0947722d107f2f639ef62d01a488da70f3d91707eeb3843a5c2eb49e21b6a46a68853d42450a63c251cb1659576454febb03bd307
+  languageName: node
+  linkType: hard
+
 "get-value@npm:^2.0.3, get-value@npm:^2.0.6":
   version: 2.0.6
   resolution: "get-value@npm:2.0.6"
@@ -18499,6 +17957,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"giget@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "giget@npm:1.0.0"
+  dependencies:
+    colorette: ^2.0.19
+    defu: ^6.1.1
+    https-proxy-agent: ^5.0.1
+    mri: ^1.2.0
+    node-fetch-native: ^1.0.1
+    pathe: ^1.0.0
+    tar: ^6.1.12
+  bin:
+    giget: dist/cli.mjs
+  checksum: cacc0b531356bb8e494742856ee4df39bd90a1a733122e79606b0d4d1b7489532133fed7f92ccb6334478e66079534ef52e3c932e5d695a032b61b4e48c749b6
+  languageName: node
+  linkType: hard
+
 "git-config-path@npm:^1.0.1":
   version: 1.0.1
   resolution: "git-config-path@npm:1.0.1"
@@ -18765,11 +18240,11 @@ __metadata:
   linkType: hard
 
 "global-dirs@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "global-dirs@npm:3.0.0"
+  version: 3.0.1
+  resolution: "global-dirs@npm:3.0.1"
   dependencies:
     ini: 2.0.0
-  checksum: 2b3c05967873662204dfe7159cfef20019e898b5ebe2ac70fc155e4cbe2207732f4b72d4ea1e72f10e91cee139d237ab4d39f1e282751093e7fe83c53abba46f
+  checksum: ef65e2241a47ff978f7006a641302bc7f4c03dfb98783d42bf7224c136e3a06df046e70ee3a010cf30214114755e46c9eb5eb1513838812fbbe0d92b14c25080
   languageName: node
   linkType: hard
 
@@ -18791,11 +18266,18 @@ __metadata:
   linkType: hard
 
 "globals@npm:^13.15.0":
-  version: 13.17.0
-  resolution: "globals@npm:13.17.0"
+  version: 13.18.0
+  resolution: "globals@npm:13.18.0"
   dependencies:
     type-fest: ^0.20.2
-  checksum: f2aa3b9f21608bed3570f281e95a8050d9700580edd4b59ed5464c83e0b7a346f74abc13f850c7f07a972cd198ee1f2b0de6a5977baf547e50b1002428f0dd09
+  checksum: 38f675c62cc1564508c970c1bfe1aa38f605041ccac6d2d862a726f8107dec5d66e0deddf7eb2c0a5c0da414b5f63c4ffd87ebc1947c54a387fa513e6f3775e3
+  languageName: node
+  linkType: hard
+
+"globalyzer@npm:0.1.0":
+  version: 0.1.0
+  resolution: "globalyzer@npm:0.1.0"
+  checksum: e16e47a5835cbe8a021423d4c7fcd9f5f85815b4190a7f50c1fdb95fc559d72e4fb30be96f106c66a99413f36d72da0f8323d19d27f60a8feec9d936139ec5a8
   languageName: node
   linkType: hard
 
@@ -18886,6 +18368,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "glur@npm:^1.1.2":
   version: 1.1.2
   resolution: "glur@npm:1.1.2"
@@ -18893,9 +18382,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gopd@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "gopd@npm:1.0.1"
+  dependencies:
+    get-intrinsic: ^1.1.3
+  checksum: 505c05487f7944c552cee72087bf1567debb470d4355b1335f2c262d218ebbff805cd3715448fe29b4b380bae6912561d0467233e4165830efd28da241418c63
+  languageName: node
+  linkType: hard
+
 "got@npm:^12.1.0":
-  version: 12.5.2
-  resolution: "got@npm:12.5.2"
+  version: 12.5.3
+  resolution: "got@npm:12.5.3"
   dependencies:
     "@sindresorhus/is": ^5.2.0
     "@szmarczak/http-timer": ^5.0.1
@@ -18908,7 +18406,7 @@ __metadata:
     lowercase-keys: ^3.0.0
     p-cancelable: ^3.0.0
     responselike: ^3.0.0
-  checksum: 4d735345d3cba60da177f033b770d56ff7143bb444e2254f00bc8ea0f563b2fd073a4355254b416f4d87c532794306de71b8e9bc64994cf3e0cb83a6b0ff9c32
+  checksum: 8e1230242e56393c27296e53293e039b9171e938ad842ea54912b1e1be0dbaf3396f830081c3e2a03e77c2cca05e06c9b1db615fa4ff8de6507fb57f2a45d12c
   languageName: node
   linkType: hard
 
@@ -18949,13 +18447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"growly@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "growly@npm:1.3.0"
-  checksum: 3043bd5c064e87f89e8c9b66894ed09fd882c7fa645621a543b45b72f040c7241e25061207a858ab191be2fbdac34795ff57c2a40962b154a6b2908a5e509252
-  languageName: node
-  linkType: hard
-
 "handle-thing@npm:^2.0.0":
   version: 2.0.1
   resolution: "handle-thing@npm:2.0.1"
@@ -19012,15 +18503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-ansi@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "has-ansi@npm:2.0.0"
-  dependencies:
-    ansi-regex: ^2.0.0
-  checksum: f54e4887b9f8f3c4bfefd649c48825b3c093987c92c27880ee9898539e6f01aed261e82e73153c3f920fde0db5bf6ebd58deb498ed1debabcb4bc40113ccdf05
-  languageName: node
-  linkType: hard
-
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -19348,15 +18830,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-encoding-sniffer@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "html-encoding-sniffer@npm:2.0.1"
-  dependencies:
-    whatwg-encoding: ^1.0.5
-  checksum: 6dc3aa2d35a8f0c8c7906ffb665dd24a88f7004f913fafdd3541d24a4da6182ab30c4a0a81387649a1234ecb90182c4136220ed12ae3dc1a57ed68e533dea416
-  languageName: node
-  linkType: hard
-
 "html-encoding-sniffer@npm:^3.0.0":
   version: 3.0.0
   resolution: "html-encoding-sniffer@npm:3.0.0"
@@ -19705,12 +19178,12 @@ __metadata:
   linkType: hard
 
 "http2-wrapper@npm:^2.1.10":
-  version: 2.1.11
-  resolution: "http2-wrapper@npm:2.1.11"
+  version: 2.2.0
+  resolution: "http2-wrapper@npm:2.2.0"
   dependencies:
     quick-lru: ^5.1.1
     resolve-alpn: ^1.2.0
-  checksum: ae9893059dc392485a44aa63887c535225359aec4fcdbb5f07a475021b31bd4305648f73d4c54d1c23ebcd93f3fe21a035d982383fd431762e288d59515b0344
+  checksum: cb4a41a9b4948a607bb27b4e745af5396e01a5e074da4c7ea0d3ce41acd9cef69de373a67d321728bb651fd9701a23c80e8991c9ad5128dab10e9da28a8b6c72
   languageName: node
   linkType: hard
 
@@ -19744,7 +19217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^5.0.0":
+"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"
   dependencies:
@@ -20317,7 +19790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.0":
+"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.0, is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -20405,7 +19878,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
+"is-core-module@npm:^2.10.0, is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
   version: 2.11.0
   resolution: "is-core-module@npm:2.11.0"
   dependencies:
@@ -20432,7 +19905,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.2":
+"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
   dependencies:
@@ -20783,7 +20256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.3, is-regex@npm:^1.0.4, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.1, is-regex@npm:^1.1.2, is-regex@npm:^1.1.4":
+"is-regex@npm:^1.0.3, is-regex@npm:^1.0.4, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.2, is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
   dependencies:
@@ -20873,16 +20346,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.3, is-typed-array@npm:^1.1.9":
-  version: 1.1.9
-  resolution: "is-typed-array@npm:1.1.9"
+"is-typed-array@npm:^1.1.10, is-typed-array@npm:^1.1.3":
+  version: 1.1.10
+  resolution: "is-typed-array@npm:1.1.10"
   dependencies:
     available-typed-arrays: ^1.0.5
     call-bind: ^1.0.2
-    es-abstract: ^1.20.0
     for-each: ^0.3.3
+    gopd: ^1.0.1
     has-tostringtag: ^1.0.0
-  checksum: 613b7dd6d121c331bb7456f6b678ebd74aee9d77f61c3df09da2cd7841c060d4f8cff14ae8ab54977180d5da2f2da300394810bc92a05a985b3438f55cf629b2
+  checksum: b71268a2e5f493f2b95af4cbfe7a65254a822f07d57f20c18f084347cd45f11810915fe37d7a6831fe4b81def24621a042fd1169ec558c50f830b591bc8c1f66
   languageName: node
   linkType: hard
 
@@ -20971,9 +20444,9 @@ __metadata:
   linkType: hard
 
 "is-yarn-global@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "is-yarn-global@npm:0.4.0"
-  checksum: 7fb759bb20439fa37c8e3214c56bc7c2f0608ae68b885c206db1043cfa91e9507ef3a1b564b810762c424a4459fd74a06ff12a39a7f9e2eab11279aa883f9dd8
+  version: 0.4.1
+  resolution: "is-yarn-global@npm:0.4.1"
+  checksum: 8ff66f33454614f8e913ad91cc4de0d88d519a46c1ed41b3f589da79504ed0fcfa304064fe3096dda9360c5f35aa210cb8e978fd36798f3118cb66a4de64d365
   languageName: node
   linkType: hard
 
@@ -21045,13 +20518,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-coverage@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "istanbul-lib-coverage@npm:2.0.5"
-  checksum: 370bd6940532ea2737a85532870f3024b113774ce3e637438cccfaf979a7598aa29d342f4adcc3d73e306155c907b519bc1c5c6887a29234f605a1a472747821
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-lib-coverage@npm:3.2.0"
@@ -21059,33 +20525,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-instrument@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "istanbul-lib-instrument@npm:3.3.0"
-  dependencies:
-    "@babel/generator": ^7.4.0
-    "@babel/parser": ^7.4.3
-    "@babel/template": ^7.4.0
-    "@babel/traverse": ^7.4.3
-    "@babel/types": ^7.4.0
-    istanbul-lib-coverage: ^2.0.5
-    semver: ^6.0.0
-  checksum: 988eb9d58ae0ae69686369f6809a610f6f8db5c5f73931a496b02b941da56cfc176f84af0dd8db819ad2e6aca6dc2f38c91a288f1c6a3f79cfb10320180e998d
-  languageName: node
-  linkType: hard
-
-"istanbul-lib-instrument@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "istanbul-lib-instrument@npm:4.0.3"
-  dependencies:
-    "@babel/core": ^7.7.5
-    "@istanbuljs/schema": ^0.1.2
-    istanbul-lib-coverage: ^3.0.0
-    semver: ^6.3.0
-  checksum: 7f1005566a912e33e847576b2c1072d48a7c556810a54d912f3e2f0bd966171e68b30c40b0c1ce6ee9b8864de422d0c10e2d0dfd2d25b48723950cc78cd437c2
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-instrument@npm:^5.0.4, istanbul-lib-instrument@npm:^5.1.0":
   version: 5.2.1
   resolution: "istanbul-lib-instrument@npm:5.2.1"
@@ -21121,7 +20560,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-reports@npm:^3.0.2, istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.1.4":
+"istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.1.4":
   version: 3.1.5
   resolution: "istanbul-reports@npm:3.1.5"
   dependencies:
@@ -21163,52 +20602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-changed-files@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-changed-files@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    execa: ^4.0.0
-    throat: ^5.0.0
-  checksum: 6b679ba45c3fe08f659b59e2c22b6b773436e498aa57e62694ea1f185ed3d4e439bc1831dedca3df7b28d1562eec31ae9d79c65c8caea1dd5e620419da20013d
-  languageName: node
-  linkType: hard
-
-"jest-changed-files@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-changed-files@npm:27.5.1"
+"jest-changed-files@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-changed-files@npm:29.2.0"
   dependencies:
-    "@jest/types": ^27.5.1
     execa: ^5.0.0
-    throat: ^6.0.1
-  checksum: ee2e663da669a1f8a1452626c71b9691a34cc6789bbf6cb04ef4430a63301db806039e93dd5c9cc6c0caa3d3f250ff18ed51e058fc3533a71f73e24f41b5d1bd
-  languageName: node
-  linkType: hard
-
-"jest-circus@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-circus@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    chalk: ^4.0.0
-    co: ^4.6.0
-    dedent: ^0.7.0
-    expect: ^27.5.1
-    is-generator-fn: ^2.0.0
-    jest-each: ^27.5.1
-    jest-matcher-utils: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-runtime: ^27.5.1
-    jest-snapshot: ^27.5.1
-    jest-util: ^27.5.1
-    pretty-format: ^27.5.1
-    slash: ^3.0.0
-    stack-utils: ^2.0.3
-    throat: ^6.0.1
-  checksum: 195b88ff6c74a1ad0f2386bea25700e884f32e05be9211bc197b960e7553a952ab38aff9aafb057c6a92eaa85bde2804e01244278a477b80a99e11f890ee15d9
+    p-limit: ^3.1.0
+  checksum: 2d3ed094ff26e6c3d5151d3bc6314c352c96f2070a3c92278711a214eeae2a6f931d619843f9e3a796c066a2ad1a7cc22f30f9e21c8bbde2fbaddbd10a64f8b8
   languageName: node
   linkType: hard
 
@@ -21239,45 +20639,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-cli@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-cli@npm:26.6.3"
+"jest-circus@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-circus@npm:29.3.1"
   dependencies:
-    "@jest/core": ^26.6.3
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/environment": ^29.3.1
+    "@jest/expect": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
     chalk: ^4.0.0
-    exit: ^0.1.2
-    graceful-fs: ^4.2.4
-    import-local: ^3.0.2
-    is-ci: ^2.0.0
-    jest-config: ^26.6.3
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    prompts: ^2.0.1
-    yargs: ^15.4.1
-  bin:
-    jest: bin/jest.js
-  checksum: 3f62c26b300549115bcfc0393d7d49467d414d200bb211a8843fd48d0296ddbfc5e6fe808c64ad2039127657b662e3ba3db44166341bd5db2d089bf09cf82a2c
+    co: ^4.6.0
+    dedent: ^0.7.0
+    is-generator-fn: ^2.0.0
+    jest-each: ^29.3.1
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    p-limit: ^3.1.0
+    pretty-format: ^29.3.1
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: 01f706a16b2a89fc1af2df984c4bae5286a2540f0ddc3a252c165825161a3c234c11d85d73856693ac3a5789d199fe6574899323cad1b0905a23e4a8a1af5a56
   languageName: node
   linkType: hard
 
-"jest-cli@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-cli@npm:27.5.1"
+"jest-cli@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-cli@npm:29.3.1"
   dependencies:
-    "@jest/core": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/core": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
     chalk: ^4.0.0
     exit: ^0.1.2
     graceful-fs: ^4.2.9
     import-local: ^3.0.2
-    jest-config: ^27.5.1
-    jest-util: ^27.5.1
-    jest-validate: ^27.5.1
+    jest-config: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
     prompts: ^2.0.1
-    yargs: ^16.2.0
+    yargs: ^17.3.1
   peerDependencies:
     node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
   peerDependenciesMeta:
@@ -21285,7 +20689,7 @@ __metadata:
       optional: true
   bin:
     jest: bin/jest.js
-  checksum: 45abaafbe1a01ea4c48953c85d42c961b6e33ef5847e10642713cde97761611b0af56d5a0dcb82abf19c500c6e9b680222a7f953b437e5760ba584521b74f9ea
+  checksum: df1beb004be8913bcabe536b3071ec6568524b8d94ba480423ad4c89c03660163a54615c0e6e557a7894b24ea2c68bf556ee1af06f2cbf5e4e0c9ac6ae223b90
   languageName: node
   linkType: hard
 
@@ -21327,95 +20731,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-config@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-config@npm:26.6.3"
+"jest-config@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-config@npm:29.3.1"
   dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/test-sequencer": ^26.6.3
-    "@jest/types": ^26.6.2
-    babel-jest: ^26.6.3
-    chalk: ^4.0.0
-    deepmerge: ^4.2.2
-    glob: ^7.1.1
-    graceful-fs: ^4.2.4
-    jest-environment-jsdom: ^26.6.2
-    jest-environment-node: ^26.6.2
-    jest-get-type: ^26.3.0
-    jest-jasmine2: ^26.6.3
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    micromatch: ^4.0.2
-    pretty-format: ^26.6.2
-  peerDependencies:
-    ts-node: ">=9.0.0"
-  peerDependenciesMeta:
-    ts-node:
-      optional: true
-  checksum: 7ca34c8d4fa48d9af081e05a2a7a54df5ad03df14dc1edca52f162c65f54fbd3745c14512b3f9dd42b753bd90d4aec4b86a7e1fdd410780bc79d27be3af5a36e
-  languageName: node
-  linkType: hard
-
-"jest-config@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-config@npm:27.5.1"
-  dependencies:
-    "@babel/core": ^7.8.0
-    "@jest/test-sequencer": ^27.5.1
-    "@jest/types": ^27.5.1
-    babel-jest: ^27.5.1
+    "@babel/core": ^7.11.6
+    "@jest/test-sequencer": ^29.3.1
+    "@jest/types": ^29.3.1
+    babel-jest: ^29.3.1
     chalk: ^4.0.0
     ci-info: ^3.2.0
     deepmerge: ^4.2.2
-    glob: ^7.1.1
+    glob: ^7.1.3
     graceful-fs: ^4.2.9
-    jest-circus: ^27.5.1
-    jest-environment-jsdom: ^27.5.1
-    jest-environment-node: ^27.5.1
-    jest-get-type: ^27.5.1
-    jest-jasmine2: ^27.5.1
-    jest-regex-util: ^27.5.1
-    jest-resolve: ^27.5.1
-    jest-runner: ^27.5.1
-    jest-util: ^27.5.1
-    jest-validate: ^27.5.1
+    jest-circus: ^29.3.1
+    jest-environment-node: ^29.3.1
+    jest-get-type: ^29.2.0
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-runner: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
     micromatch: ^4.0.4
     parse-json: ^5.2.0
-    pretty-format: ^27.5.1
+    pretty-format: ^29.3.1
     slash: ^3.0.0
     strip-json-comments: ^3.1.1
   peerDependencies:
+    "@types/node": "*"
     ts-node: ">=9.0.0"
   peerDependenciesMeta:
+    "@types/node":
+      optional: true
     ts-node:
       optional: true
-  checksum: 28867b165f0e25b711a2ade5f261a1b1606b476704ff68a50688eaf3b9c853f69542645cc7e0dab38079ed74e3acc99e38628faf736c1739e44fc869c62c6051
-  languageName: node
-  linkType: hard
-
-"jest-diff@npm:^26.0.0, jest-diff@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-diff@npm:26.6.2"
-  dependencies:
-    chalk: ^4.0.0
-    diff-sequences: ^26.6.2
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 3a9c88c8f308487059788ab1199e12f9b4657168964a2307573760b4d41ab5b851e5bef70125ef5ceddc1e201d6753d6ceae88994c197990dd9307cb7d94b9a1
-  languageName: node
-  linkType: hard
-
-"jest-diff@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-diff@npm:27.5.1"
-  dependencies:
-    chalk: ^4.0.0
-    diff-sequences: ^27.5.1
-    jest-get-type: ^27.5.1
-    pretty-format: ^27.5.1
-  checksum: 48f008c7b4ea7794108319eb61050315b1723e7391cb01e4377c072cadcab10a984cb09d2a6876cb65f100d06c970fd932996192e092b26006f885c00945e7ad
+  checksum: 395f9057cc93e59ea433901c1edc9660eb18e3543c214f4064e2be6e193f8e3db452995d91267fc21b6e53ab85b4f6fbb94db31c5543ec5db1c6dc44b157f950
   languageName: node
   linkType: hard
 
@@ -21431,33 +20781,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^29.2.1":
-  version: 29.2.1
-  resolution: "jest-diff@npm:29.2.1"
+"jest-diff@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-diff@npm:29.3.1"
   dependencies:
     chalk: ^4.0.0
-    diff-sequences: ^29.2.0
+    diff-sequences: ^29.3.1
     jest-get-type: ^29.2.0
-    pretty-format: ^29.2.1
-  checksum: ce76f24f1ed026cf501c920675a783356e92c5ec69795d3b505c7b2ff09aa3271111524dd24bc185178ce8d7e992f2947a2f3e932efd2bef60215f7cbf9e552e
-  languageName: node
-  linkType: hard
-
-"jest-docblock@npm:^26.0.0":
-  version: 26.0.0
-  resolution: "jest-docblock@npm:26.0.0"
-  dependencies:
-    detect-newline: ^3.0.0
-  checksum: 769c9379a906b98afd9fa2feca3a271a06bec62e26bb99e7bba4182ead955b677cbedeaa7b129653dd21ee9473604c40836651f7c4c1265e37ca2a68e01e0f8b
-  languageName: node
-  linkType: hard
-
-"jest-docblock@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-docblock@npm:27.5.1"
-  dependencies:
-    detect-newline: ^3.0.0
-  checksum: 0ce3661a9152497b3a766996eda42edeab51f676fa57ec414a0168fef2a9b1784d056879281c22bca2875c9e63d41327cac0749a8c6e205330e13fcfe0e40316
+    pretty-format: ^29.3.1
+  checksum: 6bbe1fc91f9e7351e995f725029d984392fd0fe2374e64953c2b38a8d857f93b845fcf5d9421cccf2be077f651374f6b7ca6c5970687b2b6521452c15c1e3286
   languageName: node
   linkType: hard
 
@@ -21470,29 +20802,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-each@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-each@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    chalk: ^4.0.0
-    jest-get-type: ^26.3.0
-    jest-util: ^26.6.2
-    pretty-format: ^26.6.2
-  checksum: 93fca8619afba3e9f77903929a5f4ba84a4b4ab22852d062a24e7029038456b2d5bef5761afa1c3ac52a59434484f101d44beae35f3b7e5ec1a8aa695a1c879a
-  languageName: node
-  linkType: hard
-
-"jest-each@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-each@npm:27.5.1"
+"jest-docblock@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-docblock@npm:29.2.0"
   dependencies:
-    "@jest/types": ^27.5.1
-    chalk: ^4.0.0
-    jest-get-type: ^27.5.1
-    jest-util: ^27.5.1
-    pretty-format: ^27.5.1
-  checksum: e382f677e69c15aa906ec0ae2d3d944aa948ce338b2bbcb480b76c16eb12cc2141d78edda48c510363e3b2c507cc2140569c3a163c64ffa34e14cc6a8b37fb81
+    detect-newline: ^3.0.0
+  checksum: 2e5ac2ce86475afa4b0f15fa388206f187d936d0612e45ad29e0aa18158ee951c1d83b1f1ec7deee535f7afa80dbbc875d79398879703045a262dbf8344280de
   languageName: node
   linkType: hard
 
@@ -21509,71 +20824,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-enzyme@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "jest-environment-enzyme@npm:7.1.2"
+"jest-each@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-each@npm:29.3.1"
   dependencies:
-    jest-environment-jsdom: ^24.0.0
-  peerDependencies:
-    enzyme: 3.x
-    jest: ">=22.0.0"
-    react: ^0.13.0 || ^0.14.0 || ^15.0.0 || >=16.x
-  checksum: 4dba286640f9619d9fdc56682dddfcb82538e0d5fe1c26f0fa99c8e6b786b945ee841ea87834f0957f630e8cca95d9487e85e9752f00b78e03deb9616dfe5f24
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom-thirteen@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "jest-environment-jsdom-thirteen@npm:1.0.1"
-  dependencies:
-    jest-mock: ^24.0.0
-    jest-util: ^24.0.0
-    jsdom: ^13.0.0
-  checksum: bd067dcdf9c8ac019911abaf7db8f98dd554a65b0c33317e8b8143bf9f413ce3fb3d4c1ac0e3c62fbe187c4b7e3e3bad6bee2103a22eb53b663451b4f92ebc64
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^24.0.0":
-  version: 24.9.0
-  resolution: "jest-environment-jsdom@npm:24.9.0"
-  dependencies:
-    "@jest/environment": ^24.9.0
-    "@jest/fake-timers": ^24.9.0
-    "@jest/types": ^24.9.0
-    jest-mock: ^24.9.0
-    jest-util: ^24.9.0
-    jsdom: ^11.5.1
-  checksum: 1f428e495000a8e221a11aa43e33dbb8d8073bcd5aa218b08652b12b9c6d39e7f56de1525e14b5c141d76c53fa07b62a6492e307f2513592f27556ac9913d437
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-environment-jsdom@npm:26.6.2"
-  dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-    jsdom: ^16.4.0
-  checksum: 5bbcc49240d59e966adb690ae73bdd7cd650b401a2420837c4770dbd148ddb2d417bcfb9fe0b4f5e85fda5d5d2e93e62788b699350eb6bd924cbf6bc9c833080
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-environment-jsdom@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/fake-timers": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    jest-mock: ^27.5.1
-    jest-util: ^27.5.1
-    jsdom: ^16.6.0
-  checksum: ea759ffa43e96d773983a4172c32c1a3774907723564a30a001c8a85d22d9ed82f6c45329a514152744e8916379c1c4cf9e527297ecfa1e8a4cc4888141b38fd
+    "@jest/types": ^29.3.1
+    chalk: ^4.0.0
+    jest-get-type: ^29.2.0
+    jest-util: ^29.3.1
+    pretty-format: ^29.3.1
+  checksum: c40262f290cf396406289d1a3884a02048b155e3d55da061f0b5d32b385cc6030799c88998733392335dd69c78da8aa6bed82399f5e8db642f5ef9e370425fc3
   languageName: node
   linkType: hard
 
@@ -21593,31 +20853,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-environment-node@npm:26.6.2"
-  dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-  checksum: 887382992bfd8110337cdc6e8a931f647d78363aa1ed777a2d9ff0f2edc468e6cc9e9b9a5d26c772534d0bd8ec41d860e433beb2d6f3c8a8a2cab3007ceec126
-  languageName: node
-  linkType: hard
-
-"jest-environment-node@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-environment-node@npm:27.5.1"
+"jest-environment-jsdom@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-environment-jsdom@npm:29.3.1"
   dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/fake-timers": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/jsdom": ^20.0.0
     "@types/node": "*"
-    jest-mock: ^27.5.1
-    jest-util: ^27.5.1
-  checksum: 3bbc31545436c6bb4a18841241e62036382a7261b9bb8cdc2823ec942a8a3053f98219b3ec2a4a7920bfba347602c16dd16767d9fece915134aee2e30091165c
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+    jsdom: ^20.0.0
+  peerDependencies:
+    canvas: ^2.5.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 14e7af0f1d7e8eba6dc46962fd0b9556f1488776978d6b15e1408c1564bb7f04315ee7e24eed62cb4604fd46cb7e04180561f831273c27c13ab49fef27c1246f
   languageName: node
   linkType: hard
 
@@ -21635,31 +20888,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-enzyme@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "jest-enzyme@npm:7.1.2"
+"jest-environment-node@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-environment-node@npm:29.3.1"
   dependencies:
-    enzyme-matchers: ^7.1.2
-    enzyme-to-json: ^3.3.0
-    jest-environment-enzyme: ^7.1.2
-  peerDependencies:
-    enzyme: ">=3.4.0"
-    jest: ">=22.0.0"
-  checksum: a27a393addf4bbe12166c46d392b0bc7d6f0a0fa9f59e5d34ca2ae5ca671f725a72c1f4a633535a53dfe0878cc9c8c591be8d52dd66998d9e87a6ab4b8a92561
-  languageName: node
-  linkType: hard
-
-"jest-get-type@npm:^26.3.0":
-  version: 26.3.0
-  resolution: "jest-get-type@npm:26.3.0"
-  checksum: 112fc7f962d1c4625a51b6ccfe6e9c8e54ab80816bf8dbf2b1bf25d12c0f75c74ebad0c2f37622aea81019a2087451bfb12a46619ed6717e64ee875ea2de5520
-  languageName: node
-  linkType: hard
-
-"jest-get-type@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-get-type@npm:27.5.1"
-  checksum: 42ee0101336bccfc3c1cff598b603c6006db7876b6117e5bd4a9fb7ffaadfb68febdb9ae68d1c47bc3a4174b070153fc6cfb59df995dcd054e81ace5028a7269
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: b74e1ed332eaab4a15384ddfceb340867aa98cc2c4387d8001fe13087a3586e91f89c79f830f3f4a72547c08283b030cc4267d1a91456ab69b9e29602773b280
   languageName: node
   linkType: hard
 
@@ -21677,106 +20916,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-haste-map@npm:24.9.0"
-  dependencies:
-    "@jest/types": ^24.9.0
-    anymatch: ^2.0.0
-    fb-watchman: ^2.0.0
-    fsevents: ^1.2.7
-    graceful-fs: ^4.1.15
-    invariant: ^2.2.4
-    jest-serializer: ^24.9.0
-    jest-util: ^24.9.0
-    jest-worker: ^24.9.0
-    micromatch: ^3.1.10
-    sane: ^4.0.3
-    walker: ^1.0.7
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 734e52354c95d1982eb4a40e9663119952bd17364b67dcf9757893956c4d3a370199531c29cab70636ab005582172b89d46553cc0afedfd343a7600b4913a81e
-  languageName: node
-  linkType: hard
-
-"jest-haste-map@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-haste-map@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/graceful-fs": ^4.1.2
-    "@types/node": "*"
-    anymatch: ^3.0.3
-    fb-watchman: ^2.0.0
-    fsevents: ^2.1.2
-    graceful-fs: ^4.2.4
-    jest-regex-util: ^26.0.0
-    jest-serializer: ^26.6.2
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    micromatch: ^4.0.2
-    sane: ^4.0.3
-    walker: ^1.0.7
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 85a40d8ecf4bfb659613f107c963c7366cdf6dcceb0ca73dc8ca09fbe0e2a63b976940f573db6260c43011993cb804275f447f268c3bc4b680c08baed300701d
-  languageName: node
-  linkType: hard
-
-"jest-haste-map@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-haste-map@npm:27.5.1"
+"jest-haste-map@npm:^28.1.1, jest-haste-map@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-haste-map@npm:28.1.3"
   dependencies:
-    "@jest/types": ^27.5.1
-    "@types/graceful-fs": ^4.1.2
+    "@jest/types": ^28.1.3
+    "@types/graceful-fs": ^4.1.3
     "@types/node": "*"
     anymatch: ^3.0.3
     fb-watchman: ^2.0.0
     fsevents: ^2.3.2
     graceful-fs: ^4.2.9
-    jest-regex-util: ^27.5.1
-    jest-serializer: ^27.5.1
-    jest-util: ^27.5.1
-    jest-worker: ^27.5.1
+    jest-regex-util: ^28.0.2
+    jest-util: ^28.1.3
+    jest-worker: ^28.1.3
     micromatch: ^4.0.4
-    walker: ^1.0.7
+    walker: ^1.0.8
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: 831ae476fddc6babe64ea3e7f91b4ccee0371c03ec88af5a615023711866abdd496b51344f47c4d02b6b47b433367ca41e9e42d79527b39afec767e8be9e8a63
+  checksum: 6a2beedd31f5d67b508d57fbfdd8858cfbd2f59a61737fc74cac4b9f60120faeda8c40189afba331324b08e10bc2281521292cdb6713fb3cab7770828f4e83d9
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^28.1.1, jest-haste-map@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "jest-haste-map@npm:28.1.3"
+"jest-haste-map@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-haste-map@npm:29.3.1"
   dependencies:
-    "@jest/types": ^28.1.3
+    "@jest/types": ^29.3.1
     "@types/graceful-fs": ^4.1.3
     "@types/node": "*"
     anymatch: ^3.0.3
     fb-watchman: ^2.0.0
     fsevents: ^2.3.2
     graceful-fs: ^4.2.9
-    jest-regex-util: ^28.0.2
-    jest-util: ^28.1.3
-    jest-worker: ^28.1.3
+    jest-regex-util: ^29.2.0
+    jest-util: ^29.3.1
+    jest-worker: ^29.3.1
     micromatch: ^4.0.4
     walker: ^1.0.8
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: 6a2beedd31f5d67b508d57fbfdd8858cfbd2f59a61737fc74cac4b9f60120faeda8c40189afba331324b08e10bc2281521292cdb6713fb3cab7770828f4e83d9
+  checksum: 9f1309a727cf91ac15e329ce8f266c289bc9df4ccf1577f2187cd90ef6dbe4d7e2872432e5a8054a500340458e8c0a03f12a50e415cf305720dbd1e229531e08
   languageName: node
   linkType: hard
 
-"jest-image-snapshot@npm:^4.3.0":
-  version: 4.5.1
-  resolution: "jest-image-snapshot@npm:4.5.1"
+"jest-image-snapshot@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "jest-image-snapshot@npm:6.0.0"
   dependencies:
-    chalk: ^1.1.3
+    chalk: ^4.0.0
     get-stdin: ^5.0.1
     glur: ^1.1.2
     lodash: ^4.17.4
@@ -21786,91 +20976,20 @@ __metadata:
     rimraf: ^2.6.2
     ssim.js: ^3.1.1
   peerDependencies:
-    jest: ">=20 <=27"
-  checksum: 270934f48183e5e0719ab1bfef91bce223f26ae99c68d2478f40caecdb6f43abcbabfa05c785f0a214ef5a24c1a54b9547c50e1c2dd9256e4fdf45589ac63dfd
+    jest: ">=20 <=29"
+  checksum: 2ec7ab03f0857d603b272aedf6fb2d18c85eb3cda43c2388f9f9f51b43b0fe1a18ec1d84c8a3598b11506bbc941caab9a49ab19309ce865d86bcc32ff6a1920e
   languageName: node
   linkType: hard
 
-"jest-jasmine2@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-jasmine2@npm:26.6.3"
-  dependencies:
-    "@babel/traverse": ^7.1.0
-    "@jest/environment": ^26.6.2
-    "@jest/source-map": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    chalk: ^4.0.0
-    co: ^4.6.0
-    expect: ^26.6.2
-    is-generator-fn: ^2.0.0
-    jest-each: ^26.6.2
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-runtime: ^26.6.3
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    pretty-format: ^26.6.2
-    throat: ^5.0.0
-  checksum: 9154ceb08fdfd263a1850af9008b6e5ab4d1242af45fede5a6580fc1db85cd9072a27b609590e76ae8d80e281b2ec96476528e8d37938b92061b746e88330f77
-  languageName: node
-  linkType: hard
-
-"jest-jasmine2@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-jasmine2@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/source-map": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    chalk: ^4.0.0
-    co: ^4.6.0
-    expect: ^27.5.1
-    is-generator-fn: ^2.0.0
-    jest-each: ^27.5.1
-    jest-matcher-utils: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-runtime: ^27.5.1
-    jest-snapshot: ^27.5.1
-    jest-util: ^27.5.1
-    pretty-format: ^27.5.1
-    throat: ^6.0.1
-  checksum: 028172d5d65abf7e8da89c30894112efdd18007a934f30b89e3f35def3764824a9680917996d5e551caa2087589a372a2539777d5554fa3bae6c7e36afec6d4c
-  languageName: node
-  linkType: hard
-
-"jest-junit@npm:^13.0.0":
-  version: 13.2.0
-  resolution: "jest-junit@npm:13.2.0"
+"jest-junit@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "jest-junit@npm:14.0.1"
   dependencies:
     mkdirp: ^1.0.4
     strip-ansi: ^6.0.1
     uuid: ^8.3.2
     xml: ^1.0.1
-  checksum: c77c8fb91d9250ed062cf2e36243b5876bed1bf47a168fa3c73acd9c90ad49929e08fe52fe5b1ef7d65ad29a5e00838a696894b28372f5d89e489934e85ea1b5
-  languageName: node
-  linkType: hard
-
-"jest-leak-detector@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-leak-detector@npm:26.6.2"
-  dependencies:
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 6062c04531126d1dfb3dee21483963dd75a975cb89a105b54cf767cc350b174ffcc9177d8750d14e30f36c475be7d96554c558bdf1f1ae6ad9b93bcea7097312
-  languageName: node
-  linkType: hard
-
-"jest-leak-detector@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-leak-detector@npm:27.5.1"
-  dependencies:
-    jest-get-type: ^27.5.1
-    pretty-format: ^27.5.1
-  checksum: 33ec88ab7d76931ae0a03b18186234114e42a4e9fae748f8a197f7f85b884c2e92ea692c06704b8a469ac26b9c6411a7a1bbc8d34580ed56672a7f6be2681aee
+  checksum: ec06ffad0326f037e62637b0c9935f2668c4657bebf4b81ab3b14867482b754f479c93cd13fe8915b763a7196a3dbc3edf323f062026763e4a79891b617e5945
   languageName: node
   linkType: hard
 
@@ -21884,27 +21003,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-matcher-utils@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-matcher-utils@npm:26.6.2"
-  dependencies:
-    chalk: ^4.0.0
-    jest-diff: ^26.6.2
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 1303fc4dfd80848483b64bafc99beb31678653ad3f34b4c23e982a16016aec1f8a7de4a583044d9c43e59ee7e68e07c57f3a8b51e40fbefe42eafad45cc725ed
-  languageName: node
-  linkType: hard
-
-"jest-matcher-utils@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-matcher-utils@npm:27.5.1"
+"jest-leak-detector@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-leak-detector@npm:29.3.1"
   dependencies:
-    chalk: ^4.0.0
-    jest-diff: ^27.5.1
-    jest-get-type: ^27.5.1
-    pretty-format: ^27.5.1
-  checksum: a2f082062e8bedc9cfe2654177a894ca43768c6db4c0f4efc0d6ec195e305a99e3d868ff54cc61bcd7f1c810d8ee28c9ac6374de21715dc52f136876de739a73
+    jest-get-type: ^29.2.0
+    pretty-format: ^29.3.1
+  checksum: d9d6e107a49cf44d748936a60a3190175b76e5d9aabd9c40c0196dafa8941fd6cb3ef60e57a85f65f5ce466d28b14ad7fceea83f81ec1e8769ae9cde5ceb901a
   languageName: node
   linkType: hard
 
@@ -21920,65 +21025,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-matcher-utils@npm:^29.2.2":
-  version: 29.2.2
-  resolution: "jest-matcher-utils@npm:29.2.2"
+"jest-matcher-utils@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-matcher-utils@npm:29.3.1"
   dependencies:
     chalk: ^4.0.0
-    jest-diff: ^29.2.1
+    jest-diff: ^29.3.1
     jest-get-type: ^29.2.0
-    pretty-format: ^29.2.1
-  checksum: a554e683bcd18cc11e1e018597771051e88cb3bf79cdbb5896f7550bd4c787e473ba4727336db2049fea6149e21546c8f1cde4b78a76eb595199cfeaba6450b1
-  languageName: node
-  linkType: hard
-
-"jest-message-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-message-util@npm:24.9.0"
-  dependencies:
-    "@babel/code-frame": ^7.0.0
-    "@jest/test-result": ^24.9.0
-    "@jest/types": ^24.9.0
-    "@types/stack-utils": ^1.0.1
-    chalk: ^2.0.1
-    micromatch: ^3.1.10
-    slash: ^2.0.0
-    stack-utils: ^1.0.1
-  checksum: 24d0d5bae7bf580179446def5c6a3b1c6ea727b39464d84388393b1b7e653beeac7f2dd3a9fe57d31e780d5555eaf9ed1cf224c3437f3b270c32e7ca37db0013
-  languageName: node
-  linkType: hard
-
-"jest-message-util@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-message-util@npm:26.6.2"
-  dependencies:
-    "@babel/code-frame": ^7.0.0
-    "@jest/types": ^26.6.2
-    "@types/stack-utils": ^2.0.0
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    micromatch: ^4.0.2
-    pretty-format: ^26.6.2
-    slash: ^3.0.0
-    stack-utils: ^2.0.2
-  checksum: f6138d67154137cf3e985b2b469d0c78846cce787fed16b107c177fc9c6eb2606b7bce8e88d2a6bc830262d77469ecf26c70925cefc98dee83b5e8ed08981ff5
-  languageName: node
-  linkType: hard
-
-"jest-message-util@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-message-util@npm:27.5.1"
-  dependencies:
-    "@babel/code-frame": ^7.12.13
-    "@jest/types": ^27.5.1
-    "@types/stack-utils": ^2.0.0
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.9
-    micromatch: ^4.0.4
-    pretty-format: ^27.5.1
-    slash: ^3.0.0
-    stack-utils: ^2.0.3
-  checksum: 447c99061006949bd0c5ac3fcf4dfad11e763712ada1b3df1c1f276d1d4f55b3f7a8bee27591cd1fe23b56220830b2a74f321925d345374d1b7cf9cd536f19b5
+    pretty-format: ^29.3.1
+  checksum: 4efdcc2fa33a403285e26521f795c9c7ad537a30e5b4183a8d97fd9f05251107ef2ef1397dbb420a2517fa91606655cb1103a0c60a52b1f003d928dbea3963e3
   languageName: node
   linkType: hard
 
@@ -21999,43 +21054,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-message-util@npm:^29.2.1":
-  version: 29.2.1
-  resolution: "jest-message-util@npm:29.2.1"
+"jest-message-util@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-message-util@npm:29.3.1"
   dependencies:
     "@babel/code-frame": ^7.12.13
-    "@jest/types": ^29.2.1
+    "@jest/types": ^29.3.1
     "@types/stack-utils": ^2.0.0
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
     micromatch: ^4.0.4
-    pretty-format: ^29.2.1
+    pretty-format: ^29.3.1
     slash: ^3.0.0
     stack-utils: ^2.0.3
-  checksum: 1931a6666b7e650b69f1ee702c8680e7e57becba8be0cb7ac06b35c5a12778338a6702295a39022d975c87a10cc3c7c53f4f3d76b14065ead4a0d4f01ce1f22c
+  checksum: 09291af22383d14a6ac0e4faea6382e07e38a89b67985ac48fd4604037572c847021d471f11f1866fd696875218996740a10a176acc26fbe072e4394d52129e0
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^24.0.0, jest-mock@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-mock@npm:24.9.0"
-  dependencies:
-    "@jest/types": ^24.9.0
-  checksum: a06ae0e76b0d270806e45298fdc9d637fe21d0e0efa8254845ac19a39b7d70a248a6f84b0341f36b2e062e9f225a0ee6ce68c1bdedb5f3a56635585ef8d6beb4
-  languageName: node
-  linkType: hard
-
-"jest-mock@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-mock@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-  checksum: cf77b49efe76cdedc63363ccdbae8bc68e0301fbded669e7b45647b7b7c1dce90985cf6a3a13da161f644523d7d0aad03184c6f39302ee4b52f954a1de37960f
-  languageName: node
-  linkType: hard
-
-"jest-mock@npm:^27.0.6, jest-mock@npm:^27.3.0, jest-mock@npm:^27.5.1":
+"jest-mock@npm:^27.0.6, jest-mock@npm:^27.3.0":
   version: 27.5.1
   resolution: "jest-mock@npm:27.5.1"
   dependencies:
@@ -22055,6 +21091,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-mock@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-mock@npm:29.3.1"
+  dependencies:
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-util: ^29.3.1
+  checksum: d36a54364721e80a95f9af43358e25513d6f052a53b6625bd5238948d9d297ea3c180893cedbcc9e68c1e7b2e9326ac6ae08195b9c0578692a278323fe493ae4
+  languageName: node
+  linkType: hard
+
 "jest-os-detection@npm:^1.3.1":
   version: 1.3.1
   resolution: "jest-os-detection@npm:1.3.1"
@@ -22063,14 +21110,14 @@ __metadata:
   linkType: hard
 
 "jest-pnp-resolver@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "jest-pnp-resolver@npm:1.2.2"
+  version: 1.2.3
+  resolution: "jest-pnp-resolver@npm:1.2.3"
   peerDependencies:
     jest-resolve: "*"
   peerDependenciesMeta:
     jest-resolve:
       optional: true
-  checksum: f6ef6193f7f015830aea3a13a4fd9f53a60746bbaa2d56d18af4afd26ed1b527039c466c8d2447f68b149db8a912b9493a727f29b809ff883b8b5daec16e98ce
+  checksum: 86eec0c78449a2de733a6d3e316d49461af6a858070e113c97f75fb742a48c2396ea94150cbca44159ffd4a959f743a47a8b37a792ef6fdad2cf0a5cba973fac
   languageName: node
   linkType: hard
 
@@ -22112,34 +21159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-raw-loader@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "jest-raw-loader@npm:1.0.1"
-  checksum: 14c5630f34f3f4a0d45036d5a180ca4c971d3428171100c5e4d6a00541bffb5599ee8592dd2c1abbd7e1caed635971b9c59394737dd76402278e41d025793c08
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-regex-util@npm:24.9.0"
-  checksum: 6a4dfda09d47c486eaeafafd2d836bdfc3dbeccef7d3e11d3a230f27078accbe51b694bc64d9efb7654d7f5acaa6ba70416d99d4ec97d33e452aa856d2cda03a
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^26.0.0":
-  version: 26.0.0
-  resolution: "jest-regex-util@npm:26.0.0"
-  checksum: 988675764a08945b90f48e6f5a8640b0d9885a977f100a168061d10037d53808a6cdb7dc8cb6fe9b1332f0523b42bf3edbb6d2cc6c7f7ba582d05d432efb3e60
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^27.0.0, jest-regex-util@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-regex-util@npm:27.5.1"
-  checksum: f9790d417b667b38155c4bbd58f2afc0ad9f774381e5358776df02df3f29564069d4773c7ba050db6826bad8a4cc7ef82c3b4c65bfa508e419fdd063a9682c42
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^28.0.2":
   version: 28.0.2
   resolution: "jest-regex-util@npm:28.0.2"
@@ -22147,25 +21166,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-resolve-dependencies@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-resolve-dependencies@npm:26.6.3"
-  dependencies:
-    "@jest/types": ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-snapshot: ^26.6.2
-  checksum: d8a9392354d7775e2e7234e854069a1e0d21ea616b8de162562b57d77e296b8259952d03f10e2a3031a2369657d5950a807391455dadbafb3f4523804a2585d6
+"jest-regex-util@npm:^29.0.0, jest-regex-util@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-regex-util@npm:29.2.0"
+  checksum: 7e500f4f6fcbf5f46d284e83c9ade2e47707ee51e90d82e531fe10de05924a13dff89280d7184f1050129a070ce6db6336b41e2fd3bd07b8c32a91e8235f9840
   languageName: node
   linkType: hard
 
-"jest-resolve-dependencies@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-resolve-dependencies@npm:27.5.1"
+"jest-resolve-dependencies@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-resolve-dependencies@npm:29.3.1"
   dependencies:
-    "@jest/types": ^27.5.1
-    jest-regex-util: ^27.5.1
-    jest-snapshot: ^27.5.1
-  checksum: 06ba847f9386b0c198bb033a2041fac141dec443ae3c60acdc3426c1844aa4c942770f8f272a1f54686979894e389bc7774d4123bb3a0fbfabe02b7deef9ef62
+    jest-regex-util: ^29.2.0
+    jest-snapshot: ^29.3.1
+  checksum: 93c23ac52ec60bc7c5f672acc19dbed113bf152f36f416e59c6f5cf94266349aeb963657dfd7bddcf29eee4c7151aa8a8b4856e47ee07afda56c02fdea0e19cf
   languageName: node
   linkType: hard
 
@@ -22186,40 +21200,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-resolve@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-resolve@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    jest-pnp-resolver: ^1.2.2
-    jest-util: ^26.6.2
-    read-pkg-up: ^7.0.1
-    resolve: ^1.18.1
-    slash: ^3.0.0
-  checksum: 9ead2ebe49efeb6c428c25b2da0e773844692cbd1b0b55145c950592053113e67b6121f9cfe1dcea901df3cea8c06ee38a464a37a9b611dc9f1ab376ea7be35a
-  languageName: node
-  linkType: hard
-
-"jest-resolve@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-resolve@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.9
-    jest-haste-map: ^27.5.1
-    jest-pnp-resolver: ^1.2.2
-    jest-util: ^27.5.1
-    jest-validate: ^27.5.1
-    resolve: ^1.20.0
-    resolve.exports: ^1.1.0
-    slash: ^3.0.0
-  checksum: 5f9577e424346881964683f22472bd12bd9cfd70e49cb1800ccd31f2e88b0985ed353ca5cc7fb02de9093be2c733ab32de526c99a1192455ddb167afe916efd1
-  languageName: node
-  linkType: hard
-
 "jest-resolve@npm:^28.1.1, jest-resolve@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-resolve@npm:28.1.3"
@@ -22237,60 +21217,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-runner@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-runner@npm:26.6.3"
+"jest-resolve@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-resolve@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/environment": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
     chalk: ^4.0.0
-    emittery: ^0.7.1
-    exit: ^0.1.2
-    graceful-fs: ^4.2.4
-    jest-config: ^26.6.3
-    jest-docblock: ^26.0.0
-    jest-haste-map: ^26.6.2
-    jest-leak-detector: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-resolve: ^26.6.2
-    jest-runtime: ^26.6.3
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    source-map-support: ^0.5.6
-    throat: ^5.0.0
-  checksum: 81ce9ce686623c93e50b34babd12a4fdd05edf00b0478570ae57aa2384942fe6fc1c8ca8ee6715ec15561d350f45ec3c26a19304c20b91d4cf51e73b54b0d347
-  languageName: node
-  linkType: hard
-
-"jest-runner@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-runner@npm:27.5.1"
-  dependencies:
-    "@jest/console": ^27.5.1
-    "@jest/environment": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    chalk: ^4.0.0
-    emittery: ^0.8.1
     graceful-fs: ^4.2.9
-    jest-docblock: ^27.5.1
-    jest-environment-jsdom: ^27.5.1
-    jest-environment-node: ^27.5.1
-    jest-haste-map: ^27.5.1
-    jest-leak-detector: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-resolve: ^27.5.1
-    jest-runtime: ^27.5.1
-    jest-util: ^27.5.1
-    jest-worker: ^27.5.1
-    source-map-support: ^0.5.6
-    throat: ^6.0.1
-  checksum: b79962003c641eaabe4fa8855ee2127009c48f929dfca67f7fbdbc3fe84ea827964d5cbfcfd791405448011014172ea8c4faffe3669a148824ef4fac37838fe8
+    jest-haste-map: ^29.3.1
+    jest-pnp-resolver: ^1.2.2
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
+    resolve: ^1.20.0
+    resolve.exports: ^1.1.0
+    slash: ^3.0.0
+  checksum: 61aca0adae54fa62262f31e98ee5c8be19a9704d3c5684604a8308fa724b4dca54dd82be2d68307d7e95153dbdb459c19bab57fdc8a26da96d966823e97d4d1e
   languageName: node
   linkType: hard
 
@@ -22323,70 +21263,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-runtime@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-runtime@npm:26.6.3"
+"jest-runner@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-runner@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/globals": ^26.6.2
-    "@jest/source-map": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/yargs": ^15.0.0
-    chalk: ^4.0.0
-    cjs-module-lexer: ^0.6.0
-    collect-v8-coverage: ^1.0.0
-    exit: ^0.1.2
-    glob: ^7.1.3
-    graceful-fs: ^4.2.4
-    jest-config: ^26.6.3
-    jest-haste-map: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-mock: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    slash: ^3.0.0
-    strip-bom: ^4.0.0
-    yargs: ^15.4.1
-  bin:
-    jest-runtime: bin/jest-runtime.js
-  checksum: d0fd139d01b9af87b5546586e8c3907d61e95c07d52fe29d7e247f08830a074f1d35c5417449fcfc5c1e5e210dd5c08c48e4789ca7900586e7624c202388a346
-  languageName: node
-  linkType: hard
-
-"jest-runtime@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-runtime@npm:27.5.1"
-  dependencies:
-    "@jest/environment": ^27.5.1
-    "@jest/fake-timers": ^27.5.1
-    "@jest/globals": ^27.5.1
-    "@jest/source-map": ^27.5.1
-    "@jest/test-result": ^27.5.1
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
+    "@jest/console": ^29.3.1
+    "@jest/environment": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
     chalk: ^4.0.0
-    cjs-module-lexer: ^1.0.0
-    collect-v8-coverage: ^1.0.0
-    execa: ^5.0.0
-    glob: ^7.1.3
+    emittery: ^0.13.1
     graceful-fs: ^4.2.9
-    jest-haste-map: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-mock: ^27.5.1
-    jest-regex-util: ^27.5.1
-    jest-resolve: ^27.5.1
-    jest-snapshot: ^27.5.1
-    jest-util: ^27.5.1
-    slash: ^3.0.0
-    strip-bom: ^4.0.0
-  checksum: 22ec24f4b928bdbdb7415ae7470ef523a6379812b8d0500d4d2f2124107d3af2c8fb99842352e320e79a47508a017dd5ab4b713270ad04ba9144c1961672ce29
+    jest-docblock: ^29.2.0
+    jest-environment-node: ^29.3.1
+    jest-haste-map: ^29.3.1
+    jest-leak-detector: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-resolve: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-util: ^29.3.1
+    jest-watcher: ^29.3.1
+    jest-worker: ^29.3.1
+    p-limit: ^3.1.0
+    source-map-support: 0.5.13
+  checksum: ba1edbf662cd5a8b63a0b58842a6daa3e1fbb98dd30bdd1636ec0662c460b49fd3bd6d0851c5b6a899c952b7cffb649ba7d2b25cabcfe9097efbde49123a1694
   languageName: node
   linkType: hard
 
@@ -22420,97 +21322,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-serializer-html@npm:^7.0.0":
-  version: 7.1.0
-  resolution: "jest-serializer-html@npm:7.1.0"
-  dependencies:
-    diffable-html: ^4.1.0
-  checksum: e8383431fbacd5ebb9a7c053c849a0d1e0a183e625aba1ede726260186931b229468dc6456b9b821a137123a88ea3b4325884a5c01c5d78b39c106c3d5c18fcc
-  languageName: node
-  linkType: hard
-
-"jest-serializer@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-serializer@npm:24.9.0"
-  checksum: 9f871cdd08750f1b9f5aef0e8ba58d2045863b4ff2268dd50f3e6d666b6eb5a9a45dad9c6dfad9d2ab2d148f78d11e2ef29d28be85b31a4e8068c718d449f623
-  languageName: node
-  linkType: hard
-
-"jest-serializer@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-serializer@npm:26.6.2"
-  dependencies:
-    "@types/node": "*"
-    graceful-fs: ^4.2.4
-  checksum: 1c67aa1acefdc0b244f2629aaef12a56e563a5c5cb817970d2b97bdad5e8aae187b269c8d356c42ff9711436499c4da71ec8400e6280dab110be8cc5300884b0
-  languageName: node
-  linkType: hard
-
-"jest-serializer@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-serializer@npm:27.5.1"
+"jest-runtime@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-runtime@npm:29.3.1"
   dependencies:
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/globals": ^29.3.1
+    "@jest/source-map": ^29.2.0
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
-    graceful-fs: ^4.2.9
-  checksum: 7a2b634a5a044b3ccf912a17032338309c90b50831a2e500f963b25e9a4ce9b550a1af1fb64f7c9a271ed6a1f951fca37bd0d61a0b286aefe197812193b0d825
-  languageName: node
-  linkType: hard
-
-"jest-snapshot@npm:^26.3.0, jest-snapshot@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-snapshot@npm:26.6.2"
-  dependencies:
-    "@babel/types": ^7.0.0
-    "@jest/types": ^26.6.2
-    "@types/babel__traverse": ^7.0.4
-    "@types/prettier": ^2.0.0
     chalk: ^4.0.0
-    expect: ^26.6.2
-    graceful-fs: ^4.2.4
-    jest-diff: ^26.6.2
-    jest-get-type: ^26.3.0
-    jest-haste-map: ^26.6.2
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-resolve: ^26.6.2
-    natural-compare: ^1.4.0
-    pretty-format: ^26.6.2
-    semver: ^7.3.2
-  checksum: b7b829e7179411cf9a5718d9cf4214e3ac66c41fa17c2f32b7273d12a5e4e85e30504335c4a673f6537af660531fe7c475d09266d63cf19aae3d346809a9a4a2
+    cjs-module-lexer: ^1.0.0
+    collect-v8-coverage: ^1.0.0
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-mock: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    slash: ^3.0.0
+    strip-bom: ^4.0.0
+  checksum: 585cfbfc45280c673ff4137f432f7713284d976a7b769a0a2b520527a93bc15ee59e166255fcbc518387f073019d05eff3b373e33e8d94117ffc98d8ec700ff0
   languageName: node
   linkType: hard
 
-"jest-snapshot@npm:^27.0.2, jest-snapshot@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-snapshot@npm:27.5.1"
+"jest-serializer-html@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "jest-serializer-html@npm:7.1.0"
   dependencies:
-    "@babel/core": ^7.7.2
-    "@babel/generator": ^7.7.2
-    "@babel/plugin-syntax-typescript": ^7.7.2
-    "@babel/traverse": ^7.7.2
-    "@babel/types": ^7.0.0
-    "@jest/transform": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/babel__traverse": ^7.0.4
-    "@types/prettier": ^2.1.5
-    babel-preset-current-node-syntax: ^1.0.0
-    chalk: ^4.0.0
-    expect: ^27.5.1
-    graceful-fs: ^4.2.9
-    jest-diff: ^27.5.1
-    jest-get-type: ^27.5.1
-    jest-haste-map: ^27.5.1
-    jest-matcher-utils: ^27.5.1
-    jest-message-util: ^27.5.1
-    jest-util: ^27.5.1
-    natural-compare: ^1.4.0
-    pretty-format: ^27.5.1
-    semver: ^7.3.2
-  checksum: 819ed445a749065efdfb7c3a5befb9331e550930acdcb8cbe49d5e64a1f05451a91094550aae6840e17afeeefc3660f205f2a7ba780fa0d0ebfa5dcfb1345f15
+    diffable-html: ^4.1.0
+  checksum: e8383431fbacd5ebb9a7c053c849a0d1e0a183e625aba1ede726260186931b229468dc6456b9b821a137123a88ea3b4325884a5c01c5d78b39c106c3d5c18fcc
   languageName: node
   linkType: hard
 
-"jest-snapshot@npm:^28.1.3":
+"jest-snapshot@npm:^28.0.0, jest-snapshot@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-snapshot@npm:28.1.3"
   dependencies:
@@ -22541,25 +21392,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-specific-snapshot@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "jest-specific-snapshot@npm:4.0.0"
+"jest-snapshot@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-snapshot@npm:29.3.1"
   dependencies:
-    jest-snapshot: ^26.3.0
-  peerDependencies:
-    jest: ">= 26.0.0"
-  checksum: 14493536503ac21e61204ee7d7d3ead4f7f621873910a848d0654a31ffa90db8ae43ac8fe40dd32abdf1449696e4290e083eabf09377077ecb6e63c6fb7ce6c3
+    "@babel/core": ^7.11.6
+    "@babel/generator": ^7.7.2
+    "@babel/plugin-syntax-jsx": ^7.7.2
+    "@babel/plugin-syntax-typescript": ^7.7.2
+    "@babel/traverse": ^7.7.2
+    "@babel/types": ^7.3.3
+    "@jest/expect-utils": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/babel__traverse": ^7.0.6
+    "@types/prettier": ^2.1.5
+    babel-preset-current-node-syntax: ^1.0.0
+    chalk: ^4.0.0
+    expect: ^29.3.1
+    graceful-fs: ^4.2.9
+    jest-diff: ^29.3.1
+    jest-get-type: ^29.2.0
+    jest-haste-map: ^29.3.1
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+    natural-compare: ^1.4.0
+    pretty-format: ^29.3.1
+    semver: ^7.3.5
+  checksum: ca65a637fc9547dea580342247f6adcdd83cf9bacc0af7ad2ff2b8a0d3310a09b983708071382f16957d717b90670b22cbf3849c46e2ec0f2c45d769826e12f3
   languageName: node
   linkType: hard
 
-"jest-specific-snapshot@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "jest-specific-snapshot@npm:5.0.0"
+"jest-specific-snapshot@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "jest-specific-snapshot@npm:6.0.0"
   dependencies:
-    jest-snapshot: ^27.0.2
+    jest-snapshot: ^28.0.0
   peerDependencies:
-    jest: ">= 27.0.0"
-  checksum: 7c0d9b21c79984ab7a2e4fc3b194c06e3db0d224acb6747ea84250b88f7d350dff0f5f1358c3b0fe9683fe10aaaf894f63d48b2e9fa4c43c6a3b7bb686d5e087
+    jest: ">= 28.0.0"
+  checksum: ee3d04e352a07fcd17619370338b7beeb8e09ed39fb700ca7b481e0531097770cfab5fb00303a4bd81077ed5c88307cecb001ea0f7a0a59f3281c736796ad6b2
   languageName: node
   linkType: hard
 
@@ -22577,27 +21449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^24.0.0, jest-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-util@npm:24.9.0"
-  dependencies:
-    "@jest/console": ^24.9.0
-    "@jest/fake-timers": ^24.9.0
-    "@jest/source-map": ^24.9.0
-    "@jest/test-result": ^24.9.0
-    "@jest/types": ^24.9.0
-    callsites: ^3.0.0
-    chalk: ^2.0.1
-    graceful-fs: ^4.1.15
-    is-ci: ^2.0.0
-    mkdirp: ^0.5.1
-    slash: ^2.0.0
-    source-map: ^0.6.0
-  checksum: 80bd56f09be4d9d6519b24f8b902f434cefbb1cdc8521bf2f32995a4e9f5abecc88a6172c31494b88df3cd2df3db5daf86271c4f200856aa7dd216e2a69f20fc
-  languageName: node
-  linkType: hard
-
-"jest-util@npm:^26.1.0, jest-util@npm:^26.6.2":
+"jest-util@npm:^26.1.0":
   version: 26.6.2
   resolution: "jest-util@npm:26.6.2"
   dependencies:
@@ -22611,20 +21463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-util@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    chalk: ^4.0.0
-    ci-info: ^3.2.0
-    graceful-fs: ^4.2.9
-    picomatch: ^2.2.3
-  checksum: 0f60cd2a2e09a6646ccd4ff489f1970282c0694724104979e897bd5164f91204726f5408572bf5e759d09e59d5c4e4dc65a643d2b630e06a10402bba07bf2a2e
-  languageName: node
-  linkType: hard
-
 "jest-util@npm:^28.0.0, jest-util@npm:^28.1.1, jest-util@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-util@npm:28.1.3"
@@ -22639,45 +21477,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^29.2.1":
-  version: 29.2.1
-  resolution: "jest-util@npm:29.2.1"
+"jest-util@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-util@npm:29.3.1"
   dependencies:
-    "@jest/types": ^29.2.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
     chalk: ^4.0.0
     ci-info: ^3.2.0
     graceful-fs: ^4.2.9
     picomatch: ^2.2.3
-  checksum: 678ae6089b460156882c0c2f94f46dfcbf9e00d147edee0eb7101a1b38ef36c7a5e7b7c7d8d3aa089a8fa08b2930bf3392c5bb527d229b70a5fd0d48fd091be0
-  languageName: node
-  linkType: hard
-
-"jest-validate@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-validate@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    camelcase: ^6.0.0
-    chalk: ^4.0.0
-    jest-get-type: ^26.3.0
-    leven: ^3.1.0
-    pretty-format: ^26.6.2
-  checksum: 0c8df164641e797f80011e359553411e097ea495b95b41100be00d6c827bfd854e92ef8c528fe4cac0d113055a5075d1409f2616099ec648dbd6809bb0a29c67
-  languageName: node
-  linkType: hard
-
-"jest-validate@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-validate@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
-    camelcase: ^6.2.0
-    chalk: ^4.0.0
-    jest-get-type: ^27.5.1
-    leven: ^3.1.0
-    pretty-format: ^27.5.1
-  checksum: ac5aa45b3ce798e450eda33764fa6d8c75f8794f92005e596928a78847b6013c5a6198ca2c2b4097a9315befb3868d12a52fbe7e6945cc85f81cb824d87c5c59
+  checksum: c03606c389cf6f454962e4670fcb5d346e0cef166d71a6d70cde2ffaff9a0744fbf7b0651a01ac07e5ade790e95937bcaa604601ebb4c8dbf3e4c641027e61d0
   languageName: node
   linkType: hard
 
@@ -22695,6 +21505,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-validate@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-validate@npm:29.3.1"
+  dependencies:
+    "@jest/types": ^29.3.1
+    camelcase: ^6.2.0
+    chalk: ^4.0.0
+    jest-get-type: ^29.2.0
+    leven: ^3.1.0
+    pretty-format: ^29.3.1
+  checksum: 5398f1c324582f290a99f6d68d9345ff9d16bbdcce06dfa4a81b0115aeeef6f9252cb64396c9ab968dafddbe762f68c8874b6c993a991b1c7f6f5e55cccb31a9
+  languageName: node
+  linkType: hard
+
 "jest-vue-preprocessor@npm:^1.7.1":
   version: 1.7.1
   resolution: "jest-vue-preprocessor@npm:1.7.1"
@@ -22710,50 +21534,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-watch-typeahead@npm:^0.6.1":
-  version: 0.6.5
-  resolution: "jest-watch-typeahead@npm:0.6.5"
+"jest-watch-typeahead@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "jest-watch-typeahead@npm:2.2.1"
   dependencies:
-    ansi-escapes: ^4.3.1
+    ansi-escapes: ^6.0.0
     chalk: ^4.0.0
-    jest-regex-util: ^27.0.0
-    jest-watcher: ^27.0.0
-    slash: ^3.0.0
-    string-length: ^4.0.1
-    strip-ansi: ^6.0.0
+    jest-regex-util: ^29.0.0
+    jest-watcher: ^29.0.0
+    slash: ^5.0.0
+    string-length: ^5.0.1
+    strip-ansi: ^7.0.1
   peerDependencies:
-    jest: ^26.0.0 || ^27.0.0
-  checksum: fd298fcc1581d7c34301b54a8891ba70fdc529adbf98e7ed98c5bdd92e7ac63b01e00341101f8f49c1c2f8cce4c6f677a4be1dad3fb1d0c0303b6e8e25717446
-  languageName: node
-  linkType: hard
-
-"jest-watcher@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-watcher@npm:26.6.2"
-  dependencies:
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    ansi-escapes: ^4.2.1
-    chalk: ^4.0.0
-    jest-util: ^26.6.2
-    string-length: ^4.0.1
-  checksum: 3a0caf17f3d586ec7099a576757336e6ba5ac6f2449e66aa1416214b32188970b1fa10f83e1aef58254a30a55a6698cbbb16aa5187c8023516d8bea8833aee12
-  languageName: node
-  linkType: hard
-
-"jest-watcher@npm:^27.0.0, jest-watcher@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-watcher@npm:27.5.1"
-  dependencies:
-    "@jest/test-result": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    ansi-escapes: ^4.2.1
-    chalk: ^4.0.0
-    jest-util: ^27.5.1
-    string-length: ^4.0.1
-  checksum: e42f5e38bc4da56bde6ccec4b13b7646460a3d6b567934e0ca96d72c2ce837223ffbb84a2f8428197da4323870c03f00969237f9b40f83a3072111a8cd66cc4b
+    jest: ^27.0.0 || ^28.0.0 || ^29.0.0
+  checksum: 2f47433ac6dd1dfd3015182b325108bc95e15dfbb577e7730468172b15b7d91be443f4d68a3849963e1f29e96d031eaf2b79cae6f45e64630383129a2d5e2e2d
   languageName: node
   linkType: hard
 
@@ -22773,28 +21567,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-worker@npm:24.9.0"
-  dependencies:
-    merge-stream: ^2.0.0
-    supports-color: ^6.1.0
-  checksum: ea9f4751976d08807d33598244e6c3a60ce5889cdabf1f4e6f3e57dddcf2190978e6284f0865326f64e93677cebac53220d71a52e57d1205c467c6f09efa8bc2
-  languageName: node
-  linkType: hard
-
-"jest-worker@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-worker@npm:26.6.2"
+"jest-watcher@npm:^29.0.0, jest-watcher@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-watcher@npm:29.3.1"
   dependencies:
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
-    merge-stream: ^2.0.0
-    supports-color: ^7.0.0
-  checksum: 07e4dba650381604cda253ab6d5837fe0279c8d68c25884995b45bfe149a7a1e1b5a97f304b4518f257dac2a9ddc1808d57d650649c3ab855e9e60cf824d2970
+    ansi-escapes: ^4.2.1
+    chalk: ^4.0.0
+    emittery: ^0.13.1
+    jest-util: ^29.3.1
+    string-length: ^4.0.1
+  checksum: d3d029762c2d431bcff21635d959eb0aa000cc480e2a47277e8d36c57b8a76f6deab721015948cb8448238331813edcb44bec20f29670f80621709b0c0ca30ef
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^27.4.5, jest-worker@npm:^27.5.1":
+"jest-worker@npm:^27.4.5":
   version: 27.5.1
   resolution: "jest-worker@npm:27.5.1"
   dependencies:
@@ -22816,26 +21605,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest@npm:26.6.3"
+"jest-worker@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-worker@npm:29.3.1"
   dependencies:
-    "@jest/core": ^26.6.3
-    import-local: ^3.0.2
-    jest-cli: ^26.6.3
-  bin:
-    jest: bin/jest.js
-  checksum: 4469f5c426f5b00855e2264dc4fce5ab16c0fab31d2dc6fc829d769ca7ec84a9c74763f7c1d281d085ad55897927a08df2b4778b0df899a66188ff0722e17d29
+    "@types/node": "*"
+    jest-util: ^29.3.1
+    merge-stream: ^2.0.0
+    supports-color: ^8.0.0
+  checksum: 8f089e3283c2a84d70d24caacfcf9986592ebde6757d938aa43a2a9d59607724da16a148d9dee93197a25c2fe4f2ee84ade105a88edc4c168ca2ad7881a56837
   languageName: node
   linkType: hard
 
-"jest@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest@npm:27.5.1"
+"jest@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest@npm:29.3.1"
   dependencies:
-    "@jest/core": ^27.5.1
+    "@jest/core": ^29.3.1
+    "@jest/types": ^29.3.1
     import-local: ^3.0.2
-    jest-cli: ^27.5.1
+    jest-cli: ^29.3.1
   peerDependencies:
     node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
   peerDependenciesMeta:
@@ -22843,7 +21632,7 @@ __metadata:
       optional: true
   bin:
     jest: bin/jest.js
-  checksum: c013d07e911e423612756bc42d376e578b8721d847db38d94344f9cdf8fdaa0241b0a5c2fe1aad7b7758d415e0b9517c1098312f0d03760f123958d5b6cf5597
+  checksum: 97dae1a4346280c7ba6aa361b48d37e6776d338e308c2f188b4493f435d9c87c923658084b86e6c51f7a48bf5000e3879afee46141c8ee6a4275994cabd3a29a
   languageName: node
   linkType: hard
 
@@ -22855,15 +21644,15 @@ __metadata:
   linkType: hard
 
 "joi@npm:^17.3.0":
-  version: 17.6.4
-  resolution: "joi@npm:17.6.4"
+  version: 17.7.0
+  resolution: "joi@npm:17.7.0"
   dependencies:
     "@hapi/hoek": ^9.0.0
     "@hapi/topo": ^5.0.0
     "@sideway/address": ^4.1.3
     "@sideway/formula": ^3.0.0
     "@sideway/pinpoint": ^2.0.0
-  checksum: 187f7e807653c5802db52fc64dd25183ba55db86f97b02507abbc5dc5a4c466ee96c74c0b79b3592fe99fdf9a29b02cf55a95d8292e88a422d5ef059ff6d2673
+  checksum: 7cf12839eeb200d935d969f2a2836df86e2e0e33bd0c1883487157990258b537d10e3b7d7b6048cdd1a046f1a276c562cd11482ecfd08f413c3a770b9a73709a
   languageName: node
   linkType: hard
 
@@ -23002,90 +21791,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsdom@npm:^11.5.1":
-  version: 11.12.0
-  resolution: "jsdom@npm:11.12.0"
-  dependencies:
-    abab: ^2.0.0
-    acorn: ^5.5.3
-    acorn-globals: ^4.1.0
-    array-equal: ^1.0.0
-    cssom: ">= 0.3.2 < 0.4.0"
-    cssstyle: ^1.0.0
-    data-urls: ^1.0.0
-    domexception: ^1.0.1
-    escodegen: ^1.9.1
-    html-encoding-sniffer: ^1.0.2
-    left-pad: ^1.3.0
-    nwsapi: ^2.0.7
-    parse5: 4.0.0
-    pn: ^1.1.0
-    request: ^2.87.0
-    request-promise-native: ^1.0.5
-    sax: ^1.2.4
-    symbol-tree: ^3.2.2
-    tough-cookie: ^2.3.4
-    w3c-hr-time: ^1.0.1
-    webidl-conversions: ^4.0.2
-    whatwg-encoding: ^1.0.3
-    whatwg-mimetype: ^2.1.0
-    whatwg-url: ^6.4.1
-    ws: ^5.2.0
-    xml-name-validator: ^3.0.0
-  checksum: a909aa35527a337a55ddd66f99a0993d24e5a42ce5ef1ae0724a5fef5c9b4799f763dfd65d33798ca1feb83c604716aa054241e2b4b2274de2caa9566156566a
-  languageName: node
-  linkType: hard
-
-"jsdom@npm:^13.0.0":
-  version: 13.2.0
-  resolution: "jsdom@npm:13.2.0"
-  dependencies:
-    abab: ^2.0.0
-    acorn: ^6.0.4
-    acorn-globals: ^4.3.0
-    array-equal: ^1.0.0
-    cssom: ^0.3.4
-    cssstyle: ^1.1.1
-    data-urls: ^1.1.0
-    domexception: ^1.0.1
-    escodegen: ^1.11.0
-    html-encoding-sniffer: ^1.0.2
-    nwsapi: ^2.0.9
-    parse5: 5.1.0
-    pn: ^1.1.0
-    request: ^2.88.0
-    request-promise-native: ^1.0.5
-    saxes: ^3.1.5
-    symbol-tree: ^3.2.2
-    tough-cookie: ^2.5.0
-    w3c-hr-time: ^1.0.1
-    w3c-xmlserializer: ^1.0.1
-    webidl-conversions: ^4.0.2
-    whatwg-encoding: ^1.0.5
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^7.0.0
-    ws: ^6.1.2
-    xml-name-validator: ^3.0.0
-  checksum: e4bd3120f5c1077f6ace1ac2e069a104f48ff4df6507097b6740990c783ecec6017122dd9904f2500805d8003932020d32c9f922b21c3009864dfb70fbeac6bf
-  languageName: node
-  linkType: hard
-
-"jsdom@npm:^16.4.0, jsdom@npm:^16.6.0":
-  version: 16.7.0
-  resolution: "jsdom@npm:16.7.0"
+"jsdom@npm:^19.0.0":
+  version: 19.0.0
+  resolution: "jsdom@npm:19.0.0"
   dependencies:
     abab: ^2.0.5
-    acorn: ^8.2.4
+    acorn: ^8.5.0
     acorn-globals: ^6.0.0
-    cssom: ^0.4.4
+    cssom: ^0.5.0
     cssstyle: ^2.3.0
-    data-urls: ^2.0.0
-    decimal.js: ^10.2.1
-    domexception: ^2.0.1
+    data-urls: ^3.0.1
+    decimal.js: ^10.3.1
+    domexception: ^4.0.0
     escodegen: ^2.0.0
-    form-data: ^3.0.0
-    html-encoding-sniffer: ^2.0.1
-    http-proxy-agent: ^4.0.1
+    form-data: ^4.0.0
+    html-encoding-sniffer: ^3.0.0
+    http-proxy-agent: ^5.0.0
     https-proxy-agent: ^5.0.0
     is-potential-custom-element-name: ^1.0.1
     nwsapi: ^2.2.0
@@ -23094,59 +21815,58 @@ __metadata:
     symbol-tree: ^3.2.4
     tough-cookie: ^4.0.0
     w3c-hr-time: ^1.0.2
-    w3c-xmlserializer: ^2.0.0
-    webidl-conversions: ^6.1.0
-    whatwg-encoding: ^1.0.5
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^8.5.0
-    ws: ^7.4.6
-    xml-name-validator: ^3.0.0
+    w3c-xmlserializer: ^3.0.0
+    webidl-conversions: ^7.0.0
+    whatwg-encoding: ^2.0.0
+    whatwg-mimetype: ^3.0.0
+    whatwg-url: ^10.0.0
+    ws: ^8.2.3
+    xml-name-validator: ^4.0.0
   peerDependencies:
     canvas: ^2.5.0
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: e9ba6ea5f5e0d18647ccedec16bc3c69c8c739732ffcb27c66ffd3cc3f876add291ca4f0b9c209ace939ce2aa3ba9e4d67b7f05317921a4d3eab02fe1cc164ef
+  checksum: c39c71aa64df60f2b609adfc61fa4406c1a710da3278c730b0093181d1d09c1e6ba5551e32d78259a21800e10c2984c571777d6f7080249a5d21287be4f17bd9
   languageName: node
   linkType: hard
 
-"jsdom@npm:^19.0.0":
-  version: 19.0.0
-  resolution: "jsdom@npm:19.0.0"
+"jsdom@npm:^20.0.0":
+  version: 20.0.2
+  resolution: "jsdom@npm:20.0.2"
   dependencies:
-    abab: ^2.0.5
-    acorn: ^8.5.0
-    acorn-globals: ^6.0.0
+    abab: ^2.0.6
+    acorn: ^8.8.0
+    acorn-globals: ^7.0.0
     cssom: ^0.5.0
     cssstyle: ^2.3.0
-    data-urls: ^3.0.1
-    decimal.js: ^10.3.1
+    data-urls: ^3.0.2
+    decimal.js: ^10.4.1
     domexception: ^4.0.0
     escodegen: ^2.0.0
     form-data: ^4.0.0
     html-encoding-sniffer: ^3.0.0
     http-proxy-agent: ^5.0.0
-    https-proxy-agent: ^5.0.0
+    https-proxy-agent: ^5.0.1
     is-potential-custom-element-name: ^1.0.1
-    nwsapi: ^2.2.0
-    parse5: 6.0.1
-    saxes: ^5.0.1
+    nwsapi: ^2.2.2
+    parse5: ^7.1.1
+    saxes: ^6.0.0
     symbol-tree: ^3.2.4
-    tough-cookie: ^4.0.0
-    w3c-hr-time: ^1.0.2
+    tough-cookie: ^4.1.2
     w3c-xmlserializer: ^3.0.0
     webidl-conversions: ^7.0.0
     whatwg-encoding: ^2.0.0
     whatwg-mimetype: ^3.0.0
-    whatwg-url: ^10.0.0
-    ws: ^8.2.3
+    whatwg-url: ^11.0.0
+    ws: ^8.9.0
     xml-name-validator: ^4.0.0
   peerDependencies:
     canvas: ^2.5.0
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: c39c71aa64df60f2b609adfc61fa4406c1a710da3278c730b0093181d1d09c1e6ba5551e32d78259a21800e10c2984c571777d6f7080249a5d21287be4f17bd9
+  checksum: c6707fdfe92504dbef8ec1727ca638bba5b6c7e01b5fdda48d385e2e8f7e3d5b92f13380448ae9f28e2643a69010bef8ca0f691532390f99d4b722edfe1c8d76
   languageName: node
   linkType: hard
 
@@ -23227,11 +21947,11 @@ __metadata:
   linkType: hard
 
 "json-stable-stringify@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "json-stable-stringify@npm:1.0.1"
+  version: 1.0.2
+  resolution: "json-stable-stringify@npm:1.0.2"
   dependencies:
-    jsonify: ~0.0.0
-  checksum: 3127db54f6507096645411ad9e15abd6091b8a94d675321d5c28ecefe3ddabd07a255d12f27e140dd8af3eb07198c81e4d9a29a14f1f9342546a3e94881bb4f6
+    jsonify: ^0.0.1
+  checksum: 502d021c3c59c09587faa40d7693d77c00460fd6c68bae95d6e35804909ec8c4aec71b136d3a09df61a7ebf803eb6e820f23ede76b77e74b8b02c76afb2ada8c
   languageName: node
   linkType: hard
 
@@ -23310,7 +22030,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonify@npm:~0.0.0":
+"jsonify@npm:^0.0.1":
   version: 0.0.1
   resolution: "jsonify@npm:0.0.1"
   checksum: 7f5499cdd59a0967ed35bda48b7cec43d850bbc8fb955cdd3a1717bb0efadbe300724d5646de765bb7a99fc1c3ab06eb80d93503c6faaf99b4ff50a3326692f6
@@ -23421,11 +22141,11 @@ __metadata:
   linkType: hard
 
 "keyv@npm:^4.5.0":
-  version: 4.5.0
-  resolution: "keyv@npm:4.5.0"
+  version: 4.5.2
+  resolution: "keyv@npm:4.5.2"
   dependencies:
     json-buffer: 3.0.1
-  checksum: 78d6f885352dffa2b85dc9c1c4bbc4d68d8971edea4ca29b0c10d6a447e04b9ac0b2030325ca00377510a7e3b47ecc088dacdc346d96dc00c9fe9c42dba7252f
+  checksum: b633bf53a5afa5591f383d326746226e110e59f13c7e1e8d3e3c9580d2c2345c5eefc21cce168cd5be7fa34b9163e391927146fbd2b7ee7aa2f3aa02b7f0a7de
   languageName: node
   linkType: hard
 
@@ -23546,13 +22266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"left-pad@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "left-pad@npm:1.3.0"
-  checksum: 3fb59c76e281a2f5c810ad71dbbb8eba8b10c6cf94733dc7f27b8c516a5376cacea53543e76f6ae477d866c8954b27f1e15ca349424c2542474eb5bb1d2b6955
-  languageName: node
-  linkType: hard
-
 "lerna@npm:^3.22.1":
   version: 3.22.1
   resolution: "lerna@npm:3.22.1"
@@ -23953,32 +22666,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loader-utils@npm:3.2.0, loader-utils@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "loader-utils@npm:3.2.0"
-  checksum: 573f7059f283b24b2b68cd230d9f0ba87315da8ecc7885734ea5f108fc83c7882e4eb8f8feab65f7db1661ab540f5aea778f48d18b7aadc24c37be77b2ff70a0
+"loader-utils@npm:3.2.1, loader-utils@npm:^3.2.0":
+  version: 3.2.1
+  resolution: "loader-utils@npm:3.2.1"
+  checksum: d3e1f217d160e8e894a0385a33500d4ce14065e8ffb250f5a81ae65bc2c3baa50625ec34182ba4417b46b4ac6725aed64429e1104d6401e074af2aa1dd018394
   languageName: node
   linkType: hard
 
 "loader-utils@npm:^1.0.2, loader-utils@npm:^1.1.0, loader-utils@npm:^1.2.3":
-  version: 1.4.0
-  resolution: "loader-utils@npm:1.4.0"
+  version: 1.4.2
+  resolution: "loader-utils@npm:1.4.2"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^1.0.1
-  checksum: b3f383612c23c0adf535d61709fb3eaf864afa54dae45608e3831156b89b4b05a0a4ddc6db7d742071babe872750ba3f4f9ce89326d94f6e096dbed978fa424e
+  checksum: 2b726088b5526f7605615e3e28043ae9bbd2453f4a85898e1151f3c39dbf7a2b65d09f3996bc588d92ac7e717ded529d3e1ea3ea42c433393be84a58234a2f53
   languageName: node
   linkType: hard
 
-"loader-utils@npm:^2.0.0":
-  version: 2.0.3
-  resolution: "loader-utils@npm:2.0.3"
+"loader-utils@npm:^2.0.0, loader-utils@npm:^2.0.3, loader-utils@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "loader-utils@npm:2.0.4"
   dependencies:
     big.js: ^5.2.2
     emojis-list: ^3.0.0
     json5: ^2.1.2
-  checksum: 6a674996d134ebc267b0bf4b846e99b4b0d53cebc15ecc971ef2ac5977570aae3e6b7d61f4809e135dca76f5e0b29084856e8723b1599762bffd4301e4a28b95
+  checksum: d5654a77f9d339ec2a03d88221a5a695f337bf71eb8dea031b3223420bb818964ba8ed0069145c19b095f6c8b8fd386e602a3fc7ca987042bd8bb1dcc90d7100
   languageName: node
   linkType: hard
 
@@ -24036,31 +22749,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash._baseisequal@npm:^3.0.0":
-  version: 3.0.7
-  resolution: "lodash._baseisequal@npm:3.0.7"
-  dependencies:
-    lodash.isarray: ^3.0.0
-    lodash.istypedarray: ^3.0.0
-    lodash.keys: ^3.0.0
-  checksum: 7b514d2ab579602f39b70e5f09039666f6617175595ef686da34f6ff5ea924b1c69d2022b83df91cf1b40a69a0ccd9682c376d1acb2fff7c21c6c9cf2c583e27
-  languageName: node
-  linkType: hard
-
-"lodash._bindcallback@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "lodash._bindcallback@npm:3.0.1"
-  checksum: c135bc26cfbe6fd11b3d2ffc7b8307fbbcecd3fbb45f6ecec301614207a164388fd7ee3f07e3ad0745bbe4c8d3acefc61b967a07b2d43b5b5f5dfdf661ed945a
-  languageName: node
-  linkType: hard
-
-"lodash._getnative@npm:^3.0.0":
-  version: 3.9.1
-  resolution: "lodash._getnative@npm:3.9.1"
-  checksum: 858cff25fc52353a1e39f44ff87fc1e1e8a85da513818f0caebe50c2795cf5cbce9d71a3e91ec0972bee3b174a74d697a38c6bb16d0b416dcc32322ae152a104
-  languageName: node
-  linkType: hard
-
 "lodash._reinterpolate@npm:^3.0.0":
   version: 3.0.0
   resolution: "lodash._reinterpolate@npm:3.0.0"
@@ -24131,20 +22819,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isarguments@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "lodash.isarguments@npm:3.1.0"
-  checksum: 5e8f95ba10975900a3920fb039a3f89a5a79359a1b5565e4e5b4310ed6ebe64011e31d402e34f577eca983a1fc01ff86c926e3cbe602e1ddfc858fdd353e62d8
-  languageName: node
-  linkType: hard
-
-"lodash.isarray@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "lodash.isarray@npm:3.0.4"
-  checksum: c6daf1a1e450f20b1426595dc33cfe415d68c1267d3d081253e77430972865ee8d0ab98d777afb448350c677999802d43a7690eb16986e64b8450efc31e5667d
-  languageName: node
-  linkType: hard
-
 "lodash.isboolean@npm:^3.0.3":
   version: 3.0.3
   resolution: "lodash.isboolean@npm:3.0.3"
@@ -24152,16 +22826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isequal@npm:^3.0":
-  version: 3.0.4
-  resolution: "lodash.isequal@npm:3.0.4"
-  dependencies:
-    lodash._baseisequal: ^3.0.0
-    lodash._bindcallback: ^3.0.0
-  checksum: 27c7792f5fd49f14032537dba47d49bdf523dbce336c384e6320cfe3fe39141b54d4fed8565bedf1f6b7bfa2190fb0da49d8f454ecab1d64dd2865dfaaa55a95
-  languageName: node
-  linkType: hard
-
 "lodash.isequal@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.isequal@npm:4.5.0"
@@ -24211,24 +22875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.istypedarray@npm:^3.0.0":
-  version: 3.0.6
-  resolution: "lodash.istypedarray@npm:3.0.6"
-  checksum: 8e4216dfe7f2acae00acc1fe1078ad9babb5b0d4852d508f65c59ce66884328992be23316b4cde6a2e73bbd684471019e79afaf33752912d3dadd9d268a97800
-  languageName: node
-  linkType: hard
-
-"lodash.keys@npm:^3.0.0":
-  version: 3.1.2
-  resolution: "lodash.keys@npm:3.1.2"
-  dependencies:
-    lodash._getnative: ^3.0.0
-    lodash.isarguments: ^3.0.0
-    lodash.isarray: ^3.0.0
-  checksum: ac4c70f0ac158d282ca0097a8ac8e2e433f6d727635ee53b11585ce30c0bc264e7eb0ac6155aad69715f1ab73dd8d00322769d79120afd40adaa383f9bee705a
-  languageName: node
-  linkType: hard
-
 "lodash.keys@npm:^4.0.8":
   version: 4.2.0
   resolution: "lodash.keys@npm:4.2.0"
@@ -24311,7 +22957,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.21, lodash@npm:4.x, lodash@npm:^4.17.12, lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.2.1, lodash@npm:^4.7.0":
+"lodash@npm:4.17.21, lodash@npm:4.x, lodash@npm:^4.17.12, lodash@npm:^4.17.13, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.2.1":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -24348,9 +22994,9 @@ __metadata:
   linkType: hard
 
 "loglevel@npm:^1.8.0":
-  version: 1.8.0
-  resolution: "loglevel@npm:1.8.0"
-  checksum: e67645b38062e73ef72b37664f0cd43e9deea2e9e4a161d67998578f5b758c47740ec976e9dca7d2d05b23414df8004ded8955da50b6ad1dc9628739f645e905
+  version: 1.8.1
+  resolution: "loglevel@npm:1.8.1"
+  checksum: 21069436c97448a1801b154a77d19ada212225c513d94f0471bfe299c981ffd4dc0d21e6211f9250bd6209ba9837bfe0d40d9295c673d73e3c543ec6b1c5d9ef
   languageName: node
   linkType: hard
 
@@ -24362,9 +23008,9 @@ __metadata:
   linkType: hard
 
 "longest-streak@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "longest-streak@npm:3.0.1"
-  checksum: 5645ceb94b0fb0ea7ed42ae3d285465a6495319d6f12a40b334e6d3485c5aae36bca09e6ba1c7fc3792cd0373735bb9e7ea129b3828b3c5642f21030c25b6cda
+  version: 3.1.0
+  resolution: "longest-streak@npm:3.1.0"
+  checksum: 7c2f02d0454b52834d1bcedef79c557bd295ee71fdabb02d041ff3aa9da48a90b5df7c0409156dedbc4df9b65da18742652aaea4759d6ece01f08971af6a7eaa
   languageName: node
   linkType: hard
 
@@ -24444,9 +23090,9 @@ __metadata:
   linkType: hard
 
 "lru-cache@npm:^7.7.1":
-  version: 7.14.0
-  resolution: "lru-cache@npm:7.14.0"
-  checksum: 88f1a8c2fd3bafc69121104740dcebc71e4ace97fb03f0ccf3b7d52df7dc10eedb78951af74f08437cf5fdb8c50d5956a0bcc944a073540f027efd8357f87cd1
+  version: 7.14.1
+  resolution: "lru-cache@npm:7.14.1"
+  checksum: d54e01ae3bedbd7bb0562fe48e61e509c86102bcc2c8babba1ba5498a6859a796adc697fa917459a455969a45c7d8645b29d938c0142b97fa3b5fb9c234d2390
   languageName: node
   linkType: hard
 
@@ -24516,7 +23162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.26.0, magic-string@npm:^0.26.1, magic-string@npm:^0.26.2, magic-string@npm:^0.26.7":
+"magic-string@npm:^0.26.0, magic-string@npm:^0.26.1, magic-string@npm:^0.26.7":
   version: 0.26.7
   resolution: "magic-string@npm:0.26.7"
   dependencies:
@@ -24745,11 +23391,11 @@ __metadata:
   linkType: hard
 
 "marked@npm:^4.0.12":
-  version: 4.1.1
-  resolution: "marked@npm:4.1.1"
+  version: 4.2.2
+  resolution: "marked@npm:4.2.2"
   bin:
     marked: bin/marked.js
-  checksum: 3c614fd0d11534e9b08ce5411a1e280379334392bdae4df30d5805d275c1bb29c1e3c8cc4febc898be7bb3735b83e36bb403e144fce8cd0f895dc796c33453f5
+  checksum: 18aa3837d76e59f74de771ef0cc2a98fc7cc0e39b41aeccf9925fe650a8c92605b565c49a5eab90b397270acef7db71661bb4dcdd83ef06367d4cc2777be996e
   languageName: node
   linkType: hard
 
@@ -24970,6 +23616,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.0.28":
+  version: 2.0.28
+  resolution: "mdn-data@npm:2.0.28"
+  checksum: 20000932bc4cd1cde9cba4e23f08cc4f816398af4c15ec81040ed25421d6bf07b5cf6b17095972577fb498988f40f4cb589e3169b9357bb436a12d8e07e5ea7b
+  languageName: node
+  linkType: hard
+
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -24987,11 +23640,11 @@ __metadata:
   linkType: hard
 
 "memfs@npm:^3.2.2, memfs@npm:^3.4.1, memfs@npm:^3.4.3":
-  version: 3.4.7
-  resolution: "memfs@npm:3.4.7"
+  version: 3.4.11
+  resolution: "memfs@npm:3.4.11"
   dependencies:
     fs-monkey: ^1.0.3
-  checksum: 56d85a1e6f808218096c17160eb7db694559a6307b76134e48a4927b7f3a3963941f2d86bac34f681cb16fc9d5010f0b7b42523c9b647451887be285a2348ea3
+  checksum: 31792e27e6622d63e44aafccf9650d432ba51bcdfddf6ebefcf5fe7c5279da8a3d5481b1597bd21331e68f37c2040a496066c972cc66f18a5022d265c800d395
   languageName: node
   linkType: hard
 
@@ -25474,7 +24127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
+"micromatch@npm:^3.1.10":
   version: 3.1.10
   resolution: "micromatch@npm:3.1.10"
   dependencies:
@@ -25610,7 +24263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:2 || 3, minimatch@npm:^3.0.0, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+"minimatch@npm:2 || 3, minimatch@npm:^3.0.0, minimatch@npm:^3.0.2, minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
   dependencies:
@@ -25667,7 +24320,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
+"minimist@npm:^1.1.0, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
   version: 1.2.7
   resolution: "minimist@npm:1.2.7"
   checksum: 8808da67ca50ee19ab2d69051d77ee78572e67297fd8a1635ecc757a15106ccdfb5b8c4d11d84750120142f1684e5329a141295728c755e5d149eedd73cc6572
@@ -25877,10 +24530,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mock-fs@npm:^4.13.0":
-  version: 4.14.0
-  resolution: "mock-fs@npm:4.14.0"
-  checksum: a23bc2ce74f2a01d02053fb20aecc2ea359e62580cd15b5e1029b55929802e2770bbd683ccdc5c1eabb5cecbf452196bb81a0ef61c4629dc819023e10d8303c6
+"mock-fs@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "mock-fs@npm:5.2.0"
+  checksum: e917e71295ee9d805c7d9ab0214a66658db0212f35731ba0c75dc1ccbb9964e6787a6d725561f05fcf569c64cf4a1176f5ce438f98b009227520f646f8abf174
   languageName: node
   linkType: hard
 
@@ -25952,7 +24605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mri@npm:^1.1.0":
+"mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
   checksum: a3d32379c2554cf7351db6237ddc18dc9e54e4214953f3da105b97dc3babe0deb3ffe99cf409b38ea47cc29f9430561ba6b53b24ab8f9ce97a4b50409e4a50e7
@@ -26061,7 +24714,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1, nan@npm:^2.14.0":
+"nan@npm:^2.14.0":
   version: 2.17.0
   resolution: "nan@npm:2.17.0"
   dependencies:
@@ -26105,6 +24758,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: f6cef26f5044515754802c0fc475d81426f3b90fe88c20fabe08771ce1f736ce46e0397c10acb569a4dd0acb84c7f1ee70676122f95d5bfdd747af3a6c6bbaa8
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -26173,23 +24833,23 @@ __metadata:
   linkType: hard
 
 "next@npm:^12.2.4":
-  version: 12.3.1
-  resolution: "next@npm:12.3.1"
-  dependencies:
-    "@next/env": 12.3.1
-    "@next/swc-android-arm-eabi": 12.3.1
-    "@next/swc-android-arm64": 12.3.1
-    "@next/swc-darwin-arm64": 12.3.1
-    "@next/swc-darwin-x64": 12.3.1
-    "@next/swc-freebsd-x64": 12.3.1
-    "@next/swc-linux-arm-gnueabihf": 12.3.1
-    "@next/swc-linux-arm64-gnu": 12.3.1
-    "@next/swc-linux-arm64-musl": 12.3.1
-    "@next/swc-linux-x64-gnu": 12.3.1
-    "@next/swc-linux-x64-musl": 12.3.1
-    "@next/swc-win32-arm64-msvc": 12.3.1
-    "@next/swc-win32-ia32-msvc": 12.3.1
-    "@next/swc-win32-x64-msvc": 12.3.1
+  version: 12.3.3
+  resolution: "next@npm:12.3.3"
+  dependencies:
+    "@next/env": 12.3.3
+    "@next/swc-android-arm-eabi": 12.3.3
+    "@next/swc-android-arm64": 12.3.3
+    "@next/swc-darwin-arm64": 12.3.3
+    "@next/swc-darwin-x64": 12.3.3
+    "@next/swc-freebsd-x64": 12.3.3
+    "@next/swc-linux-arm-gnueabihf": 12.3.3
+    "@next/swc-linux-arm64-gnu": 12.3.3
+    "@next/swc-linux-arm64-musl": 12.3.3
+    "@next/swc-linux-x64-gnu": 12.3.3
+    "@next/swc-linux-x64-musl": 12.3.3
+    "@next/swc-win32-arm64-msvc": 12.3.3
+    "@next/swc-win32-ia32-msvc": 12.3.3
+    "@next/swc-win32-x64-msvc": 12.3.3
     "@swc/helpers": 0.4.11
     caniuse-lite: ^1.0.30001406
     postcss: 8.4.14
@@ -26237,7 +24897,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: a59628271f9d7eb94d49692f8d3d1201066c5d80ceed41699e1346a70760aef8c29763229820389cbb7accdb2b95076ab6762e1952e05f0d21b16db28897e56f
+  checksum: 7af340ca49cf270e4b37cdd372c16a7ba1a3cadb1124f0a7a65a49d6fe8b4786070b31064c8e0baa1d4fd765788ed5249d6b31d4455962ab9e5657857f5bd15b
   languageName: node
   linkType: hard
 
@@ -26308,6 +24968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch-native@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "node-fetch-native@npm:1.0.1"
+  checksum: 27841116388ea5309037400de7fa1003712e974dc57a048f78e5fc659fa80095403f34051c069096a9bd705c7445876d88624121365847f617520325693d67c8
+  languageName: node
+  linkType: hard
+
 "node-fetch-npm@npm:^2.0.2":
   version: 2.0.4
   resolution: "node-fetch-npm@npm:2.0.4"
@@ -26448,20 +25115,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-notifier@npm:^8.0.0":
-  version: 8.0.2
-  resolution: "node-notifier@npm:8.0.2"
-  dependencies:
-    growly: ^1.3.0
-    is-wsl: ^2.2.0
-    semver: ^7.3.2
-    shellwords: ^0.1.1
-    uuid: ^8.3.0
-    which: ^2.0.2
-  checksum: 8df8618628c14ef26214a376dbde425264b92ae5e5944d21807f41e3d2ed3ff29f6c5aba089f4a5f22328b2157aa874e93f2304a2134b1ee59508cedf7e889bb
-  languageName: node
-  linkType: hard
-
 "node-releases@npm:^2.0.6":
   version: 2.0.6
   resolution: "node-releases@npm:2.0.6"
@@ -26527,15 +25180,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "normalize-path@npm:2.1.1"
-  dependencies:
-    remove-trailing-separator: ^1.0.1
-  checksum: db814326ff88057437233361b4c7e9cac7b54815b051b57f2d341ce89b1d8ec8cbd43e7fa95d7652b3b69ea8fcc294b89b8530d556a84d1bdace94229e1e9a8b
-  languageName: node
-  linkType: hard
-
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -26769,7 +25413,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nwsapi@npm:^2.0.7, nwsapi@npm:^2.0.9, nwsapi@npm:^2.2.0":
+"nwsapi@npm:^2.2.0, nwsapi@npm:^2.2.2":
   version: 2.2.2
   resolution: "nwsapi@npm:2.2.2"
   checksum: f7c4fedb0dc0786204ee99f440e9827d6e01a0c0322e93b5c9a9a382dd0bd9650d98ca3d1967a77554e3ec1f9a46a20cfea80a41fb00e91c5101c53d8b2c9aed
@@ -26863,7 +25507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-is@npm:^1.0.1, object-is@npm:^1.0.2, object-is@npm:^1.1.2, object-is@npm:^1.1.4":
+"object-is@npm:^1.0.1, object-is@npm:^1.0.2, object-is@npm:^1.1.2, object-is@npm:^1.1.5":
   version: 1.1.5
   resolution: "object-is@npm:1.1.5"
   dependencies:
@@ -26902,46 +25546,46 @@ __metadata:
   linkType: hard
 
 "object.entries@npm:^1.1.1, object.entries@npm:^1.1.2, object.entries@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "object.entries@npm:1.1.5"
+  version: 1.1.6
+  resolution: "object.entries@npm:1.1.6"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-  checksum: 308c07970818b0fb2b0ed92120b8fad76fb69a63c853592eac48c8437bb2385bc43f00b80d263aa2920b352c66c944018df7221099fc8e2d3bfb778566ca4ebb
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
+  checksum: 8782c71db3a068ccbae9e0541e6b4ac2c25dc67c63f97b7e6ad3c88271d7820197e7398e37747f96542ed47c27f0b81148cdf14c42df15dc22f64818ae7bb5bf
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.3, object.fromentries@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "object.fromentries@npm:2.0.5"
+"object.fromentries@npm:^2.0.5":
+  version: 2.0.6
+  resolution: "object.fromentries@npm:2.0.6"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-  checksum: a1bedcdec0e1f15fc1f9dccecf7df18ae4678fc95deb42099b649a3660511f2d1dead3b09b8f7dcf15205b0f7ce69d74e3cc3368511abf85b021d86226aa77d4
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
+  checksum: db6759ea68131cbdb70b1152f9984b49db03e81de4f6de079b39929bebd8b45501e5333ca2351991e07ee56f4651606c023396644e8f25c0806fa39a26c4c6e6
   languageName: node
   linkType: hard
 
-"object.getownpropertydescriptors@npm:^2.0.3, object.getownpropertydescriptors@npm:^2.1.1":
-  version: 2.1.4
-  resolution: "object.getownpropertydescriptors@npm:2.1.4"
+"object.getownpropertydescriptors@npm:^2.0.3":
+  version: 2.1.5
+  resolution: "object.getownpropertydescriptors@npm:2.1.5"
   dependencies:
-    array.prototype.reduce: ^1.0.4
+    array.prototype.reduce: ^1.0.5
     call-bind: ^1.0.2
     define-properties: ^1.1.4
-    es-abstract: ^1.20.1
-  checksum: 5c8bfddd2c8e68e4f70d56db3f4ccf18d3cc0f90ffc59c362668ce680ac32101ed1a2d700916371850fcd06277db9014e92b1f829b6a611b36549e842360d1ea
+    es-abstract: ^1.20.4
+  checksum: 2a27afa5628bc200ddb511c5d030be867e049246388c100fcd81371c4d538c186014cf17f415f3e1430231ba75bbb021dff287727221c88156ab483cae02ab0a
   languageName: node
   linkType: hard
 
 "object.hasown@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "object.hasown@npm:1.1.1"
+  version: 1.1.2
+  resolution: "object.hasown@npm:1.1.2"
   dependencies:
     define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: 79f40bf3da7c689122dc38c56114fa0280cde3e6a255f95736933240d495a2556f7ca7413c08d691bfc22e743b0d3ea82620890f21155b94c18551f3909cba8d
+    es-abstract: ^1.20.4
+  checksum: 419fc1c74a2aea7ebb4d49b79d5b1599a010b26c18eae35bd061ccdd013ccb749c499d8dd6ee21a91e6d7264ccc592573d0f13562970f76e25fc844d8c1b02ce
   languageName: node
   linkType: hard
 
@@ -26954,14 +25598,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.1, object.values@npm:^1.1.2, object.values@npm:^1.1.5":
-  version: 1.1.5
-  resolution: "object.values@npm:1.1.5"
+"object.values@npm:^1.1.1, object.values@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "object.values@npm:1.1.6"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-  checksum: 9c6afa9a25ce36c27c8baef2321eaa719fc2b042ef17aa462b1fa1502ed7ce7acf18b269be2e7b0d91f228839f10a28fa30ebc8cb7e47dbf6a2e4e67cad466c1
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
+  checksum: 3381204390f10c9f653a4875a50d221c67b5c16cb80a6ac06c706fc82a7cad8400857d4c7a0731193b0abb56b84fe803eabcf7addcf32de76397bbf207e68c66
   languageName: node
   linkType: hard
 
@@ -27187,13 +25831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-each-series@npm:^2.1.0":
-  version: 2.2.0
-  resolution: "p-each-series@npm:2.2.0"
-  checksum: 32a7cce1312bf70f99079db2ff070fc3ee2ed6efe0fa0444616fa38f79730ad09b461d009127d25254c4c865c40b6664e2c656b1a7b2c4781756d9173c974269
-  languageName: node
-  linkType: hard
-
 "p-finally@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-finally@npm:1.0.0"
@@ -27617,13 +26254,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:4.0.0":
-  version: 4.0.0
-  resolution: "parse5@npm:4.0.0"
-  checksum: 59e240aaea30d9668ba711e35367fe696d8ffadb5a8f1bb4afe8f3d4f47ac26dcfe9e35a8a6ab34e6504b3afe465b7bec302b6bbe0dd6cb13bd1c212b699d9db
-  languageName: node
-  linkType: hard
-
 "parse5@npm:5.1.0":
   version: 5.1.0
   resolution: "parse5@npm:5.1.0"
@@ -27638,7 +26268,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:^7.0.0":
+"parse5@npm:^7.0.0, parse5@npm:^7.1.1":
   version: 7.1.1
   resolution: "parse5@npm:7.1.1"
   dependencies:
@@ -27793,6 +26423,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "pathe@npm:1.0.0"
+  checksum: ac075cc2cf401733e84b755920291614fb23f2b022a6c617b62f370f981980d3d2f73e5de51fb7363339ab769d35c80d3d20ae9c999e9d0b3b0c143b067f60cf
+  languageName: node
+  linkType: hard
+
 "pause-stream@npm:0.0.11, pause-stream@npm:^0.0.11":
   version: 0.0.11
   resolution: "pause-stream@npm:0.0.11"
@@ -27994,23 +26631,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.27.0":
-  version: 1.27.0
-  resolution: "playwright-core@npm:1.27.0"
+"playwright-core@npm:1.28.0":
+  version: 1.28.0
+  resolution: "playwright-core@npm:1.28.0"
   bin:
     playwright: cli.js
-  checksum: b0e3be60e733e82f6e1f65d1f14a59c98120fb9a82aec93db379f0074cf41dfc2a981a61da87a61f0893f68fdd9665154860add3d63b60889dbcc1a57895718c
+  checksum: c0b1172bcfc7efd9ac91b166679d84b0b86b69d7cd1b199c1951665dc4632d1afb3225cd0df2eda549ae14461689b6a826fb4901c0a39b25161f781ab8dd94a3
   languageName: node
   linkType: hard
 
-"playwright@npm:1.27.0":
-  version: 1.27.0
-  resolution: "playwright@npm:1.27.0"
+"playwright@npm:1.28.0":
+  version: 1.28.0
+  resolution: "playwright@npm:1.28.0"
   dependencies:
-    playwright-core: 1.27.0
+    playwright-core: 1.28.0
   bin:
     playwright: cli.js
-  checksum: 063e239793e9f8f35f170e9501861f94a5253d32bf34360fa67371a309bda66a66fab449e8ef76e250f84744a968f22866516d20c37829b19ef3ae02dff6f51b
+  checksum: 3c72e2106ae954b1f5db9b9f9abdba1b9c994fb77b72076371f7231ba7b01de096bdefea9c1010c949930d497ba325abc17d4f8df0274e315bbf2ee9f3350133
   languageName: node
   linkType: hard
 
@@ -28608,14 +27245,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.16, postcss@npm:^8.4.7":
-  version: 8.4.18
-  resolution: "postcss@npm:8.4.18"
+"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.2.15, postcss@npm:^8.3.7, postcss@npm:^8.4.14, postcss@npm:^8.4.18":
+  version: 8.4.19
+  resolution: "postcss@npm:8.4.19"
   dependencies:
     nanoid: ^3.3.4
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: df38b43e0cd79b115305fb787f4586d376b38c515692ef7429785af84d00ebe86f2276b98071d3f62848daf8639ee4ef6057618b34c292196dc6af072eeede5e
+  checksum: f33594fa0a2b629043deada34171744891054255baa49150d77f08f68edec1fa7eb9740e64c3a32e6f476c16e9e592af942fcf55f93051673dd208c0aee1d60b
   languageName: node
   linkType: hard
 
@@ -28631,9 +27268,9 @@ __metadata:
   linkType: hard
 
 "preact@npm:^10.5.13":
-  version: 10.11.2
-  resolution: "preact@npm:10.11.2"
-  checksum: ae370a7ef997bc3c4d4e3057ee9b78ced8b078bd96139388e815a5221bdd1e16bf2b62a957b59fb8afdd8eb40e07445bd1c10dbe21b28ec0f6e163829efa475a
+  version: 10.11.3
+  resolution: "preact@npm:10.11.3"
+  checksum: 44f342de226a89b53a7156fad0d4192bfc8233a5cc3eb46162f53d3c0c1c2956222d997927c7dff20f52c3592f112cefec5adac64f0477cbd8370fb39126ef7b
   languageName: node
   linkType: hard
 
@@ -28660,7 +27297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.7.1, prettier@npm:>=2.2.1 <=3.0.0, prettier@npm:>=2.5, prettier@npm:^1.18.2 || ^2.0.0":
+"prettier@npm:2.7.1, prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1":
   version: 2.7.1
   resolution: "prettier@npm:2.7.1"
   bin:
@@ -28686,7 +27323,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:26.x, pretty-format@npm:^26.0.0, pretty-format@npm:^26.6.2":
+"pretty-format@npm:26.x, pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
   dependencies:
@@ -28698,7 +27335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2, pretty-format@npm:^27.5.1":
+"pretty-format@npm:^27.0.2":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"
   dependencies:
@@ -28721,14 +27358,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^29.0.0, pretty-format@npm:^29.2.1":
-  version: 29.2.1
-  resolution: "pretty-format@npm:29.2.1"
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "pretty-format@npm:29.3.1"
   dependencies:
     "@jest/schemas": ^29.0.0
     ansi-styles: ^5.0.0
     react-is: ^18.0.0
-  checksum: 35d275a65379fdd52cbf2d984432bca91ca4ebecc6c3459e5d96f653a2855b9aab8147fe303b68435c3d18ec8b80bdbe425ed3b9fc8e4ff112f552f4b949108d
+  checksum: 8c0b27a7f31c678a382de70217c524b752b14c6aaf56f94098b04208d91965e4b4f92c268e6c1124c20c3cf8de146dd4ba6a4d1f1033ae67c0dcccd4de23e98b
   languageName: node
   linkType: hard
 
@@ -29716,19 +28353,19 @@ __metadata:
   linkType: hard
 
 "react-textarea-autosize@npm:^8.3.0":
-  version: 8.3.4
-  resolution: "react-textarea-autosize@npm:8.3.4"
+  version: 8.4.0
+  resolution: "react-textarea-autosize@npm:8.4.0"
   dependencies:
     "@babel/runtime": ^7.10.2
     use-composed-ref: ^1.3.0
     use-latest: ^1.2.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 02dd38f6c40c4dd88b6c35370eaddc385c0a417c614b5ecb50d1121e99905da26fea9d5c05b580404b7f8a7d9a4964a8613654882be03963c36005779b96cca5
+  checksum: cef5cc06e353c50db19689f4c61260572fea6a48a4b3d7600a1e0b69f20b33b5899db15f272c402c649c999d76834ad11de63f0053c1edab5ae72b05661e22c8
   languageName: node
   linkType: hard
 
-"react@npm:16.14.0, react@npm:^16.14.0, react@npm:^16.8.0":
+"react@npm:16.14.0, react@npm:^16.14.0":
   version: 16.14.0
   resolution: "react@npm:16.14.0"
   dependencies:
@@ -29817,16 +28454,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg-up@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "read-pkg-up@npm:4.0.0"
-  dependencies:
-    find-up: ^3.0.0
-    read-pkg: ^3.0.0
-  checksum: c889c5bd9a4de84bfb5234ed7e5450b90cf83d05a25025ba04cfe3e1f12302e689d5c445b1c67cc564fbd7e1b931f638fea0299a188e1fd36eac183a1167b533
-  languageName: node
-  linkType: hard
-
 "read-pkg-up@npm:^7.0.1":
   version: 7.0.1
   resolution: "read-pkg-up@npm:7.0.1"
@@ -29968,15 +28595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"realpath-native@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "realpath-native@npm:1.1.0"
-  dependencies:
-    util.promisify: ^1.0.0
-  checksum: 8211c9d7046266ef1f504a8fc11d4dacaff9b5e915756993157d6dd3c112f2f4c5ece6c18732f1970c2bd8d49015fb0d4d8c75cd934f4354160360b74548ddb5
-  languageName: node
-  linkType: hard
-
 "recast@npm:0.21.5":
   version: 0.21.5
   resolution: "recast@npm:0.21.5"
@@ -30119,19 +28737,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
-  version: 0.13.10
-  resolution: "regenerator-runtime@npm:0.13.10"
-  checksum: 2990a7a998ff6bf5caf5597c5671751f447560c5060ae5628469620a7ce640131bf0744c506d63c2166783121535da4ed782c3383371f945fb9a37481598a761
+"regenerator-runtime@npm:^0.13.10, regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
+  version: 0.13.11
+  resolution: "regenerator-runtime@npm:0.13.11"
+  checksum: 12b069dc774001fbb0014f6a28f11c09ebfe3c0d984d88c9bced77fdb6fedbacbca434d24da9ae9371bfbf23f754869307fb51a4c98a8b8b18e5ef748677ca24
   languageName: node
   linkType: hard
 
 "regenerator-transform@npm:^0.15.0":
-  version: 0.15.0
-  resolution: "regenerator-transform@npm:0.15.0"
+  version: 0.15.1
+  resolution: "regenerator-transform@npm:0.15.1"
   dependencies:
     "@babel/runtime": ^7.8.4
-  checksum: c825d84f580441a3c592ea25668c491e0a1bd3ad55a992ce6b83b34bfc6e811d0b676af4e70f12e2c93834835d6c9181f75f13c8be181844b01e397a7d9df06b
+  checksum: 6588e0c454e92ed6c2b3ed7ab24f61270aef47ae7052eceb5367cc15658948a2e84fdd6849f7c96e561d1f8a7474dc4c292166792e07498fdde226299b9ff374
   languageName: node
   linkType: hard
 
@@ -30152,7 +28770,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.3.0, regexp.prototype.flags@npm:^1.4.1, regexp.prototype.flags@npm:^1.4.3":
+"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.3":
   version: 1.4.3
   resolution: "regexp.prototype.flags@npm:1.4.3"
   dependencies:
@@ -30171,16 +28789,16 @@ __metadata:
   linkType: hard
 
 "regexpu-core@npm:^5.1.0":
-  version: 5.2.1
-  resolution: "regexpu-core@npm:5.2.1"
+  version: 5.2.2
+  resolution: "regexpu-core@npm:5.2.2"
   dependencies:
     regenerate: ^1.4.2
     regenerate-unicode-properties: ^10.1.0
     regjsgen: ^0.7.1
     regjsparser: ^0.9.1
     unicode-match-property-ecmascript: ^2.0.0
-    unicode-match-property-value-ecmascript: ^2.0.0
-  checksum: 6bbad97524fad1bf9ded80cf3b2f3ebc6aac0b56ac857a69ba15728ae7948800f79da3a5e946924365e241fcfaf90984861567d25ef2887b1905059531b490f0
+    unicode-match-property-value-ecmascript: ^2.1.0
+  checksum: 1d025e2144ee7207db424125a81f5989bd337f56cddc23c0c83c1051679eee33d8c65c0e1e23fa494c2d8c9f0b19c47df0315a924445ad40e733c8aad4286f83
   languageName: node
   linkType: hard
 
@@ -30719,13 +29337,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-trailing-separator@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "remove-trailing-separator@npm:1.1.0"
-  checksum: 3568f9f8f5af3737b4aee9e6e1e8ec4be65a92da9cb27f989e0893714d50aa95ed2ff02d40d1fa35e1b1a234dc9c2437050ef356704a3999feaca6667d9e9bfc
-  languageName: node
-  linkType: hard
-
 "renderkid@npm:^3.0.0":
   version: 3.0.0
   resolution: "renderkid@npm:3.0.0"
@@ -30773,7 +29384,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"request-promise-native@npm:^1.0.5, request-promise-native@npm:^1.0.7":
+"request-promise-native@npm:^1.0.7":
   version: 1.0.9
   resolution: "request-promise-native@npm:1.0.9"
   dependencies:
@@ -30814,7 +29425,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"request@npm:2.88.2, request@npm:^2.87.0, request@npm:^2.88.0":
+"request@npm:2.88.2, request@npm:^2.88.0":
   version: 2.88.2
   resolution: "request@npm:2.88.2"
   dependencies:
@@ -31007,7 +29618,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.18.1, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0, resolve@npm:^1.22.1, resolve@npm:^1.3.2, resolve@npm:^1.4.0":
+"resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0, resolve@npm:^1.22.1, resolve@npm:^1.3.2, resolve@npm:^1.4.0":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -31053,7 +29664,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.5#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.13.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.18.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.4.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.5#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.13.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.4.0#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
   dependencies:
@@ -31194,7 +29805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^2.74.1":
+"rollup@npm:^2.79.1":
   version: 2.79.1
   resolution: "rollup@npm:2.79.1"
   dependencies:
@@ -31208,9 +29819,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:~2.78.0":
-  version: 2.78.1
-  resolution: "rollup@npm:2.78.1"
+"rollup@npm:^3.2.5":
+  version: 3.3.0
+  resolution: "rollup@npm:3.3.0"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -31218,7 +29829,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: ae24b886adee31455ec030736b113f84628a4f74106ea47ebf666fa5c7eac23f49b7d15acb5b5ee47671f3e184fb1c8b05946e5c76eb889a1dafaf5c75c9b70a
+  checksum: f799a8319ee107f48abafac3e5fb99b63af7e01b50acf3c48e0e3d4fc1a638c0ac09788e4b7ec4590efc74a0a7fce125237743e354c452b314bc207a12aae272
   languageName: node
   linkType: hard
 
@@ -31379,25 +29990,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sane@npm:^4.0.3":
-  version: 4.1.0
-  resolution: "sane@npm:4.1.0"
-  dependencies:
-    "@cnakazawa/watch": ^1.0.3
-    anymatch: ^2.0.0
-    capture-exit: ^2.0.0
-    exec-sh: ^0.3.2
-    execa: ^1.0.0
-    fb-watchman: ^2.0.0
-    micromatch: ^3.1.4
-    minimist: ^1.1.1
-    walker: ~1.0.5
-  bin:
-    sane: ./src/cli.js
-  checksum: 7d0991ecaa10b02c6d0339a6f7e31db776971f3b659a351916dcc7ce3464671e72b54d80bcce118e39d4343e1e56c699fe35f6cb89fbd88b07095b72841cbfb0
-  languageName: node
-  linkType: hard
-
 "sass-loader@npm:12.4.0":
   version: 12.4.0
   resolution: "sass-loader@npm:12.4.0"
@@ -31465,7 +30057,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"saxes@npm:^3.1.5, saxes@npm:^3.1.9":
+"saxes@npm:^3.1.9":
   version: 3.1.11
   resolution: "saxes@npm:3.1.11"
   dependencies:
@@ -31483,12 +30075,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
+  dependencies:
+    xmlchars: ^2.2.0
+  checksum: 3847b839f060ef3476eb8623d099aa502ad658f5c40fd60c105ebce86d244389b0d76fcae30f4d0c728d7705ceb2f7e9b34bb54717b6a7dbedaf5dad2d9a4b74
+  languageName: node
+  linkType: hard
+
 "sb@workspace:lib/cli-sb":
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 7.0.0-alpha.48
-    typescript: ~4.6.3
+    "@storybook/cli": 7.0.0-alpha.51
+    typescript: ^4.9.3
   bin:
     sb: ./index.js
   languageName: unknown
@@ -31630,7 +30231,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
+"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8":
   version: 7.3.8
   resolution: "semver@npm:7.3.8"
   dependencies:
@@ -31861,13 +30462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shellwords@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "shellwords@npm:0.1.1"
-  checksum: 7d66b28927e0b524b71b2e185651fcd88a70473a077dd230fbf86188380e948ffb36cea00832d78fc13c93cd15f6f52286fb05f2746b7580623ca1ec619eb004
-  languageName: node
-  linkType: hard
-
 "shx@npm:^0.3.2":
   version: 0.3.4
   resolution: "shx@npm:0.3.4"
@@ -31880,7 +30474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"side-channel@npm:^1.0.3, side-channel@npm:^1.0.4":
+"side-channel@npm:^1.0.4":
   version: 1.0.4
   resolution: "side-channel@npm:1.0.4"
   dependencies:
@@ -31942,6 +30536,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "slash@npm:5.0.0"
+  checksum: 157e61f9c749d107a2069a8d6169f40451bf8853e4e104938afd6c02ad224059033bc0420aeb85ad5ff71d36ca483a90bd1ea831a2ffa427317ce4844bcd966a
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "slice-ansi@npm:3.0.0"
@@ -32190,7 +30791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:0.5.21, source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.5, source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.20":
+"source-map-support@npm:0.5.21, source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.5, source-map-support@npm:~0.5.20":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -32303,9 +30904,9 @@ __metadata:
   linkType: hard
 
 "space-separated-tokens@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "space-separated-tokens@npm:2.0.1"
-  checksum: 7a3c91fc643586792effda74a40eec795fb68ff82e7d83c6936668693b0caa3ad29756b1d1e5af6c87e305b5c80f00f97b98f14f40b76da5a3e12b47efdf9cee
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 6173e1d903dca41dcab6a2deed8b4caf61bd13b6d7af8374713500570aa929ff9414ae09a0519f4f8772df993300305a395d4871f35bc4ca72b6db57e1f30af8
   languageName: node
   linkType: hard
 
@@ -32507,21 +31108,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stack-utils@npm:^1.0.1":
-  version: 1.0.5
-  resolution: "stack-utils@npm:1.0.5"
-  dependencies:
-    escape-string-regexp: ^2.0.0
-  checksum: 9e65d2a3f4fd13c4fe2615804a6721b5bd1067d7cbc1aa20588e5a9d0cd05b9dc83ae574a4c03180d2bf78804a8453406e1cef70ab47adfb38724aad67a308f5
-  languageName: node
-  linkType: hard
-
-"stack-utils@npm:^2.0.2, stack-utils@npm:^2.0.3":
-  version: 2.0.5
-  resolution: "stack-utils@npm:2.0.5"
+"stack-utils@npm:^2.0.3":
+  version: 2.0.6
+  resolution: "stack-utils@npm:2.0.6"
   dependencies:
     escape-string-regexp: ^2.0.0
-  checksum: 059f828eed5b03b963e8200529c27bd92b105f2cac9dffc9edcbc739ea8fa108e4ec45d0da257d8e0f7b5ac98db5643a0787e5c25ceab1396f7123e1ee15a086
+  checksum: 651c9f87667e077584bbe848acaecc6049bc71979f1e9a46c7b920cad4431c388df0f51b8ad7cfd6eed3db97a2878d0fc8b3122979439ea8bac29c61c95eec8a
   languageName: node
   linkType: hard
 
@@ -32612,8 +31204,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 7.0.0-alpha.48
-    typescript: ~4.6.3
+    "@storybook/cli": 7.0.0-alpha.51
+    typescript: ^4.9.3
   bin:
     sb: ./index.js
     storybook: ./index.js
@@ -32696,6 +31288,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-length@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "string-length@npm:5.0.1"
+  dependencies:
+    char-regex: ^2.0.0
+    strip-ansi: ^7.0.1
+  checksum: 311fa5758d397bd616be17150dfefaab4755ed292a3112237924d10ba5122f606064ad4880a293387401c1d7aa20d79f7936728bac2abed17a5e48f5b317cbc8
+  languageName: node
+  linkType: hard
+
 "string-width@npm:^1.0.1":
   version: 1.0.2
   resolution: "string-width@npm:1.0.2"
@@ -32740,51 +31342,51 @@ __metadata:
   linkType: hard
 
 "string.prototype.matchall@npm:^4.0.7":
-  version: 4.0.7
-  resolution: "string.prototype.matchall@npm:4.0.7"
+  version: 4.0.8
+  resolution: "string.prototype.matchall@npm:4.0.8"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.1
-    get-intrinsic: ^1.1.1
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
+    get-intrinsic: ^1.1.3
     has-symbols: ^1.0.3
     internal-slot: ^1.0.3
-    regexp.prototype.flags: ^1.4.1
+    regexp.prototype.flags: ^1.4.3
     side-channel: ^1.0.4
-  checksum: 85bfc0c18b73b90b4a10771bd1afa4c6e42fc78885196dee680b45d023afc81cec6a9944f2f0e25d81f8e5643d5412df5a4649ea624ab375598c6dba0864c9a2
+  checksum: 644523d05c1ee93bab7474e999a5734ee5f6ad2d7ad24ed6ea8706c270dc92b352bde0f2a5420bfbeed54e28cb6a770c3800e1988a5267a70fd5e677c7750abc
   languageName: node
   linkType: hard
 
 "string.prototype.trim@npm:^1.2.1":
-  version: 1.2.6
-  resolution: "string.prototype.trim@npm:1.2.6"
+  version: 1.2.7
+  resolution: "string.prototype.trim@npm:1.2.7"
   dependencies:
     call-bind: ^1.0.2
     define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: 8376a85aafc3afefd525c76fdc1d9866de0ed8b51b6800a473987435d55d176bea7ffb221ae28f03b5c89b27e5515fca65b0437e2dee9b61da82ed9b81fc193f
+    es-abstract: ^1.20.4
+  checksum: 31698f6d718794e422db6fcfa6685dcd9243097273b3b2a8b7948b5d45a183cd336378893ff0d4a7b2531b604c32bb5c45193dd6da3d2f5504df5cd222372c09
   languageName: node
   linkType: hard
 
 "string.prototype.trimend@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "string.prototype.trimend@npm:1.0.5"
+  version: 1.0.6
+  resolution: "string.prototype.trimend@npm:1.0.6"
   dependencies:
     call-bind: ^1.0.2
     define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: efcb7d4e943366efde2786be9abf7a79ac9e427bb184aeb4c532ce81d7cb94e1a4d323b256f706dafe6ed5a4ee3d6025a65ec4337d47d07014802be5bcdd4864
+    es-abstract: ^1.20.4
+  checksum: 51b663e3195a74b58620a250b3fc4efb58951000f6e7d572a9f671c038f2f37f24a2b8c6994500a882aeab2f1c383fac1e8c023c01eb0c8b4e52d2f13b6c4513
   languageName: node
   linkType: hard
 
 "string.prototype.trimstart@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "string.prototype.trimstart@npm:1.0.5"
+  version: 1.0.6
+  resolution: "string.prototype.trimstart@npm:1.0.6"
   dependencies:
     call-bind: ^1.0.2
     define-properties: ^1.1.4
-    es-abstract: ^1.19.5
-  checksum: c42d2f7732a98d9402aabcfb6ac05e4e36bbc429f5aa98bd199b5e55162b19b87db941ed68382c68ec6527a200a3d01cb3d4c16f668296c383e63693d8493772
+    es-abstract: ^1.20.4
+  checksum: 13b9970d4e234002dfc8069c655c1fe19e83e10ced208b54858c41bb0f7544e581ac0ce746e92b279563664ad63910039f7253f36942113fec413b2b4e7c1fcd
   languageName: node
   linkType: hard
 
@@ -32881,7 +31483,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.0":
+"strip-ansi@npm:^7.0.0, strip-ansi@npm:^7.0.1":
   version: 7.0.1
   resolution: "strip-ansi@npm:7.0.1"
   dependencies:
@@ -33020,10 +31622,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.0.13":
-  version: 4.0.13
-  resolution: "stylis@npm:4.0.13"
-  checksum: bd567c440b4f1acf8962b1b3aa7985c4e04d7badfe1e0f1c7ee2a60912de2718973850c524001a3d52f5fc9a0e3dcd204b8bd7e2d47d4934462e9f749fd9c7bc
+"stylis@npm:4.1.3":
+  version: 4.1.3
+  resolution: "stylis@npm:4.1.3"
+  checksum: 3e4670f26f79bcfba628dcc2756d9d415edfcbf4ec51e40f3b628fd15286222257317cad57390752964eba85cca6163a7621ce90038d68dd630a674479e52334
   languageName: node
   linkType: hard
 
@@ -33058,8 +31660,8 @@ __metadata:
   linkType: hard
 
 "sucrase@npm:^3.20.3":
-  version: 3.28.0
-  resolution: "sucrase@npm:3.28.0"
+  version: 3.29.0
+  resolution: "sucrase@npm:3.29.0"
   dependencies:
     commander: ^4.0.0
     glob: 7.1.6
@@ -33070,14 +31672,7 @@ __metadata:
   bin:
     sucrase: bin/sucrase
     sucrase-node: bin/sucrase-node
-  checksum: 3430b37aff555c40f79c85cb70de4debd2e359ab4d35f9392bd82079dacbebf1d51ef6a2b206414d0e10e0fcb9291463a5c4b25f52510b4ba168c7f0ea08c619
-  languageName: node
-  linkType: hard
-
-"supports-color@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "supports-color@npm:2.0.0"
-  checksum: 570e0b63be36cccdd25186350a6cb2eaad332a95ff162fa06d9499982315f2fe4217e69dd98e862fbcd9c81eaff300a825a1fe7bf5cc752e5b84dfed042b0dda
+  checksum: 4932ca76122f1f0cbd19f864265ce7c95652723994cf5a5c73b7b2bdef8d9b9257ba65085f61760e83cb8624d18b2fa309fe901dba77169264f4eb6a2e12719c
   languageName: node
   linkType: hard
 
@@ -33180,25 +31775,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-hmr@npm:^0.15.0":
-  version: 0.15.0
-  resolution: "svelte-hmr@npm:0.15.0"
+"svelte-hmr@npm:^0.15.1":
+  version: 0.15.1
+  resolution: "svelte-hmr@npm:0.15.1"
   peerDependencies:
     svelte: ">=3.19.0"
-  checksum: 531d6c17e8eccef64dacf849947431b5fcc366b405767b54d74c14a5d270beeb41d851d2f26b57f626aaf01f943e0229b8f52c356698cbdedf2c3ed693b7ce64
+  checksum: e792d5ee326e68a3fde434923a15915534b4fe2ec74ee4ff4d3fa5ac7d05e1bf839b8df0add107d9017a3990bb421de92d69345346000aed1093b2f605c62f1e
   languageName: node
   linkType: hard
 
 "svelte-loader@npm:^3.1.2":
-  version: 3.1.3
-  resolution: "svelte-loader@npm:3.1.3"
+  version: 3.1.4
+  resolution: "svelte-loader@npm:3.1.4"
   dependencies:
-    loader-utils: ^2.0.0
+    loader-utils: ^2.0.3
     svelte-dev-helper: ^1.1.9
     svelte-hmr: ^0.14.2
   peerDependencies:
     svelte: ">3.0.0"
-  checksum: 5c4f91fdfb7760eea29974c11743f73654049cdada16ad2fdca127493f739082c9d5b1cac8438cae2345409b238cc516983e00b96b77b7f10c25150e21bb8884
+  checksum: f3f21291c56129a722d686c39e475c1d033868f769fbc01edc2c26cf367c85b5d715fa4358b0e953f4ff00532e10b2dc50c9ed153329123844a0940dffce33f2
   languageName: node
   linkType: hard
 
@@ -33252,9 +31847,9 @@ __metadata:
   linkType: hard
 
 "svelte@npm:^3.0.0, svelte@npm:^3.31.2, svelte@npm:^3.48.0":
-  version: 3.52.0
-  resolution: "svelte@npm:3.52.0"
-  checksum: 98446c71e598ad5ae2cfdb68e1c8a6c69af36eb89f970bbcfe478f127dbbffb2acf882986c368a81ae5cdf4044c3f4bf0876abe0dd7e66c75707618d8fe70ff9
+  version: 3.53.1
+  resolution: "svelte@npm:3.53.1"
+  checksum: 4e0d389acbf4805f5247380f22311151a194532bd1d9742c418d981928a12cd9450220778a563c7c1cae9ef59b05ff0c960d20dae7f73b7057b7d5bd203202fe
   languageName: node
   linkType: hard
 
@@ -33310,6 +31905,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.8.4":
+  version: 0.8.4
+  resolution: "synckit@npm:0.8.4"
+  dependencies:
+    "@pkgr/utils": ^2.3.1
+    tslib: ^2.4.0
+  checksum: cd2444b7879b010b220721874527dbf3231a05cd42a47b24260db9c9427e9c3d3e481bd41175112434267dec3402166cfde417c4ae254937b5cc3b0cd994b992
+  languageName: node
+  linkType: hard
+
 "syntax-error@npm:^1.1.6":
   version: 1.4.0
   resolution: "syntax-error@npm:1.4.0"
@@ -33351,7 +31956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:6.1.11, tar@npm:^6.0.2, tar@npm:^6.1.0, tar@npm:^6.1.11, tar@npm:^6.1.2":
+"tar@npm:6.1.11":
   version: 6.1.11
   resolution: "tar@npm:6.1.11"
   dependencies:
@@ -33380,6 +31985,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tar@npm:^6.0.2, tar@npm:^6.1.0, tar@npm:^6.1.11, tar@npm:^6.1.12, tar@npm:^6.1.2":
+  version: 6.1.12
+  resolution: "tar@npm:6.1.12"
+  dependencies:
+    chownr: ^2.0.0
+    fs-minipass: ^2.0.0
+    minipass: ^3.0.0
+    minizlib: ^2.1.1
+    mkdirp: ^1.0.3
+    yallist: ^4.0.0
+  checksum: 183a858baba2eabfb1589ea9030601865190a074597bf0926de2460b6fe8adee9278509ac1c8460c05af7a0c8794db62c4e8cc395589470103946c55bf68e6cc
+  languageName: node
+  linkType: hard
+
 "teeny-request@npm:7.0.1":
   version: 7.0.1
   resolution: "teeny-request@npm:7.0.1"
@@ -33499,18 +32118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"test-exclude@npm:^5.2.3":
-  version: 5.2.3
-  resolution: "test-exclude@npm:5.2.3"
-  dependencies:
-    glob: ^7.1.3
-    minimatch: ^3.0.4
-    read-pkg-up: ^4.0.0
-    require-main-filename: ^2.0.0
-  checksum: 36d767a6ab71b170aa42092a5d540d6974a350fcfed342f29351c6e47cf061b73fabb4fe8b316ce989d6a7f058475417af209818e3702f5e7e17f4544a93535c
-  languageName: node
-  linkType: hard
-
 "test-exclude@npm:^6.0.0":
   version: 6.0.0
   resolution: "test-exclude@npm:6.0.0"
@@ -33561,20 +32168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"throat@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "throat@npm:5.0.0"
-  checksum: 1b9c661dabf93ff9026fecd781ccfd9b507c41b9d5e581614884fffd09f3f9ebfe26d3be668ccf904fd324dd3f6efe1a3ec7f83e91b1dff9fdcc6b7d39b8bfe3
-  languageName: node
-  linkType: hard
-
-"throat@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "throat@npm:6.0.1"
-  checksum: 60a42d762a35d21ac71abd9eb4026b665fbbbf6ddd7bcbdcacc3c3b20f7b99f41939afedf9fe3273611f1b7c003ee98ac4dc94aa5edd1a6dc2a49985ad2545e1
-  languageName: node
-  linkType: hard
-
 "throttle-debounce@npm:^3.0.1":
   version: 3.0.1
   resolution: "throttle-debounce@npm:3.0.1"
@@ -33632,6 +32225,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-glob@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "tiny-glob@npm:0.2.9"
+  dependencies:
+    globalyzer: 0.1.0
+    globrex: ^0.1.2
+  checksum: cbe072f0d213a1395d30aa94845a051d4af18fe8ffb79c8e99ac1787cd25df69083f17791a53997cb65f469f48950cb61426ccc0683cc9df170ac2430e883702
+  languageName: node
+  linkType: hard
+
 "tiny-inflate@npm:^1.0.0, tiny-inflate@npm:^1.0.2":
   version: 1.0.3
   resolution: "tiny-inflate@npm:1.0.3"
@@ -33765,7 +32368,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^2.3.3, tough-cookie@npm:^2.3.4, tough-cookie@npm:^2.5.0, tough-cookie@npm:~2.5.0":
+"tough-cookie@npm:^2.3.3, tough-cookie@npm:~2.5.0":
   version: 2.5.0
   resolution: "tough-cookie@npm:2.5.0"
   dependencies:
@@ -33786,7 +32389,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^4.0.0":
+"tough-cookie@npm:^4.0.0, tough-cookie@npm:^4.1.2":
   version: 4.1.2
   resolution: "tough-cookie@npm:4.1.2"
   dependencies:
@@ -33817,15 +32420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "tr46@npm:2.1.0"
-  dependencies:
-    punycode: ^2.1.1
-  checksum: 397f5c39d97c5fe29fa9bab73b03853be18ad2738b2c66ee5ce84ecb36b091bdaec493f9b3cee711d45f7678f342452600843264cc8242b591c8dc983146a6c4
-  languageName: node
-  linkType: hard
-
 "tr46@npm:^3.0.0":
   version: 3.0.0
   resolution: "tr46@npm:3.0.0"
@@ -33964,7 +32558,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-jest@npm:26.x, ts-jest@npm:^26.4.4":
+"ts-jest@npm:26.x":
   version: 26.5.6
   resolution: "ts-jest@npm:26.5.6"
   dependencies:
@@ -33987,7 +32581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-jest@npm:^28.0.0, ts-jest@npm:^28.0.8":
+"ts-jest@npm:^28.0.0":
   version: 28.0.8
   resolution: "ts-jest@npm:28.0.8"
   dependencies:
@@ -34168,9 +32762,9 @@ __metadata:
   linkType: hard
 
 "tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
-  version: 2.4.0
-  resolution: "tslib@npm:2.4.0"
-  checksum: eb19bda3ae545b03caea6a244b34593468e23d53b26bf8649fbc20fce43e9b21a71127fd6d2b9662c0fe48ee6ff668ead48fd00d3b88b2b716b1c12edae25b5d
+  version: 2.4.1
+  resolution: "tslib@npm:2.4.1"
+  checksum: 9ac0e4fd1033861f0b4f0d848dc3009ebcc3aa4757a06e8602a2d8a7aed252810e3540e54e70709f06c0f95311faa8584f769bcbede48aff785eb7e4d399b9ec
   languageName: node
   linkType: hard
 
@@ -34182,10 +32776,10 @@ __metadata:
   linkType: hard
 
 "tsup@npm:^6.2.2":
-  version: 6.3.0
-  resolution: "tsup@npm:6.3.0"
+  version: 6.5.0
+  resolution: "tsup@npm:6.5.0"
   dependencies:
-    bundle-require: ^3.1.0
+    bundle-require: ^3.1.2
     cac: ^6.7.12
     chokidar: ^3.5.1
     debug: ^4.3.1
@@ -34195,7 +32789,7 @@ __metadata:
     joycon: ^3.0.1
     postcss-load-config: ^3.0.1
     resolve-from: ^5.0.0
-    rollup: ^2.74.1
+    rollup: ^3.2.5
     source-map: 0.8.0-beta.0
     sucrase: ^3.20.3
     tree-kill: ^1.2.2
@@ -34213,7 +32807,7 @@ __metadata:
   bin:
     tsup: dist/cli-default.js
     tsup-node: dist/cli-node.js
-  checksum: fc60bc67ab93d0e59ebb028d980d853cc22328ba05ec0a09b3e6a0ea21bb2078a68e8c6978a2a1f9bd03090a8cbe77400c8c750bfdb639b47bab1bfea7232a2a
+  checksum: 6372a480db2dca02bb10ff27b888114d4347ce4c635ae95a7d558be0e5e23ff81373389bcce98c3086136527b63590b02f3000e266d0cb8be0fcdca6119e716e
   languageName: node
   linkType: hard
 
@@ -34269,7 +32863,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:2.19.0, type-fest@npm:^2.17.0, type-fest@npm:^2.19.0":
+"type-fest@npm:2.19.0, type-fest@npm:^2.19.0":
   version: 2.19.0
   resolution: "type-fest@npm:2.19.0"
   checksum: a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
@@ -34325,6 +32919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "type-fest@npm:3.2.0"
+  checksum: 075596e804faf646e68c15916642726b96a1848a4e91f1818b94dc1805c28235d6514ab086c87d5314787411b13d0950d7165312619857ad7dce5e134b702698
+  languageName: node
+  linkType: hard
+
 "type-is@npm:~1.6.17, type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
@@ -34372,23 +32973,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~4.6.3":
-  version: 4.6.4
-  resolution: "typescript@npm:4.6.4"
+"typescript@npm:*, typescript@npm:^4.0.3, typescript@npm:^4.9.3":
+  version: 4.9.3
+  resolution: "typescript@npm:4.9.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: bddcb0794f2b8aa52094b9de9d70848fdf46ccecac68403e1c407dc9f1a4e4e28979887acd648e1917b1144e5d8fbfb4c824309d8806d393b4194aa39c71fe5e
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^3.8.3":
+  version: 3.9.10
+  resolution: "typescript@npm:3.9.10"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 92e2c0328485a4f7bd7435f5b105f03addff32f867e241dc3be8c372ed801a138c732d9a55697696d2f82a80dd6ad4bddff1ad6b0d1884bf4a24b92e71094c44
+  checksum: 863cc06070fa18a0f9c6a83265fb4922a8b51bf6f2c6760fb0b73865305ce617ea4bc6477381f9f4b7c3a8cb4a455b054f5469e6e41307733fe6a2bd9aae82f8
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~4.6.3#~builtin<compat/typescript>":
-  version: 4.6.4
-  resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=701156"
+"typescript@patch:typescript@*#~builtin<compat/typescript>, typescript@patch:typescript@^4.0.3#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.3#~builtin<compat/typescript>":
+  version: 4.9.3
+  resolution: "typescript@patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=701156"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 0e3fa814d454942a689daf4c00f82328d323e7ecd4077e3265d45375e64642611631f4c882a71be87774468ba03793e9b8ff4bccfac3018194a9e36d8f72c251
+  checksum: 525998e7edb2a0d92bfe4f27f3219a6e0e1eef5eb0e4e3682653dde6ccb327fc72500dc9f9ad601cbb2aca036d364cd1c1d0f726e115e23fa456b3f40cebb501
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^3.8.3#~builtin<compat/typescript>":
+  version: 3.9.10
+  resolution: "typescript@patch:typescript@npm%3A3.9.10#~builtin<compat/typescript>::version=3.9.10&hash=701156"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 9041fb3886e7d6a560f985227b8c941d17a750f2edccb5f9b3a15a2480574654d9be803ad4a14aabcc2f2553c4d272a25fd698a7c42692f03f66b009fb46883c
   languageName: node
   linkType: hard
 
@@ -34481,10 +33102,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unicode-match-property-value-ecmascript@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "unicode-match-property-value-ecmascript@npm:2.0.0"
-  checksum: 01de52b5ab875a695e0ff7b87671197e39dcca497ef3c11f1c04d958933352a91d56c280e3908a76a1a0468d37d0227e5450a7956073591ce157d52603b45953
+"unicode-match-property-value-ecmascript@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "unicode-match-property-value-ecmascript@npm:2.1.0"
+  checksum: f5b9499b9e0ffdc6027b744d528f17ec27dd7c15da03254ed06851feec47e0531f20d410910c8a49af4a6a190f4978413794c8d75ce112950b56d583b5d5c7f2
   languageName: node
   linkType: hard
 
@@ -35085,19 +33706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util.promisify@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "util.promisify@npm:1.1.1"
-  dependencies:
-    call-bind: ^1.0.0
-    define-properties: ^1.1.3
-    for-each: ^0.3.3
-    has-symbols: ^1.0.1
-    object.getownpropertydescriptors: ^2.1.1
-  checksum: aacccbf770c667430ca3b7fce9a2a04a80fcd1f9f4de5507ea54cc3bbbcdcd33cbd2501ac23d1c477c5c40817234f6068b89cf7792f0610fe6e7df7ac0fe83ce
-  languageName: node
-  linkType: hard
-
 "util@npm:^0.12.4":
   version: 0.12.5
   resolution: "util@npm:0.12.5"
@@ -35132,7 +33740,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:8.3.2, uuid@npm:^8.0.0, uuid@npm:^8.3.0, uuid@npm:^8.3.2":
+"uuid@npm:8.3.2, uuid@npm:^8.0.0, uuid@npm:^8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
   bin:
@@ -35178,29 +33786,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8-to-istanbul@npm:^7.0.0":
-  version: 7.1.2
-  resolution: "v8-to-istanbul@npm:7.1.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.1
-    convert-source-map: ^1.6.0
-    source-map: ^0.7.3
-  checksum: a901917e3e321e2c74a9582cbe6652ff2b983040a683c924ce98fbccdfe249cbcb34d7d7913a13a7e4eee9bed3a51c7181b09103f4405d92f4ebac1cc40dc005
-  languageName: node
-  linkType: hard
-
-"v8-to-istanbul@npm:^8.1.0":
-  version: 8.1.1
-  resolution: "v8-to-istanbul@npm:8.1.1"
-  dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.1
-    convert-source-map: ^1.6.0
-    source-map: ^0.7.3
-  checksum: c3c99c4aa1ffffb098cc85c0c13c21871e6cbb9a83537d4e0650aa61589c347b2add787ceac68b8ea7fa1b7f446e9059d8e374cd7e7ab13b170a6caf8ad29c30
-  languageName: node
-  linkType: hard
-
-"v8-to-istanbul@npm:^9.0.0":
+"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.0.1":
   version: 9.0.1
   resolution: "v8-to-istanbul@npm:9.0.1"
   dependencies:
@@ -35351,12 +33937,12 @@ __metadata:
   linkType: hard
 
 "vfile-message@npm:^3.0.0":
-  version: 3.1.2
-  resolution: "vfile-message@npm:3.1.2"
+  version: 3.1.3
+  resolution: "vfile-message@npm:3.1.3"
   dependencies:
     "@types/unist": ^2.0.0
     unist-util-stringify-position: ^3.0.0
-  checksum: a6e022cfce83531cd64bd776967e491cf642fc021dc0fae51c500e272e388143e415ece542fa823c57aba500db7bdb787d2a9be23e136ec36119ba7bfe24be9d
+  checksum: 1bb2387807fb3037ffc1e6f9b15b4ba3bde0341d268786e1841979056d03af751a843c29a70ef819df76fb160702ea1d8373b01053293eab6487507428075dd8
   languageName: node
   linkType: hard
 
@@ -35401,14 +33987,14 @@ __metadata:
   linkType: hard
 
 "vfile@npm:^5.0.0":
-  version: 5.3.5
-  resolution: "vfile@npm:5.3.5"
+  version: 5.3.6
+  resolution: "vfile@npm:5.3.6"
   dependencies:
     "@types/unist": ^2.0.0
     is-buffer: ^2.0.0
     unist-util-stringify-position: ^3.0.0
     vfile-message: ^3.0.0
-  checksum: a2a6c5597fd9901c3f513af097630feab2d83cd89b23fc264f6277704401ffc9110ffa2847273441fdf18cc103011a58a01bd0951b42f358e2e8cbb4b481e42b
+  checksum: 44b80d35e384fa86b464a179a80bd57c90d56828cc4b589bd59380ea084ed40a8ad2b40306172731c30c20125b2e8c2d732718ee664baaf12c5c6cf7fe772ac1
   languageName: node
   linkType: hard
 
@@ -35420,34 +34006,52 @@ __metadata:
   linkType: hard
 
 "vite@npm:^3.1.0, vite@npm:^3.1.3, vite@npm:^3.1.7":
-  version: 3.1.8
-  resolution: "vite@npm:3.1.8"
+  version: 3.2.4
+  resolution: "vite@npm:3.2.4"
   dependencies:
     esbuild: ^0.15.9
     fsevents: ~2.3.2
-    postcss: ^8.4.16
+    postcss: ^8.4.18
     resolve: ^1.22.1
-    rollup: ~2.78.0
+    rollup: ^2.79.1
   peerDependencies:
+    "@types/node": ">= 14"
     less: "*"
     sass: "*"
     stylus: "*"
+    sugarss: "*"
     terser: ^5.4.0
   dependenciesMeta:
     fsevents:
       optional: true
   peerDependenciesMeta:
+    "@types/node":
+      optional: true
     less:
       optional: true
     sass:
       optional: true
     stylus:
       optional: true
+    sugarss:
+      optional: true
     terser:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 75f3959c386b8126e0ed27fdb4723bf63689e9c12f5ea84f537be7c6df460978d53f3237293eecf7b9e8b07ee72eb82c44dca3c0c94063736b6d4bc8c0eeb96c
+  checksum: c3b6a1643e6436e4628db1fe183a3eb7db970bf8cf20104540079b9e97b6f5ce1ea33c498373f130ddee7259a96cc3f9ce96d5e43a8b23f7484e35ac8634bcc7
+  languageName: node
+  linkType: hard
+
+"vitefu@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "vitefu@npm:0.2.1"
+  peerDependencies:
+    vite: ^3.0.0
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 0258962eecf8261129ad8b6323b96a87f1d9c088715a9c8ecc1fbacdc5539d7b0f1d37548c1bb120c01dd8d49d450524bbfdd97b2fe4b115e04f1c4aecd20a66
   languageName: node
   linkType: hard
 
@@ -35577,11 +34181,11 @@ __metadata:
   linkType: hard
 
 "vue-inbrowser-compiler-independent-utils@npm:^4.52.0":
-  version: 4.54.1
-  resolution: "vue-inbrowser-compiler-independent-utils@npm:4.54.1"
+  version: 4.55.0
+  resolution: "vue-inbrowser-compiler-independent-utils@npm:4.55.0"
   peerDependencies:
     vue: ">=2"
-  checksum: ff5f83f3c6c603215fa9928715a186edbfdd7939537906388970eef23a85b1b41ab1d959ce7e8b3f4c8c15a9a80efd9c251dcdca14fc3b6786e48111c66b7bf9
+  checksum: 3ff4cc97beaec6c2cb633163afbb4177fecbe96d9dffdd985ba1987dea256227a9a0676be77fe968cb0bf75aeb4bfc9c3e773cf050604893a985ad9f760ff456
   languageName: node
   linkType: hard
 
@@ -35612,8 +34216,8 @@ __metadata:
   linkType: hard
 
 "vue-loader@npm:^15.7.0":
-  version: 15.10.0
-  resolution: "vue-loader@npm:15.10.0"
+  version: 15.10.1
+  resolution: "vue-loader@npm:15.10.1"
   dependencies:
     "@vue/component-compiler-utils": ^3.1.0
     hash-sum: ^1.0.2
@@ -35628,7 +34232,7 @@ __metadata:
       optional: true
     vue-template-compiler:
       optional: true
-  checksum: a7c95b1cac38a8d6e2c5d10abd812c52299bbf70e3c95a98b0b5142c24e469bd116c0bfb1f088fab2d191ce0efa39b15bb45b7f86520b07bdb8e6a7bda80ebfe
+  checksum: 8754b3b1363ce83c9246c3576a0b7693d72bb557f5a7ab88f725c15d3590401609266bbab2882dccb6ad62a5cd19d0fdbf7aefeb3df955a8ef05e02543e5e1af
   languageName: node
   linkType: hard
 
@@ -35665,12 +34269,12 @@ __metadata:
   linkType: hard
 
 "vue-template-compiler@npm:^2.6.14, vue-template-compiler@npm:^2.7.10":
-  version: 2.7.13
-  resolution: "vue-template-compiler@npm:2.7.13"
+  version: 2.7.14
+  resolution: "vue-template-compiler@npm:2.7.14"
   dependencies:
     de-indent: ^1.0.2
     he: ^1.2.0
-  checksum: 6f1b54e74cc5b2a97ccda5335123fc2e9d1b63b934efe67552fbe7a4041ac55fc24b802e5715e7509696c6bcf5d1c6e0c69e4cd0ba85b3e32384df66b452ae82
+  checksum: 7f261b40d088c76ce9c66dde29220d0e5df43f974895a0aee97347ac48ed0958c21272dcdf8b163dcc2b9688eca528c1d72d12b3b8b1dcae1dde6a306d7cbb20
   languageName: node
   linkType: hard
 
@@ -35714,25 +34318,25 @@ __metadata:
   linkType: hard
 
 "vue@npm:^2.6.12, vue@npm:^2.7.10":
-  version: 2.7.13
-  resolution: "vue@npm:2.7.13"
+  version: 2.7.14
+  resolution: "vue@npm:2.7.14"
   dependencies:
-    "@vue/compiler-sfc": 2.7.13
+    "@vue/compiler-sfc": 2.7.14
     csstype: ^3.1.0
-  checksum: 71ed60ac28721e5e170202ac143bb23332c0cc4223c55b53d7cdb21215c6b98cab6b8e19cf812fac0d4f3a2c0bbdce23c3abaf19d5185d142ebf2c3528be8845
+  checksum: 8eb326718c445eb5900d08e2f5a2d86b493d475d3a79f49695066092afa3176d2aad4db98682b3c5432f6fffb92719a124b7e137264e71d5b9be14d5193222c6
   languageName: node
   linkType: hard
 
 "vue@npm:^3.2.33, vue@npm:^3.2.41":
-  version: 3.2.41
-  resolution: "vue@npm:3.2.41"
+  version: 3.2.45
+  resolution: "vue@npm:3.2.45"
   dependencies:
-    "@vue/compiler-dom": 3.2.41
-    "@vue/compiler-sfc": 3.2.41
-    "@vue/runtime-dom": 3.2.41
-    "@vue/server-renderer": 3.2.41
-    "@vue/shared": 3.2.41
-  checksum: fac4f47b5ecec8b7b7366eccb6b35866712e11887a12df0f04f989134578de27b69364c1ea1377384b38d048a0c4f604fd096500647f30c0b45cc68cff421d8d
+    "@vue/compiler-dom": 3.2.45
+    "@vue/compiler-sfc": 3.2.45
+    "@vue/runtime-dom": 3.2.45
+    "@vue/server-renderer": 3.2.45
+    "@vue/shared": 3.2.45
+  checksum: e00a38edc313faacc7e9269b40c28b77b333869991b1e8095b38a1edae93199168073b3141e9750162a75fdbe259012494ce91e66627cc4ed1b9697324d35a52
   languageName: node
   linkType: hard
 
@@ -35745,7 +34349,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-xmlserializer@npm:^1.0.1, w3c-xmlserializer@npm:^1.1.2":
+"w3c-xmlserializer@npm:^1.1.2":
   version: 1.1.2
   resolution: "w3c-xmlserializer@npm:1.1.2"
   dependencies:
@@ -35756,15 +34360,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-xmlserializer@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "w3c-xmlserializer@npm:2.0.0"
-  dependencies:
-    xml-name-validator: ^3.0.0
-  checksum: 92b8af34766f5bb8f37c505bc459ee1791b30af778d3a86551f7dd3b1716f79cb98c71d65d03f2bf6eba6b09861868eaf2be7e233b9202b26a9df7595f2bd290
-  languageName: node
-  linkType: hard
-
 "w3c-xmlserializer@npm:^3.0.0":
   version: 3.0.0
   resolution: "w3c-xmlserializer@npm:3.0.0"
@@ -35822,7 +34417,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"walker@npm:^1.0.7, walker@npm:^1.0.8, walker@npm:~1.0.5":
+"walker@npm:^1.0.8":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"
   dependencies:
@@ -35904,20 +34499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webidl-conversions@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "webidl-conversions@npm:5.0.0"
-  checksum: bf31df332ed11e1114bfcae7712d9ab2c37e7faa60ba32d8fdbee785937c0b012eee235c19d2b5d84f5072db84a160e8d08dd382da7f850feec26a4f46add8ff
-  languageName: node
-  linkType: hard
-
-"webidl-conversions@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "webidl-conversions@npm:6.1.0"
-  checksum: 66ad3b9073cd1e0e173444d8c636673b016e25b5856694429072cc966229adb734a8d410188e031effadcfb837936d79bc9e87c48f4d5925a90d42dec97f6590
-  languageName: node
-  linkType: hard
-
 "webidl-conversions@npm:^7.0.0":
   version: 7.0.0
   resolution: "webidl-conversions@npm:7.0.0"
@@ -36000,13 +34581,13 @@ __metadata:
   linkType: hard
 
 "webpack-hot-middleware@npm:^2.25.1":
-  version: 2.25.2
-  resolution: "webpack-hot-middleware@npm:2.25.2"
+  version: 2.25.3
+  resolution: "webpack-hot-middleware@npm:2.25.3"
   dependencies:
     ansi-html-community: 0.0.8
     html-entities: ^2.1.0
     strip-ansi: ^6.0.0
-  checksum: dc7cef3b3b06aeeaa925a3514a8f5ab110ec42c7a423d9f2c3fd31d96ac54e2837647f01f9169e1fddbda64c3ff962bb8b6eda184a53f2d09cd7deaa03c6f422
+  checksum: dca26d6d32eb684469830b4074dcd11c298036fe3ec8276ea5a69bc14bc8a53aab2494e02871ada146ec0881965d7018d559683cbcc73bcafcfa4da1184e92b5
   languageName: node
   linkType: hard
 
@@ -36053,15 +34634,15 @@ __metadata:
   linkType: hard
 
 "webpack-virtual-modules@npm:^0.4.3, webpack-virtual-modules@npm:^0.4.5":
-  version: 0.4.5
-  resolution: "webpack-virtual-modules@npm:0.4.5"
-  checksum: 2a7c2dbb2e5e32b06b4ab3778609ce70d1ba4bbc05d3231a3da5219dc03131d555dda4a7d4694d100a344f87e458378ea7ba241ba2a8b81b1866e53c99af5aee
+  version: 0.4.6
+  resolution: "webpack-virtual-modules@npm:0.4.6"
+  checksum: d3ecd680289e04f6fac70f09a682385b176303cfdc69ad08f11fce6fa031f9c054b3e728cb54967da48f051cd2ebe3f0d0d02bf78d3dfc8a3a9be91ea7544bbb
   languageName: node
   linkType: hard
 
 "webpack@npm:5":
-  version: 5.74.0
-  resolution: "webpack@npm:5.74.0"
+  version: 5.75.0
+  resolution: "webpack@npm:5.75.0"
   dependencies:
     "@types/eslint-scope": ^3.7.3
     "@types/estree": ^0.0.51
@@ -36092,7 +34673,7 @@ __metadata:
       optional: true
   bin:
     webpack: bin/webpack.js
-  checksum: a5f9eeb36edfa3fe1fc31950706080521fe2ada9706ce8205b817164ab3f6b207cc42023fb61e09687e7f0f252871c6c1a8b0f1a638a4a065c30f6bc460c68f9
+  checksum: 0160331d6255bdb8027f2589458514709a4a6555e2868adb6356a309d3f7b2212cb129a00f343fe0f94f54a31b4677507a3adf9ae73badc1216105ac548681ea
   languageName: node
   linkType: hard
 
@@ -36114,7 +34695,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-encoding@npm:^1.0.1, whatwg-encoding@npm:^1.0.3, whatwg-encoding@npm:^1.0.5":
+"whatwg-encoding@npm:^1.0.1, whatwg-encoding@npm:^1.0.5":
   version: 1.0.5
   resolution: "whatwg-encoding@npm:1.0.5"
   dependencies:
@@ -36132,7 +34713,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-mimetype@npm:^2.1.0, whatwg-mimetype@npm:^2.2.0, whatwg-mimetype@npm:^2.3.0":
+"whatwg-mimetype@npm:^2.2.0, whatwg-mimetype@npm:^2.3.0":
   version: 2.3.0
   resolution: "whatwg-mimetype@npm:2.3.0"
   checksum: 81c5eaf660b1d1c27575406bcfdf58557b599e302211e13e3c8209020bbac903e73c17f9990f887232b39ce570cc8638331b0c3ff0842ba224a5c2925e830b06
@@ -36176,17 +34757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^6.4.1":
-  version: 6.5.0
-  resolution: "whatwg-url@npm:6.5.0"
-  dependencies:
-    lodash.sortby: ^4.7.0
-    tr46: ^1.0.1
-    webidl-conversions: ^4.0.2
-  checksum: 5afeff7da025fbaecceca6a5e0cdc6d10666efab245d0e5d785263a09a16b3afce7a81712512e184c98e70bdb79fb20d0ecd34553e9c121a9ba4f36760db4226
-  languageName: node
-  linkType: hard
-
 "whatwg-url@npm:^7.0.0":
   version: 7.1.0
   resolution: "whatwg-url@npm:7.1.0"
@@ -36198,18 +34768,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^8.0.0, whatwg-url@npm:^8.5.0":
-  version: 8.7.0
-  resolution: "whatwg-url@npm:8.7.0"
-  dependencies:
-    lodash: ^4.7.0
-    tr46: ^2.1.0
-    webidl-conversions: ^6.1.0
-  checksum: de0bc94387dba586b278e701cf5a1c1f5002725d22b8564dbca2cab1966ef24b839018e57ae2423fb514d8a2dd3aa3bf97323e2f89b55cd89e79141e432e9df1
-  languageName: node
-  linkType: hard
-
-"which-boxed-primitive@npm:^1.0.1, which-boxed-primitive@npm:^1.0.2":
+"which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"
   dependencies:
@@ -36248,17 +34807,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.2":
-  version: 1.1.8
-  resolution: "which-typed-array@npm:1.1.8"
+"which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.8":
+  version: 1.1.9
+  resolution: "which-typed-array@npm:1.1.9"
   dependencies:
     available-typed-arrays: ^1.0.5
     call-bind: ^1.0.2
-    es-abstract: ^1.20.0
     for-each: ^0.3.3
+    gopd: ^1.0.1
     has-tostringtag: ^1.0.0
-    is-typed-array: ^1.1.9
-  checksum: bdab0d7d077015a8e9710d93951614f2a7962ed62f5240d2852c61eb578a888c4a9da5ef93ba9d0191812e05db1817168e1ab746036d39e863d555f9b68008f1
+    is-typed-array: ^1.1.10
+  checksum: 7edb12cfd04bfe2e2d3ec3e6046417c59e6a8c72209e4fe41fe1a1a40a3b196626c2ca63dac2a0fa2491d5c37c065dfabd2fcf7c0c15f1d19f5640fef88f6368
   languageName: node
   linkType: hard
 
@@ -36426,17 +34985,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:2.4.1":
-  version: 2.4.1
-  resolution: "write-file-atomic@npm:2.4.1"
-  dependencies:
-    graceful-fs: ^4.1.11
-    imurmurhash: ^0.1.4
-    signal-exit: ^3.0.2
-  checksum: 51f5927aeb8b2c8bf43cc37db23e3abd24c870b383e6773ad1b655bb119dcc50a9e262b023d427d6e82d079a901cdf42f42d7ea78045a57e4d50e64831817b21
-  languageName: node
-  linkType: hard
-
 "write-file-atomic@npm:^2.0.0, write-file-atomic@npm:^2.3.0, write-file-atomic@npm:^2.4.2":
   version: 2.4.3
   resolution: "write-file-atomic@npm:2.4.3"
@@ -36448,7 +34996,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^3.0.0, write-file-atomic@npm:^3.0.3":
+"write-file-atomic@npm:^3.0.3":
   version: 3.0.3
   resolution: "write-file-atomic@npm:3.0.3"
   dependencies:
@@ -36508,16 +35056,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^5.2.0":
-  version: 5.2.3
-  resolution: "ws@npm:5.2.3"
-  dependencies:
-    async-limiter: ~1.0.0
-  checksum: 3f329b29a893c660b01be81654c9bca422a0de3396e644aae165e4e998e74b2b713adcbba876f183cd74a4f488376cbb7442d1c87455084d69fce1e2f25ef088
-  languageName: node
-  linkType: hard
-
-"ws@npm:^6.1.0, ws@npm:^6.1.2":
+"ws@npm:^6.1.0":
   version: 6.2.2
   resolution: "ws@npm:6.2.2"
   dependencies:
@@ -36526,7 +35065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^7.0.0, ws@npm:^7.2.3, ws@npm:^7.4.6":
+"ws@npm:^7.0.0, ws@npm:^7.2.3":
   version: 7.5.9
   resolution: "ws@npm:7.5.9"
   peerDependencies:
@@ -36541,9 +35080,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.1.0, ws@npm:^8.2.3":
-  version: 8.10.0
-  resolution: "ws@npm:8.10.0"
+"ws@npm:^8.1.0, ws@npm:^8.2.3, ws@npm:^8.9.0":
+  version: 8.11.0
+  resolution: "ws@npm:8.11.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ^5.0.2
@@ -36552,7 +35091,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: db88d92897c7547ca5b24c91eca8e401788bac96c5a7935d647766481ec27fbc020947149ff820156cb1a574477e7f042962e0561cf58257e4e8be8e095534a3
+  checksum: b672b312f357afba8568b9dbb9e08b9e8a20845659b35fa6b340dc848efe371379f5e22bb1dc89c4b2940d5e2dc52dd1de85dde41776875fce115a448f94754f
   languageName: node
   linkType: hard
 
@@ -36700,7 +35239,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:>=21.0.1, yargs-parser@npm:^21.0.0, yargs-parser@npm:^21.0.1":
+"yargs-parser@npm:>=21.0.1, yargs-parser@npm:^21.0.1, yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"
   checksum: f84b5e48169479d2f402239c59f084cfd1c3acc197a05c59b98bab067452e6b3ea46d4dd8ba2985ba7b3d32a343d77df0debd6b343e5dae3da2aab2cdf5886b2
@@ -36774,7 +35313,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^15.3.1, yargs@npm:^15.4.1":
+"yargs@npm:^15.3.1":
   version: 15.4.1
   resolution: "yargs@npm:15.4.1"
   dependencies:
@@ -36808,9 +35347,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.2.1, yargs@npm:^17.4.0":
-  version: 17.6.0
-  resolution: "yargs@npm:17.6.0"
+"yargs@npm:^17.2.1, yargs@npm:^17.3.1, yargs@npm:^17.4.0":
+  version: 17.6.2
+  resolution: "yargs@npm:17.6.2"
   dependencies:
     cliui: ^8.0.1
     escalade: ^3.1.1
@@ -36818,8 +35357,8 @@ __metadata:
     require-directory: ^2.1.1
     string-width: ^4.2.3
     y18n: ^5.0.5
-    yargs-parser: ^21.0.0
-  checksum: 9f3d40f482d37df26f66f9b8d3010645ebf9485dd1c4bab6b55c87ac4e4924836bca93f52afb1a0483e178f540e5ab6fbea60d9fc56ecba10d386ecbdc9857e6
+    yargs-parser: ^21.1.1
+  checksum: dd5c89aa8186d2a18625b26b68beb635df648617089135e9661107a92561056427bbd41dbfa228db5a7d968ea1043d96c036c2eb978acf7b61a0ae48bf3be206
   languageName: node
   linkType: hard
 
@@ -36864,9 +35403,9 @@ __metadata:
   linkType: hard
 
 "zwitch@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "zwitch@npm:2.0.2"
-  checksum: 9424cade91458ceb4288cc9cbc76d9d055686de3cd5aa13bf447aed2d1ebd98ebb517c9d871e9f9bd92a44e0d63a0491d560adb0bd7e4d0de42c99320d9e04a4
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: 3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
   languageName: node
   linkType: hard
 
diff --git a/docs/.prettierignore b/docs/.prettierignore
new file mode 100644
index 000000000000..31d8d107b385
--- /dev/null
+++ b/docs/.prettierignore
@@ -0,0 +1 @@
+*.mdx.mdx
\ No newline at end of file
diff --git a/docs/.prettierrc b/docs/.prettierrc
index d033feea7ad5..5ac85e271d54 100644
--- a/docs/.prettierrc
+++ b/docs/.prettierrc
@@ -1,8 +1,4 @@
 {
   "printWidth": 100,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "arrowParens": "always"
+  "singleQuote": true
 }
diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
index 70078a5a88b8..f4d41e4dbfe0 100644
--- a/docs/configure/environment-variables.md
+++ b/docs/configure/environment-variables.md
@@ -51,16 +51,11 @@ Then you can access this environment variable anywhere, even within your stories
   paths={[
     'react/my-component-with-env-variables.js.mdx',
     'react/my-component-with-env-variables.ts.mdx',
-    'react/my-component-with-env-variables.mdx.mdx',
     'vue/my-component-with-env-variables.2.js.mdx',
-    'vue/my-component-with-env-variables.mdx-2.mdx.mdx',
     'vue/my-component-with-env-variables.3.js.mdx',
-    'vue/my-component-with-env-variables.mdx-3.mdx.mdx',
     'angular/my-component-with-env-variables.ts.mdx',
-    'angular/my-component-with-env-variables.mdx.mdx',
     'web-components/my-component-with-env-variables.js.mdx',
     'svelte/my-component-with-env-variables.js.mdx',
-    'svelte/my-component-with-env-variables.mdx.mdx',
   ]}
 />
 
@@ -95,7 +90,6 @@ When Storybook loads, it will enable you to access them in your stories similar
 <CodeSnippets
   paths={[
     'common/my-component-env-var-config.js.mdx',
-    'common/my-component-env-var-config.mdx.mdx',
   ]}
 />
 
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index c30babb303f5..dc85ddbc448a 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -16,15 +16,10 @@ Afterward, you can use any asset in your stories:
   paths={[
     'react/component-story-static-asset-with-import.js.mdx',
     'react/component-story-static-asset-with-import.ts.mdx',
-    'react/component-story-static-asset-with-import.mdx.mdx',
     'vue/component-story-static-asset-with-import.2.js.mdx',
-    'vue/component-story-static-asset-with-import.mdx-2.mdx.mdx',
     'vue/component-story-static-asset-with-import.3.js.mdx',
-    'vue/component-story-static-asset-with-import.mdx-3.mdx.mdx',
     'angular/component-story-static-asset-with-import.ts.mdx',
-    'angular/component-story-static-asset-with-import.mdx.mdx',
     'svelte/component-story-static-asset-with-import.js.mdx',
-    'svelte/component-story-static-asset-with-import.mdx.mdx',
   ]}
 />
 
@@ -54,13 +49,9 @@ Here `../public` is your static directory. Now use it in a component or story li
   paths={[
     'react/component-story-static-asset-without-import.js.mdx',
     'react/component-story-static-asset-without-import.ts.mdx',
-    'react/component-story-static-asset-without-import.mdx.mdx',
     'vue/component-story-static-asset-without-import.js.mdx',
-    'vue/component-story-static-asset-without-import.mdx.mdx',
     'angular/component-story-static-asset-without-import.ts.mdx',
-    'angular/component-story-static-asset-without-import.mdx.mdx',
     'svelte/component-story-static-asset-without-import.js.mdx',
-    'svelte/component-story-static-asset-without-import.mdx.mdx',
   ]}
 />
 
@@ -104,13 +95,9 @@ Upload your files to an online CDN and reference them. In this example, we’re
   paths={[
     'react/component-story-static-asset-cdn.js.mdx',
     'react/component-story-static-asset-cdn.ts.mdx',
-    'react/component-story-static-asset-cdn.mdx.mdx',
     'vue/component-story-static-asset-cdn.js.mdx',
-    'vue/component-story-static-asset-cdn.mdx.mdx',
     'angular/component-story-static-asset-cdn.ts.mdx',
-    'angular/component-story-static-asset-cdn.mdx.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
-    'svelte/component-story-static-asset-cdn.mdx.mdx',
   ]}
 />
 
diff --git a/docs/configure/story-layout.md b/docs/configure/story-layout.md
index a9414da03ccf..94dbfa442347 100644
--- a/docs/configure/story-layout.md
+++ b/docs/configure/story-layout.md
@@ -35,7 +35,6 @@ You can also set it at a component level like so:
 <CodeSnippets
   paths={[
     'common/storybook-component-layout-param.js.mdx',
-    'common/storybook-component-layout-param.mdx.mdx',
   ]}
 />
 
@@ -50,7 +49,6 @@ Or even apply it to specific stories like so:
 <CodeSnippets
   paths={[
     'common/storybook-story-layout-param.js.mdx',
-    'common/storybook-story-layout-param.mdx.mdx',
   ]}
 />
 
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index 5bf1b4adc52a..52099cc30c30 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -21,35 +21,37 @@ git clone https://github.com/your-username/storybook.git
 
 Storybook development happens in a set of _sandboxes_ which are templated Storybook environments corresponding to different user setups. Within each sandbox, we inject a set of generalized stories that allow us to test core features and addons in all such environments.
 
-To run an sandbox locally, you can use the `start` command:
+To run a sandbox locally, you can use the `start` command:
 
 ```shell
 yarn start
 ```
 
-That will install the required prerequisites, build the code, create and link an example for a Vite/React setup, and start the storybook server.
+It will install the required prerequisites, build the code, create and link a starter example based on a Vite React setup and finally start the Storybook server.
 
-If all goes well you should see the sandbox running.
+If all goes well, you should see the sandbox running.
 
 ![Storybook Sandbox Running](./storybook-sandbox.png)
 
 ## Running a different sandbox template
 
-The `start` command runs a Vite/React template, but there are many others you can use if you want to work on a different renderer or framework.
-
-To get started, run the `yarn task` command; it will prompt you with a series of questions to figure out what you are trying to do. Once you've made a selection it will provide a set of options that you can use to run the same command again.
+By default, the `start` command is configured to initialize a Vite-based React template. If you're planning on working on a different renderer instead, you can do so as well. Start by running the `task` command as follows:
 
 ```shell
 yarn task
 ```
 
+When prompted, answer the questions as accurately as possible to allow Storybook to determine your goals. After answering these questions, you should see the entire command with the options you've selected should you require to re-run it.
+
 <div class="aside">
-💡 The <code>yarn task</code> command takes a couple of shortcuts for development that could catch you out if you change branches: you may need to rerun the <code>install</code> and <code>compile</code> tasks. You can do that by running the command with the <code>--start-from=install</code> flag.
+
+💡 The `yarn task` command takes a few development shortcuts that can catch you off guard when switching branches and may require you to re-run both the `install` and `compile` tasks. You can speed up the process by running the command with the `start-from=install` flag.
+
 </div>
 
 ## Running tests
 
-Once you've run your [first sandbox](#run-your-first-sandbox), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite.
+After successfully running your [first sandbox](#run-your-first-sandbox), you should have a fully functional Storybook version built on your local machine. Before jumping onto any code changes, verifying everything is working is essential—specifically, the test suite.
 
 Run the following command to execute the tests:
 
@@ -59,25 +61,25 @@ yarn test
 
 ## Start developing
 
-Now that you've [verified your setup](#running-tests), it's time to jump into code. The simplest way to do this is to run one of the sandboxes in one terminal window and the interactive build process in a separate terminal.
+Now that you've [verified your setup](#running-tests), it's time to jump into code. The simplest way is to run one of the sandboxes in one terminal window and the interactive build process in a separate terminal.
 
-Assuming you're still running the Vite React sandbox from `yarn start`, open a new terminal and navigate to the `code/` dir of the Storybook monorepo. Then, create a new branch with the following command:
+Assuming you're still running the Vite-based React sandbox initialized after running the `yarn start` command, open a new terminal window and navigate to the `code` directory of the Storybook monorepo. Then, create a new branch for your contribution by running the following command:
 
 ```shell
 git checkout -b my-first-storybook-contribution
 ```
 
-Run the build process with:
+Lastly, run the build process with the following:
 
 ```shell
 yarn build
 ```
 
-When asked if you want to start the build in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select `@storybook/addon-docs` and `@storybook/components`.
+When prompted to start the build process in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select both `@storybook/addon-docs` and `@storybook/components`.
 
 <div class="aside">
 
-💡 Build's `watch` mode is great for interactive development. However, for performance reasons it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running `build` <b>WITHOUT</b> watch mode: it will re-generate TypeScript types and also perform type checking for you.
+💡 Build's `watch` mode is great for interactive development. However, for performance reasons, it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running the `build` command <b>WITHOUT</b> enabling watch mode: it will re-generate TypeScript types and perform automatic type checking for you.
 
 </div>
 
@@ -95,15 +97,15 @@ When you're done coding, add documentation and tests as appropriate. That simpli
 
 ### Add stories
 
-Adding a story or set of stories to our suite of generic stories helps you test your work.
+Adding a story or set of generic stories to our suite helps you test your work.
 
-If you're modifying part of Storybook's core, or one of the essential addons, there's probably an existing set of stories in that addon's `template/stories` folder that documents how the feature is supposed to work. Add your stories there.
+Assuming you're working on one of the [Essential addons](../essentials/introduction.md), there's a chance that a complete set of stories already exists. Check the addon's `template/stories` directory that documents how it's supposed to work and add your stories there.
 
-If you're modifying something related to a specific renderer (e.g. React, Vue, etc.), the renderer will have its own template stories.
+If you're modifying something related to a specific renderer (e.g., React, Vue, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories.
 
 ### Add tests
 
-Unit tests ensure that Storybook doesn't break accidentally. If your code can regress in non-obvious ways, include unit tests with your PR. Use the following naming convention:
+Unit tests ensure that Storybook doesn't break accidentally. If your code can regress in non-obvious ways, include unit tests with your pull request. Use the following naming convention:
 
 ```
 +-- parentFolder
@@ -115,7 +117,7 @@ Unit tests ensure that Storybook doesn't break accidentally. If your code can re
 
 Storybook's monorepo is set up to rely on end-to-end testing with [Playwright](https://playwright.dev) during CI. To help with testing, we encourage running this test suite before submitting your contribution.
 
-To run a e2e test against a sandbox, you can use the `e2e-tests` task:
+To run an e2e test against a sandbox, you can use the `e2e-tests` task:
 
 ```shell
 yarn task --task e2e-tests --template=react-vite/default-ts --start-from=auto
@@ -123,23 +125,25 @@ yarn task --task e2e-tests --template=react-vite/default-ts --start-from=auto
 
 ## Submit a pull request
 
-Before submitting your contribution, run the test suite one last time with:
+Before submitting your contribution, run the test suite one last time with the following:
 
 ```shell
 yarn test
 ```
 
 <div class="aside">
-💡  Storybook uses <a href="https://jestjs.io/"><code>jest</code></a> as part of the testing suite, if you notice that the snapshot tests fail you can re-run and update them with <code>yarn test -u</code>.
+
+💡 Storybook relies on [Jest](https://jestjs.io/) as part of it's testing suite. During the test run, if you spot that snapshot tests are failing, re-run the command with the `-u` flag to update them.
+
 </div>
 
-Doing this prevents last-minute bugs and is also a great way to get your contribution merged faster once you submit your pull request. Failing to do so will lead to one of the maintainers mark the pull request with the **Work in Progress** label until all tests pass.
+Doing this prevents last-minute bugs and is a great way to merge your contribution faster once you submit your pull request. Failing to do so will lead to one of the maintainers mark the pull request with the **Work in Progress** label until all tests pass.
 
 ### Target `next` branch
 
-Once the test suite finishes, it's time to commit, push and open a pull request against Storybook's `next` (default) branch. This branch is where all active development happens and is associated with the latest prerelease version (e.g., `6.3.0-alpha.25`).
+Once the test suite finishes, it's time to commit, push and open a pull request against Storybook's `next` (default) branch. This branch is where all active development happens and is associated with the latest prerelease version (e.g., `7.0.0-alpha.47`).
 
-If your contribution focuses on a bugfix and you want it featured in the next stable release, mention it in the pull request description. We'll try to patch it in if it appears to be non-disruptive and fixes a critical bug.
+If your contribution focuses on a bugfix and you want it featured in the next stable release, mention it in the pull request description. We'll try to patch it if it appears non-disruptive and fixes a critical bug.
 
 #### Useful resources when working with forks
 
@@ -158,9 +162,10 @@ Typically it is a good idea to start from the `install` task to ensure your loca
 
  <div class="aside">
 
-<p>💡 The default instructions run the code "linked" which means built changes to Storybook library code will be reflected in the sandbox right away (the next time you run the task). However CI runs in "unlinked" mode, which in rare cases will behave differently.</p>
+💡 The default instructions run the code in "linked" mode, meaning built changes to Storybook library code will be reflected in the sandbox immediately (the next time you run the task). However, CI runs in "unlinked" mode, which in rare cases, will behave differently.<br />
+
+If you are having trouble reproducing, try rerunning the command with the `--no-link` flag. If you need to do that, you'll need to run it with `--start-from=compile` after each code change.
 
-<p>If you are having trouble reproducing, try rerunning the command with the <code>--no-link</code> flag. If you need to do that, you'll need to run it with <code>--start-from=compile</code> after each code change.
 </div>
 
 ## How to work with reproductions
@@ -182,15 +187,61 @@ npx storybook@next link --local /path/to/local-repro-directory
 ```
 
 <div class="aside">
-💡  The <code>storybook link</code> command relies on <code>yarn 2</code> linking under the hood. It requires that the local repro is using <code>yarn 2</code>, which will be the case if you're using the [<code>storybook repro</code> command](./how-to-reproduce) per our contributing guidelines. If you are trying to link to a non-<code>yarn 2</code> project, linking will fail.
+
+💡 The `storybook link` command relies on [Yarn 2 linking](https://yarnpkg.com/cli/link/) under the hood. It requires your local reproduction to be using [Yarn 2](https://yarnpkg.com/) as well, which is the case if you're already enabled it with the [`storybook repro`](./how-to-reproduce.md) command per our contribution guidelines. The process will fail if you're trying to link a non-Yarn 2 project.
+
 </div>
 
+## Developing a template
+
+The first step is to add an entry to `code/lib/cli/src/repro-templates.ts`, which is the master list of all repro templates:
+
+```ts
+'cra/default-js': {
+    name: 'Create React App (Javascript)',
+    script: 'npx create-react-app .',
+    inDevelopment: true,
+    expected: {
+      framework: '@storybook/cra',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5',
+    },
+  },
+```
+
+Add the `isDevelopment` flag until the PR is merged (you can fast-follow it with a second PR to remove the flag), as it'll make the development process much easier.
+
+The **`key`** `cra/default-js` consists of two parts:
+
+- The prefix is the tool that was used to generate the repro app
+- The suffix is options that modify the default install, e.g. a specific version or options
+
+The **`script`** field is what generates the application environment. The `.` argument is “the current working directory” which is auto-generated based on the key (e.g. `repros/cra/default-js/before-storybook`).
+
+The rest of the fields are self-explanatory:
+
+- **`name`**: Human readable name/description
+- **`cadence`:** How often this runs in CI (for now these are the same for every template)
+- **`expected`**: What framework/renderer/builder we expect `sb init` to generate
+
+### Running a sandbox
+
+If your template has a `inDevelopment` flag, it will be generated (locally) as part of the sandbox process. You can create the sandbox with:
+
+```bash
+yarn task --task dev --template cra/default-js --no-link --start-from=install
+```
+
+Make sure you pass the `--no-link` flag as it is required for the local template generation to work.
+
+Once the PR is merged, the template will be generated on a nightly cadence and you can remove the `inDevelopment` flag and the sandbox will pull the code from our templates repository.
+
 ## Troubleshooting
 
 <details>
 
 <summary><code>yarn build --all --watch</code> watches everything but is resource-intensive</summary>
 
-It's troublesome to know which packages you're going to change ahead of time, and watching all of them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.
+It's troublesome to know which packages you'll change ahead of time, and watching them can be highly demanding, even on modern machines. If you're working on a powerful enough machine, you can use `yarn build --all --watch` instead of `yarn build`.
 
 </details>
diff --git a/docs/contribute/how-to-reproduce.md b/docs/contribute/how-to-reproduce.md
index 2936c2be92a7..fd18dabe760f 100644
--- a/docs/contribute/how-to-reproduce.md
+++ b/docs/contribute/how-to-reproduce.md
@@ -14,7 +14,7 @@ Make sure you have:
 
 - Installed [`Yarn`](https://yarnpkg.com/) on your local development machine.
 - A [GitHub account](https://github.com/signup) for hosting the reproduction's code.
-- A [Chromatic account](https://www.chromatic.com/start) for publishing your Storybook.
+- A [Chromatic account](https://www.chromatic.com/start/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) for publishing your Storybook.
 
 ## Initial setup
 
@@ -72,14 +72,14 @@ Then, follow GitHub's instructions to set up the repository.
 
 ## Publish
 
-An excellent way to check your reproduction is to have it deployed online. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.
+An excellent way to check your reproduction is to have it deployed online. We recommend [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.
 
 ### Helpful resources when working with Chromatic
 
 - [Publish Storybook](../sharing/publish-storybook.md)
-- [Setup Chromatic](https://www.chromatic.com/docs/setup)
-- [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci)
+- [Setup Chromatic](https://www.chromatic.com/docs/setup?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook)
+- [Automate Chromatic with continuous integration](https://www.chromatic.com/docs/ci?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook)
 
 ## Submit the issue
 
-Finally, create your issue in the [Storybook issue tracker](https://github.com/storybookjs/storybook/issues/new/choose), go through the required steps, and provide a detailed description of the problem. Add the GitHub repository and [deployed reproduction](https://www.chromatic.com/docs/setup#view-published-storybook) to help with the triage process.
+Finally, create your issue in the [Storybook issue tracker](https://github.com/storybookjs/storybook/issues/new/choose), go through the required steps, and provide a detailed description of the problem. Add the GitHub repository and [deployed reproduction](https://www.chromatic.com/docs/setup?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook#view-published-storybook) to help with the triage process.
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 89f4e18ab902..55aeb8ca34ca 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -78,7 +78,7 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
 ```
 
 <div class="aside">
-💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding MDX files use <code>.mdx.mdx</code> .
+💡 Code snippets are divided into various file extensions, if you're contributing a TypeScript file use <code>.ts.mdx</code>, or if you're adding JavaScript files use <code>.js.mdx</code> .
 </div>
 
 Go through the rest of the documentation and repeat the process.
diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md
index e687dc449182..0eb6c7dd00e9 100644
--- a/docs/essentials/actions.md
+++ b/docs/essentials/actions.md
@@ -24,7 +24,6 @@ You can use [argTypes](../api/argtypes.md) to tell Storybook that an arg to your
 <CodeSnippets
   paths={[
     'common/button-story-onclick-action-argtype.js.mdx',
-    'common/button-story-onclick-action-argtype.mdx.mdx',
   ]}
 />
 
@@ -55,7 +54,6 @@ If you need more granular control over which `argTypes` are matched, you can adj
 <CodeSnippets
   paths={[
     'common/button-story-matching-argtypes.js.mdx',
-    'common/button-story-matching-argtypes.mdx.mdx',
   ]}
 />
 
@@ -76,7 +74,6 @@ It is also possible to detect if your component is emitting the correct HTML eve
 <CodeSnippets
   paths={[
     'common/button-story-action-event-handle.js.mdx',
-    'common/button-story-action-event-handle.mdx.mdx',
   ]}
 />
 
diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md
index 908aa2e2c868..9991d4732351 100644
--- a/docs/essentials/backgrounds.md
+++ b/docs/essentials/backgrounds.md
@@ -38,7 +38,6 @@ You can also define backgrounds per-component or per-story basis through [parame
 <CodeSnippets
   paths={[
     'common/storybook-addon-backgrounds-configure-backgrounds.js.mdx',
-    'common/storybook-addon-backgrounds-configure-backgrounds.mdx.mdx',
   ]}
 />
 
@@ -51,7 +50,6 @@ You can also override a single key on the `backgrounds` parameter, for instance,
 <CodeSnippets
   paths={[
     'common/storybook-addon-backgrounds-override-background-color.js.mdx',
-    'common/storybook-addon-backgrounds-override-background-color.mdx.mdx',
   ]}
 />
 
@@ -66,7 +64,6 @@ If you want to disable backgrounds in a story, you can do so by setting the `bac
 <CodeSnippets
   paths={[
     'common/storybook-addon-backgrounds-disable-backgrounds.js.mdx',
-    'common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx',
   ]}
 />
 
@@ -83,7 +80,6 @@ You don't need additional configuration to get started. But its properties are f
 <CodeSnippets
   paths={[
     'common/storybook-addon-backgrounds-configure-grid.js.mdx',
-    'common/storybook-addon-backgrounds-configure-grid.mdx.mdx',
   ]}
 />
 
@@ -98,7 +94,6 @@ If you need to disable the grid for a specific story, set the `backgrounds` para
 <CodeSnippets
   paths={[
     'common/storybook-addon-backgrounds-disable-grid.js.mdx',
-    'common/storybook-addon-backgrounds-disable-grid.mdx.mdx',
   ]}
 />
 
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index b2f5d69d9162..819f067396b7 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -51,7 +51,6 @@ For instance, suppose you have a `variant` arg on your story that should be `pri
 <CodeSnippets
   paths={[
     'common/button-story-controls-primary-variant.js.mdx',
-    'common/button-story-controls-primary-variant.mdx.mdx',
   ]}
 />
 
@@ -72,7 +71,6 @@ We can specify which controls get used by declaring a custom [argType](../api/ar
 <CodeSnippets
   paths={[
     'common/button-story-controls-radio-group.js.mdx',
-    'common/button-story-controls-radio-group.mdx.mdx',
   ]}
 />
 
@@ -118,13 +116,9 @@ Until now, we only used auto-generated controls based on the component we're wri
 <CodeSnippets
   paths={[
     'react/table-story-fully-customize-controls.js.mdx',
-    'react/table-story-fully-customize-controls.mdx.mdx',
     'vue/table-story-fully-customize-controls.2.js.mdx',
-    'vue/table-story-fully-customize-controls.mdx-2.mdx.mdx',
     'vue/table-story-fully-customize-controls.3.js.mdx',
-    'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
     'angular/table-story-fully-customize-controls.ts.mdx',
-    'angular/table-story-fully-customize-controls.mdx.mdx',
   ]}
 />
 
@@ -150,11 +144,8 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
   paths={[
     'react/component-story-custom-args-complex.js.mdx',
     'react/component-story-custom-args-complex.ts.mdx',
-    'react/component-story-custom-args-complex.mdx.mdx',
     'vue/component-story-custom-args-complex.3.js.mdx',
-    'vue/component-story-custom-args-complex.mdx-3.mdx.mdx',
     'angular/component-story-custom-args-complex.ts.mdx',
-    'angular/component-story-custom-args-complex.mdx.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
   ]}
 />
@@ -213,7 +204,6 @@ As shown above, you can configure individual controls with the “control" annot
 <CodeSnippets
   paths={[
     'common/gizmo-story-controls-customization.js.mdx',
-    'common/gizmo-story-controls-customization.mdx.mdx',
   ]}
 />
 
@@ -274,7 +264,6 @@ Suppose you want to disable Controls for a property called `foo` in a component'
 <CodeSnippets
   paths={[
     'common/component-story-disable-controls.js.mdx',
-    'common/component-story-disable-controls.mdx.mdx'
   ]}
 />
 
@@ -291,13 +280,16 @@ Resulting in the following change in Storybook UI:
 
 The previous example also removed the prop documentation from the table. In some cases, this is fine. However, sometimes you might want to render the prop documentation, but without a control. The following example illustrates how:
 
+<!-- prettier-ignore-start -->
+
 <CodeSnippets
 paths={[
-'common/component-story-disable-controls-alt.js.mdx',
-'common/component-story-disable-controls-alt.mdx.mdx'
-]}
+  'common/component-story-disable-controls-alt.js.mdx',
+ ]}
 />
 
+<!-- prettier-ignore-end -->
+
 <div class="aside">
 
 💡 As with other Storybook properties, such as [decorators](../writing-stories/decorators.md), you can apply the same pattern at a story level for more granular cases.
@@ -377,7 +369,6 @@ Consider the following story snippets:
 <CodeSnippets
   paths={[
     'common/component-story-disable-controls-regex.js.mdx',
-    'common/component-story-disable-controls-regex.mdx.mdx'
   ]}
 />
 
@@ -394,7 +385,6 @@ Consider the following snippet to force required args first:
 <CodeSnippets
   paths={[
     'common/component-story-sort-controls.js.mdx',
-    'common/component-story-sort-controls.mdx.mdx'
   ]}
 />
 
diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
index 6970a4e79310..393fc44ddbf8 100644
--- a/docs/essentials/toolbars-and-globals.md
+++ b/docs/essentials/toolbars-and-globals.md
@@ -101,13 +101,9 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
 <CodeSnippets
   paths={[
     'react/my-component-story-use-globaltype.js.mdx',
-    'react/my-component-story-use-globaltype.mdx.mdx',
     'vue/my-component-story-use-globaltype.js.mdx',
-    'vue/my-component-story-use-globaltype.mdx.mdx',
     'angular/my-component-story-use-globaltype.ts.mdx',
-    'angular/my-component-story-use-globaltype.mdx.mdx',
     'svelte/my-component-story-use-globaltype.js.mdx',
-    'svelte/my-component-story-use-globaltype.mdx.mdx',
     'web-components/my-component-story-use-globaltype.js.mdx',
   ]}
 />
diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
index dae7e44037b0..629f03697577 100644
--- a/docs/essentials/viewport.md
+++ b/docs/essentials/viewport.md
@@ -119,14 +119,10 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
   paths={[
     'react/my-component-story-configure-viewports.js.mdx',
     'react/my-component-story-configure-viewports.ts.mdx',
-    'react/my-component-story-configure-viewports.mdx.mdx',
     'vue/my-component-story-configure-viewports.js.mdx',
-    'vue/my-component-story-configure-viewports.mdx.mdx',
     'angular/my-component-story-configure-viewports.ts.mdx',
-    'angular/my-component-story-configure-viewports.mdx.mdx',
     'web-components/my-component-story-configure-viewports.js.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
-    'svelte/my-component-story-configure-viewports.mdx.mdx',
   ]}
 />
 
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index e1fb0bed0825..a25bb3bc85df 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -29,6 +29,7 @@ Storybook needs to be installed into a project that is already set up with a fra
 - 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
 - 📦 [Create a Vue App](https://vuejs.org/guide/quick-start.html)
 - 📦 [Ember CLI](https://guides.emberjs.com/release/getting-started/quick-start/)
+- 📦 [Vite CLI](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
 - Or any other tooling available.
 
 </details>
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 77aa586a2dc5..69f2018f0b3f 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -12,15 +12,10 @@ Pick a simple component from your project, like a Button, and write a `.stories.
   paths={[
     'react/your-component.js.mdx',
     'react/your-component.ts.mdx',
-    'react/your-component.mdx.mdx',
     'angular/your-component.ts.mdx',
-    'angular/your-component.mdx.mdx',
     'vue/your-component.2.js.mdx',
-    'vue/your-component.mdx-2.mdx.mdx',
     'vue/your-component.3.js.mdx',
-    'vue/your-component.mdx-3.mdx.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.mdx.mdx',
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',
     'html/your-component.ts.mdx',
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 34cf16d75b59..631941480a64 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -16,13 +16,9 @@ Let’s start with the `Button` component. A story is a function that describes
   paths={[
     'react/button-story.js.mdx',
     'react/button-story.ts.mdx',
-    'react/button-story.mdx.mdx',
     'angular/button-story.ts.mdx',
-    'angular/button-story.mdx.mdx',
     'vue/button-story.js.mdx',
-    'vue/button-story.mdx.mdx',
     'svelte/button-story.js.mdx',
-    'svelte/button-story.mdx.mdx',
     'web-components/button-story.js.mdx',
     'html/button-story.js.mdx',
     'html/button-story.ts.mdx',
@@ -44,16 +40,11 @@ The above story definition can be further improved to take advantage of [Storybo
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
-    'react/button-story-with-args.mdx.mdx',
     'vue/button-story-with-args.2.js.mdx',
-    'vue/button-story-with-args.mdx-2.mdx.mdx',
     'vue/button-story-with-args.3.js.mdx',
-    'vue/button-story-with-args.mdx-3.mdx.mdx',
     'angular/button-story-with-args.ts.mdx',
-    'angular/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
     'svelte/button-story-with-args.js.mdx',
-    'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
     'preact/button-story-with-args.js.mdx',
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index 58c5a88e7dfd..65a4fb7963db 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -13,7 +13,7 @@ Storybook integrates with design tools to speed up your development workflow. Th
 
 ### Embed Storybook in Figma with the plugin
 
-[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/), a publishing tool created by the Storybook team.
+[Storybook Connect](https://www.figma.com/community/plugin/1056265616080331589/Storybook-Connect) is a Figma plugin that allows you to embed component stories in Figma. It’s powered by [Storybook embeds](./embed.md) and [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), a publishing tool created by the Storybook team.
 
 <video autoPlay muted playsInline loop>
   <source src="figma-plugin-open-story.mp4" type="video/mp4" />
@@ -102,14 +102,10 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
   paths={[
     'react/component-story-figma-integration.js.mdx',
     'react/component-story-figma-integration.ts.mdx',
-    'react/component-story-figma-integration.mdx.mdx',
     'vue/component-story-figma-integration.js.mdx',
     'vue/component-story-figma-integration.ts.mdx',
-    'vue/component-story-figma-integration.mdx.mdx',
     'angular/component-story-figma-integration.ts.mdx',
-    'angular/component-story-figma-integration.mdx.mdx',
     'svelte/component-story-figma-integration.js.mdx',
-    'svelte/component-story-figma-integration.mdx.mdx',
   ]}
 />
 
diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index de46998efbfc..2f3a81019e3f 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -42,7 +42,7 @@ npx http-server ./path/to/build
 
 ## Publish Storybook with Chromatic
 
-Once you've built your Storybook as a static web app, you can publish it to your web host. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud.
+Once you've built your Storybook as a static web app, you can publish it to your web host. We recommend [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud.
 
 ![Storybook publishing workflow](./workflow-publish.png)
 
@@ -79,7 +79,7 @@ View it online at https://www.chromatic.com/build?appId=...&number=1.
 
 ### Setup CI to publish automatically
 
-Configure your CI environment to publish your Storybook and [run Chromatic](https://www.chromatic.com/docs/ci)) whenever you push code to a repository. Let's see how to set it up using GitHub Actions.
+Configure your CI environment to publish your Storybook and [run Chromatic](https://www.chromatic.com/docs/ci?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook)) whenever you push code to a repository. Let's see how to set it up using GitHub Actions.
 
 In your project's root directory, add a new file called `chromatic.yml` inside the `.github/workflows` directory:
 
@@ -109,7 +109,7 @@ Publishing Storybook as part of the development process makes it quick and easy
 
 A common method to ask for review is to paste a link to the published Storybook in a pull request or Slack.
 
-If you publish your Storybook to Chromatic, you can use the [UI Review](https://www.chromatic.com/features/publish) feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.
+If you publish your Storybook to Chromatic, you can use the [UI Review](https://www.chromatic.com/features/publish?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.
 
 ![UI review in Chromatic](./workflow-uireview.png)
 
@@ -139,7 +139,7 @@ This level of service serves published Storybooks and makes the following availa
 - Support for `/stories.json`
 - Support for `/metadata.json` and the `releases` field.
 
-Example: [Chromatic](https://www.chromatic.com/)
+Example: [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook)
 
 ### CPP level 0
 
diff --git a/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx b/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx
index b7bbb8881bfd..ba683ebcab3e 100644
--- a/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx
+++ b/docs/snippets/angular/add-localize-package-to-polyfills.ts.mdx
@@ -2,4 +2,4 @@
 // src/polyfills.ts
 
 import '@angular/localize/init';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx b/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx
index e4bc6543bc87..a4ff6cb2d888 100644
--- a/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx
+++ b/docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx
@@ -36,4 +36,4 @@ export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
   ],
 })
 export class MockGraphQLModule {}
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx
index 4666f575b13e..aacd52a21834 100644
--- a/docs/snippets/angular/app-story-with-mock.ts.mdx
+++ b/docs/snippets/angular/app-story-with-mock.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // App.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { AppComponent } from './app.component';
 
-export default {
+const meta: Meta<AppComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'App',
   component: AppComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<AppComponent>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
index 7ab12337fc6b..2e5d1a766116 100644
--- a/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
+++ b/docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
@@ -3,4 +3,4 @@
 # See https://storybook.js.org/docs/7.0/angular/get-started/install
 # to learn how to create the custom builder
 ng run my-project:build-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/button-component-with-proptypes.ts.mdx b/docs/snippets/angular/button-component-with-proptypes.ts.mdx
index 06d8a9a6f10c..1084aa0336d7 100644
--- a/docs/snippets/angular/button-component-with-proptypes.ts.mdx
+++ b/docs/snippets/angular/button-component-with-proptypes.ts.mdx
@@ -5,10 +5,9 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'my-button',
-  template: `
-    <button type="button" [disabled]="isDisabled">
-      {{ content }}
-    </button>`,
+  template: ` <button type="button" [disabled]="isDisabled">
+    {{ content }}
+  </button>`,
   styleUrls: ['./button.css'],
 })
 export class ButtonComponent {
@@ -24,4 +23,4 @@ export class ButtonComponent {
   @Input()
   content: string;
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx
index b444db3c4e30..c07f7c3ae642 100644
--- a/docs/snippets/angular/button-group-story.ts.mdx
+++ b/docs/snippets/angular/button-group-story.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // ButtonGroup.stories.ts
 
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -11,7 +13,7 @@ import { Button } from './button.component';
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
-export default {
+const meta: Meta<ButtonGroup> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,7 +26,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<ButtonGroup>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/button-implementation.ts.mdx b/docs/snippets/angular/button-implementation.ts.mdx
index d37ef9dc2811..09b9e94e60af 100644
--- a/docs/snippets/angular/button-implementation.ts.mdx
+++ b/docs/snippets/angular/button-implementation.ts.mdx
@@ -40,4 +40,4 @@ export class ButtonComponent {
   @Output()
   onClick = new EventEmitter<Event>();
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
index 6041ffe8f2c7..50e12f7f54af 100644
--- a/docs/snippets/angular/button-story-click-handler-args.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -1,20 +1,22 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
-
+import type { Meta, StoryObj } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 export const Text: Story = {
   render: (args) => ({
diff --git a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
index f2e4a6f8aa9f..9b445004e175 100644
--- a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 export const Text: Story = {
   args: {...},
diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx
index 5fb5a87b1024..49b688947860 100644
--- a/docs/snippets/angular/button-story-click-handler.ts.mdx
+++ b/docs/snippets/angular/button-story-click-handler.ts.mdx
@@ -1,20 +1,23 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 import { action } from '@storybook/addon-actions';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 export const Text: Story = {
   render: () => ({
diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
index fbab7dec15d1..1d776f87a245 100644
--- a/docs/snippets/angular/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -20,5 +20,7 @@ export default {
     //👇 Now all Button stories will be primary.
     primary: true,
   },
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/button-story-component-decorator.ts.mdx b/docs/snippets/angular/button-story-component-decorator.ts.mdx
index a47a543849a6..0d21aa514c44 100644
--- a/docs/snippets/angular/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/angular/button-story-component-decorator.ts.mdx
@@ -1,13 +1,15 @@
 ```ts
 // Button.stories.ts
 
-import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 import { Parent } from './parent.component'; // Parent contains ng-content
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -23,5 +25,7 @@ export default {
     // With component which contains ng-content
     componentWrapperDecorator(Parent),
   ],
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/button-story-decorator.ts.mdx b/docs/snippets/angular/button-story-decorator.ts.mdx
index f09d0111966a..e1a03bc21ae9 100644
--- a/docs/snippets/angular/button-story-decorator.ts.mdx
+++ b/docs/snippets/angular/button-story-decorator.ts.mdx
@@ -1,19 +1,24 @@
 ```ts
 // Button.stories.mdx
 
-import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
+import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 import { Parent } from './parent.component'; // Parent contains ng-content
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 export const Primary: Story = {
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
@@ -27,4 +32,4 @@ export const InsideParent: Story = {
     componentWrapperDecorator(Parent),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
index c17664e80879..58d38a80c68f 100644
--- a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
@@ -5,12 +5,14 @@ import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/button-story-rename-story.ts.mdx b/docs/snippets/angular/button-story-rename-story.ts.mdx
index de9032490199..566668c2667d 100644
--- a/docs/snippets/angular/button-story-rename-story.ts.mdx
+++ b/docs/snippets/angular/button-story-rename-story.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/button-story-using-args.ts.mdx b/docs/snippets/angular/button-story-using-args.ts.mdx
index b73ee953f4b6..5dde4ffa4d46 100644
--- a/docs/snippets/angular/button-story-using-args.ts.mdx
+++ b/docs/snippets/angular/button-story-using-args.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/button-story-with-addon-example.ts.mdx b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
index 651030d9e536..b2ef67fd1579 100644
--- a/docs/snippets/angular/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/angular/button-story-with-addon-example.ts.mdx
@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -18,7 +18,10 @@ export default {
       data: 'this data is passed to the addon',
     },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.ts.mdx
index b2825b9cbc67..1eed0af3a3d7 100644
--- a/docs/snippets/angular/button-story-with-args.ts.mdx
+++ b/docs/snippets/angular/button-story-with-args.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular/';
+import type { Meta, StoryObj } from '@storybook/angular/';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/button-story-with-blue-args.ts.mdx b/docs/snippets/angular/button-story-with-blue-args.ts.mdx
index e6a8a4afb695..7e92d2ba9162 100644
--- a/docs/snippets/angular/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/angular/button-story-with-blue-args.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,5 +22,7 @@ export default {
       ],
     },
   },
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/button-story-with-emojis.ts.mdx b/docs/snippets/angular/button-story-with-emojis.ts.mdx
index 9e4bc9c4dc10..02fba9097f36 100644
--- a/docs/snippets/angular/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/angular/button-story-with-emojis.ts.mdx
@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -14,6 +14,9 @@ export default {
   component: Button,
 };
 
+export default meta;
+type Story = StoryObj<Button>;
+
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/angular/api/csf
diff --git a/docs/snippets/angular/button-story-with-parameters.ts.mdx b/docs/snippets/angular/button-story-with-parameters.ts.mdx
index 4bac6bb9b8a8..1dd99236e8e2 100644
--- a/docs/snippets/angular/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/angular/button-story-with-parameters.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -20,5 +20,7 @@ export default {
       ],
     },
   },
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/button-story.ts.mdx b/docs/snippets/angular/button-story.ts.mdx
index 05c0f92ef72a..deb65462f550 100644
--- a/docs/snippets/angular/button-story.ts.mdx
+++ b/docs/snippets/angular/button-story.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/checkbox-story-csf.ts.mdx b/docs/snippets/angular/checkbox-story-csf.ts.mdx
index 136bffaa5cd7..c336aa560a3d 100644
--- a/docs/snippets/angular/checkbox-story-csf.ts.mdx
+++ b/docs/snippets/angular/checkbox-story-csf.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Checkbox.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Checkbox } from './Checkbox.component';
 
-export default {
+const meta: Meta<Checkbox> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Checkbox',
   component: Checkbox,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Checkbox>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/component-story-custom-args-complex.ts.mdx b/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
index 3c0e1267c6ea..506f5a16b209 100644
--- a/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/angular/component-story-custom-args-complex.ts.mdx
@@ -1,11 +1,11 @@
 ```ts
 // YourComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { YourComponent } from './your-component.component';
 
-export default {
+const meta: Meta<YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,7 +22,10 @@ export default {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
     },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<YourComponent>;
 
 //👇 Some function to demonstrate the behavior
 const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
@@ -48,4 +51,4 @@ export const ExampleStory: Story = {
   },
   args: { propertyA: 'Item One', propertyB: 'Another Item One' },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/component-story-custom-args-icons.ts.mdx b/docs/snippets/angular/component-story-custom-args-icons.ts.mdx
index a2db4b2b85c9..93150e6983a2 100644
--- a/docs/snippets/angular/component-story-custom-args-icons.ts.mdx
+++ b/docs/snippets/angular/component-story-custom-args-icons.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Icon.stories.ts
 
-import type { Meta, StoryFn } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import Icon from './icon.component';
 
@@ -10,7 +10,7 @@ import { IconA, IconB, IconC, IconD, IconE } from './icons';
 // Maps the icons to a JSON serializable object to be safely used with the argTypes
 const iconMap = { IconA, IconB, IconC, IconD, IconE };
 
-export default {
+const meta: Meta<Icon> = {
   title: 'My Story with Icons',
   component: Icon,
   argTypes: {
@@ -18,9 +18,12 @@ export default {
       options: Object.keys(iconMap),
     },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Icon>;
 
-const Template: Story<Icon> = (args) => {
+const Template: Story = (args) => {
   // retrieves the appropriate icon passes it as a component prop
   const { icon } = args;
   const selectedIcon = iconMap[icon];
diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
index bad132b082d9..74960fa4066a 100644
--- a/docs/snippets/angular/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Story, Meta } from '@storybook/angular/';
+import type { Meta, StoryObj } from '@storybook/angular/';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent.component';
 
 // More on default export: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction#default-export
-export default {
+const meta: Meta<MyComponent> = {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const Example: Story = {
   parameters: {
diff --git a/docs/snippets/angular/component-story-highlight-addon.ts.mdx b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
index 79282658faf8..be3afaf33792 100644
--- a/docs/snippets/angular/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
@@ -1,30 +1,34 @@
-```js
+```ts
 // Card.stories.ts
 
-import { componentWrapperDecorator, Meta, Story } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { useChannel } from '@storybook/addons';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
-import { Card } form './card.component';
+import { Card } from './card.component';
 
-export default {
+const meta: Meta<Card> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Card',
-  component: Card
-} as Meta;
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<Card>;
 
 export const Default: Story = (args) => ({
   template: '<app-card></app-card>',
+  decorators: [
+    componentWrapperDecorator((story) => {
+      const emit = useChannel({});
+      emit(HIGHLIGHT, {
+        elements: ['.title', '.subtitle'],
+      });
+      return story;
+    }),
+  ],
 });
-Default.decorators = [
-  componentWrapperDecorator((story) => {
-    const emit = useChannel({});
-    emit(HIGHLIGHT, {
-      elements: ['.title', '.subtitle'],
-    });
-    return story;
-  }),
-];
 ```
diff --git a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
index 716f4955063a..ab8b6e2b98a6 100644
--- a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
index 392d0eff8518..851ceff6cace 100644
--- a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx
@@ -1,20 +1,23 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 import imageFile from './static/image.png';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 const image = {
   src: imageFile,
diff --git a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
index 31b8d3860889..4b0316329b9c 100644
--- a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Assume image.png is located in the "public" directory.
 export const WithAnImage: Story = {
diff --git a/docs/snippets/angular/component-story-with-accessibility.ts.mdx b/docs/snippets/angular/component-story-with-accessibility.ts.mdx
index ada447b69928..f6c148f2e926 100644
--- a/docs/snippets/angular/component-story-with-accessibility.ts.mdx
+++ b/docs/snippets/angular/component-story-with-accessibility.ts.mdx
@@ -1,11 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './Button.component';
 
-export default {
+const meta: Meta<Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
@@ -14,7 +14,10 @@ export default {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 // This is an accessible story
 export const Accessible: Story = {
diff --git a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
index 41caa5907d30..6b15b781ee60 100644
--- a/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/angular/component-story-with-custom-render-function.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -9,7 +11,7 @@ import { Layout } from './Layout.component';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,7 +24,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const Example: Story = {
   render: () => ({
@@ -38,4 +43,4 @@ export const Example: Story = {
     `,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/custom-build-script-production.script-for-builder.js.mdx b/docs/snippets/angular/custom-build-script-production.script-for-builder.js.mdx
index e5e4617ce530..c5778450fffd 100644
--- a/docs/snippets/angular/custom-build-script-production.script-for-builder.js.mdx
+++ b/docs/snippets/angular/custom-build-script-production.script-for-builder.js.mdx
@@ -4,4 +4,4 @@
     "build-storybook": "ng run my-project:build-storybook"
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/document-screen-fetch.ts.mdx b/docs/snippets/angular/document-screen-fetch.ts.mdx
index cb0105e9fea3..e6de8c777e3c 100644
--- a/docs/snippets/angular/document-screen-fetch.ts.mdx
+++ b/docs/snippets/angular/document-screen-fetch.ts.mdx
@@ -45,4 +45,4 @@ export class DocumentScreen implements OnInit {
     });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/document-screen-with-graphql.ts.mdx b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
index 31b4711befd5..be521f486212 100644
--- a/docs/snippets/angular/document-screen-with-graphql.ts.mdx
+++ b/docs/snippets/angular/document-screen-with-graphql.ts.mdx
@@ -66,4 +66,4 @@ export class SampleGraphqlComponent implements OnInit {
       });
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
index ab4a2b8d800b..745b10d5a6ee 100644
--- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // YourPage.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
@@ -15,7 +17,7 @@ import { PageLayout } from './PageLayout.component';
 
 import { MockGraphQLModule } from './mock-graphql.module';
 
-export default {
+const meta: Meta<DocumentScreen> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -28,7 +30,9 @@ export default {
       imports: [CommonModule, HttpClientModule, MockGraphQLModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
 
 //👇The mocked data that will be used in the story
 const TestData = {
@@ -79,6 +83,8 @@ const TestData = {
   ],
 };
 
+type Story = StoryObj<DocumentScreen>;
+
 export const MockedSuccess: Story = {
   parameters: {
     msw: [
diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
index 811734d3daec..8022fd7848db 100644
--- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // YourPage.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
@@ -13,7 +15,7 @@ import { DocumentList } from './DocumentList.component';
 import { DocumentHeader } from './DocumentHeader.component';
 import { PageLayout } from './PageLayout.component';
 
-export default {
+const meta: Meta<DocumentScreen> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -26,7 +28,10 @@ export default {
       imports: [CommonModule, HttpClientModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<DocumentScreen>;
 
 //👇The mocked data that will be used in the story
 const TestData = {
diff --git a/docs/snippets/angular/histogram-story.ts.mdx b/docs/snippets/angular/histogram-story.ts.mdx
index cf599b751156..dfaacf578b1e 100644
--- a/docs/snippets/angular/histogram-story.ts.mdx
+++ b/docs/snippets/angular/histogram-story.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Histogram.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { HistogramComponent } from './histogram.component';
 
-export default {
+const meta: Meta<HistogramComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
   component: HistogramComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<HistogramComponent>;
 
 export const Default: Story = {
   args: {
@@ -22,4 +25,4 @@ export const Default: Story = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/list-story-expanded.ts.mdx b/docs/snippets/angular/list-story-expanded.ts.mdx
index 0cdf2052046c..099f97c5ea9d 100644
--- a/docs/snippets/angular/list-story-expanded.ts.mdx
+++ b/docs/snippets/angular/list-story-expanded.ts.mdx
@@ -1,14 +1,16 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -21,7 +23,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
@@ -53,4 +58,4 @@ export const ManyItems: Story = {
     `,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx
index 2e758b034060..14d5307f98ba 100644
--- a/docs/snippets/angular/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -11,7 +13,7 @@ import { ListItem } from './list-item.component';
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,9 +26,12 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
- /*
+/*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/angular/api/csf
  * to learn how to use render functions.
@@ -47,4 +52,4 @@ export const ManyItems: Story = {
     `,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/list-story-starter.ts.mdx b/docs/snippets/angular/list-story-starter.ts.mdx
index 6a96500658a9..06d496ca7dc3 100644
--- a/docs/snippets/angular/list-story-starter.ts.mdx
+++ b/docs/snippets/angular/list-story-starter.ts.mdx
@@ -1,13 +1,15 @@
 ```ts
 // List.stories.ts
 
-import { Meta, StoryFn, moduleMetadata } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -19,7 +21,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
diff --git a/docs/snippets/angular/list-story-template.ts.mdx b/docs/snippets/angular/list-story-template.ts.mdx
index 0848e1c36cca..8374ee6c7621 100644
--- a/docs/snippets/angular/list-story-template.ts.mdx
+++ b/docs/snippets/angular/list-story-template.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -11,7 +13,7 @@ import { ListItem } from './list-item.component';
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,9 +26,12 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
- /*
+/*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/angular/api/csf
  * to learn how to use render functions.
@@ -55,4 +60,4 @@ export const OneItem: Story = {
     items: [{ ...Unchecked.args }],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
index 148bb5da82b1..8a1a54501fe7 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -11,7 +13,7 @@ import { ListItem } from './list-item.component';
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,7 +26,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -44,4 +49,4 @@ export const OneItem: Story = {
     ...Unchecked.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
index 7cbd13e0190d..ae0b866d2b0c 100644
--- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
@@ -1,14 +1,16 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-export default {
+const meta: Meta<List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,7 +24,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/loader-story.ts.mdx b/docs/snippets/angular/loader-story.ts.mdx
index 515f920b3fc6..cd878e0db834 100644
--- a/docs/snippets/angular/loader-story.ts.mdx
+++ b/docs/snippets/angular/loader-story.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // TodoItem.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import fetch from 'node-fetch';
 
@@ -9,7 +11,7 @@ import { CommonModule } from '@angular/common';
 
 import { TodoItem } from './TodoItem';
 
-export default {
+const meta: Meta<TodoItem> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,9 +24,12 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<TodoItem>;
 
- /*
+/*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/angular/api/csf
  * to learn how to use render functions.
@@ -42,4 +47,4 @@ export const Primary: Story = {
     }),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/login-form-with-play-function.ts.mdx b/docs/snippets/angular/login-form-with-play-function.ts.mdx
index d668cef903e6..3de095df1789 100644
--- a/docs/snippets/angular/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/angular/login-form-with-play-function.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // LoginForm.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -9,20 +9,26 @@ import { expect } from '@storybook/jest';
 
 import { LoginForm } from './LoginForm.component';
 
-export default {
+const meta: Meta<LoginForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<LoginForm>;
 
 export const EmptyForm: Story = {};
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
diff --git a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
index 36f5458a3e27..ce6f4669b465 100644
--- a/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
@@ -1,25 +1,34 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'QueryMethods',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleWithRole: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-play-function-composition.ts.mdx b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
index 4c357654ce3d..349f8f41a028 100644
--- a/docs/snippets/angular/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-composition.ts.mdx
@@ -1,39 +1,52 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FirstStory: Story = {
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
 export const SecondStory: Story = {
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
 export const CombinedStories: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx b/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx
index ba9229b5c11e..6704e86c71fb 100644
--- a/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-query-findby.ts.mdx
@@ -1,27 +1,36 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Async Query Methods',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const AsyncExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
index 9d6753110c5e..673a1922618d 100644
--- a/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
@@ -1,24 +1,33 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithAsync',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleAsyncStory: Story = {
-  play: async () => {
-    const Input = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -27,11 +36,11 @@ export const ExampleAsyncStory: Story = {
     });
 
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
diff --git a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
index 174ff2378968..55979381bd07 100644
--- a/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
@@ -1,20 +1,23 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { getByRole, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithCanvasElement',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const ExampleStory: Story = {
   play: async ({ canvasElement }) => {
diff --git a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
index bbff077d97a2..1111f8fc2e6d 100644
--- a/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
@@ -1,32 +1,43 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ClickExamples',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ClickExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
 export const FireEventExample: Story = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
 ```
diff --git a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
index dfc26e57fdd1..2f0e71bf4a4d 100644
--- a/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
@@ -1,31 +1,40 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithDelay',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const DelayedStory: Story = {
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
diff --git a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
index b59cfa636664..103c34c7c280 100644
--- a/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
@@ -1,29 +1,38 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithSelectEvent',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 // Function to emulate pausing between interactions
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleChangeEvent: Story = {
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
diff --git a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
index 9d77538d671b..84d883e23d6c 100644
--- a/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
@@ -1,22 +1,25 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const Default: Story = {};
 
-export const WithProp: StoryObj = {
+export const WithProp: Story = {
   render: () => ({
     props: {
       prop: 'value',
diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
index 9a0b3c70ef44..d07d01f9443f 100644
--- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx
@@ -1,13 +1,13 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,7 +24,10 @@ export default {
       defaultViewport: 'iphone6',
     },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
index d2fe8932164c..1cf7ec80db62 100644
--- a/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
+++ b/docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx
@@ -7,4 +7,4 @@ export const StoryWithLocale = ({ globals: { locale } }) => {
     template: `<p>${caption}</p>`,
   };
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
index 9fab120bba18..75fcd85594d3 100644
--- a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
+++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 const getCaptionForLocale = (locale) => {
   switch (locale) {
@@ -29,7 +32,7 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = {
+export const StoryWithLocale: Story = {
   render: (args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
diff --git a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
index 57f0fbcff8bf..d845c63e2d67 100644
--- a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
@@ -1,13 +1,13 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
 import someData from './data.json';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -16,11 +16,15 @@ export default {
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
-} as Meta;
+};
+
+export default meta;
 
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
+type Story = StoryObj<MyComponent>;
+
 export const SimpleStory: Story = {
   args: {
     data: simpleData,
@@ -32,4 +36,4 @@ export const ComplexStory: Story = {
     data: complexData,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/my-component-with-env-variables.ts.mdx b/docs/snippets/angular/my-component-with-env-variables.ts.mdx
index 1d50cb33c995..2c303c635d8b 100644
--- a/docs/snippets/angular/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/angular/my-component-with-env-variables.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const ExampleStory: Story = {
   args: {
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
index 31e97cc1b2ec..37c82b007094 100644
--- a/docs/snippets/angular/page-story-slots.ts.mdx
+++ b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Page.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-export default {
+const meta: Meta<Page> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
   component: Page,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Page>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/angular/page-story-with-args-composition.ts.mdx b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
index 39732dacb4d8..b34f441480b3 100644
--- a/docs/snippets/angular/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // YourPage.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -15,7 +17,7 @@ import * as PageLayoutStories from './PageLayout.stories';
 import * as DocumentHeaderStories from './DocumentHeader.stories';
 import * as DocumentListStories from './DocumentList.stories';
 
-export default {
+const meta: Meta<DocumentScreen> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -28,7 +30,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<DocumentScreen>;
 
 export const ExampleWithRole: Story = {
   args: {
@@ -37,4 +42,4 @@ export const ExampleWithRole: Story = {
     subdocuments: DocumentListStories.DocumentListSimple.args.documents,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/page-story.ts.mdx b/docs/snippets/angular/page-story.ts.mdx
index 757992acd8ed..a7607b7a4ebd 100644
--- a/docs/snippets/angular/page-story.ts.mdx
+++ b/docs/snippets/angular/page-story.ts.mdx
@@ -1,7 +1,9 @@
 ```ts
 // Page.stories.ts
 
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -12,7 +14,7 @@ import { Page } from './page.component';
 //👇 Imports all Header stories
 import * as HeaderStories from './Header.stories';
 
-export default {
+const meta: Meta<Page> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -25,7 +27,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Page>;
 
 export const LoggedIn: Story = {
   args: {
diff --git a/docs/snippets/angular/register-component-with-play-function.ts.mdx b/docs/snippets/angular/register-component-with-play-function.ts.mdx
index c327886df4dc..63f77a8aa3b8 100644
--- a/docs/snippets/angular/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/angular/register-component-with-play-function.ts.mdx
@@ -1,24 +1,33 @@
 ```ts
 // RegistrationForm.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm.component';
 
-export default {
+const meta: Meta<RegistrationForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'RegistrationForm',
   component: RegistrationForm,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<RegistrationForm>;
 
+/*
+ * See https://storybook.js.org/docs/7.0/angular/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -26,7 +35,7 @@ export const FilledForm: Story = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -34,7 +43,7 @@ export const FilledForm: Story = {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },
diff --git a/docs/snippets/angular/simple-page-implementation.ts.mdx b/docs/snippets/angular/simple-page-implementation.ts.mdx
index 84bdbf7aa3b8..9c3772fdcabd 100644
--- a/docs/snippets/angular/simple-page-implementation.ts.mdx
+++ b/docs/snippets/angular/simple-page-implementation.ts.mdx
@@ -22,4 +22,4 @@ export class DocumentScreen {
   @Input()
   subdocuments: any = [];
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
index eab98a9b6d8c..ad333ee4e58a 100644
--- a/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Disable a11y addon',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const NonA11yStory: Story = {
   parameters: {
diff --git a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
index 55ee745937cf..827b1f990f9d 100644
--- a/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
-export default {
+const meta: Meta<MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Configure a11y addon',
   component: MyComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
 
 export const ExampleStory: Story = {
   parameters: {
diff --git a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
index 77513950c915..39acae4c8b72 100644
--- a/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
+++ b/docs/snippets/angular/storybook-preview-global-decorator.ts.mdx
@@ -1,9 +1,11 @@
-```js
-// .storybook/preview.js
+```ts
+// .storybook/preview.ts
 
 import { componentWrapperDecorator } from '@storybook/angular';
 
-export const decorators = [
+import type { Decorator } from '@storybook/angular';
+
+export const decorators: Decorator[] = [
   componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/storybook-preview-with-angular-polyfills.js.mdx b/docs/snippets/angular/storybook-preview-with-angular-polyfills.js.mdx
index 915ab54fc980..d1688e5217ea 100644
--- a/docs/snippets/angular/storybook-preview-with-angular-polyfills.js.mdx
+++ b/docs/snippets/angular/storybook-preview-with-angular-polyfills.js.mdx
@@ -18,4 +18,4 @@ export const parameters = {
   },
   docs: { inlineStories: true },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
index 5b58038841fb..614a1cc51516 100644
--- a/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
+++ b/docs/snippets/angular/storybook-preview-with-styled-components-decorator.ts.mdx
@@ -1,20 +1,23 @@
-```js
-// .storybook/preview.js
+```ts
+// .storybook/preview.ts
 
 import { componentWrapperDecorator } from '@storybook/angular';
+
+import type { Decorator } from '@storybook/angular';
+
 import { ThemeProvider } from './theme-provider.component';
 
-export const decorators = [
+export const decorators: Decorator[] = [
   moduleMetadata({ declarations: [ThemeProvider] }),
   componentWrapperDecorator((story) => `<theme-provider class="default">${story}</theme-provider>`),
 ];
 
 // or with globals of story context
-export const decorators = [
+export const decorators: Decorator[] = [
   moduleMetadata({ declarations: [ThemeProvider] }),
   componentWrapperDecorator(
     (story) => `<theme-provider [class]="theme">${story}</theme-provider>`,
     ({ globals }) => ({ theme: globals.theme })
   ),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/storybook-run-dev.with-builder.js.mdx b/docs/snippets/angular/storybook-run-dev.with-builder.js.mdx
index cc38d83dec77..f7c9dc95874e 100644
--- a/docs/snippets/angular/storybook-run-dev.with-builder.js.mdx
+++ b/docs/snippets/angular/storybook-run-dev.with-builder.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 ng run my-project:storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
index d8e2e2226541..01e604ab1eef 100644
--- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
+++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx
@@ -1,26 +1,29 @@
 ```ts
 // Table.stories.ts
 
-import type { Meta, StoryObj } from '@storybook/angular',
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Table } from './Table.component';
 
-export default {
+const meta: Meta<Table> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Custom Table',
   component: Table,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Table>;
 
- /*
+/*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/angular/api/csf
  * to learn how to use render functions.
  */
-export const Numeric: StoryObj<Table> = {
-  render:(args)=>({
+export const Numeric: Story = {
+  render: (args) => ({
     props: args,
     template: `
       <table>
@@ -34,7 +37,7 @@ export const Numeric: StoryObj<Table> = {
       </table>
     `,
   }),
-  args:{
+  args: {
     data: [
       [1, 2, 3],
       [4, 5, 6],
diff --git a/docs/snippets/angular/your-component-with-decorator.ts.mdx b/docs/snippets/angular/your-component-with-decorator.ts.mdx
index 5a99d33d6f15..799fbfbd9bfe 100644
--- a/docs/snippets/angular/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/angular/your-component-with-decorator.ts.mdx
@@ -1,11 +1,13 @@
 ```ts
 // YourComponent.stories.ts
 
-import { componentWrapperDecorator, Meta } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
+
+import type { Meta } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
 
-export default {
+const meta: Meta<YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -13,5 +15,7 @@ export default {
   title: 'YourComponent',
   component: YourComponent,
   decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/angular/your-component.ts.mdx b/docs/snippets/angular/your-component.ts.mdx
index f4e199eb727d..e20ddfe14bc7 100644
--- a/docs/snippets/angular/your-component.ts.mdx
+++ b/docs/snippets/angular/your-component.ts.mdx
@@ -1,19 +1,22 @@
 ```ts
 // YourComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 
 import { YourComponent } from './your.component';
 
 //👇 This default export determines where your story goes in the story list
-export default {
+const meta: Meta<YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
   component: YourComponent,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<YourComponent>;
 
 export const FirstStory: Story = {
   args: {
diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
index 96a8a5a57b10..8a2f9b84482d 100644
--- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
@@ -26,7 +26,7 @@ const ExampleToolbar = () => {
   };
 
   const toggleOutline = useCallback(() => refreshAndUpdateGlobal(), [isActive]);
-  
+
   return (
     <IconButton
       key="Example"
@@ -38,4 +38,4 @@ const ExampleToolbar = () => {
     </IconButton>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/addon-consume-globaltype.js.mdx b/docs/snippets/common/addon-consume-globaltype.js.mdx
index 98954fe9b9dc..97707ed3e107 100644
--- a/docs/snippets/common/addon-consume-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-globaltype.js.mdx
@@ -39,4 +39,4 @@ const ThemePanel = (props) => {
     </AddonPanel>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/args-usage-with-addons.js.mdx b/docs/snippets/common/args-usage-with-addons.js.mdx
index 77d833352065..ef267c7f0a69 100644
--- a/docs/snippets/common/args-usage-with-addons.js.mdx
+++ b/docs/snippets/common/args-usage-with-addons.js.mdx
@@ -13,4 +13,4 @@ resetArgs((argNames: ['key']));
 
 // To reset all args
 resetArgs();
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/badge-story-custom-argtypes.js.mdx b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
index 7fc6076d0d3c..b6516219a7b3 100644
--- a/docs/snippets/common/badge-story-custom-argtypes.js.mdx
+++ b/docs/snippets/common/badge-story-custom-argtypes.js.mdx
@@ -40,4 +40,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/build-storybook-production-mode.npm.js.mdx b/docs/snippets/common/build-storybook-production-mode.npm.js.mdx
index 15ee902eae48..9c9772fa2f98 100644
--- a/docs/snippets/common/build-storybook-production-mode.npm.js.mdx
+++ b/docs/snippets/common/build-storybook-production-mode.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run build-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx b/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx
index eda3dbd3ad90..98584cdeee79 100644
--- a/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx
+++ b/docs/snippets/common/build-storybook-production-mode.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn build-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-group-story-subcomponents.js.mdx b/docs/snippets/common/button-group-story-subcomponents.js.mdx
index 94e8780fcbce..ccf0eb01a00d 100644
--- a/docs/snippets/common/button-group-story-subcomponents.js.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.js.mdx
@@ -12,4 +12,4 @@ export default {
   component: ButtonGroup,
   subcomponents: { Button },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-group-story-subcomponents.ts.mdx b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
index 81d82bfba259..4bb3d2c87321 100644
--- a/docs/snippets/common/button-group-story-subcomponents.ts.mdx
+++ b/docs/snippets/common/button-group-story-subcomponents.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/react';
 
 import { Button, ButtonGroup } from './ButtonGroup';
 
-export default {
+const meta: Meta<typeof ButtonGroup> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -13,5 +13,7 @@ export default {
   title: 'ButtonGroup',
   component: ButtonGroup,
   subcomponents: { Button },
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx
index cc602a0a2ad8..024645fd144f 100644
--- a/docs/snippets/common/button-story-action-event-handle.js.mdx
+++ b/docs/snippets/common/button-story-action-event-handle.js.mdx
@@ -16,6 +16,6 @@ export default {
       handles: ['mouseover', 'click .btn'],
     },
   },
-  decorators: [withActions]
+  decorators: [withActions],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
index f88021cad8db..9844e9139813 100644
--- a/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-categories.js.mdx
@@ -43,4 +43,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
index 9f9a4ccbfd9f..793b61bc5c3b 100644
--- a/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
+++ b/docs/snippets/common/button-story-argtypes-with-subcategories.js.mdx
@@ -47,4 +47,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
index c5a03c5a073c..8f1d9dc2a916 100644
--- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx
+++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx
@@ -17,4 +17,4 @@ export const Primary = {
     variant: 'primary',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx
index b719fb3fddd6..dfbed3281748 100644
--- a/docs/snippets/common/button-story-controls-radio-group.js.mdx
+++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx
@@ -17,4 +17,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-default-export.js.mdx b/docs/snippets/common/button-story-default-export.js.mdx
index db83125c508e..d874e9d5e16f 100644
--- a/docs/snippets/common/button-story-default-export.js.mdx
+++ b/docs/snippets/common/button-story-default-export.js.mdx
@@ -11,4 +11,4 @@ export default {
   title: 'Button',
   component: Button,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-disable-addon.js.mdx b/docs/snippets/common/button-story-disable-addon.js.mdx
index db10fb915189..837e6f1197bc 100644
--- a/docs/snippets/common/button-story-disable-addon.js.mdx
+++ b/docs/snippets/common/button-story-disable-addon.js.mdx
@@ -14,4 +14,4 @@ export default {
     myAddon: { disable: true }, // Disables the addon
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-disable-docspage-component.js.mdx b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
index c69e2b667993..46aa7948beb5 100644
--- a/docs/snippets/common/button-story-disable-docspage-component.js.mdx
+++ b/docs/snippets/common/button-story-disable-docspage-component.js.mdx
@@ -19,4 +19,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-docs-code-type.js.mdx b/docs/snippets/common/button-story-docs-code-type.js.mdx
index 0cb0e70bcf58..2a0670ec2553 100644
--- a/docs/snippets/common/button-story-docs-code-type.js.mdx
+++ b/docs/snippets/common/button-story-docs-code-type.js.mdx
@@ -23,4 +23,4 @@ export default {
 };
 
 // Remainder story implementation
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
index 176e5513a3b1..f41ec86d4569 100644
--- a/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-custom-component.js.mdx
@@ -21,4 +21,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
index 6b6c426060b9..cc7d7edf0d6c 100644
--- a/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
+++ b/docs/snippets/common/button-story-docspage-with-mdx.js.mdx
@@ -45,4 +45,4 @@ export const Small = {
     size:'small',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-grouped.js.mdx b/docs/snippets/common/button-story-grouped.js.mdx
index 2571067d4208..be985d5e83ac 100644
--- a/docs/snippets/common/button-story-grouped.js.mdx
+++ b/docs/snippets/common/button-story-grouped.js.mdx
@@ -11,4 +11,4 @@ export default {
   title: 'Design System/Atoms/Button',
   component: Button,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
index c416375d03dd..183347e3505e 100644
--- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
+++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx
@@ -17,4 +17,4 @@ export const Large = {
     controls: { hideNoControlsWarning: true },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-hoisted.js.mdx b/docs/snippets/common/button-story-hoisted.js.mdx
index 87334b5f994c..1aff9f62fef6 100644
--- a/docs/snippets/common/button-story-hoisted.js.mdx
+++ b/docs/snippets/common/button-story-hoisted.js.mdx
@@ -13,5 +13,5 @@ export default {
 };
 
 // This is the only named export in the file, and it matches the component name
-export const Button = { };
-```
\ No newline at end of file
+export const Button = {};
+```
diff --git a/docs/snippets/common/button-story-hypothetical-example.js.mdx b/docs/snippets/common/button-story-hypothetical-example.js.mdx
index bb610f4187d8..6b8fadfb3659 100644
--- a/docs/snippets/common/button-story-hypothetical-example.js.mdx
+++ b/docs/snippets/common/button-story-hypothetical-example.js.mdx
@@ -25,4 +25,4 @@ export const Sample = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx
index 044a4fc50b72..50f1514cfdbd 100644
--- a/docs/snippets/common/button-story-matching-argtypes.js.mdx
+++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx
@@ -12,4 +12,4 @@ export default {
   component: Button,
   parameters: { actions: { argTypesRegex: '^on.*' } },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
index 6c1864a6f3d6..643cde8b7649 100644
--- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
+++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx
@@ -12,4 +12,4 @@ export default {
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-primary-composition.js.mdx b/docs/snippets/common/button-story-primary-composition.js.mdx
index a8b5afedbbbb..733cedcf6dd3 100644
--- a/docs/snippets/common/button-story-primary-composition.js.mdx
+++ b/docs/snippets/common/button-story-primary-composition.js.mdx
@@ -25,4 +25,4 @@ const Secondary = {
     primary: false,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-primary-long-name.js.mdx b/docs/snippets/common/button-story-primary-long-name.js.mdx
index 86ebca0d6add..63b07257b0c2 100644
--- a/docs/snippets/common/button-story-primary-long-name.js.mdx
+++ b/docs/snippets/common/button-story-primary-long-name.js.mdx
@@ -25,4 +25,4 @@ export const PrimaryLongName = {
     label: 'Primary with a really long name',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-remix-docspage.js.mdx b/docs/snippets/common/button-story-remix-docspage.js.mdx
index 7c405f21e8e7..a2705c5036ea 100644
--- a/docs/snippets/common/button-story-remix-docspage.js.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.js.mdx
@@ -37,4 +37,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/button-story-remix-docspage.ts.mdx b/docs/snippets/common/button-story-remix-docspage.ts.mdx
index 8ed33c4b4665..e25e7645a638 100644
--- a/docs/snippets/common/button-story-remix-docspage.ts.mdx
+++ b/docs/snippets/common/button-story-remix-docspage.ts.mdx
@@ -1,8 +1,6 @@
 ```ts
 // Button.stories.ts|tsx
 
-import React from 'react';
-
 import type { Meta } from '@storybook/react';
 
 import {
@@ -17,7 +15,7 @@ import {
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -38,5 +36,7 @@ export default {
       ),
     },
   },
-} as Meta;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index d1d435b20aa6..e411d4358e8a 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -14,8 +14,8 @@ export default {
 
 export const Primary = {
   args: {
-     primary: true,
-     label: 'Button',
+    primary: true,
+    label: 'Button',
   },
   parameters: {
     backgrounds: {
@@ -26,4 +26,4 @@ export const Primary = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/checkbox-story-csf.js.mdx b/docs/snippets/common/checkbox-story-csf.js.mdx
index 3a1a8300568f..061e8bd18c74 100644
--- a/docs/snippets/common/checkbox-story-csf.js.mdx
+++ b/docs/snippets/common/checkbox-story-csf.js.mdx
@@ -17,4 +17,4 @@ export const Unchecked = {
     label: 'Unchecked',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/checkbox-story-grouped.js.mdx b/docs/snippets/common/checkbox-story-grouped.js.mdx
index bd35fb350352..5ffb7a129f7c 100644
--- a/docs/snippets/common/checkbox-story-grouped.js.mdx
+++ b/docs/snippets/common/checkbox-story-grouped.js.mdx
@@ -11,4 +11,4 @@ export default {
   title: 'Design System/Atoms/Checkbox',
   component: CheckBox,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/chromatic-install.npm.js.mdx b/docs/snippets/common/chromatic-install.npm.js.mdx
index 08f68adbfcc0..94f647c09649 100644
--- a/docs/snippets/common/chromatic-install.npm.js.mdx
+++ b/docs/snippets/common/chromatic-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install chromatic --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/chromatic-install.yarn.js.mdx b/docs/snippets/common/chromatic-install.yarn.js.mdx
index ef2232eb8816..0b231fd6adee 100644
--- a/docs/snippets/common/chromatic-install.yarn.js.mdx
+++ b/docs/snippets/common/chromatic-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev chromatic
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-cypress-test.js.mdx b/docs/snippets/common/component-cypress-test.js.mdx
index 8de26d698793..596c9405d1d4 100644
--- a/docs/snippets/common/component-cypress-test.js.mdx
+++ b/docs/snippets/common/component-cypress-test.js.mdx
@@ -14,4 +14,4 @@ describe('Login Form', () => {
     });
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-playwright-test.js.mdx b/docs/snippets/common/component-playwright-test.js.mdx
index 0e0e83b99a43..42733b75c966 100644
--- a/docs/snippets/common/component-playwright-test.js.mdx
+++ b/docs/snippets/common/component-playwright-test.js.mdx
@@ -10,4 +10,4 @@ test('Login Form inputs', async ({ page }) => {
   await expect(email).toBe('email@provider.com');
   await expect(password).toBe('a-random-password');
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-auto-title.csf3-story.js.mdx b/docs/snippets/common/component-story-auto-title.csf3-story.js.mdx
index 74c50e85077b..2e4b574ca474 100644
--- a/docs/snippets/common/component-story-auto-title.csf3-story.js.mdx
+++ b/docs/snippets/common/component-story-auto-title.csf3-story.js.mdx
@@ -13,4 +13,4 @@ export default { component: MyComponent };
 export const Default = {
   args: { message: 'Hello world!' },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
index 0497511aef04..5b813dd31cc4 100644
--- a/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
+++ b/docs/snippets/common/component-story-conditional-controls-toggle.js.mdx
@@ -4,7 +4,7 @@
 import { Button } from './Button';
 
 export default {
-   /* 👇 The title prop is optional.
+  /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
diff --git a/docs/snippets/common/component-story-configuration-custom.js.mdx b/docs/snippets/common/component-story-configuration-custom.js.mdx
index 845e80f3cf3d..64fd1aae292d 100644
--- a/docs/snippets/common/component-story-configuration-custom.js.mdx
+++ b/docs/snippets/common/component-story-configuration-custom.js.mdx
@@ -2,8 +2,6 @@
 // ./storybook/main.js
 
 module.exports = {
-  stories: [
-   { directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }
-  ]
+  stories: [{ directory: '../src', files: '*.story.tsx', titlePrefix: 'Foo' }],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
index 095287966ccf..1faa4c9d98b6 100644
--- a/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
+++ b/docs/snippets/common/component-story-csf-argstable-customization.js.mdx
@@ -25,4 +25,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-csf-description.js.mdx b/docs/snippets/common/component-story-csf-description.js.mdx
index 10554897e83b..c053b7d5cc65 100644
--- a/docs/snippets/common/component-story-csf-description.js.mdx
+++ b/docs/snippets/common/component-story-csf-description.js.mdx
@@ -28,4 +28,4 @@ export const WithStoryDescription = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
index a7b4e965fead..8d4112fe05a8 100644
--- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx
+++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx
@@ -30,4 +30,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-custom-params.js.mdx b/docs/snippets/common/component-story-custom-params.js.mdx
index 4ab4271cf478..36299208cff8 100644
--- a/docs/snippets/common/component-story-custom-params.js.mdx
+++ b/docs/snippets/common/component-story-custom-params.js.mdx
@@ -27,4 +27,4 @@ export const Primary = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-custom-source.js.mdx b/docs/snippets/common/component-story-custom-source.js.mdx
index 2a5d0fe2a1f8..d72ad3e57a39 100644
--- a/docs/snippets/common/component-story-custom-source.js.mdx
+++ b/docs/snippets/common/component-story-custom-source.js.mdx
@@ -23,4 +23,4 @@ export const CustomSource = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
index 82443cb91cc7..8a1f6864861e 100644
--- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx
@@ -17,4 +17,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
index cfb407c3397b..1041205db6a9 100644
--- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx
+++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx
@@ -35,4 +35,4 @@ export const RegexExclude = {
     controls: { exclude: /^hello*/ },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx
index c6b9e7112829..9290b919b717 100644
--- a/docs/snippets/common/component-story-sort-controls.js.mdx
+++ b/docs/snippets/common/component-story-sort-controls.js.mdx
@@ -12,4 +12,4 @@ export default {
   component: YourComponent,
   parameters: { controls: { sort: 'requiredFirst' } },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/custom-docs-page.js-component.js.mdx b/docs/snippets/common/custom-docs-page.js-component.js.mdx
index b715bbd08890..9ca95706536e 100644
--- a/docs/snippets/common/custom-docs-page.js-component.js.mdx
+++ b/docs/snippets/common/custom-docs-page.js-component.js.mdx
@@ -10,10 +10,8 @@ export function CustomDocumentationComponent() {
       <p>
         The Docs page can be customized with your own custom content written as a React Component.
       </p>
-      <p>
-       Write your own code here👇
-      </p>
+      <p>Write your own code here👇</p>
     </div>
   );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
index 54675c701d3b..58d19961e0c4 100644
--- a/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
+++ b/docs/snippets/common/custom-docs-page.ts-component.ts.mdx
@@ -1,8 +1,6 @@
 ```ts
 // CustomDocumentationComponent.ts|tsx
 
-import React from 'react';
-
 export const CustomDocumentationComponent: React.VFC = () => {
   return (
     <div>
@@ -10,10 +8,8 @@ export const CustomDocumentationComponent: React.VFC = () => {
       <p>
         The Docs page can be customized with your own custom content written as a React Component.
       </p>
-      <p>
-       Write your own code here👇
-      </p>
+      <p>Write your own code here👇</p>
     </div>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/foo-bar-baz-story.js.mdx b/docs/snippets/common/foo-bar-baz-story.js.mdx
index 811ea86b28e2..bbe61d4f6590 100644
--- a/docs/snippets/common/foo-bar-baz-story.js.mdx
+++ b/docs/snippets/common/foo-bar-baz-story.js.mdx
@@ -13,4 +13,4 @@ export default {
 };
 
 export const Baz = {};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
index 6e24af789656..7efacd501023 100644
--- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx
+++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx
@@ -60,4 +60,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/isomorphic-fetch-mock.js.mdx b/docs/snippets/common/isomorphic-fetch-mock.js.mdx
index e41d189341a1..7ad937afc843 100644
--- a/docs/snippets/common/isomorphic-fetch-mock.js.mdx
+++ b/docs/snippets/common/isomorphic-fetch-mock.js.mdx
@@ -20,6 +20,6 @@ export function decorator(story, { parameters }) {
   if (parameters && parameters.fetch) {
     nextJson = parameters.fetch.json;
   }
-  return story();  
+  return story();
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/login-form-with-play-function.js.mdx b/docs/snippets/common/login-form-with-play-function.js.mdx
index b9f021254d37..7b6be9f3dda1 100644
--- a/docs/snippets/common/login-form-with-play-function.js.mdx
+++ b/docs/snippets/common/login-form-with-play-function.js.mdx
@@ -18,14 +18,14 @@ export const Example = {
   play: async ({ canvasElement }) => {
     // Starts querying the component from its root element
     const canvas = within(canvasElement);
-    
+
     await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
       delay: 100,
     });
     await userEvent.type(canvas.getByTestId('password'), 'a-random-password'{
       delay: 100,
     });
-    
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
     await userEvent.click(canvas.getByRole('button'));
   },
diff --git a/docs/snippets/common/my-addon-babel-configuration.js.mdx b/docs/snippets/common/my-addon-babel-configuration.js.mdx
index 29c09d266cbd..d5a8a921c813 100644
--- a/docs/snippets/common/my-addon-babel-configuration.js.mdx
+++ b/docs/snippets/common/my-addon-babel-configuration.js.mdx
@@ -2,6 +2,6 @@
 // /my-addon/.babelrc.js
 
 module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"],
+  presets: ['@babel/preset-env', '@babel/preset-react'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-addon-initial-panel-state.js.mdx b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
index 8009d61ac4fd..338c010e9e17 100644
--- a/docs/snippets/common/my-addon-initial-panel-state.js.mdx
+++ b/docs/snippets/common/my-addon-initial-panel-state.js.mdx
@@ -24,4 +24,4 @@ addons.register(ADDON_ID, (api) => {
     ),
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-addon-preset-implementation.js.mdx b/docs/snippets/common/my-addon-preset-implementation.js.mdx
index 2f31ec25ac35..7421bb58cb4d 100644
--- a/docs/snippets/common/my-addon-preset-implementation.js.mdx
+++ b/docs/snippets/common/my-addon-preset-implementation.js.mdx
@@ -2,8 +2,8 @@
 // /my-addon/src/preset.js
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("./register")]; //👈 Addon implementation
+  return [...entry, require.resolve('./register')]; //👈 Addon implementation
 }
 
-module.exports = { managerEntries }
-```
\ No newline at end of file
+module.exports = { managerEntries };
+```
diff --git a/docs/snippets/common/my-addon-root-level-preset.js.mdx b/docs/snippets/common/my-addon-root-level-preset.js.mdx
index 500f98579290..5af0d6d61a4d 100644
--- a/docs/snippets/common/my-addon-root-level-preset.js.mdx
+++ b/docs/snippets/common/my-addon-root-level-preset.js.mdx
@@ -2,4 +2,4 @@
 // /my-addon/preset.js
 
 module.exports = require('./dist/preset.js');
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-addon-storybook-registration.js.mdx b/docs/snippets/common/my-addon-storybook-registration.js.mdx
index f5c80c574124..b5f212b519d7 100644
--- a/docs/snippets/common/my-addon-storybook-registration.js.mdx
+++ b/docs/snippets/common/my-addon-storybook-registration.js.mdx
@@ -4,10 +4,10 @@
 module.exports = {
   stories: [],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
-    "../src/preset.js" //👈 Our addon registered here
-  ]
-}
-```
\ No newline at end of file
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '../src/preset.js', //👈 Our addon registered here
+  ],
+};
+```
diff --git a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
index d12876fa0f1f..c67503c9e3ad 100644
--- a/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
+++ b/docs/snippets/common/my-component-argtypes-with-mapping.js.mdx
@@ -5,13 +5,13 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
   argTypes: {
-    label:{
+    label: {
       options: ['Normal', 'Bold', 'Italic'],
       mapping: {
         Bold: <b>Bold</b>,
@@ -20,4 +20,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-env-var-config.js.mdx b/docs/snippets/common/my-component-env-var-config.js.mdx
index 8e8614f7ee42..f5ef8a113844 100644
--- a/docs/snippets/common/my-component-env-var-config.js.mdx
+++ b/docs/snippets/common/my-component-env-var-config.js.mdx
@@ -17,4 +17,4 @@ export const Default = {
     exampleProp: process.env.EXAMPLE_VAR,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
index 15dcf593f73b..61e6135a819a 100644
--- a/docs/snippets/common/my-component-story-import-json.js.mdx
+++ b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -3,4 +3,4 @@
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
index d0f5a3b13d8b..b62d06a85e80 100644
--- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx
+++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx|ts|tsx
 
-// This will include './static/image.png' in the bundle. 
+// This will include './static/image.png' in the bundle.
 // And return a path to be included in a src attribute
 import imageFile from './static/image.png';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-story-mandatory-export.js.mdx b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
index 69fde256ca71..9033899f8f5b 100644
--- a/docs/snippets/common/my-component-story-mandatory-export.js.mdx
+++ b/docs/snippets/common/my-component-story-mandatory-export.js.mdx
@@ -13,4 +13,4 @@ export default {
   decorators: [ ... ],
   parameters: { ... }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-story-with-storyname.js.mdx b/docs/snippets/common/my-component-story-with-storyname.js.mdx
index 0990d86c7b46..f0a33eaec1dd 100644
--- a/docs/snippets/common/my-component-story-with-storyname.js.mdx
+++ b/docs/snippets/common/my-component-story-with-storyname.js.mdx
@@ -17,4 +17,4 @@ export const Simple = {
   name: 'So simple!',
   parameters: {...},
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index 495ecf8fd5dd..4ddce2379cbb 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -5,12 +5,12 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   component: MyComponent,
 };
 
 // Your stories
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/other-foo-bar-story.js.mdx b/docs/snippets/common/other-foo-bar-story.js.mdx
index 8c1ab5d0a91f..3dcd8a7dc161 100644
--- a/docs/snippets/common/other-foo-bar-story.js.mdx
+++ b/docs/snippets/common/other-foo-bar-story.js.mdx
@@ -16,4 +16,4 @@ export default {
 export const Baz = {
   name: 'Moo',
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/preview-story-custom-params.js.mdx b/docs/snippets/common/preview-story-custom-params.js.mdx
index 20b5f0e2a6d9..2b1538246da3 100644
--- a/docs/snippets/common/preview-story-custom-params.js.mdx
+++ b/docs/snippets/common/preview-story-custom-params.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-a11y-install.npm.js.mdx b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
index 933ac6105d46..1b0efba575d8 100644
--- a/docs/snippets/common/storybook-a11y-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-a11y-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/addon-a11y --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-a11y-install.yarn.js.mdx b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
index 41e5bf35360e..9cbc6f96cfe3 100644
--- a/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-a11y-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/addon-a11y
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-a11y-register.js.mdx b/docs/snippets/common/storybook-a11y-register.js.mdx
index 4c6401ea169a..6961bb9436a4 100644
--- a/docs/snippets/common/storybook-a11y-register.js.mdx
+++ b/docs/snippets/common/storybook-a11y-register.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     '@storybook/addon-a11y', //👈 The a11y addon goes here
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-a11y-register.ts.mdx b/docs/snippets/common/storybook-a11y-register.ts.mdx
index 0b977c14953b..9017e1a0fe02 100644
--- a/docs/snippets/common/storybook-a11y-register.ts.mdx
+++ b/docs/snippets/common/storybook-a11y-register.ts.mdx
@@ -13,4 +13,4 @@ const config: StorybookConfig = {
 };
 
 module.exports = config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
index 128f94ade462..a821d193f82f 100644
--- a/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
+++ b/docs/snippets/common/storybook-addon-a11y-component-config.js.mdx
@@ -5,9 +5,9 @@ import { MyComponent } from './MyComponent';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading 
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Configure a11y addon',
   component: MyComponent,
   parameters: {
@@ -33,4 +33,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx b/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx
index 2cb61b3b69e7..813acb0922e6 100644
--- a/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx
+++ b/docs/snippets/common/storybook-addon-a11y-global-config.js.mdx
@@ -25,4 +25,4 @@ export const parameters = {
     manual: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx b/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx
index a693fd458d6b..a85c6b802746 100644
--- a/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-addon-actions-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/addon-actions --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx
index b1e52357c623..8b12b253b314 100644
--- a/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-addon-actions-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/addon-actions
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
index c12d5f5dcdf5..ec0050c740cc 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx
@@ -21,4 +21,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
index f73809546841..9dde3316fe5a 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx
@@ -6,9 +6,9 @@ import { Button } from './Button';
 // To apply a grid to all stories of Button:
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   parameters: {
@@ -23,4 +23,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
index 8da6e0bacc6a..dc7e44f89bb2 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx
@@ -17,4 +17,4 @@ export const Large = {
     backgrounds: { disable: true },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
index 07e926ee453f..9b36294a2ff6 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx
@@ -21,4 +21,4 @@ export const Large = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
index 4b9c5308d0e1..70ece35e56be 100644
--- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
+++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx
@@ -17,4 +17,4 @@ export const Large = {
     backgrounds: { default: 'facebook' },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-change-panel.js.mdx b/docs/snippets/common/storybook-addon-change-panel.js.mdx
index fc9f821e60c4..b9c2826e1da0 100644
--- a/docs/snippets/common/storybook-addon-change-panel.js.mdx
+++ b/docs/snippets/common/storybook-addon-change-panel.js.mdx
@@ -10,4 +10,4 @@ const MyPanel = () => {
   const item = value ? value.data : 'No story parameter defined';
   return <div>{item}</div>;
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-controls-custom-matchers.js.mdx b/docs/snippets/common/storybook-addon-controls-custom-matchers.js.mdx
index 570e97de4b2b..cdce231a8354 100644
--- a/docs/snippets/common/storybook-addon-controls-custom-matchers.js.mdx
+++ b/docs/snippets/common/storybook-addon-controls-custom-matchers.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-disable-addon.js.mdx b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
index f74d563d5366..2afa7d2cdad1 100644
--- a/docs/snippets/common/storybook-addon-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-addon-disable-addon.js.mdx
@@ -9,4 +9,4 @@ addons.register(ADDON_ID, () => {
     paramKey: 'myAddon', // this element
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx
index 7bc9cf52e948..753c71bfaca1 100644
--- a/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-addon-essentials-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/addon-essentials
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-interaction-registration.js.mdx b/docs/snippets/common/storybook-addon-interaction-registration.js.mdx
index 9cc5115978bc..d1a8d7f9289a 100644
--- a/docs/snippets/common/storybook-addon-interaction-registration.js.mdx
+++ b/docs/snippets/common/storybook-addon-interaction-registration.js.mdx
@@ -7,4 +7,4 @@ module.exports = {
     // Other Storybook addons
     '@storybook/addon-interactions', //👈 The addon registered here
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
index 027dc24430bf..1873a790d226 100644
--- a/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/testing-library @storybook/jest @storybook/addon-interactions --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
index d4e583095882..17130966f499 100644
--- a/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-addon-interactions-addon-full-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/testing-library @storybook/jest @storybook/addon-interactions
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx
index b13c6841ec8d..03fc24f7d6f9 100644
--- a/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx
+++ b/docs/snippets/common/storybook-addon-load-external-addons-preset.js.mdx
@@ -13,4 +13,4 @@ module.exports = {
   managerEntries,
   config,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-panel-example.js.mdx b/docs/snippets/common/storybook-addon-panel-example.js.mdx
index 29d8a1ab9d46..535e9ded807a 100644
--- a/docs/snippets/common/storybook-addon-panel-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-example.js.mdx
@@ -21,4 +21,4 @@ addons.register('my/panel', () => {
     ),
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index 9f9e6b6c05f0..e4d97e32d68c 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -24,4 +24,4 @@ addons.register(ADDON_ID, (api) => {
     ),
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-preset-example.js.mdx b/docs/snippets/common/storybook-addon-preset-example.js.mdx
index a23a6ca04f31..e33e98311639 100644
--- a/docs/snippets/common/storybook-addon-preset-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-preset-example.js.mdx
@@ -17,4 +17,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx b/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx
index 1d4b6caf3acc..60700fc8625e 100644
--- a/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-addon-storyshots-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/addon-storyshots --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx
index c847016ced68..5ea8f3133f21 100644
--- a/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-addon-storyshots-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/addon-storyshots
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-tab-example.js.mdx b/docs/snippets/common/storybook-addon-tab-example.js.mdx
index 6f471c7c6758..443944917404 100644
--- a/docs/snippets/common/storybook-addon-tab-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-tab-example.js.mdx
@@ -20,4 +20,4 @@ addons.register('my/tab', () => {
     ),
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 869c9df49ad4..7bd7c605b20b 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -1,27 +1,24 @@
 ```js
 // addon-toolbar/manager.js
 
-import React from "react";
+import React from 'react';
 
 import { addons, types } from '@storybook/addons';
 
 import { Icons, IconButton } from '@storybook/components';
 
-addons.register("my/toolbar", () => {
-  addons.add("my-toolbar-addon/toolbar", {
-    title: "Example Storybook toolbar",
+addons.register('my/toolbar', () => {
+  addons.add('my-toolbar-addon/toolbar', {
+    title: 'Example Storybook toolbar',
     //👇 Sets the type of UI element in Storybook
     type: types.TOOL,
     //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: ({ active }) => (
-      <IconButton
-        active={active}
-        title="Show a Storybook toolbar"
-      >
+      <IconButton active={active} title="Show a Storybook toolbar">
         <Icons icon="outline" />
       </IconButton>
     ),
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
index 6f5f9e3845aa..1b36a81673fb 100644
--- a/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-disablequeryparams.js.mdx
@@ -6,4 +6,4 @@ addons.register('my-organisation/my-addon', (api) => {
     bbc: null,
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
index 0c324ddd0d24..6379650acd22 100644
--- a/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getqueryparam.js.mdx
@@ -4,4 +4,4 @@
 addons.register('my-organisation/my-addon', (api) => {
   api.getQueryParam('bbc');
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
index 39321b7f1958..9b560c295a10 100644
--- a/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-geturlstate.js.mdx
@@ -7,4 +7,4 @@ addons.register('my-organisation/my-addon', (api) => {
     selectedStory: 'story',
   }).url;
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-imports.js.mdx b/docs/snippets/common/storybook-addons-api-imports.js.mdx
index e44d88ab048f..29d715e750a0 100644
--- a/docs/snippets/common/storybook-addons-api-imports.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-imports.js.mdx
@@ -2,4 +2,4 @@
 // .storybook/my-addon/manager.js
 
 import { addons } from '@storybook/addons';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
index 3c9617bfa19e..924a0b4338fe 100644
--- a/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-makedecorator.js.mdx
@@ -9,10 +9,10 @@ export makeDecorator({
   wrapper: (storyFn, context, { parameters }) => {
     // Do something with `parameters`, which are set via { something: ... }
 
-    // Note you may alter the story output if you like. 
+    // Note you may alter the story output if you like.
     // Although generally that's not advised.
 
     return storyFn(context);
   }
 })
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-on.js.mdx b/docs/snippets/common/storybook-addons-api-on.js.mdx
index ac86c5e43918..f80e1e005b5c 100644
--- a/docs/snippets/common/storybook-addons-api-on.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-on.js.mdx
@@ -4,4 +4,4 @@
 addons.register('my-organisation/my-addon', (api) => {
   api.on('some-event', (eventData) => console.log(eventData));
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-register.js.mdx b/docs/snippets/common/storybook-addons-api-register.js.mdx
index 3c044eebd8c4..96bfa34f083b 100644
--- a/docs/snippets/common/storybook-addons-api-register.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-register.js.mdx
@@ -5,4 +5,4 @@ import { addons } from '@storybook/addons';
 
 // Register the addon with a unique name.
 addons.register('my-organisation/my-addon', (api) => {});
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
index 46c89f25fa43..67c9cc94542a 100644
--- a/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectincurrentkind.js.mdx
@@ -4,4 +4,4 @@
 addons.register('my-organisation/my-addon', (api) => {
   api.selectInCurrentKind('Basic');
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
index 4af2f91bc3ad..2a456b424067 100644
--- a/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-selectstory.js.mdx
@@ -4,4 +4,4 @@
 addons.register('my-organisation/my-addon', (api) => {
   api.selectStory('Button', 'Basic');
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
index bbfaa727b722..83910ae18da6 100644
--- a/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-setqueryparams.js.mdx
@@ -7,4 +7,4 @@ addons.register('my-organisation/my-addon', (api) => {
     bbc: 'this is bbc',
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index 6d6db143ba12..034c8949ab55 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -15,4 +15,4 @@ export const Tool = () => {
 
   return <button onClick={() => setState('a new value')}>the state = "{state}"</button>;
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index f6c05424dc6a..267b45b8c005 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -10,4 +10,4 @@ export const Panel = () => {
 
   return <div>do something with storybook's api</div>;
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
index f017c5cfccb0..13fb84dcb93a 100644
--- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx
@@ -16,4 +16,4 @@ export const Panel = () => {
     </button>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
index ad33aef34253..fa5a1eae3f79 100644
--- a/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useglobal.js.mdx
@@ -16,4 +16,4 @@ export const Panel = () => {
     </button>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
index fdbc74301782..71bd3527ca36 100644
--- a/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useparameter.js.mdx
@@ -15,4 +15,4 @@ export const Panel = () => {
     </div>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
index 4e1515a3b6b3..72b60fbf809f 100644
--- a/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-usestorybookstate.js.mdx
@@ -10,4 +10,4 @@ export const Panel = () => {
 
   return <div>do something with storybook's state</div>;
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-args-url-params-converted.js.mdx b/docs/snippets/common/storybook-args-url-params-converted.js.mdx
index 1334020da057..49154fc5e7e2 100644
--- a/docs/snippets/common/storybook-args-url-params-converted.js.mdx
+++ b/docs/snippets/common/storybook-args-url-params-converted.js.mdx
@@ -4,4 +4,4 @@
   arr: ['one', 'two'],
   nil: null
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
index f34c4859bfb9..ac5c85ca5c4b 100644
--- a/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
+++ b/docs/snippets/common/storybook-argtypes-with-addon.js.mdx
@@ -5,4 +5,4 @@ import { useArgTypes } from '@storybook/api';
 
 // inside your panel
 const { argTypes } = useArgTypes();
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx
index 5f81e269b1a6..5e74dccae3fc 100644
--- a/docs/snippets/common/storybook-babel-configuration-example.ts.mdx
+++ b/docs/snippets/common/storybook-babel-configuration-example.ts.mdx
@@ -10,4 +10,4 @@ export function babelDefault(config: TransformOptions) {
     ],
   };
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx b/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx
index a733b90f7dec..2650e5014cfb 100644
--- a/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx
+++ b/docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx b/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx
index 1a1312bc55e0..4bf557bd8792 100644
--- a/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-backgrounds-preset-config.js.mdx
@@ -4,4 +4,4 @@
 export function config(entry = []) {
   return [...entry, require.resolve('./defaultParameters')];
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx
index 28f40b3d394f..4746d62352cd 100644
--- a/docs/snippets/common/storybook-builder-api-build-server.ts.mdx
+++ b/docs/snippets/common/storybook-builder-api-build-server.ts.mdx
@@ -33,4 +33,4 @@ export async function build(options: ExtendedOptions) {
 
   await viteBuild(finalConfig);
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
index 6e802781ee3a..cc1e3c84629f 100644
--- a/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
+++ b/docs/snippets/common/storybook-builder-api-configuration-options.ts.mdx
@@ -33,4 +33,4 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv
 
   // Remainder implementation
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-builder-api-interface.ts.mdx b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
index 762ea1f146b7..ddab935cefdd 100644
--- a/docs/snippets/common/storybook-builder-api-interface.ts.mdx
+++ b/docs/snippets/common/storybook-builder-api-interface.ts.mdx
@@ -19,4 +19,4 @@ export interface Builder<Config, Stats> {
   corePresets?: string[];
   overridePresets?: string[];
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
index e9591db2ad4f..ccefa98f75e8 100644
--- a/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
+++ b/docs/snippets/common/storybook-builder-api-mdx.ts.mdx
@@ -17,4 +17,4 @@ export function mdxPlugin() {
     };
   });
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
index 03144c66ca7d..4c92faa541f0 100644
--- a/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
+++ b/docs/snippets/common/storybook-builder-api-shutdown-server.ts.mdx
@@ -21,4 +21,4 @@ export const start: ViteBuilder['start'] = async ({ options, server: devServer }
     totalTime: process.hrtime(startTime),
   };
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx
index 10e215c585de..2acf4a679ce3 100644
--- a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx
+++ b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx
@@ -6,4 +6,4 @@ import global from 'global';
 const { window: globalWindow } = global;
 
 globalWindow.STORYBOOK_ENV = 'vue';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-client-preview.ts.mdx b/docs/snippets/common/storybook-client-preview.ts.mdx
index b799280eeb56..02c41f0d9bb0 100644
--- a/docs/snippets/common/storybook-client-preview.ts.mdx
+++ b/docs/snippets/common/storybook-client-preview.ts.mdx
@@ -10,4 +10,4 @@ import render from './render';
 const api = start(render);
 
 // the boilerplate code
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-component-layout-param.js.mdx b/docs/snippets/common/storybook-component-layout-param.js.mdx
index e5694c4efd29..29c1ec5d80b3 100644
--- a/docs/snippets/common/storybook-component-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-component-layout-param.js.mdx
@@ -5,9 +5,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   // Sets the layout parameter component wide.
@@ -15,4 +15,4 @@ export default {
     layout: 'centered',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
index 1e6d449c1c41..86158ebb79ca 100644
--- a/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
+++ b/docs/snippets/common/storybook-csf-3-auto-title-redundant.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // components/MyComponent/MyComponent.stories.js|jsx|ts|tsx
 
-import { MyComponent } from './MyComponent.js'
+import { MyComponent } from './MyComponent.js';
 
 export default {
   component: MyComponent,
@@ -13,4 +13,4 @@ export const Default = {
     something: 'Something else',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-customize-argtypes.js.mdx b/docs/snippets/common/storybook-customize-argtypes.js.mdx
index c07e71c5b8d4..468fe6f3f7ea 100644
--- a/docs/snippets/common/storybook-customize-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-customize-argtypes.js.mdx
@@ -5,18 +5,18 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   argTypes: {
     label: {
       description: 'overwritten description',
       table: {
-        type: { 
-          summary: 'something short', 
-          detail: 'something really really long' 
+        type: {
+          summary: 'something short',
+          detail: 'something really really long',
         },
       },
       control: {
@@ -25,4 +25,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx
index 080af4a1debf..6e7c8fc36ed2 100644
--- a/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx
+++ b/docs/snippets/common/storybook-debug-webpack-dev.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run storybook -- --debug-webpack
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx
index 8dbc7b2b49e4..cd009ecbc073 100644
--- a/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx
+++ b/docs/snippets/common/storybook-debug-webpack-dev.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn storybook --debug-webpack
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx
index 5ca3edbb934f..7ff32dc52425 100644
--- a/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx
+++ b/docs/snippets/common/storybook-debug-webpack-prod.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run build-storybook -- --debug-webpack
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx
index 1b2c9df57924..a54aff6dd9aa 100644
--- a/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx
+++ b/docs/snippets/common/storybook-debug-webpack-prod.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn build-storybook --debug-webpack
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
index 9ed1c3e5430d..b1dd42907b68 100644
--- a/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
+++ b/docs/snippets/common/storybook-disable-telemetry-env.env-var.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx
index 3adc209f2834..373e9ac6ed7a 100644
--- a/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx
+++ b/docs/snippets/common/storybook-enable-buildstoriesjson.js.mdx
@@ -10,4 +10,4 @@ module.exports = {
     buildStoriesJson: true, // 👈 Enable this to build the stories.json file
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-extract-result.json.mdx b/docs/snippets/common/storybook-extract-result.json.mdx
index d3edbcaceb4a..0bf8a886f784 100644
--- a/docs/snippets/common/storybook-extract-result.json.mdx
+++ b/docs/snippets/common/storybook-extract-result.json.mdx
@@ -35,4 +35,4 @@
     }
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
index 2ef0c42eee1f..21be95e9553c 100644
--- a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install --save-dev storybook-addon-designs
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
index 2c11db47977a..fe2fa8cbc1ee 100644
--- a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add -D storybook-addon-designs
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-framework-render-function.js.mdx b/docs/snippets/common/storybook-framework-render-function.js.mdx
index 8c54a1319f63..980e46be94ee 100644
--- a/docs/snippets/common/storybook-framework-render-function.js.mdx
+++ b/docs/snippets/common/storybook-framework-render-function.js.mdx
@@ -8,4 +8,4 @@ export default function renderMain({ storyFn }: RenderMainArgs) {
   const html = fn(storyObj);
   rootElement.innerHTML = html;
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-generated-argtypes.js.mdx b/docs/snippets/common/storybook-generated-argtypes.js.mdx
index 413c88c245bc..15a1f2054e5c 100644
--- a/docs/snippets/common/storybook-generated-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-generated-argtypes.js.mdx
@@ -10,8 +10,8 @@ const argTypes = {
       defaultValue: { summary: 'Hello' },
     },
     control: {
-      type: 'text'
-    }
-  }
-}
-```
\ No newline at end of file
+      type: 'text',
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-main-add-sass-config.js.mdx b/docs/snippets/common/storybook-main-add-sass-config.js.mdx
index 979dd7bd2e6e..30819aff8f94 100644
--- a/docs/snippets/common/storybook-main-add-sass-config.js.mdx
+++ b/docs/snippets/common/storybook-main-add-sass-config.js.mdx
@@ -21,4 +21,4 @@ module.exports = {
     return config;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-add-ts-config.js.mdx b/docs/snippets/common/storybook-main-add-ts-config.js.mdx
index f92368f7816e..f8aa4b92647f 100644
--- a/docs/snippets/common/storybook-main-add-ts-config.js.mdx
+++ b/docs/snippets/common/storybook-main-add-ts-config.js.mdx
@@ -12,4 +12,4 @@ module.exports = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-addon-registration.js.mdx b/docs/snippets/common/storybook-main-addon-registration.js.mdx
index 1bdf6f44951c..11c3e4317ea9 100644
--- a/docs/snippets/common/storybook-main-addon-registration.js.mdx
+++ b/docs/snippets/common/storybook-main-addon-registration.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     '@storybook/addon-a11y', //👈 The addon registered here
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx
index 2025e381a662..705163e04af5 100644
--- a/docs/snippets/common/storybook-main-advanced-config-example.js.mdx
+++ b/docs/snippets/common/storybook-main-advanced-config-example.js.mdx
@@ -14,4 +14,4 @@ module.exports = {
     return config;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
index a77a0971869f..14d25adf2f1e 100644
--- a/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
+++ b/docs/snippets/common/storybook-main-auto-title-custom.js.mdx
@@ -12,4 +12,4 @@ module.exports = {
     builder: '@storybook/builder-webpack5',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx
index acb90d7a8914..401749110586 100644
--- a/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx
+++ b/docs/snippets/common/storybook-main-babel-mode-v7.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     babelModeV7: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
index fdcf53e13289..9f79f3f32938 100644
--- a/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
+++ b/docs/snippets/common/storybook-main-configuration-src-dir.main-js.js.mdx
@@ -12,4 +12,4 @@ module.exports = {
     builder: '@storybook/builder-webpack5',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx
index de215460576e..11d62a0a2ecc 100644
--- a/docs/snippets/common/storybook-main-custom-babel-config.js.mdx
+++ b/docs/snippets/common/storybook-main-custom-babel-config.js.mdx
@@ -9,4 +9,4 @@ module.exports = {
     // any extra options you want to set
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx
index 578c2c746cba..b04219130f1a 100644
--- a/docs/snippets/common/storybook-main-default-essentials-register.js.mdx
+++ b/docs/snippets/common/storybook-main-default-essentials-register.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   addons: ['@storybook/addon-essentials'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-disable-addon.js.mdx b/docs/snippets/common/storybook-main-disable-addon.js.mdx
index 041d425600c5..b769b2ebef55 100644
--- a/docs/snippets/common/storybook-main-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-addon.js.mdx
@@ -2,11 +2,13 @@
 // .storybook/main.js
 
 module.exports = {
-  addons: [{
-    name: '@storybook/addon-essentials',
-    options: {
-      backgrounds: false,
-    }
-  }]
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
+  ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-disable-refs.js.mdx b/docs/snippets/common/storybook-main-disable-refs.js.mdx
index f5eece61673a..d0d5f1c9a8ce 100644
--- a/docs/snippets/common/storybook-main-disable-refs.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-refs.js.mdx
@@ -4,7 +4,7 @@
 module.exports = {
   // your Storybook configuration
   refs: {
-    'package-name': { disable: true }
-  }
-}
-```
\ No newline at end of file
+    'package-name': { disable: true },
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
index b61b95d18965..d05607fc1b61 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -15,4 +15,4 @@ module.exports = {
     disableTelemetry: true, // 👈 Disables telemetry
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
index 6d25e3e28337..986dac3edb52 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -20,4 +20,4 @@ const config: StorybookConfig = {
 };
 
 module.exports = config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
index d1c4064fa142..aff59173992f 100644
--- a/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
+++ b/docs/snippets/common/storybook-main-enable-interactive-debugger.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
     interactionsDebugger: true, // 👈 Enable playback controls
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx
index fe80c1d4c8b7..712bf6f9f94d 100644
--- a/docs/snippets/common/storybook-main-enable-mdx2.js.mdx
+++ b/docs/snippets/common/storybook-main-enable-mdx2.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     previewMdx2: true, // 👈 MDX 2 enabled here
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
index cb07d5763454..01666e376579 100644
--- a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
+++ b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
@@ -5,8 +5,8 @@ module.exports = {
   stories: [
     //👇 Changes the load order of our stories. First loads the Changelog page
     '../src/Changelog.stories.mdx',
-    '../stories/**/*.stories.mdx', 
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',
diff --git a/docs/snippets/common/storybook-main-env-field-config.js.mdx b/docs/snippets/common/storybook-main-env-field-config.js.mdx
index a8bec07f7f1b..ae748a51aed0 100644
--- a/docs/snippets/common/storybook-main-env-field-config.js.mdx
+++ b/docs/snippets/common/storybook-main-env-field-config.js.mdx
@@ -8,13 +8,13 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
   ],
-  /* 
+  /*
    * 👇 The `config` argument contains all the other existing environment variables.
    * Either configured in an `.env` file or configured on the command line.
-  */
+   */
   env: (config) => ({
     ...config,
     EXAMPLE_VAR: 'An environment variable configured in Storybook',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx
index 076ba374ae86..673d7521ccc2 100644
--- a/docs/snippets/common/storybook-main-extend-ts-config.js.mdx
+++ b/docs/snippets/common/storybook-main-extend-ts-config.js.mdx
@@ -11,7 +11,7 @@ module.exports = {
         allowSyntheticDefaultImports: false,
         esModuleInterop: false,
       },
-    }
-  }
+    },
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
index de68b73dcacc..550d652fe023 100644
--- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
+++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     'storybook-addon-designs', // 👈 Addon is registered here
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-import-preset-config.js.mdx b/docs/snippets/common/storybook-main-import-preset-config.js.mdx
index 375b82d3b601..c66bd2ac28a0 100644
--- a/docs/snippets/common/storybook-main-import-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-main-import-preset-config.js.mdx
@@ -6,4 +6,4 @@ const path = require('path');
 module.exports = {
   addons: [path.resolve('./.storybook/my-preset')],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-js-md-files.js.mdx b/docs/snippets/common/storybook-main-js-md-files.js.mdx
index ec32e62eaab9..77c4f04e3ab7 100644
--- a/docs/snippets/common/storybook-main-js-md-files.js.mdx
+++ b/docs/snippets/common/storybook-main-js-md-files.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   stories: ['../my-project/src/components/*.@(js|md)'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-preset-config.js.mdx b/docs/snippets/common/storybook-main-preset-config.js.mdx
index eca5c0b38e2a..c88a0b109126 100644
--- a/docs/snippets/common/storybook-main-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-main-preset-config.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   addons: ['@storybook/preset-scss'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-preview-head.js.mdx b/docs/snippets/common/storybook-main-preview-head.js.mdx
index 13390e966aa0..18f7edd2c6f4 100644
--- a/docs/snippets/common/storybook-main-preview-head.js.mdx
+++ b/docs/snippets/common/storybook-main-preview-head.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
     </style>
   `);
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-ref-local.js.mdx b/docs/snippets/common/storybook-main-ref-local.js.mdx
index 386e8cd74cbe..91eac2d853c4 100644
--- a/docs/snippets/common/storybook-main-ref-local.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-local.js.mdx
@@ -14,4 +14,4 @@ module.exports = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
index 1d8997a78a2b..b9aaff18cc1b 100644
--- a/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-per-environment.js.mdx
@@ -3,7 +3,7 @@
 
 module.exports = {
   // Your existing Storybook configuration
-  
+
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
     if (configType === 'DEVELOPMENT') {
@@ -30,4 +30,4 @@ module.exports = {
     };
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-ref-remote.js.mdx b/docs/snippets/common/storybook-main-ref-remote.js.mdx
index 24dfcad4131b..ec7a321bcd91 100644
--- a/docs/snippets/common/storybook-main-ref-remote.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-remote.js.mdx
@@ -1,14 +1,14 @@
 ```js
 // .storybook/main.js
 
-module.exports={
+module.exports = {
   // your Storybook configuration
   refs: {
-   'design-system': {
-     title: "Storybook Design System",
-     url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com",
-     expanded: false // optional, true by default
-   }
-  }
-}
-```
\ No newline at end of file
+    'design-system': {
+      title: 'Storybook Design System',
+      url: 'https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com',
+      expanded: false, // optional, true by default
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-main-register-addon.js.mdx b/docs/snippets/common/storybook-main-register-addon.js.mdx
index 675a1d62c08a..16f1b423e7a6 100644
--- a/docs/snippets/common/storybook-main-register-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-addon.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   addons: ['path/to/manager.js'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
index ea87b0571a57..a6d378529fae 100644
--- a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
@@ -5,4 +5,4 @@ module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-actions'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
index 18fa46acdf1f..474c1e94941c 100644
--- a/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
+++ b/docs/snippets/common/storybook-main-register-presets-managerentry.js.mdx
@@ -6,4 +6,4 @@ module.exports = {
     '@storybook/addon-docs/preset', // A preset registered here, in this case from the addon-docs addon.
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-register-storysource-example.js.mdx b/docs/snippets/common/storybook-main-register-storysource-example.js.mdx
index f74a788eead5..c8b9a16193a6 100644
--- a/docs/snippets/common/storybook-main-register-storysource-example.js.mdx
+++ b/docs/snippets/common/storybook-main-register-storysource-example.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   addons: ['@storybook/addon-storysource'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-simplified-config.js.mdx b/docs/snippets/common/storybook-main-simplified-config.js.mdx
index 1bedfc7351d5..dd71b718eead 100644
--- a/docs/snippets/common/storybook-main-simplified-config.js.mdx
+++ b/docs/snippets/common/storybook-main-simplified-config.js.mdx
@@ -7,4 +7,4 @@ module.exports = {
     return config;
   },
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
index 024799320379..d690158fee44 100644
--- a/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-main-use-manager-entries.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   managerEntries: ['some-storybook-addon/entry-point.js'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx b/docs/snippets/common/storybook-main-versioned-webpack.js.mdx
index 2b0c1dcba52b..5de97b1343e1 100644
--- a/docs/snippets/common/storybook-main-versioned-webpack.js.mdx
+++ b/docs/snippets/common/storybook-main-versioned-webpack.js.mdx
@@ -8,4 +8,4 @@ export function webpackFinal(config, { presets }) {
   logger.info(`=> Running in webpack ${version}: ${instance}`);
   return config;
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
index e0c89c947bf8..abaf008c02a0 100644
--- a/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-main-webpack-preset-config.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js
 
 export async function webpack(baseConfig, options) {
-  // Modify or replace config. 
+  // Modify or replace config.
   // Mutating the original reference object can cause unexpected bugs,
   // so in this example we replace.
   const { module = {} } = baseConfig;
@@ -20,4 +20,4 @@ export async function webpack(baseConfig, options) {
     },
   };
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
index 9ea2077caa93..622152ccfc46 100644
--- a/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
+++ b/docs/snippets/common/storybook-main-webpack5-fsCache.js.mdx
@@ -11,4 +11,4 @@ module.exports = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx b/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx
index ab2cfd61f2b4..4d940deb84c6 100644
--- a/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx
+++ b/docs/snippets/common/storybook-main-webpackfinal-example.js.mdx
@@ -10,4 +10,4 @@ export function webpackFinal(config, { configDir }) {
   logger.info('=> Loading create-react-app config.');
   return applyCRAWebpackConfig(config, configDir);
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
index 630afdf6676e..8e9dcd304141 100644
--- a/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
+++ b/docs/snippets/common/storybook-main-with-mock-decorator.js.mdx
@@ -9,4 +9,4 @@ module.exports = {
     return config;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx
index efe144166c5a..d27f4546ef21 100644
--- a/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx
+++ b/docs/snippets/common/storybook-main-with-multiple-static-dir.js.mdx
@@ -6,4 +6,4 @@ module.exports = {
   addons: [],
   staticDirs: ['../public', '../static'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx
index 6e3871662bc4..5510655a9142 100644
--- a/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx
+++ b/docs/snippets/common/storybook-main-with-object-configuration-static-dir.js.mdx
@@ -4,4 +4,4 @@
 module.exports = {
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
index 12ca0636ba6b..eff1c92c6b83 100644
--- a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
+++ b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
@@ -6,4 +6,4 @@ module.exports = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-manager-custom-theme.js.mdx b/docs/snippets/common/storybook-manager-custom-theme.js.mdx
index be5df4a7d451..5affde341713 100644
--- a/docs/snippets/common/storybook-manager-custom-theme.js.mdx
+++ b/docs/snippets/common/storybook-manager-custom-theme.js.mdx
@@ -7,4 +7,4 @@ import yourTheme from './YourTheme';
 addons.setConfig({
   theme: yourTheme,
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-manager-dark-theme.js.mdx b/docs/snippets/common/storybook-manager-dark-theme.js.mdx
index ab37efb2de81..2f31e53b7575 100644
--- a/docs/snippets/common/storybook-manager-dark-theme.js.mdx
+++ b/docs/snippets/common/storybook-manager-dark-theme.js.mdx
@@ -7,4 +7,4 @@ import { themes } from '@storybook/theming';
 addons.setConfig({
   theme: themes.dark,
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-manager-disable-roots.js.mdx b/docs/snippets/common/storybook-manager-disable-roots.js.mdx
index 952d363c23d7..3297d85d7a1c 100644
--- a/docs/snippets/common/storybook-manager-disable-roots.js.mdx
+++ b/docs/snippets/common/storybook-manager-disable-roots.js.mdx
@@ -8,4 +8,4 @@ addons.setConfig({
     showRoots: false,
   },
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
index a40abfbadc97..91538b415957 100644
--- a/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
+++ b/docs/snippets/common/storybook-manager-render-label-stories.js.mdx
@@ -10,4 +10,4 @@ addons.setConfig({
     renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
   },
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
index 6f6b5f63daad..61117f8c4b02 100644
--- a/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-mdx2-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/mdx2-csf --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
index 6c80c7bba428..7d7c4a172b0d 100644
--- a/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-mdx2-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/mdx2-csf
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-merged-argtypes.js.mdx b/docs/snippets/common/storybook-merged-argtypes.js.mdx
index adf4beb46e1c..a3927647152f 100644
--- a/docs/snippets/common/storybook-merged-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-merged-argtypes.js.mdx
@@ -6,15 +6,15 @@ const argTypes = {
     defaultValue: 'Hello',
     description: 'overwritten description',
     table: {
-      type: { 
-        summary: 'something short', 
-        detail: 'something really really long' 
+      type: {
+        summary: 'something short',
+        detail: 'something really really long',
       },
       defaultValue: { summary: 'Hello' },
     },
     control: {
-      type: null
-    }
-  }
-}
-```
\ No newline at end of file
+      type: null,
+    },
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-msw-generate.msw.js.mdx b/docs/snippets/common/storybook-msw-generate.msw.js.mdx
index 413d5bf267e2..774ddbf76d45 100644
--- a/docs/snippets/common/storybook-msw-generate.msw.js.mdx
+++ b/docs/snippets/common/storybook-msw-generate.msw.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npx msw init public/
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-msw-install.npm.js.mdx b/docs/snippets/common/storybook-msw-install.npm.js.mdx
index 2a8608ebb293..9f0ed4aeed6f 100644
--- a/docs/snippets/common/storybook-msw-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-msw-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install msw msw-storybook-addon --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-msw-install.yarn.js.mdx b/docs/snippets/common/storybook-msw-install.yarn.js.mdx
index ff285f0d7176..95e75837af80 100644
--- a/docs/snippets/common/storybook-msw-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-msw-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev msw msw-storybook-addon
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-on-demand-story-loading.js.mdx b/docs/snippets/common/storybook-on-demand-story-loading.js.mdx
index e5ea5e88688b..dc3be6e367e4 100644
--- a/docs/snippets/common/storybook-on-demand-story-loading.js.mdx
+++ b/docs/snippets/common/storybook-on-demand-story-loading.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     storyStoreV7: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preset-configuration.js.mdx b/docs/snippets/common/storybook-preset-configuration.js.mdx
index 2167333191c2..7c096ef546e1 100644
--- a/docs/snippets/common/storybook-preset-configuration.js.mdx
+++ b/docs/snippets/common/storybook-preset-configuration.js.mdx
@@ -13,4 +13,4 @@ module.exports = {
     },
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preset-full-config-object.js.mdx b/docs/snippets/common/storybook-preset-full-config-object.js.mdx
index c0bdb76bc3ca..0e39a9166b6a 100644
--- a/docs/snippets/common/storybook-preset-full-config-object.js.mdx
+++ b/docs/snippets/common/storybook-preset-full-config-object.js.mdx
@@ -13,4 +13,4 @@ module.exports = {
     return config;
   },
 };
-````
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx
index 66ac48d5fc91..35029a0f3734 100644
--- a/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx
+++ b/docs/snippets/common/storybook-preset-scss.webpack-4.js.mdx
@@ -4,4 +4,4 @@ npm install @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 styl
 
 # With yarn
 yarn add --dev @storybook/preset-scss css-loader@5.2.7 sass sass-loader@10.1.1 style-loader@2.0.0
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx
index 227b75a86037..ee0d3d600f53 100644
--- a/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx
+++ b/docs/snippets/common/storybook-preset-scss.webpack-5.js.mdx
@@ -4,4 +4,4 @@ npm install @storybook/preset-scss css-loader sass sass-loader style-loader --sa
 
 # With yarn
 yarn add --dev @storybook/preset-scss css-loader sass sass-loader style-loader
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-body-example.html.mdx b/docs/snippets/common/storybook-preview-body-example.html.mdx
index 7d6f63e7c397..076d6b0059f8 100644
--- a/docs/snippets/common/storybook-preview-body-example.html.mdx
+++ b/docs/snippets/common/storybook-preview-body-example.html.mdx
@@ -2,4 +2,4 @@
 <!--  .storybook/preview-body.html -->
 
 <div id="custom-root"></div>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-change-viewports.js.mdx b/docs/snippets/common/storybook-preview-change-viewports.js.mdx
index 2b99ca92da36..1d965fb84e11 100644
--- a/docs/snippets/common/storybook-preview-change-viewports.js.mdx
+++ b/docs/snippets/common/storybook-preview-change-viewports.js.mdx
@@ -6,5 +6,5 @@ export const parameters = {
     viewports: newViewports, // newViewports would be an ViewportMap. (see below for examples)
     defaultViewport: 'someDefault',
   },
-}
-```
\ No newline at end of file
+};
+```
diff --git a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
index 4c880b6d146b..e18e34881729 100644
--- a/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
+++ b/docs/snippets/common/storybook-preview-configure-background-colors.js.mdx
@@ -16,4 +16,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx b/docs/snippets/common/storybook-preview-custom-canvas.js.mdx
index feee92899a31..9e3080fe0df2 100644
--- a/docs/snippets/common/storybook-preview-custom-canvas.js.mdx
+++ b/docs/snippets/common/storybook-preview-custom-canvas.js.mdx
@@ -10,4 +10,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx b/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx
index 6a4ee82effdc..9f5fc1d77c9f 100644
--- a/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx
+++ b/docs/snippets/common/storybook-preview-custom-code-renderer.js.mdx
@@ -10,4 +10,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-custom-params.js.mdx b/docs/snippets/common/storybook-preview-custom-params.js.mdx
index 20b5f0e2a6d9..2b1538246da3 100644
--- a/docs/snippets/common/storybook-preview-custom-params.js.mdx
+++ b/docs/snippets/common/storybook-preview-custom-params.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx b/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx
index d3b59d2697f3..537599fb6459 100644
--- a/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx
+++ b/docs/snippets/common/storybook-preview-decorator-params-example.js.mdx
@@ -8,5 +8,4 @@ export const decorators = [
 export const parameters = {
   // Your parameters go here
 };
-
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx b/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx
index e9033ff8b76c..9309f683aba8 100644
--- a/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx
+++ b/docs/snippets/common/storybook-preview-docs-dark-theme.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     theme: themes.dark,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx b/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx
index 58d47ee0c131..27e89b074dfc 100644
--- a/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx
+++ b/docs/snippets/common/storybook-preview-empty-sort-object.js.mdx
@@ -5,9 +5,9 @@ export const parameters = {
   options: {
     storySort: {
       method: '',
-      order: [], 
-      locales: '', 
+      order: [],
+      locales: '',
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx b/docs/snippets/common/storybook-preview-expanded-controls.js.mdx
index d50cde9e6797..89393ed01f7c 100644
--- a/docs/snippets/common/storybook-preview-expanded-controls.js.mdx
+++ b/docs/snippets/common/storybook-preview-expanded-controls.js.mdx
@@ -4,4 +4,4 @@
 export const parameters = {
   controls: { expanded: true },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx b/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx
index 00ee2a88fb0d..339d1bf8395c 100644
--- a/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx
+++ b/docs/snippets/common/storybook-preview-extended-theme-variables.js.mdx
@@ -4,4 +4,4 @@ addonActionsTheme: {
   BASE_FONT_FAMILY: typography.fonts.mono,
   BASE_BACKGROUND_COLOR: 'transparent',
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-global-loader.js.mdx b/docs/snippets/common/storybook-preview-global-loader.js.mdx
index 2b7d8f057d48..86afc859a43d 100644
--- a/docs/snippets/common/storybook-preview-global-loader.js.mdx
+++ b/docs/snippets/common/storybook-preview-global-loader.js.mdx
@@ -8,4 +8,4 @@ export const loaders = [
     currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-global-parameters.js.mdx b/docs/snippets/common/storybook-preview-global-parameters.js.mdx
index 20b5f0e2a6d9..2b1538246da3 100644
--- a/docs/snippets/common/storybook-preview-global-parameters.js.mdx
+++ b/docs/snippets/common/storybook-preview-global-parameters.js.mdx
@@ -9,4 +9,4 @@ export const parameters = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx b/docs/snippets/common/storybook-preview-granular-viewports.js.mdx
index 89289ae49a70..10ff34b03c89 100644
--- a/docs/snippets/common/storybook-preview-granular-viewports.js.mdx
+++ b/docs/snippets/common/storybook-preview-granular-viewports.js.mdx
@@ -8,4 +8,4 @@ export const parameters = {
     viewports: INITIAL_VIEWPORTS,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-head-example.html.mdx b/docs/snippets/common/storybook-preview-head-example.html.mdx
index a4a4bb3b244f..f9e869b582d4 100644
--- a/docs/snippets/common/storybook-preview-head-example.html.mdx
+++ b/docs/snippets/common/storybook-preview-head-example.html.mdx
@@ -8,5 +8,9 @@
 <!-- Or you can load custom head-tag JavaScript: -->
 
 <script src="https://use.typekit.net/xxxyyy.js"></script>
-<script>try{ Typekit.load(); } catch(e){ }</script>
-```
\ No newline at end of file
+<script>
+  try {
+    Typekit.load();
+  } catch (e) {}
+</script>
+```
diff --git a/docs/snippets/common/storybook-preview-layout-param.js.mdx b/docs/snippets/common/storybook-preview-layout-param.js.mdx
index da55bdbdfcf9..6119addbcfbc 100644
--- a/docs/snippets/common/storybook-preview-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-preview-layout-param.js.mdx
@@ -4,4 +4,4 @@
 export const parameters = {
   layout: 'centered',
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx b/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx
index 64074c997520..34c01ad84d1d 100644
--- a/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx
+++ b/docs/snippets/common/storybook-preview-locales-globaltype.js.mdx
@@ -18,4 +18,4 @@ export const globalTypes = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx
index 1180705fd528..e998a66f9ab6 100644
--- a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx
+++ b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx
@@ -2,6 +2,6 @@
 // .storybook/preview.js
 
 export const parameters = {
-  actions: { argTypesRegex: '^on.*' }
-}
-```
\ No newline at end of file
+  actions: { argTypesRegex: '^on.*' },
+};
+```
diff --git a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx b/docs/snippets/common/storybook-preview-merge-viewports.js.mdx
index 2b56ad011685..c58ce3353a2a 100644
--- a/docs/snippets/common/storybook-preview-merge-viewports.js.mdx
+++ b/docs/snippets/common/storybook-preview-merge-viewports.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // .storybook/preview.js
 
-import { MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 const customViewports = {
   kindleFire2: {
@@ -23,9 +23,9 @@ const customViewports = {
 export const parameters = {
   viewport: {
     viewports: {
-       ...MINIMAL_VIEWPORTS,
+      ...MINIMAL_VIEWPORTS,
       ...customViewports,
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-optout-inline.js.mdx b/docs/snippets/common/storybook-preview-optout-inline.js.mdx
index 2aae8f52016c..e5ba0fa02b4c 100644
--- a/docs/snippets/common/storybook-preview-optout-inline.js.mdx
+++ b/docs/snippets/common/storybook-preview-optout-inline.js.mdx
@@ -7,4 +7,4 @@ export const parameters = {
     inlineStories: false,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx
index 4e8e6e07ffbd..cd1d9f535c79 100644
--- a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx
+++ b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx
@@ -6,4 +6,4 @@ export const parameters = {
     presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx b/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx
index 815fa5e28ef2..8c8c4eaa4a33 100644
--- a/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx
+++ b/docs/snippets/common/storybook-preview-parameters-old-format.js.mdx
@@ -2,4 +2,4 @@
 // .storybook/preview.js
 
 export const parameter = { passArgsFirst : false }.
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx b/docs/snippets/common/storybook-preview-prepareforinline.js.mdx
index c4c5b091533d..32a7ddb044e7 100644
--- a/docs/snippets/common/storybook-preview-prepareforinline.js.mdx
+++ b/docs/snippets/common/storybook-preview-prepareforinline.js.mdx
@@ -10,4 +10,4 @@ export const parameters = {
     // deprecated do not use
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx b/docs/snippets/common/storybook-preview-register-language-globally.js.mdx
index c8b6e057faf8..ce5c3d571c69 100644
--- a/docs/snippets/common/storybook-preview-register-language-globally.js.mdx
+++ b/docs/snippets/common/storybook-preview-register-language-globally.js.mdx
@@ -16,4 +16,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx
index d1b97095311a..d1f384333a23 100644
--- a/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx
+++ b/docs/snippets/common/storybook-preview-register-msw-addon.js.mdx
@@ -22,4 +22,4 @@ export const parameters = {
 
 // Provide the MSW addon decorator globally
 export const decorators = [mswDecorator];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-sort-function.js.mdx b/docs/snippets/common/storybook-preview-sort-function.js.mdx
index a41a222cf26c..b0333e7a7c83 100644
--- a/docs/snippets/common/storybook-preview-sort-function.js.mdx
+++ b/docs/snippets/common/storybook-preview-sort-function.js.mdx
@@ -7,4 +7,4 @@ export const parameters = {
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-use-global-type.js.mdx b/docs/snippets/common/storybook-preview-use-global-type.js.mdx
index 7d338088a177..85af6675f92b 100644
--- a/docs/snippets/common/storybook-preview-use-global-type.js.mdx
+++ b/docs/snippets/common/storybook-preview-use-global-type.js.mdx
@@ -3,20 +3,20 @@
 
 import { ThemeProvider } from 'styled-components';
 
-import { MyThemes } from '../my-theme-folder/my-theme-file'
+import { MyThemes } from '../my-theme-folder/my-theme-file';
 
 // Function to obtain the intended theme
 const getTheme = (themeName) => {
-  return MyThemes[themeName]
-}
+  return MyThemes[themeName];
+};
 
-const withThemeProvider=(Story,context)=>{
+const withThemeProvider = (Story, context) => {
   const theme = getTheme(context.globals.theme);
   return (
     <ThemeProvider theme={theme}>
       <Story />
     </ThemeProvider>
-  )
-}
+  );
+};
 export const decorators = [withThemeProvider];
 ```
diff --git a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx
index 6adc353cb4a6..a929fe850069 100644
--- a/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx
+++ b/docs/snippets/common/storybook-preview-viewport-add-devices.js.mdx
@@ -17,4 +17,4 @@ const customViewports = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
index 1f802e18da31..95aa90bf47b5 100644
--- a/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
+++ b/docs/snippets/common/storybook-preview-viewport-use-new-devices.js.mdx
@@ -4,4 +4,4 @@
 export const parameters = {
   viewport: { viewports: customViewports },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx b/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx
index d3020f10e194..48f8e53ef776 100644
--- a/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx
+++ b/docs/snippets/common/storybook-preview-with-mock-decorator.js.mdx
@@ -5,4 +5,4 @@ import { decorator } from '../__mocks__/isomorphic-fetch';
 
 // Add the decorator to all stories
 export const decorators = [decorator];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
index 8f87fffadc99..47723a4d0c0e 100644
--- a/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
+++ b/docs/snippets/common/storybook-preview-with-ordered-pages-and-wildcard.js.mdx
@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
index f0baf9128b71..427ca2ee2608 100644
--- a/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
+++ b/docs/snippets/common/storybook-preview-with-ordered-pages.js.mdx
@@ -8,4 +8,4 @@ export const parameters = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-read-environment-variables.js.mdx b/docs/snippets/common/storybook-read-environment-variables.js.mdx
index d576f693705a..0ad4b9994e29 100644
--- a/docs/snippets/common/storybook-read-environment-variables.js.mdx
+++ b/docs/snippets/common/storybook-read-environment-variables.js.mdx
@@ -1,4 +1,4 @@
 ```js
 console.log(process.env.STORYBOOK_THEME);
 console.log(process.env.STORYBOOK_DATA_KEY);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-run-dev.npm.js.mdx b/docs/snippets/common/storybook-run-dev.npm.js.mdx
index 8f7f525b9a59..f6ae41091af1 100644
--- a/docs/snippets/common/storybook-run-dev.npm.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-run-dev.yarn.js.mdx b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
index 137dc51f4c21..471455e3e66e 100644
--- a/docs/snippets/common/storybook-run-dev.yarn.js.mdx
+++ b/docs/snippets/common/storybook-run-dev.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-server-framework-options.ts.mdx b/docs/snippets/common/storybook-server-framework-options.ts.mdx
index fe5b27ecfb6e..687df16d3090 100644
--- a/docs/snippets/common/storybook-server-framework-options.ts.mdx
+++ b/docs/snippets/common/storybook-server-framework-options.ts.mdx
@@ -9,4 +9,4 @@ export default {
   frameworkPath: '@my-framework/storybook',
   frameworkPresets: [require.resolve('./framework-preset-my-framework.js')],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-server-options.ts.mdx b/docs/snippets/common/storybook-server-options.ts.mdx
index 327e98c2efff..6a91e2a9a0c3 100644
--- a/docs/snippets/common/storybook-server-options.ts.mdx
+++ b/docs/snippets/common/storybook-server-options.ts.mdx
@@ -8,4 +8,4 @@ export default {
   framework: 'vue',
   frameworkPresets: [require.resolve('./framework-preset-vue.js')],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-start-dev-server.ts.mdx b/docs/snippets/common/storybook-start-dev-server.ts.mdx
index 9e15280376d2..f200f1cf44c7 100644
--- a/docs/snippets/common/storybook-start-dev-server.ts.mdx
+++ b/docs/snippets/common/storybook-start-dev-server.ts.mdx
@@ -6,4 +6,4 @@ import { buildDev } from '@storybook/core/server';
 import options from './options';
 
 buildDev(options);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx b/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx
index 02674afd4e92..bc8c9814631a 100644
--- a/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx
+++ b/docs/snippets/common/storybook-storiesjsonflag-result.json.mdx
@@ -30,4 +30,4 @@
     }
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-story-layout-param.js.mdx b/docs/snippets/common/storybook-story-layout-param.js.mdx
index 9510df3b38b8..ce1265aeac20 100644
--- a/docs/snippets/common/storybook-story-layout-param.js.mdx
+++ b/docs/snippets/common/storybook-story-layout-param.js.mdx
@@ -17,4 +17,4 @@ export const WithLayout = {
     layout: 'centered',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
index 3859a7c4ae34..adc07aa0cc3b 100644
--- a/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
+++ b/docs/snippets/common/storybook-storyloading-with-custom-object.js.mdx
@@ -14,4 +14,4 @@ module.exports = {
   ],
   addons: ['@storybook/addon-essentials'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx
index c0664b954c25..b10440fd8f4a 100644
--- a/docs/snippets/common/storybook-storyloading-with-directory.js.mdx
+++ b/docs/snippets/common/storybook-storyloading-with-directory.js.mdx
@@ -6,4 +6,4 @@ module.exports = {
   stories: ['../packages/MyStories'],
   addons: ['@storybook/addon-essentials'],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storyshots-config.js.mdx b/docs/snippets/common/storybook-storyshots-config.js.mdx
index fc1c55ee2b18..ccca348aac55 100644
--- a/docs/snippets/common/storybook-storyshots-config.js.mdx
+++ b/docs/snippets/common/storybook-storyshots-config.js.mdx
@@ -3,4 +3,4 @@
 
 import initStoryshots from '@storybook/addon-storyshots';
 initStoryshots();
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
index d74e4ee77a27..7c3e65b0654d 100644
--- a/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
+++ b/docs/snippets/common/storybook-storyshots-custom-directory.js.mdx
@@ -22,4 +22,4 @@ initStoryshots({
     getMatchOptions,
   }),
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx b/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx
index 5988ebd45bae..1e47606024ec 100644
--- a/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx
+++ b/docs/snippets/common/storybook-storyshots-custom-framework.js.mdx
@@ -10,4 +10,4 @@ initStoryshots({
   integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
   // Other configurations
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
index e9c5dec6d95e..548639d4eaa4 100644
--- a/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
+++ b/docs/snippets/common/storybook-storysource-manager-entries.js.mdx
@@ -2,4 +2,4 @@
 // storysource/preset.js
 
 /* nothing needed */
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
index 88d98f5c6bb3..47954752399e 100644
--- a/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-crash-report-event.js.mdx
@@ -10,4 +10,4 @@
     '    at node:internal/main/run_main_module:17:47',
   message: 'Your button is not working'
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
index aaefbd2f81bc..391a1d144780 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -15,4 +15,4 @@ module.exports = {
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
index a7d731e74d7f..acd004f7e2e5 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -20,4 +20,4 @@ const config: StorybookConfig = {
 };
 
 module.exports = config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
index eab8893ec86f..3d98a737fc3e 100644
--- a/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-preview-event.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
index fdb9d20be615..c3a554760375 100644
--- a/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-preview-event.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
index 41b65f194069..77f6e1ba81c7 100644
--- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.env-var.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
index b0fc399a5408..16028ba64c3a 100644
--- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run storybook -- --enable-crash-reports
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
index 71876f939367..1c3ce803c9e1 100644
--- a/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-storybook-enable-crash-reports.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn storybook --enable-crash-reports
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
index 23677beb5495..20449a90ac54 100644
--- a/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.js.mdx
@@ -4,9 +4,9 @@
 const { injectAxe, checkA11y } = require('axe-playwright');
 
 /*
-* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
-* to learn more about the test-runner hooks API.
-*/
+ * See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
 module.exports = {
   async preRender(page) {
     await injectAxe(page);
@@ -20,4 +20,4 @@ module.exports = {
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
index 131a81b3a47b..08cec95ec6e9 100644
--- a/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
+++ b/docs/snippets/common/storybook-test-runner-a11y-config.ts.mdx
@@ -6,9 +6,9 @@ import { injectAxe, checkA11y } from 'axe-playwright';
 import type { TestRunnerConfig } from '@storybook/test-runner';
 
 /*
-* See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
-* to learn more about the test-runner hooks API.
-*/
+ * See https://storybook.js.org/docs/7.0/react/writing-tests/test-runner#test-hook-api-experimental
+ * to learn more about the test-runner hooks API.
+ */
 const a11yConfig: TestRunnerConfig = {
   async preRender(page) {
     await injectAxe(page);
@@ -24,4 +24,4 @@ const a11yConfig: TestRunnerConfig = {
 };
 
 module.exports = a11yConfig;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
index aecfe3f9f414..291cbd8486eb 100644
--- a/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install axe-playwright --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
index e2d8d43da865..f8a3893f9510 100644
--- a/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-axe-playwright.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev axe-playwright
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
index 79ae4ca39232..33555a01dc65 100644
--- a/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run test-storybook -- --no-stories-json
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
index 141d6375fa63..3a8b80a39889 100644
--- a/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-disable-stories-json.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn test-storybook --no-stories-json
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
index 88667dfad959..6754d8375f7a 100644
--- a/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run test-storybook -- --watch
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
index 7f4617721424..e877ac67a8a1 100644
--- a/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute-with-flags.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn test-storybook --watch
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
index abc722730ba3..217b72ec8a07 100644
--- a/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.env-var.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 TARGET_URL=https://the-storybook-url-here.com yarn test-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
index 9b3b6020ba60..b9430e5aa326 100644
--- a/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run test-storybook -- --url https://the-storybook-url-here.com
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
index af9b66dc11a4..c6d395dbff81 100644
--- a/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute-with-url.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn test-storybook --url https://the-storybook-url-here.com
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
index 345a549b73d0..0ef2e8439783 100644
--- a/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run test-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
index 0e90b9012b2b..2ab91535dd8a 100644
--- a/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-execute.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn test-storybook
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
index 85f2437a74a0..e3d52b738645 100644
--- a/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.js.mdx
@@ -21,4 +21,4 @@ module.exports = {
     // Add your configuration here.
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
index bdc01f0f8c8b..d05ddb64801c 100644
--- a/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
+++ b/docs/snippets/common/storybook-test-runner-hooks-example.ts.mdx
@@ -25,4 +25,4 @@ const config: TestRunnerConfig = {
 };
 
 module.exports = config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
index 133523b77e41..000ccf44ba14 100644
--- a/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
+++ b/docs/snippets/common/storybook-test-runner-local-build-workflow.yml.mdx
@@ -23,4 +23,4 @@ jobs:
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 6006 --silent" \
             "npx wait-on tcp:6006 && yarn test-storybook"
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
index e73ffbb522c0..ff965af6f45d 100644
--- a/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
+++ b/docs/snippets/common/storybook-test-runner-with-deploy-event-workflow.yml.mdx
@@ -21,4 +21,4 @@ jobs:
         run: yarn test-storybook
         env:
           TARGET_URL: '${{ github.event.deployment_status.target_url }}'
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
index 0199d36a8ba6..b0a1f2f3909c 100644
--- a/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm run test-storybook -- --stories-json
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
index 8a5bf7838bda..eeebd6fb444a 100644
--- a/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
+++ b/docs/snippets/common/storybook-test-runner-with-stories-json.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn test-storybook --stories-json
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-test-with-storyname.js.mdx b/docs/snippets/common/storybook-test-with-storyname.js.mdx
index d86c32b9ab4e..3e7cc4273e6c 100644
--- a/docs/snippets/common/storybook-test-with-storyname.js.mdx
+++ b/docs/snippets/common/storybook-test-with-storyname.js.mdx
@@ -14,4 +14,4 @@ it('should format CSF exports with sensible defaults', () => {
     expect(storyNameFromExport(key)).toBe(val);
   });
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
index f49ff3a0f3fb..59206715f039 100644
--- a/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-testing-addon-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install --save-dev @storybook/testing-( react | vue | vue3 | angular)
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
index 4b6378ec00d9..ab3abc41ea12 100644
--- a/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-testing-addon-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/testing-( react | vue | vue3 | angular )
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-theming-styled-import.js.mdx b/docs/snippets/common/storybook-theming-styled-import.js.mdx
index 282cfe167dab..e06dba71de8a 100644
--- a/docs/snippets/common/storybook-theming-styled-import.js.mdx
+++ b/docs/snippets/common/storybook-theming-styled-import.js.mdx
@@ -2,4 +2,4 @@
 // YourTheme.js
 
 import { styled } from '@storybook/theming';
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
index a3dbee8895aa..cf5ee4c5b22b 100644
--- a/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-config-env.js.mdx
@@ -21,4 +21,4 @@ module.exports = {
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
index e4d64958fb9a..957029319197 100644
--- a/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install @storybook/builder-vite --save-dev
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
index ff51b902c057..db7837fda8f0 100644
--- a/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add --dev @storybook/builder-vite
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx
index 6ae400a96a42..4393b595d638 100644
--- a/docs/snippets/common/storybook-vite-builder-register.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-register.js.mdx
@@ -8,4 +8,4 @@ module.exports = {
     builder: '@storybook/builder-vite', // 👈 The builder enabled here.
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
index 8d4a2eeda43a..d3f923468e8f 100644
--- a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx
@@ -13,8 +13,8 @@ module.exports = {
     // Customize the Vite config here
     return config;
   },
-  framework:{
-    name: '@storybook/svelte-webpack5', 
+  framework: {
+    name: '@storybook/svelte-webpack5',
     options: {
       preprocess: preprocess({
         typescript: true,
@@ -24,4 +24,4 @@ module.exports = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
index 3948e084d949..0c294a769498 100644
--- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
+++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
@@ -16,4 +16,4 @@ const config: StorybookViteConfig = {
 };
 
 export default config;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx
index e196ab444371..c735181d1b6d 100644
--- a/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx
+++ b/docs/snippets/common/storybook-write-addon-install-dependencies.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 npm install react react-dom @babel/cli
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx
index e81984d3e2a2..5fa3643b1cc5 100644
--- a/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx
+++ b/docs/snippets/common/storybook-write-addon-install-dependencies.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
 yarn add react react-dom @babel/cli
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
index 390d7e105178..56509a7ace1d 100644
--- a/docs/snippets/html/button-story-component-decorator.js.mdx
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -9,12 +9,14 @@ export default {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-  decorators: [(story) => {
-    const decorator = document.createElement('div');
-    decorator.style.margin = '3em';
-    decorator.appendChild(story());
-    return decorator;
-  }],
+  decorators: [
+    (story) => {
+      const decorator = document.createElement('div');
+      decorator.style.margin = '3em';
+      decorator.appendChild(story());
+      return decorator;
+    },
+  ],
 };
 
 /*
@@ -25,4 +27,4 @@ export default {
 export const Primary = {
   render: (args) => createButton(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
index 465428aab26c..9a8b6485c778 100644
--- a/docs/snippets/html/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -1,25 +1,30 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-  decorators: [(story) => {
-    const decorator = document.createElement('div');
-    decorator.style.margin = '3em';
-    decorator.appendChild(story());
-    return decorator;
-  }],
-} as Meta<ButtonArgs>;
+  decorators: [
+    (story) => {
+      const decorator = document.createElement('div');
+      decorator.style.margin = '3em';
+      decorator.appendChild(story());
+      return decorator;
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<ButtonArgs>;
 
 export const Primary: Story = {
   render: (args) => createButton(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
index c6bbe5bf64f1..645d59f91997 100644
--- a/docs/snippets/html/button-story-default-exports.js.mdx
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -5,9 +5,9 @@ import { createButton } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 ```
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
index f7f15871e351..4f95322a9915 100644
--- a/docs/snippets/html/button-story-default-exports.ts.mdx
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -5,11 +5,13 @@ import type { Meta } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
-} as Meta<ButtonArgs>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
index b97d998bf83f..27273e19e761 100644
--- a/docs/snippets/html/button-story-rename-story.js.mdx
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -20,4 +20,4 @@ export const Primary = {
   name: 'I am the primary',
   render: (args) => createButton(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
index ae7b4c57c6fc..31fd09acd6d1 100644
--- a/docs/snippets/html/button-story-rename-story.ts.mdx
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -1,17 +1,20 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta<ButtonArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ButtonArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -22,4 +25,4 @@ export const Primary: Story = {
   name: 'I am the primary',
   render: (args) => createButton(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
index f9dcae898731..cd7005133dd0 100644
--- a/docs/snippets/html/button-story-using-args.js.mdx
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -19,7 +19,7 @@ export default {
 export const Primary = {
   render: (args) => createButton(args),
   args: {
-    primary: true, 
+    primary: true,
     label: 'Button',
   },
 };
@@ -27,7 +27,7 @@ export const Primary = {
 export const Secondary = {
   render: (args) => createButton(args),
   args: {
-    ...Primary.args, 
+    ...Primary.args,
     label: '😄👍😍💯',
   },
 };
@@ -35,8 +35,8 @@ export const Secondary = {
 export const Tertiary = {
   render: (args) => createButton(args),
   args: {
-    ...Primary.args, 
+    ...Primary.args,
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
index 9b566f5fa6fb..254c8f1102f9 100644
--- a/docs/snippets/html/button-story-using-args.ts.mdx
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -1,16 +1,19 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta<ButtonArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ButtonArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -20,7 +23,7 @@ export default {
 export const Primary: Story = {
   render: (args) => createButton(args),
   args: {
-    primary: true, 
+    primary: true,
     label: 'Button',
   },
 };
@@ -28,7 +31,7 @@ export const Primary: Story = {
 export const Secondary: Story = {
   render: (args) => createButton(args),
   args: {
-    ...Primary.args, 
+    ...Primary.args,
     label: '😄👍😍💯',
   },
 };
@@ -36,8 +39,8 @@ export const Secondary: Story = {
 export const Tertiary: Story = {
   render: (args) => createButton(args),
   args: {
-    ...Primary.args, 
+    ...Primary.args,
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index dbfe2d268a5a..7ca97e12745d 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -16,15 +16,11 @@ export default {
  */
 export const Primary = {
   render: (args) => {
-    const btn = document.createElement("button");
+    const btn = document.createElement('button');
     btn.innerText = args.label;
 
-    const mode = args.primary
-      ? "storybook-button--primary"
-      : "storybook-button--secondary";
-    btn.className = ["storybook-button", "storybook-button--medium", mode].join(
-      " "
-    );
+    const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' ');
 
     return btn;
   },
@@ -33,4 +29,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index cc6bc9a0796d..f296ce7a1bec 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,20 +1,23 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
 type ButtonArgs = {
   primary: boolean;
   label: string;
 };
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta<ButtonArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ButtonArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
index e83f8f60f34e..2c75ade8831d 100644
--- a/docs/snippets/html/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -20,4 +20,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
index c22368c501b9..0c8d210367e8 100644
--- a/docs/snippets/html/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/html';
 
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -21,5 +21,7 @@ export default {
       ],
     },
   },
-} as Meta<ButtonArgs>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
index 933e1ce8f983..740fe3fb3649 100644
--- a/docs/snippets/html/button-story-with-emojis.js.mdx
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -17,14 +17,14 @@ export default {
  * to learn how to use render functions.
  */
 export const Primary = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }),
 };
 
 export const Secondary = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }),
 };
 
 export const Tertiary = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
index 67f012d2250c..09a7719f1a70 100644
--- a/docs/snippets/html/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -1,16 +1,19 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 import { createButton, ButtonArgs } from './Button';
 
-export default {
+const meta: Meta<ButtonArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta<ButtonArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ButtonArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -18,14 +21,14 @@ export default {
  * to learn how to use render functions.
  */
 export const Primary: Story = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "Button"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: 'Button' }),
 };
 
 export const Secondary: Story = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: '😄👍😍💯' }),
 };
 
 export const Tertiary: Story = {
-  render: (args) => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"}),
+  render: (args) => createButton({ backgroundColor: '#ff0', label: '📚📕📈🤓' }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 36725f39dadc..1850f1b2c636 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -28,4 +28,4 @@ export const Primary = {
     return btn;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index d544c874b6be..84ab4de3fcfa 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,15 +1,17 @@
 ```ts
 // Button.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-export default {
+const meta: Meta = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta;
+};
+
+export default meta;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -30,4 +32,4 @@ export const Primary: Story = {
     return btn;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/histogram-story.js.mdx b/docs/snippets/html/histogram-story.js.mdx
index 8230bf68d723..dd833becdd50 100644
--- a/docs/snippets/html/histogram-story.js.mdx
+++ b/docs/snippets/html/histogram-story.js.mdx
@@ -4,7 +4,7 @@
 import { createHistogram } from './Histogram';
 
 export default {
-    /* 👇 The title prop is optional.
+  /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
@@ -25,4 +25,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/histogram-story.ts.mdx b/docs/snippets/html/histogram-story.ts.mdx
index 84866f98b42d..83e8a823bf5e 100644
--- a/docs/snippets/html/histogram-story.ts.mdx
+++ b/docs/snippets/html/histogram-story.ts.mdx
@@ -1,17 +1,20 @@
 ```ts
 // Histogram.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-import { Histogram, HistogramProps } from './Histogram';
+import { createHistogram, HistogramProps } from './Histogram';
 
-export default {
+const meta: Meta<HistogramProps> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
-} as Meta<HistogramProps>;
+};
+
+export default meta;
+type Story = StoryObj<HistogramProps>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -27,4 +30,4 @@ export const Default: Story = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
index 3466632b67d6..5999a781e3a8 100644
--- a/docs/snippets/html/list-story-expanded.js.mdx
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -1,12 +1,11 @@
-
 ```js
 // List.stories.js
 
-import { createList } from  './List';
+import { createList } from './List';
 import { createListItem } from './ListItem';
 
 export default {
-   /* 👇 The title prop is optional.
+  /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
@@ -19,7 +18,7 @@ export default {
  * to learn how to use render functions.
  */
 export const Empty = {
-  render: () => createList(args) 
+  render: () => createList(args),
 };
 
 export const OneItem = {
@@ -39,4 +38,4 @@ export const ManyItems = {
     return list;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
index c6854009141f..3de22cef4d3c 100644
--- a/docs/snippets/html/list-story-expanded.ts.mdx
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -1,15 +1,17 @@
-
 ```ts
 // List.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-import { createList, ListArgs } from  './List';
+import { createList, ListArgs } from './List';
 import { createListItem } from './ListItem';
 
-export default {
+const meta: Meta<ListArgs> = {
   title: 'List',
-} as Meta<ListArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ListArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -17,7 +19,7 @@ export default {
  * to learn how to use render functions.
  */
 export const Empty: Story = {
-  render: () => createList(args) 
+  render: () => createList(args),
 };
 
 export const OneItem: Story = {
@@ -37,4 +39,4 @@ export const ManyItems: Story = {
     return list;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
index 7c36ec6feb0a..d7fdaa79ca60 100644
--- a/docs/snippets/html/list-story-reuse-data.js.mdx
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -1,8 +1,7 @@
-
 ```js
 // List.stories.js
 
-import { createList } from  './List';
+import { createList } from './List';
 import { createListItem } from './ListItem';
 
 // 👇 We're importing the necessary stories from ListItem
@@ -30,4 +29,4 @@ export const ManyItems = {
     return list;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
index 3291a2d93991..d29636c219bc 100644
--- a/docs/snippets/html/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -1,22 +1,24 @@
-
 ```ts
 // List.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-import { createList, ListArgs } from  './List';
+import { createList, ListArgs } from './List';
 import { createListItem } from './ListItem';
 
 // 👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
-export default {
+const meta: Meta<ListArgs> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
-} as Meta<ListArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ListArgs>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
index 441ae42f5c1f..1563f9510524 100644
--- a/docs/snippets/html/list-story-starter.js.mdx
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -1,13 +1,13 @@
 ```js
 // List.stories.js
 
-import { createList } from  './List';
+import { createList } from './List';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
@@ -15,4 +15,4 @@ export default {
 export const Empty = {
   render: (args) => createList(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
index 15f226a18707..e35a114d5561 100644
--- a/docs/snippets/html/list-story-starter.ts.mdx
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -1,20 +1,23 @@
 ```ts
 // List.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-import { createList, ListArgs } from  './List';
+import { createList, ListArgs } from './List';
 
-export default {
+const meta: Meta<ListArgs> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
-} as Meta<ListArgs>;
+};
+
+export default meta;
+type Story = StoryObj<ListArgs>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
   render: (args) => createList(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx
index 497ba4615fd1..9e17579a1f36 100644
--- a/docs/snippets/html/your-component.js.mdx
+++ b/docs/snippets/html/your-component.js.mdx
@@ -6,9 +6,9 @@ import { createYourComponent } from './YourComponent';
 // 👇 This default export determines where your story goes in the story list
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
 };
 
@@ -19,8 +19,8 @@ export default {
  */
 export const FirstStory = {
   render: (args) => createYourComponent(args),
-  args:{
+  args: {
     // 👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/html/your-component.ts.mdx b/docs/snippets/html/your-component.ts.mdx
index bc4d127aa4d4..95f74695d0d4 100644
--- a/docs/snippets/html/your-component.ts.mdx
+++ b/docs/snippets/html/your-component.ts.mdx
@@ -1,18 +1,22 @@
 ```ts
 // YourComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 
-import { createYourComponent } from './YourComponent';
+import { createYourComponent, ComponentProps } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
-export default {
+const meta: Meta<ComponentProps> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<ComponentProps>;
+
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/html/api/csf
@@ -20,8 +24,8 @@ export default {
  */
 export const FirstStory: Story = {
   render: (args) => createYourComponent(args),
-  args:{
+  args: {
     // 👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx
index 9e7a42247ae3..41d13f903bef 100644
--- a/docs/snippets/preact/button-story-with-args.js.mdx
+++ b/docs/snippets/preact/button-story-with-args.js.mdx
@@ -27,4 +27,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/preact/button-story.js.mdx b/docs/snippets/preact/button-story.js.mdx
index 9577823d3adf..3a5af05a8fff 100644
--- a/docs/snippets/preact/button-story.js.mdx
+++ b/docs/snippets/preact/button-story.js.mdx
@@ -23,4 +23,4 @@ export default {
 export const Primary = {
   render: () => <Button primary label="Button" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/preact/component-story-with-custom-render-function.js.mdx b/docs/snippets/preact/component-story-with-custom-render-function.js.mdx
index 96cc49422901..3d8f6821582f 100644
--- a/docs/snippets/preact/component-story-with-custom-render-function.js.mdx
+++ b/docs/snippets/preact/component-story-with-custom-render-function.js.mdx
@@ -30,4 +30,4 @@ export const Example = {
     </Layout>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/preact/histogram-story.js.mdx b/docs/snippets/preact/histogram-story.js.mdx
index 3ccad0ec6571..31b1f3872d20 100644
--- a/docs/snippets/preact/histogram-story.js.mdx
+++ b/docs/snippets/preact/histogram-story.js.mdx
@@ -29,4 +29,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/preact/your-component.js.mdx b/docs/snippets/preact/your-component.js.mdx
index f84b3d0dfef7..1089cfe85153 100644
--- a/docs/snippets/preact/your-component.js.mdx
+++ b/docs/snippets/preact/your-component.js.mdx
@@ -27,4 +27,4 @@ export const FirstStory = {
     //👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index c39a94968ca3..878139bd4702 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -32,4 +32,4 @@ export const Success = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/app-story-with-mock.ts.mdx b/docs/snippets/react/app-story-with-mock.ts.mdx
index 5af54be10687..6e1fc88d19e2 100644
--- a/docs/snippets/react/app-story-with-mock.ts.mdx
+++ b/docs/snippets/react/app-story-with-mock.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // App.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import App from './App';
 
-export default {
+const meta: Meta<typeof App> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'App',
   component: App,
-} as ComponentMeta<typeof App>;
+};
+
+export default meta;
+type Story = StoryObj<typeof App>;
 
-export const Success: ComponentStoryObj<typeof App> = {
+export const Success: Story = {
   parameters: {
     fetch: {
       json: {
diff --git a/docs/snippets/react/button-component-with-proptypes.js.mdx b/docs/snippets/react/button-component-with-proptypes.js.mdx
index 4ee7455c3a4d..a951fadea90e 100644
--- a/docs/snippets/react/button-component-with-proptypes.js.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.js.mdx
@@ -23,4 +23,4 @@ Button.propTypes = {
   */
   content: PropTypes.string.isRequired,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-component-with-proptypes.ts.mdx b/docs/snippets/react/button-component-with-proptypes.ts.mdx
index e4aa2000acc0..8e52ba8e6545 100644
--- a/docs/snippets/react/button-component-with-proptypes.ts.mdx
+++ b/docs/snippets/react/button-component-with-proptypes.ts.mdx
@@ -1,8 +1,6 @@
-```ts
+```tsx
 // Button.ts|tsx
 
-import React from 'react';
-
 export interface ButtonProps {
   /**
    * Checks if the button should be disabled
@@ -21,4 +19,4 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
     </button>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-group-story.js.mdx b/docs/snippets/react/button-group-story.js.mdx
index 16f61cec932b..72ca919986be 100644
--- a/docs/snippets/react/button-group-story.js.mdx
+++ b/docs/snippets/react/button-group-story.js.mdx
@@ -23,4 +23,4 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx
index 780c3b3e3006..0a186bce968a 100644
--- a/docs/snippets/react/button-group-story.ts.mdx
+++ b/docs/snippets/react/button-group-story.ts.mdx
@@ -1,25 +1,26 @@
-```ts
+```tsx
 // ButtonGroup.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { ButtonGroup } from '../ButtonGroup';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
-export default {
+const meta: Meta<typeof ButtonGroup> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
   component: ButtonGroup,
-} as ComponentMeta<typeof ButtonGroup>;
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
 
-export const Pair: ComponentStoryObj<typeof ButtonGroup> = {
+export const Pair: Story = {
   args: {
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',
diff --git a/docs/snippets/react/button-implementation.js.mdx b/docs/snippets/react/button-implementation.js.mdx
index 859e5243a02e..91030e82f69b 100644
--- a/docs/snippets/react/button-implementation.js.mdx
+++ b/docs/snippets/react/button-implementation.js.mdx
@@ -34,4 +34,4 @@ Button.propTypes = {
    */
   onClick: PropTypes.func,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-implementation.ts.mdx b/docs/snippets/react/button-implementation.ts.mdx
index b685ca704d19..3f910d601105 100644
--- a/docs/snippets/react/button-implementation.ts.mdx
+++ b/docs/snippets/react/button-implementation.ts.mdx
@@ -1,8 +1,6 @@
-```ts
+```tsx
 // Button.ts|tsx
 
-import React from 'react';
-
 export interface ButtonProps {
   /**
    * Is this the principal call to action on the page?
@@ -38,4 +36,4 @@ export const Button: React.FC<ButtonProps> = ({
 }) => {
   // the component implementation
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-click-handler-args.js.mdx b/docs/snippets/react/button-story-click-handler-args.js.mdx
index 8fc63bd26b41..ab41125d1959 100644
--- a/docs/snippets/react/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-args.js.mdx
@@ -23,4 +23,4 @@ export const Text = {
   },
   render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
index 8d1766bfcc76..194c821a34e8 100644
--- a/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simple-docs.js.mdx
@@ -19,4 +19,4 @@ export default {
 export const Text = {
   render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
index 300616218565..195eca7c8932 100644
--- a/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/react/button-story-click-handler-simplificated.js.mdx
@@ -15,4 +15,4 @@ export default {
 export const Text = {
   args: {...},
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-click-handler.js.mdx b/docs/snippets/react/button-story-click-handler.js.mdx
index c9e29652a6e3..aac7848ae511 100644
--- a/docs/snippets/react/button-story-click-handler.js.mdx
+++ b/docs/snippets/react/button-story-click-handler.js.mdx
@@ -19,4 +19,4 @@ export default {
 export const Text = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-click-handler.ts.mdx b/docs/snippets/react/button-story-click-handler.ts.mdx
index eecf1a603156..533a82e1d11e 100644
--- a/docs/snippets/react/button-story-click-handler.ts.mdx
+++ b/docs/snippets/react/button-story-click-handler.ts.mdx
@@ -1,24 +1,25 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Basic: ComponentStoryObj<typeof Button> = {
+export const Basic: Story = {
   render: () => <Button label="Hello" onClick={action('clicked')} />,
 };
 ```
diff --git a/docs/snippets/react/button-story-component-args-primary.js.mdx b/docs/snippets/react/button-story-component-args-primary.js.mdx
index f90d0ec4b350..f410db41c798 100644
--- a/docs/snippets/react/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
@@ -21,4 +21,4 @@ export default {
     primary: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-component-args-primary.ts.mdx b/docs/snippets/react/button-story-component-args-primary.ts.mdx
index d893bcab4776..6eb3509d9283 100644
--- a/docs/snippets/react/button-story-component-args-primary.ts.mdx
+++ b/docs/snippets/react/button-story-component-args-primary.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,5 +20,8 @@ export default {
     //👇 Now all Button stories will be primary.
     primary: true,
   },
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+```
diff --git a/docs/snippets/react/button-story-component-decorator.js.mdx b/docs/snippets/react/button-story-component-decorator.js.mdx
index 104353493fb9..dce90aece267 100644
--- a/docs/snippets/react/button-story-component-decorator.js.mdx
+++ b/docs/snippets/react/button-story-component-decorator.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   decorators: [
@@ -20,4 +20,4 @@ export default {
     ),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx b/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
index 97a29f1caf88..6f2bba2febf9 100644
--- a/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
+++ b/docs/snippets/react/button-story-component-decorator.story-function-js.js.mdx
@@ -7,17 +7,11 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '3em' }}>
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
index 3e1490e41a18..5321a0a5227c 100644
--- a/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/button-story-component-decorator.story-function-ts.ts.mdx
@@ -1,19 +1,25 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/button-story-component-decorator.ts.mdx b/docs/snippets/react/button-story-component-decorator.ts.mdx
index 454fde795da8..3de47c06f1ca 100644
--- a/docs/snippets/react/button-story-component-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-component-decorator.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -15,11 +13,13 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ margin: '3em' }}>
         <Story />
       </div>
     ),
   ],
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/button-story-decorator.js.mdx b/docs/snippets/react/button-story-decorator.js.mdx
index c6b7c1d4db18..f39e74d09787 100644
--- a/docs/snippets/react/button-story-decorator.js.mdx
+++ b/docs/snippets/react/button-story-decorator.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
@@ -23,4 +23,4 @@ export const Primary = {
     ),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
index 27ff306a23c0..e46d466d011c 100644
--- a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
@@ -1,20 +1,29 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Primary: ComponentStoryObj<typeof Button> = {
-  decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
+export const Primary: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 ```
diff --git a/docs/snippets/react/button-story-decorator.story-function.js.mdx b/docs/snippets/react/button-story-decorator.story-function.js.mdx
index bbe57aa3b37a..7bd612461805 100644
--- a/docs/snippets/react/button-story-decorator.story-function.js.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function.js.mdx
@@ -5,9 +5,9 @@ import React from 'react';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
@@ -15,4 +15,4 @@ export default {
 export const Primary = {
   decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
index f753a5424716..37f688a5b7b1 100644
--- a/docs/snippets/react/button-story-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -1,22 +1,25 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
+import type { StoryObj, Meta, StoryFn } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta, StoryFn } from '@storybook/react';
+import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ margin: '3em' }}>
         <Story />
       </div>
diff --git a/docs/snippets/react/button-story-default-export-with-component.js.mdx b/docs/snippets/react/button-story-default-export-with-component.js.mdx
index e21e8f0e8d0e..20f85bc95bfe 100644
--- a/docs/snippets/react/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.js.mdx
@@ -7,10 +7,10 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-default-export-with-component.ts.mdx b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
index 85cbe1053071..e36d1e7de810 100644
--- a/docs/snippets/react/button-story-default-export-with-component.ts.mdx
+++ b/docs/snippets/react/button-story-default-export-with-component.ts.mdx
@@ -1,18 +1,18 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/button-story-rename-story.js.mdx b/docs/snippets/react/button-story-rename-story.js.mdx
index cbcbc49d8e87..a66f492aaac5 100644
--- a/docs/snippets/react/button-story-rename-story.js.mdx
+++ b/docs/snippets/react/button-story-rename-story.js.mdx
@@ -7,15 +7,15 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
 
-export const Primary= {
+export const Primary = {
   name: 'I am the primary',
   render: () => <Button primary label="Button" />,
-}
-```
\ No newline at end of file
+};
+```
diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
index a7464dc407e6..9c362524c850 100644
--- a/docs/snippets/react/button-story-rename-story.ts.mdx
+++ b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -1,27 +1,28 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   name: 'I am the primary',
   render: () => <Button primary label="Button" />,
 };
diff --git a/docs/snippets/react/button-story-using-args.js.mdx b/docs/snippets/react/button-story-using-args.js.mdx
index 6d604199eebd..74968fc4a0b7 100644
--- a/docs/snippets/react/button-story-using-args.js.mdx
+++ b/docs/snippets/react/button-story-using-args.js.mdx
@@ -34,4 +34,4 @@ export const Tertiary = {
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
index 258a35226bd4..208df067d810 100644
--- a/docs/snippets/react/button-story-using-args.ts.mdx
+++ b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -1,34 +1,35 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   backgroundColor: '#ff0',
   label: 'Button',
 };
 
-export const Secondary: ComponentStoryObj<typeof Button> = {
+export const Secondary: Story = {
   args: {
     ...Primary.args,
     label: '😄👍😍💯',
   },
 };
 
-export const Tertiary: ComponentStoryObj<typeof Button> = {
+export const Tertiary: Story = {
   args: {
     ...Primary.args,
     label: '📚📕📈🤓',
diff --git a/docs/snippets/react/button-story-with-addon-example.js.mdx b/docs/snippets/react/button-story-with-addon-example.js.mdx
index 97a0d181b699..f69d2d66125d 100644
--- a/docs/snippets/react/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.js.mdx
@@ -23,4 +23,4 @@ export default {
 export const Basic = {
   render: () => <Button>Hello</Button>,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
index 2807164bf012..1525c119c5aa 100644
--- a/docs/snippets/react/button-story-with-addon-example.ts.mdx
+++ b/docs/snippets/react/button-story-with-addon-example.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -20,14 +18,17 @@ export default {
       data: 'this data is passed to the addon',
     },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const Basic: ComponentStoryObj<typeof Button> = {
+export const Basic: Story = {
   render: () => <Button>Hello</Button>,
 };
 ```
diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx
index 7fcf35be8bde..500b3777a8a7 100644
--- a/docs/snippets/react/button-story-with-args.js.mdx
+++ b/docs/snippets/react/button-story-with-args.js.mdx
@@ -20,4 +20,4 @@ export const Primary = {
     primary: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx
index 91b96dba0452..73d36c1362c5 100644
--- a/docs/snippets/react/button-story-with-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-args.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button, ButtonProps } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   args: {
     primary: true,
     label: 'Button',
diff --git a/docs/snippets/react/button-story-with-blue-args.js.mdx b/docs/snippets/react/button-story-with-blue-args.js.mdx
index 0625d9d041ad..8b312858a430 100644
--- a/docs/snippets/react/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -23,4 +23,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-blue-args.ts.mdx b/docs/snippets/react/button-story-with-blue-args.ts.mdx
index 5cdcc6b5731e..3cae8b02c82f 100644
--- a/docs/snippets/react/button-story-with-blue-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-blue-args.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -24,5 +22,7 @@ export default {
       ],
     },
   },
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/button-story-with-emojis.js.mdx b/docs/snippets/react/button-story-with-emojis.js.mdx
index e12f64ac939e..0a6e59a7b485 100644
--- a/docs/snippets/react/button-story-with-emojis.js.mdx
+++ b/docs/snippets/react/button-story-with-emojis.js.mdx
@@ -30,4 +30,4 @@ export const Secondary = {
 export const Tertiary = {
   render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
index 5104796a400a..fa9059769cc7 100644
--- a/docs/snippets/react/button-story-with-emojis.ts.mdx
+++ b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -1,35 +1,36 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   render: () => <Button backgroundColor="#ff0" label="Button" />,
 };
 
-export const Secondary: ComponentStoryObj<typeof Button> = {
+export const Secondary: Story = {
   render: () => <Button backgroundColor="#ff0" label="😄👍😍💯" />,
 };
 
-export const Tertiary: ComponentStoryObj<typeof Button> = {
+export const Tertiary: Story = {
   render: () => <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 );
 ```
diff --git a/docs/snippets/react/button-story-with-parameters.js.mdx b/docs/snippets/react/button-story-with-parameters.js.mdx
index d384bcee7923..5c3b0d639217 100644
--- a/docs/snippets/react/button-story-with-parameters.js.mdx
+++ b/docs/snippets/react/button-story-with-parameters.js.mdx
@@ -7,9 +7,9 @@ import { Button } from './Button';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -22,4 +22,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story-with-parameters.ts.mdx b/docs/snippets/react/button-story-with-parameters.ts.mdx
index b62a2481400b..b2ff8d45725c 100644
--- a/docs/snippets/react/button-story-with-parameters.ts.mdx
+++ b/docs/snippets/react/button-story-with-parameters.ts.mdx
@@ -1,27 +1,27 @@
-```js
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
 import { Button } from './Button';
 
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
     backgrounds: {
       values: [
-         { name: 'red', value: '#f00', },
-         { name: 'green', value: '#0f0', },
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
       ],
-    }
+    },
   },
-} as ComponentMeta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/button-story-with-sample.js.mdx b/docs/snippets/react/button-story-with-sample.js.mdx
index e31674ddd6eb..e1a1f90e9d6e 100644
--- a/docs/snippets/react/button-story-with-sample.js.mdx
+++ b/docs/snippets/react/button-story-with-sample.js.mdx
@@ -22,4 +22,4 @@ export default {
 export const Sample = {
   render: () => <Button label="hello button" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story.js.mdx b/docs/snippets/react/button-story.js.mdx
index 88c65efb4862..03426b4149d0 100644
--- a/docs/snippets/react/button-story.js.mdx
+++ b/docs/snippets/react/button-story.js.mdx
@@ -22,4 +22,4 @@ export default {
 export const Primary = {
   render: () => <Button primary label="Button" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
index 84ef47b0010b..9cb9097e8cf5 100644
--- a/docs/snippets/react/button-story.ts.mdx
+++ b/docs/snippets/react/button-story.ts.mdx
@@ -1,27 +1,28 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const Primary: ComponentStoryObj<typeof Button> = {
+export const Primary: Story = {
   render: () => <Button primary label="Button" />,
 };
 ```
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index cc1ad75e73cc..d51ec3ccccfb 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -36,4 +36,4 @@ const ButtonWithHooks = () => {
 export const Primary = {
   render: () => <ButtonWithHooks />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/checkbox-story-csf.js.mdx b/docs/snippets/react/checkbox-story-csf.js.mdx
index 356e9fa8486c..090ab34c6738 100644
--- a/docs/snippets/react/checkbox-story-csf.js.mdx
+++ b/docs/snippets/react/checkbox-story-csf.js.mdx
@@ -23,4 +23,4 @@ export const allCheckboxes = {
     </form>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx
index 756e91510f94..36c4851c4138 100644
--- a/docs/snippets/react/checkbox-story-csf.ts.mdx
+++ b/docs/snippets/react/checkbox-story-csf.ts.mdx
@@ -1,27 +1,28 @@
-```ts
+```tsx
 // Checkbox.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentStory } from '@storybook/react';
+import type { StoryObj, StoryObj } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Checkbox',
   component: Checkbox,
-} as ComponentMeta<typeof Checkbox>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const allCheckboxes: ComponentStoryObj<typeof Checkbox> = {
+export const allCheckboxes: Story = {
   render: () => (
     <form>
       <Checkbox id="Unchecked" label="Unchecked" />
diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx
index 5b6dc7b38c24..56de883f7f6c 100644
--- a/docs/snippets/react/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx
@@ -42,4 +42,4 @@ export const ExampleStory = {
     propertyB: 'Another Item One',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
index bc231342699d..9d1cca8cc120 100644
--- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx
+++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // YourComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { YourComponent } from './your-component';
 
-export default {
+const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -23,14 +21,17 @@ export default {
       options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
     },
   },
-} as ComponentMeta<typeof YourComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
 
 //👇 Some function to demonstrate the behavior
 const someFunction = (valuePropertyA, valuePropertyB) => {
   // Makes some computations and returns something
 };
 
-export const ExampleStory: ComponentStoryObj<typeof YourComponent> = {
+export const ExampleStory: Story = {
   render: (args) => {
     const { propertyA, propertyB } = args;
     //👇 Assigns the function result to a variable
diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx
index d67bccc53ba6..97987b513a8e 100644
--- a/docs/snippets/react/component-story-figma-integration.js.mdx
+++ b/docs/snippets/react/component-story-figma-integration.js.mdx
@@ -22,4 +22,4 @@ export const Example = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
index c05886c83069..e9581b6c60f7 100644
--- a/docs/snippets/react/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import { MyComponent } from './MyComponent';
 
 // More on default export: https://storybook.js.org/docs/7.0/react/writing-stories/introduction#default-export
-export default {
+const meta: Meta<typeof MyComponent> = {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
-} as ComponentMeta<typeof YourComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const Example: ComponentStoryObj<typeof MyComponent> = {
+export const Example: Story = {
   parameters: {
     design: {
       type: 'figma',
diff --git a/docs/snippets/react/component-story-static-asset-cdn.js.mdx b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
index 93118ccf6d24..57b1aba3978b 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.js.mdx
@@ -17,6 +17,8 @@ export default {
  * to learn how to use render functions.
  */
 export const WithAnImage = {
-  render: () => <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />,
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
index 867b1d79369a..4213605bbb2d 100644
--- a/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-cdn.ts.mdx
@@ -1,19 +1,24 @@
-```ts
+```tsx
 //  MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { Meta } from '@storybook/react';
+import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const WithAnImage = {
-  render: () => <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />,
+export const WithAnImage: Story = {
+  render: () => (
+    <img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
+  ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-static-asset-with-import.js.mdx b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
index ad03dcac5056..a645c52678e7 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.js.mdx
@@ -26,4 +26,4 @@ const image = {
 export const WithAnImage = {
   render: () => <img src={image.src} alt={image.alt} />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
index 1d41904c46f3..e5137ffd38c5 100644
--- a/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-with-import.ts.mdx
@@ -1,19 +1,22 @@
-```ts
+```tsx
 //  MyComponent.stories.ts|tsx
 
-import React from 'react';
-
 import imageFile from './static/image.png';
 
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 const image = {
   src: imageFile,
@@ -25,8 +28,7 @@ const image = {
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-
-export const WithAnImage = {
+export const WithAnImage: Story = {
   render: () => <img src={image.src} alt={image.alt} />,
 };
 ```
diff --git a/docs/snippets/react/component-story-static-asset-without-import.js.mdx b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
index b53e69dbdd19..a673b686cb1c 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.js.mdx
@@ -15,4 +15,4 @@ export default {
 export const WithAnImage = {
   render: () => <img src="/image.png" alt="my image" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
index 448f8ffa65b1..ebcbc17d1bfc 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
@@ -1,26 +1,23 @@
-```ts
+```tsx
 //  MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import imageFile from './static/image.png';
+import { MyComponent } from './MyComponent';
 
-import type { Meta } from '@storybook/react';
-
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'img',
-} as Meta;
-
-const image = {
-  src: imageFile,
-  alt: 'my image',
 };
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
 // Assume image.png is located in the "public" directory.
-export const WithAnImage = {
+export const WithAnImage: Story = {
   render: () => <img src="/image.png" alt="my image" />,
 };
 ```
diff --git a/docs/snippets/react/component-story-with-accessibility.js.mdx b/docs/snippets/react/component-story-with-accessibility.js.mdx
index 469d4e7d41b2..bfab7abffd4d 100644
--- a/docs/snippets/react/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.js.mdx
@@ -31,4 +31,4 @@ export const Inaccessible = {
     backgroundColor: 'red',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx
index 041428bb23f3..b9d47df8f835 100644
--- a/docs/snippets/react/component-story-with-accessibility.ts.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // Button.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading to learn how to generate automatic titles
    */
@@ -16,10 +14,13 @@ export default {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 // This is an accessible story
-export const Accessible: ComponentStoryObj<typeof Button> = {
+export const Accessible: Story = {
   args: {
     primary: false,
     label: 'Button',
@@ -27,7 +28,7 @@ export const Accessible: ComponentStoryObj<typeof Button> = {
 };
 
 // This is not
-export const Inaccessible: ComponentStoryObj<typeof Button> = {
+export const Inaccessible: Story = {
   args: {
     ...Accessible.args,
     backgroundColor: 'red',
diff --git a/docs/snippets/react/component-story-with-custom-render-function.js.mdx b/docs/snippets/react/component-story-with-custom-render-function.js.mdx
index eaf97ebc9b4a..475f527df083 100644
--- a/docs/snippets/react/component-story-with-custom-render-function.js.mdx
+++ b/docs/snippets/react/component-story-with-custom-render-function.js.mdx
@@ -29,4 +29,4 @@ export const Example = {
     </Layout>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-story-with-custom-render-function.ts.mdx b/docs/snippets/react/component-story-with-custom-render-function.ts.mdx
index d23f3ba4e32c..4c40150a78d1 100644
--- a/docs/snippets/react/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/react/component-story-with-custom-render-function.ts.mdx
@@ -1,25 +1,26 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Layout } from './Layout';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 // This story uses a render function to fully control how the component renders.
-export const Example: ComponentStoryObj<typeof MyComponent> = {
+export const Example: Story = {
   render: () => (
     <Layout>
       <header>
@@ -31,4 +32,4 @@ export const Example: ComponentStoryObj<typeof MyComponent> = {
     </Layout>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-styled-variables-object-notation.js.mdx b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
index 3a2ea73ecc8f..2019425b9df8 100644
--- a/docs/snippets/react/component-styled-variables-object-notation.js.mdx
+++ b/docs/snippets/react/component-styled-variables-object-notation.js.mdx
@@ -5,4 +5,4 @@ const Component = styled.div(({ theme }) => ({
   background: theme.background.app,
   width: 0,
 }));
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-styled-variables-template-literals.js.mdx b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
index 22591ab54d8d..6f3019037a90 100644
--- a/docs/snippets/react/component-styled-variables-template-literals.js.mdx
+++ b/docs/snippets/react/component-styled-variables-template-literals.js.mdx
@@ -5,4 +5,4 @@ const Component = styled.div`
   background: `${props => props.theme.background.app}`
   width: 0;
 `;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/component-test-with-testing-library.js.mdx b/docs/snippets/react/component-test-with-testing-library.js.mdx
index d2fba62bea1b..9d2ee0d66853 100644
--- a/docs/snippets/react/component-test-with-testing-library.js.mdx
+++ b/docs/snippets/react/component-test-with-testing-library.js.mdx
@@ -13,4 +13,4 @@ it('Checks if the form is valid', () => {
   const isFormValid = getByTestId('invalid-form');
   expect(isFormValid).toBeInTheDocument();
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
index 86f04def6814..c92db05537d6 100644
--- a/docs/snippets/react/document-screen-fetch.js.mdx
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -52,4 +52,4 @@ export function DocumentScreen() {
     </PageLayout>
   );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/document-screen-with-graphql.js.mdx b/docs/snippets/react/document-screen-with-graphql.js.mdx
index aab131464736..f59f65d337d5 100644
--- a/docs/snippets/react/document-screen-with-graphql.js.mdx
+++ b/docs/snippets/react/document-screen-with-graphql.js.mdx
@@ -56,4 +56,4 @@ export function DocumentScreen() {
     </PageLayout>
   );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
index b8d5d408b4fa..3e9ea8d1e928 100644
--- a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
@@ -115,4 +115,4 @@ export const MockedError = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
index aa1232cd9153..33f65cca180d 100644
--- a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
@@ -84,4 +84,4 @@ export const MockedError = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/histogram-story.js.mdx b/docs/snippets/react/histogram-story.js.mdx
index 7bd0cf5da682..56bb73857683 100644
--- a/docs/snippets/react/histogram-story.js.mdx
+++ b/docs/snippets/react/histogram-story.js.mdx
@@ -20,4 +20,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/histogram-story.ts.mdx b/docs/snippets/react/histogram-story.ts.mdx
index 2ef5b271db3a..9c7fa199da7c 100644
--- a/docs/snippets/react/histogram-story.ts.mdx
+++ b/docs/snippets/react/histogram-story.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // Histogram.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Histogram } from './Histogram';
 
-export default {
+const meta: Meta<typeof Histogram> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
   component: Histogram,
-} as ComponentMeta<typeof Histogram>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Histogram>;
 
-export const Default: ComponentStoryObj<typeof Histogram> = {
+export const Default: Story = {
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -24,4 +25,4 @@ export const Default: ComponentStoryObj<typeof Histogram> = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-expanded.js.mdx b/docs/snippets/react/list-story-expanded.js.mdx
index e3569cded2a8..f2476114a7ac 100644
--- a/docs/snippets/react/list-story-expanded.js.mdx
+++ b/docs/snippets/react/list-story-expanded.js.mdx
@@ -39,4 +39,4 @@ export const ManyItems = {
     </List>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
index 4d3345913fec..755811931b1d 100644
--- a/docs/snippets/react/list-story-expanded.ts.mdx
+++ b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -1,30 +1,31 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
-export const Empty: ComponentStoryObj<typeof List> = {};
+export const Empty: Story = {};
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const OneItem: ComponentStoryObj<typeof List> = {
+export const OneItem: Story = {
   render: (args) => (
     <List {...args}>
       <ListItem />
@@ -32,7 +33,7 @@ export const OneItem: ComponentStoryObj<typeof List> = {
   ),
 };
 
-export const ManyItems: ComponentStoryObj<typeof List> = {
+export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
       <ListItem />
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index 296c1b80b799..1780add09494 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -33,4 +33,4 @@ export const ManyItems = {
     </List>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 1a78c90e71f0..0745cfe16b73 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -1,9 +1,7 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -11,21 +9,24 @@ import { ListItem } from './ListItem';
 //👇 All ListItem stories are imported
 import * as ListItemStories from './ListItemStories';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
  * See https://storybook.js.org/docs/7.0/react/api/csf
  * to learn how to use render functions.
  */
-export const ManyItems: ComponentStoryObj<typeof List> = {
+export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
       <ListItem {...Selected.args} />
diff --git a/docs/snippets/react/list-story-starter.js.mdx b/docs/snippets/react/list-story-starter.js.mdx
index 66ad660c9fc8..14af3d8dd768 100644
--- a/docs/snippets/react/list-story-starter.js.mdx
+++ b/docs/snippets/react/list-story-starter.js.mdx
@@ -17,4 +17,4 @@ export default {
 // Always an empty list, not super interesting
 
 export const Empty = {};
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
index c09cfd2dab06..a088bb501c73 100644
--- a/docs/snippets/react/list-story-starter.ts.mdx
+++ b/docs/snippets/react/list-story-starter.ts.mdx
@@ -1,22 +1,22 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
 
-//👇 Always an empty list, not super interesting
+export default meta;
+type Story = StoryObj<typeof List>;
 
-const Template: ComponentStoryObj<typeof List> = {};
+//👇 Always an empty list, not super interesting
+export const Empty: Story = {};
 ```
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index 2b2ef5cda2c4..463850b09d97 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -48,4 +48,4 @@ export const OneItem = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index e7dedb693192..8f2e6c040f0e 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,9 +1,7 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -11,17 +9,20 @@ import { ListItem } from './ListItem';
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * Seehttps://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 //👇 The ListTemplate construct will be spread to the existing stories.
-const ListTemplate: ComponentStoryObj<typeof List> = {
+const ListTemplate: Story = {
   render: ({ items, ...args }) => {
     return (
       <List>
@@ -43,11 +44,7 @@ export const Empty = {
 export const OneItem = {
   ...ListTemplate,
   args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
+    items: [{ ...Unchecked.args }],
   },
 };
 ```
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index 760f91d53d66..4a1e03c22d7d 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -22,4 +22,4 @@ export const OneItem = (args) => (
     <Unchecked {...Unchecked.args} />
   </List>
 );
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index 7e748d0f318e..d1e96498712d 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,27 +1,30 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
-export default {
+export const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
-const OneItem: ComponentStoryFn<typeof List> = (args) => (
-  <List {...args}>
-    <Unchecked {...Unchecked.args} />
-  </List>
-);
-```
\ No newline at end of file
+const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      <Unchecked {...Unchecked.args} />
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index 190656650ae2..1bae39ac9a4e 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -25,4 +25,4 @@ export const OneItem = {
     </List>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index b5cada02e91c..dcb959020f98 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -1,14 +1,12 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -16,11 +14,14 @@ export default {
   title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-} as ComponentMeta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
-export const Empty: ComponentStoryObj<typeof List> = {};
+export const Empty: Story = {};
 
-export const OneItem: ComponentStoryObj<typeof List> = {
+export const OneItem: Story = {
   render: (args) => (
     <List {...args}>
       <ListItem />
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index 0cf8714df29f..c1ff91cb7b92 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -10,9 +10,9 @@ import { Unchecked } from './ListItem.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
 };
@@ -23,4 +23,4 @@ export const OneItem = Template.bind({});
 OneItem.args = {
   children: <Unchecked {...Unchecked.args} />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index 4a200c1da487..bd38a5fe9ae3 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -1,28 +1,28 @@
-```ts
+```tsx
 // List.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
   component: List,
-} as ComponentMeta<typeof List>;
+};
 
-const Template: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
+export default meta;
+type Story = StoryObj<typeof List>;
 
-export const OneItem = Template.bind({});
-OneItem.args = {
-  children: <Unchecked {...Unchecked.args} />,
+export const OneItem = {
+  args: {
+    children: <Unchecked {...Unchecked.args} />,
+  },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/loader-story.js.mdx b/docs/snippets/react/loader-story.js.mdx
index a1e44437d462..17a07ea76c5b 100644
--- a/docs/snippets/react/loader-story.js.mdx
+++ b/docs/snippets/react/loader-story.js.mdx
@@ -26,4 +26,4 @@ export const Primary = {
     }),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/login-form-with-play-function.js.mdx b/docs/snippets/react/login-form-with-play-function.js.mdx
index 686ebc05e65b..70f1672bb187 100644
--- a/docs/snippets/react/login-form-with-play-function.js.mdx
+++ b/docs/snippets/react/login-form-with-play-function.js.mdx
@@ -18,9 +18,12 @@ export default {
 
 export const EmptyForm = {};
 
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
@@ -39,4 +42,4 @@ export const FilledForm = {
     ).toBeInTheDocument();
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx
index 97b0bdd0119b..7d3f371e5b97 100644
--- a/docs/snippets/react/login-form-with-play-function.ts.mdx
+++ b/docs/snippets/react/login-form-with-play-function.ts.mdx
@@ -1,9 +1,7 @@
-```ts
+```tsx
 // LoginForm.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { within, userEvent } from '@storybook/testing-library';
 
@@ -11,20 +9,26 @@ import { expect } from '@storybook/jest';
 
 import { LoginForm } from './LoginForm';
 
-export default {
+const meta: Meta<typeof LoginForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
-} as ComponentMeta<typeof LoginForm>;
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginForm>;
 
-export const EmptyForm: ComponentStoryObj<typeof LoginForm> = {};
+export const EmptyForm: Story = {};
 
-export const FilledForm: ComponentStoryObj<typeof LoginForm> = {
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
diff --git a/docs/snippets/react/mock-context-container-global.js.mdx b/docs/snippets/react/mock-context-container-global.js.mdx
index 057c8f69120e..7eae1c82027d 100644
--- a/docs/snippets/react/mock-context-container-global.js.mdx
+++ b/docs/snippets/react/mock-context-container-global.js.mdx
@@ -17,4 +17,4 @@ const AppDecorator = (storyFn) => {
   );
 };
 export const decorators = [AppDecorator];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/mock-context-container-provider.js.mdx b/docs/snippets/react/mock-context-container-provider.js.mdx
index 05eef3eaac3b..546ef0d9038d 100644
--- a/docs/snippets/react/mock-context-container-provider.js.mdx
+++ b/docs/snippets/react/mock-context-container-provider.js.mdx
@@ -21,4 +21,4 @@ export const AppProfilePage = () => {
     </ProfilePageContext.Provider>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index 7184cafc16f4..42d26102e351 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -41,4 +41,4 @@ export const Normal = {
     </ProfilePageContext.Provider>
   ),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/mock-context-create.js.mdx b/docs/snippets/react/mock-context-create.js.mdx
index ee65d1327e48..99ffef5afe1b 100644
--- a/docs/snippets/react/mock-context-create.js.mdx
+++ b/docs/snippets/react/mock-context-create.js.mdx
@@ -6,4 +6,4 @@ import { createContext } from 'react';
 const ProfilePageContext = createContext();
 
 export default ProfilePageContext;
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx
index a2b9fb8bbf5c..eb5f8940a30a 100644
--- a/docs/snippets/react/mock-context-in-use.js.mdx
+++ b/docs/snippets/react/mock-context-in-use.js.mdx
@@ -16,4 +16,4 @@ export const ProfilePage = ({ name, userId }) => {
     </div>
   );
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
index 8017824f22fa..975c422f6245 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,10 +14,15 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleWithRole = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
index 2902b937a742..ec31be13e329 100644
--- a/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-alt-queries.ts.mdx
@@ -1,27 +1,33 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'QueryMethods',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const ExampleWithRole: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-composition.js.mdx b/docs/snippets/react/my-component-play-function-composition.js.mdx
index 7b17b60735a9..5b7aa01cdbfc 100644
--- a/docs/snippets/react/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,24 +14,34 @@ export default {
   component: MyComponent,
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FirstStory = {
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
 export const SecondStory = {
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
 export const CombinedStories = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-composition.ts.mdx b/docs/snippets/react/my-component-play-function-composition.ts.mdx
index d7776a6cf3f1..027ea4d7050d 100644
--- a/docs/snippets/react/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.ts.mdx
@@ -1,41 +1,52 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const FirstStory: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FirstStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
-export const SecondStory: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+export const SecondStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
-export const CombinedStories: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
+export const CombinedStories: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-query-findby.js.mdx b/docs/snippets/react/my-component-play-function-query-findby.js.mdx
index c133b906a64f..9085d2030640 100644
--- a/docs/snippets/react/my-component-play-function-query-findby.js.mdx
+++ b/docs/snippets/react/my-component-play-function-query-findby.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,12 +14,17 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const AsyncExample = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-query-findby.ts.mdx b/docs/snippets/react/my-component-play-function-query-findby.ts.mdx
index 6d8a48bb8e30..00c381ed3dc0 100644
--- a/docs/snippets/react/my-component-play-function-query-findby.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-query-findby.ts.mdx
@@ -1,29 +1,35 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Async Query Methods',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const AsyncExample: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-waitfor.js.mdx b/docs/snippets/react/my-component-play-function-waitfor.js.mdx
index e6ba8ea5d22b..3d929ec82120 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,9 +14,14 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleAsyncStory = {
-  play: async () => {
-    const Input = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -25,12 +30,12 @@ export const ExampleAsyncStory = {
     });
 
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
index 9d43d13ddf35..3ec17ebfb464 100644
--- a/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-waitfor.ts.mdx
@@ -1,26 +1,32 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithAsync',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const ExampleAsyncStory: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
-    const Input = screen.getByLabelText('Username', {
+    const Input = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -29,11 +35,11 @@ export const ExampleAsyncStory: ComponentStoryObj<typeof MyComponent> = {
     });
 
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.js.mdx b/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
index 49a4d60c8551..526c70ba6480 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.js.mdx
@@ -24,4 +24,4 @@ export const ExampleStory = {
     await userEvent.click(canvas.getByRole('another-element'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
index d7fb190223a7..1b59d62b26f7 100644
--- a/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-canvas.ts.mdx
@@ -1,24 +1,25 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithCanvasElement',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+export const ExampleStory: Story = {
   play: async ({ canvasElement }) => {
     // Assigns canvas to the component root element
     const canvas = within(canvasElement);
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
index 4b9959f264f9..dbc43477dd89 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,17 +14,24 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ClickExample = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
 export const FireEventExample = {
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
index 2deaa5daf555..67af51f0e978 100644
--- a/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-clickevent.ts.mdx
@@ -1,34 +1,42 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ClickExamples',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const ClickExample: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
-export const FireEventExample: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
+export const FireEventExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
 ```
diff --git a/docs/snippets/react/my-component-play-function-with-delay.js.mdx b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
index f0f38d5a71f7..b2d3ca49f653 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -14,16 +14,21 @@ export default {
   component: MyComponent,
 };
 
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const DelayedStory = {
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
diff --git a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
index e9966a552b14..c3820d5fdf87 100644
--- a/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-delay.ts.mdx
@@ -1,33 +1,39 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithDelay',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const DelayedStory: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
index 742038b8cee7..bdfcad326f0f 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js|jsx
 
-import { userEvent, screen } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
@@ -19,11 +19,14 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-// Queries the element by it's role and fires the event
-
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const ExampleChangeEvent = {
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
@@ -34,4 +37,4 @@ export const ExampleChangeEvent = {
     await userEvent.selectOptions(select, ['Yet another item']);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
index c60811a2ed26..662c9014d4e5 100644
--- a/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-with-selectevent.ts.mdx
@@ -1,33 +1,37 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { userEvent, screen } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithSelectEvent',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 // Function to emulate pausing between interactions
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-// Queries the element by it's role and fires the event
+/* See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const ExampleChangeEvent: ComponentStoryObj<typeof MyComponent> = {
-  play: async () => {
-    const select = screen.getByRole('listbox');
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
index ad5fa295738e..8b0194d36e18 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx
@@ -19,4 +19,4 @@ export const Basic = {};
 export const WithProp = {
   render: () => <MyComponent prop="value" />,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
index f8e1fcd03dd5..c62b36dcdb1b 100644
--- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
+++ b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx
@@ -1,24 +1,25 @@
-```ts
+```tsx
 // MyComponent.story.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Path/To/MyComponent',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const Basic: ComponentStoryObj<typeof MyComponent> = {};
+export const Basic: Story = {};
 
-export const WithProp: ComponentStoryObj<typeof MyComponent> = {
+export const WithProp: Story = {
   render: () => <MyComponent prop="value" />,
 };
 ```
diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
index 85d6233282b0..3841c50af2ce 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx
@@ -30,4 +30,4 @@ export const MyStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
index 3a21b2a1be0d..706ee366a2f6 100644
--- a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
+++ b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx
@@ -1,15 +1,13 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -25,9 +23,12 @@ export default {
       defaultViewport: 'iphone6',
     },
   },
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const MyStory: ComponentStoryObj<typeof MyComponent> = {
+export const MyStory: Story = {
   parameters: {
     viewport: {
       defaultViewport: 'iphonex',
diff --git a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
index 8b56d5b88a65..e53c6cd9f9c3 100644
--- a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -5,4 +5,4 @@ export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
   return <p>{caption}</p>;
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-story-use-globaltype.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
index db294a0081a4..8164d9fc9055 100644
--- a/docs/snippets/react/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype.js.mdx
@@ -40,4 +40,4 @@ export const StoryWithLocale = {
     return <p>{caption}</p>;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-story-with-nonstory.js.mdx b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
index 438611688594..7771f030dbe9 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.js.mdx
@@ -30,4 +30,4 @@ export const ComplexStory = {
     data: complexData,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
index 364908486f6e..d62bc3dc5bb5 100644
--- a/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
+++ b/docs/snippets/react/my-component-story-with-nonstory.ts.mdx
@@ -1,15 +1,13 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
 import someData from './data.json';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -18,18 +16,21 @@ export default {
   component: MyComponent,
   includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
   excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 export const simpleData = { foo: 1, bar: 'baz' };
 export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
 
-export const SimpleStory: ComponentStoryObj<typeof MyComponent> = {
+export const SimpleStory: Story = {
   args: {
     data: simpleData,
   },
 };
 
-export const ComplexStory: ComponentStoryObj<typeof MyComponent> = {
+export const ComplexStory: Story = {
   args: {
     data: complexData,
   },
diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/react/my-component-with-env-variables.js.mdx
index 9fdf5755862c..8cc37271f596 100644
--- a/docs/snippets/react/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.js.mdx
@@ -17,4 +17,4 @@ export const ExampleStory = {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/react/my-component-with-env-variables.ts.mdx
index 6bc176bbaf7c..7a8a2b9c45da 100644
--- a/docs/snippets/react/my-component-with-env-variables.ts.mdx
+++ b/docs/snippets/react/my-component-with-env-variables.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // MyComponent.stories.ts| tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+export const ExampleStory: Story = {
   args: {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
diff --git a/docs/snippets/react/page-story-slots.ts.mdx b/docs/snippets/react/page-story-slots.ts.mdx
index 27c056b3ae1d..18e5674ba009 100644
--- a/docs/snippets/react/page-story-slots.ts.mdx
+++ b/docs/snippets/react/page-story-slots.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // Page.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
-export default {
+const meta: Meta<typeof Page> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
   component: Page,
-} as ComponentMeta<typeof Page>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-export const CustomFooter: ComponentStoryObj<typeof Page> = {
+export const CustomFooter: Story = {
   render: (args) => (
     <Page {...args}>
       <footer>{args.footer}</footer>
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index fb3eecd81707..cf5401300141 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -24,4 +24,4 @@ export const Simple = {
     subdocuments: DocumentList.Simple.args.documents,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index 83c9734b3da0..0301dcb6617a 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -1,9 +1,7 @@
-```ts
+```tsx
 // YourPage.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { DocumentScreen } from './YourPage';
 
@@ -11,16 +9,19 @@ import PageLayout from './PageLayout.stories';
 import DocumentHeader from './DocumentHeader.stories';
 import DocumentList from './DocumentList.stories';
 
-export default {
+const meta: Meta<typeof DocumentScreen> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'DocumentScreen',
   component: DocumentScreen,
-} as ComponentMeta<typeof DocumentScreen>;
+};
+
+export default meta;
+type Story = StoryObj<typeof DocumentScreen>;
 
-export const Simple: ComponentStoryObj<typeof DocumentScreen> = {
+export const Simple: Story = {
   args: {
     user: PageLayout.Simple.args.user,
     document: DocumentHeader.Simple.args.document,
diff --git a/docs/snippets/react/page-story.js.mdx b/docs/snippets/react/page-story.js.mdx
index f35a189c0953..ad65e6c8e3e8 100644
--- a/docs/snippets/react/page-story.js.mdx
+++ b/docs/snippets/react/page-story.js.mdx
@@ -20,4 +20,4 @@ export const LoggedIn = {
     ...HeaderStories.LoggedIn.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/page-story.ts.mdx b/docs/snippets/react/page-story.ts.mdx
index 3b9131d596c5..185d6f592d6b 100644
--- a/docs/snippets/react/page-story.ts.mdx
+++ b/docs/snippets/react/page-story.ts.mdx
@@ -1,25 +1,26 @@
-```ts
+```tsx
 // Page.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
 //👇 Imports all Header stories
 import * as HeaderStories from './Header.stories';
 
-export default {
+const meta: Meta<typeof Page> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Page',
   component: Page,
-} as ComponentMeta<typeof Page>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-export const LoggedIn: ComponentStoryObj<typeof Page> = {
+export const LoggedIn: Story = {
   args: {
     ...HeaderStories.LoggedIn.args,
   },
diff --git a/docs/snippets/react/register-component-with-play-function.js.mdx b/docs/snippets/react/register-component-with-play-function.js.mdx
index bcb456e1c94e..cf606cbfe41b 100644
--- a/docs/snippets/react/register-component-with-play-function.js.mdx
+++ b/docs/snippets/react/register-component-with-play-function.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // RegistrationForm.stories.js|jsx
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm';
 
@@ -14,9 +14,15 @@ export default {
   component: RegistrationForm,
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -24,7 +30,7 @@ export const FilledForm = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -32,9 +38,9 @@ export const FilledForm = {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/register-component-with-play-function.ts.mdx b/docs/snippets/react/register-component-with-play-function.ts.mdx
index 7d86f06489bb..91a77bae36bc 100644
--- a/docs/snippets/react/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/react/register-component-with-play-function.ts.mdx
@@ -1,26 +1,33 @@
-```ts
+```tsx
 // RegistrationForm.stories.ts|tsx
 
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
-
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { RegistrationForm } from './RegistrationForm';
 
-export default {
+const meta: Meta<typeof RegistrationForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'RegistrationForm',
   component: RegistrationForm,
-} as ComponentMeta<typeof RegistrationForm>;
+};
+
+export default meta;
+type Story = StoryObj<typeof RegistrationForm>;
+
+/*
+ * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-export const FilledForm: ComponentStoryObj<typeof RegistrationForm> = {
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -28,7 +35,7 @@ export const FilledForm: ComponentStoryObj<typeof RegistrationForm> = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -36,7 +43,7 @@ export const FilledForm: ComponentStoryObj<typeof RegistrationForm> = {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },
diff --git a/docs/snippets/react/simple-page-implementation.js.mdx b/docs/snippets/react/simple-page-implementation.js.mdx
index 038778d9d2e7..50efe8fb60e2 100644
--- a/docs/snippets/react/simple-page-implementation.js.mdx
+++ b/docs/snippets/react/simple-page-implementation.js.mdx
@@ -15,4 +15,4 @@ export function DocumentScreen({ user, document, subdocuments }) {
     </PageLayout>
   );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/simple-page-implementation.ts.mdx b/docs/snippets/react/simple-page-implementation.ts.mdx
index ef1ae449dac5..913064973839 100644
--- a/docs/snippets/react/simple-page-implementation.ts.mdx
+++ b/docs/snippets/react/simple-page-implementation.ts.mdx
@@ -1,8 +1,6 @@
-```js
+```tsx
 // YourPage.ts|tsx
 
-import React from 'react';
-
 import PageLayout from './PageLayout';
 import Document from './Document';
 import SubDocuments from './SubDocuments';
@@ -23,4 +21,4 @@ function DocumentScreen({ user, document, subdocuments }) {
     </PageLayout>
   );
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx b/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
index 58dbe375c9c0..fd3331af1217 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.js.mdx
@@ -20,4 +20,4 @@ export const NonA11yStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
index 6630665ff038..92f752acb3e5 100644
--- a/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-disable.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Disable a11y addon',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const NonA11yStory: ComponentStoryObj<typeof MyComponent> = {
+export const NonA11yStory: Story = {
   parameters: {
     a11y: {
       // This option disables all a11y checks on this story
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
index bc5dc1ac8d32..57107a968699 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.js.mdx
@@ -35,4 +35,4 @@ export const ExampleStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
index 1742a2bc2885..8dcccf4eb24c 100644
--- a/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
+++ b/docs/snippets/react/storybook-addon-a11y-story-config.ts.mdx
@@ -1,22 +1,23 @@
-```ts
+```tsx
 // MyComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Configure a11y addon',
   component: MyComponent,
-} as ComponentMeta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-export const ExampleStory: ComponentStoryObj<typeof MyComponent> = {
+export const ExampleStory: Story = {
   parameters: {
     a11y: {
       element: '#storybook-root',
diff --git a/docs/snippets/react/storybook-preview-global-decorator.js.mdx b/docs/snippets/react/storybook-preview-global-decorator.js.mdx
index 6f9ea3eca88e..842fea48a49c 100644
--- a/docs/snippets/react/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/react/storybook-preview-global-decorator.js.mdx
@@ -10,4 +10,4 @@ export const decorators = [
     </div>
   ),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx b/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
index 9cffd503437f..6336a5be1c15 100644
--- a/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
+++ b/docs/snippets/react/storybook-preview-global-decorator.story-function.js.mdx
@@ -4,4 +4,4 @@
 import React from 'react';
 
 export const decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx b/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx
index 36f5edbc03c7..ca163affb380 100644
--- a/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx
+++ b/docs/snippets/react/storybook-preview-with-styled-components-decorator.js.mdx
@@ -12,4 +12,4 @@ export const decorators = [
     </ThemeProvider>
   ),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/storybook-preview-with-styled-components-decorator.story-function.js.mdx b/docs/snippets/react/storybook-preview-with-styled-components-decorator.story-function.js.mdx
index 626bc2d3668f..29fdd12de7d6 100644
--- a/docs/snippets/react/storybook-preview-with-styled-components-decorator.story-function.js.mdx
+++ b/docs/snippets/react/storybook-preview-with-styled-components-decorator.story-function.js.mdx
@@ -5,11 +5,5 @@ import React from 'react';
 
 import { ThemeProvider } from 'styled-components';
 
-export const decorators = [
-  (Story) => (
-    <ThemeProvider theme="default">
-      {Story()}
-    </ThemeProvider>
-  ),
-];
-```
\ No newline at end of file
+export const decorators = [(Story) => <ThemeProvider theme="default">{Story()}</ThemeProvider>];
+```
diff --git a/docs/snippets/react/storybook-testing-addon-optional-config-scripts.json.mdx b/docs/snippets/react/storybook-testing-addon-optional-config-scripts.json.mdx
index b4798d60292c..6c3798a8f329 100644
--- a/docs/snippets/react/storybook-testing-addon-optional-config-scripts.json.mdx
+++ b/docs/snippets/react/storybook-testing-addon-optional-config-scripts.json.mdx
@@ -4,4 +4,4 @@
     "test": "react-scripts test --setupFiles ./setupFile.js"
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
index 8e1163eecaa2..a2c2190a96ae 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
@@ -43,4 +43,4 @@ export const TableStory = {
     size: 'large',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/your-component-with-decorator.js.mdx b/docs/snippets/react/your-component-with-decorator.js.mdx
index 3b6ffa7b81a8..e87be4dc964c 100644
--- a/docs/snippets/react/your-component-with-decorator.js.mdx
+++ b/docs/snippets/react/your-component-with-decorator.js.mdx
@@ -20,4 +20,4 @@ export default {
     ),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
index a2ec1f492a0d..fab3672aa431 100644
--- a/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
+++ b/docs/snippets/react/your-component-with-decorator.story-function-js.js.mdx
@@ -17,4 +17,4 @@ export default {
   component: YourComponent,
   decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
index 1c47e59bc50b..3c23b4d88f9b 100644
--- a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
@@ -1,15 +1,13 @@
-```ts
+```tsx
 // YourComponent.stories.ts|tsx
 
-import React from 'react';
-
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
 // Replacing the <Story/> element with a Story function is also a good way of writing decorators.
 // Useful to prevent the full remount of the component's story.
-export default {
+const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -17,5 +15,7 @@ export default {
   title: 'YourComponent',
   component: YourComponent,
   decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>],
-} as ComponentMeta<typeof YourComponent>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/your-component-with-decorator.ts.mdx b/docs/snippets/react/your-component-with-decorator.ts.mdx
index 6e3e31e7e8b1..c6fa3a167650 100644
--- a/docs/snippets/react/your-component-with-decorator.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.ts.mdx
@@ -1,13 +1,11 @@
-```ts
+```tsx
 // YourComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentMeta, StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
-export default {
+const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -15,11 +13,13 @@ export default {
   title: 'YourComponent',
   component: YourComponent,
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ margin: '3em' }}>
         <Story />
       </div>
     ),
   ],
-} as ComponentMeta<typeof YourComponent>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx
index bab134b98619..e35ef7643c9e 100644
--- a/docs/snippets/react/your-component.ts.mdx
+++ b/docs/snippets/react/your-component.ts.mdx
@@ -1,23 +1,24 @@
-```ts
+```tsx
 // YourComponent.stories.ts|tsx
 
-import React from 'react';
-
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { YourComponent } from './YourComponent';
 
 //👇 This default export determines where your story goes in the story list
-export default {
+const meta: Meta<typeof YourComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'YourComponent',
   component: YourComponent,
-} as ComponentMeta<typeof YourComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
 
-export const FirstStory: ComponentStoryObj<typeof YourComponent> = {
+export const FirstStory: Story = {
   args: {
     //👇 The args you need here will depend on your component
   },
diff --git a/docs/snippets/svelte/button-component-with-proptypes.js.mdx b/docs/snippets/svelte/button-component-with-proptypes.js.mdx
index 480f43c9f440..62e2f815bb9f 100644
--- a/docs/snippets/svelte/button-component-with-proptypes.js.mdx
+++ b/docs/snippets/svelte/button-component-with-proptypes.js.mdx
@@ -21,4 +21,4 @@
 <script/>
 
 <button type="button" {disabled}>{content}</button>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx
index 16db4a2ef26f..a930d4d85df1 100644
--- a/docs/snippets/svelte/button-group-story.js.mdx
+++ b/docs/snippets/svelte/button-group-story.js.mdx
@@ -30,4 +30,4 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-args.js.mdx b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
index 140ae8dff1df..51620d5630d6 100644
--- a/docs/snippets/svelte/button-story-click-handler-args.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler-args.js.mdx
@@ -29,4 +29,4 @@ export const Text = {
     click: action('clicked'),
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
index b295452cdc4b..64e3c3e27c69 100644
--- a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
+++ b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx
@@ -2,26 +2,20 @@
 <!-- Button.stories.svelte -->
 
 <script>
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
   import Button from './Button.svelte';
 </script>
 
 <!-- 
   See https://storybook.js.org/docs/7.0/svelte/essentials/actions#action-argtype-annotation
   to learn how to set up argTypes for actions
---> 
+-->
 
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    onClick: { action: "onClick" },
-  }}
-/>
+<Meta title="Button" component={Button} argTypes={{ onClick: { action: "onClick" }, }} />
 
-<Template let:args>
-  <Button {...args} on:click={args.onClick} />
-</Template>
+<template let:args>
+  <button {...args} on:click="{args.onClick}" />
+</template>
 
 <Story name="Text" args={{ label: 'Hello' }}/>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-click-handler.js.mdx b/docs/snippets/svelte/button-story-click-handler.js.mdx
index c75cd6f9a972..e3e87430bd5d 100644
--- a/docs/snippets/svelte/button-story-click-handler.js.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.js.mdx
@@ -25,4 +25,4 @@ export const Text = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-click-handler.native-format.mdx b/docs/snippets/svelte/button-story-click-handler.native-format.mdx
index ab444718488e..8e9c20c40bff 100644
--- a/docs/snippets/svelte/button-story-click-handler.native-format.mdx
+++ b/docs/snippets/svelte/button-story-click-handler.native-format.mdx
@@ -5,13 +5,11 @@
   import { Meta, Story } from '@storybook/addon-svelte-csf';
 
   import { action } from '@storybook/addon-actions';
-  
+
   import Button from './Button.svelte';
 </script>
 
-<Meta title="Button" component={Button}/>
+<meta title="Button" component="{Button}" />
 
-<Story name="Text">
-  <Button text="Hello" on:click={action('clicked')}/>
-</Story>
-```
\ No newline at end of file
+<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story>
+```
diff --git a/docs/snippets/svelte/button-story-component-args-primary.js.mdx b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
index 1de418bc0c03..8bc6ac1b3629 100644
--- a/docs/snippets/svelte/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/svelte/button-story-component-args-primary.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
@@ -19,4 +19,4 @@ export default {
     primary: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx b/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx
index c006257fabe0..ad6df94db88a 100644
--- a/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx
+++ b/docs/snippets/svelte/button-story-component-args-primary.native-format.mdx
@@ -3,15 +3,9 @@
 
 <script>
   import { Meta } from '@storybook/addon-svelte-csf';
-  
+
   import Button from './Button.svelte';
 </script>
 
-<Meta
-  title="Button"
-  component={Button}
-  args={{
-    primary: true,
-  }}
-/>
-```
\ No newline at end of file
+<Meta title="Button" component={Button} args={{ primary: true, }} />
+```
diff --git a/docs/snippets/svelte/button-story-component-decorator.js.mdx b/docs/snippets/svelte/button-story-component-decorator.js.mdx
index 499f675bab4e..0ead2b894a24 100644
--- a/docs/snippets/svelte/button-story-component-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-component-decorator.js.mdx
@@ -6,9 +6,9 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   decorators: [() => MarginDecorator],
@@ -31,4 +31,4 @@ export default {
     margin: 3em;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx b/docs/snippets/svelte/button-story-component-decorator.native-format.mdx
index b9a01f2c838c..511310ef1322 100644
--- a/docs/snippets/svelte/button-story-component-decorator.native-format.mdx
+++ b/docs/snippets/svelte/button-story-component-decorator.native-format.mdx
@@ -3,20 +3,17 @@
 
 <script>
   import { Meta, Template } from '@storybook/addon-svelte-csf';
-  
+
   import MarginDecorator from './MarginDecorator.svelte';
 
   import Button from './Button.svelte';
 </script>
 
-<Meta
-  title="Button"
-  component={Button}
-/>
+<meta title="Button" component="{Button}" />
 
-<Template let:args>
+<template let:args>
   <MarginDecorator>
     <!--👇 Your component here -->
   </MarginDecorator>
-</Template>
-```
\ No newline at end of file
+</template>
+```
diff --git a/docs/snippets/svelte/button-story-decorator.js.mdx b/docs/snippets/svelte/button-story-decorator.js.mdx
index 420042d1ba8d..8431b5e43d46 100644
--- a/docs/snippets/svelte/button-story-decorator.js.mdx
+++ b/docs/snippets/svelte/button-story-decorator.js.mdx
@@ -24,4 +24,4 @@ export const Primary = {
   }),
   decorators: [() => MarginDecorator],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
index 9c2b7da35eb1..9229c34d3c7a 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
@@ -40,4 +40,4 @@ ExampleStory.args = {
   size: 'small',
   label: 'button',
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx b/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx
index 39faba38ccf6..0038c6f288b6 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.native-format.mdx
@@ -3,7 +3,7 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Button from './Button.svelte';
 
   //👇 Some function to demonstrate the behavior
@@ -13,25 +13,12 @@
 </script>
 
 <!--👇 Creates specific argTypes -->
-<Meta
-  title="Button"
-  component={Button}  
-  argTypes={{
-    backgroundColor: { control: 'color' },
-  }}
-/>
+<Meta title="Button" component={Button} argTypes={{ backgroundColor: { control: 'color' }, }} />
 
 <!-- 👇 Assigns the function result to a variable and pass it as a prop into the component -->
-<Template let:args>
-  <Button {...args} label={someFunction(args.label)} />
-</Template>
+<template let:args>
+  <button {...args} label="{someFunction(args.label)}" />
+</template>
 
-<Story
-  name="ExampleStory"
-  args={{
-    primary: true,
-    size:'small',
-    label: 'Button',
-  }}
-/>
-```
\ No newline at end of file
+<Story name="ExampleStory" args={{ primary: true, size:'small', label: 'Button', }} />
+```
diff --git a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx b/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
index d15838083b74..5a4824f53263 100644
--- a/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/svelte/button-story-default-export-with-component.js.mdx
@@ -5,10 +5,10 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-rename-story.js.mdx b/docs/snippets/svelte/button-story-rename-story.js.mdx
index a82c46b59411..20066d01967d 100644
--- a/docs/snippets/svelte/button-story-rename-story.js.mdx
+++ b/docs/snippets/svelte/button-story-rename-story.js.mdx
@@ -27,4 +27,4 @@ export const Primary = ({
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-using-args.js.mdx b/docs/snippets/svelte/button-story-using-args.js.mdx
index 8cca071da12d..30e454204e83 100644
--- a/docs/snippets/svelte/button-story-using-args.js.mdx
+++ b/docs/snippets/svelte/button-story-using-args.js.mdx
@@ -49,4 +49,4 @@ export const Tertiary = {
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-using-args.native-format.mdx b/docs/snippets/svelte/button-story-using-args.native-format.mdx
index a5636c4cf13b..455bb95797c3 100644
--- a/docs/snippets/svelte/button-story-using-args.native-format.mdx
+++ b/docs/snippets/svelte/button-story-using-args.native-format.mdx
@@ -7,41 +7,16 @@
   import Button from './Button.svelte';
 </script>
 
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    label: { control: 'text' },
-    primary: { control: 'boolean' },
-  }}
-/>
+<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
+'boolean' }, }} />
 
 <!-- 👇 We create a “template” of how args map to rendering -->
-<Template let:args>
-  <Button {...args} />
-</Template>
+<template let:args>
+  <button {...args} />
+</template>
 
 <!-- 👇 Each story then reuses that template -->
-<Story
-  name="Primary"
-  args={{
-    background: '#ff0',
-    label: 'Button'
-  }}
-/>
-
-<Story
-  name="Secondary"
-  args={{
-    background: '#ff0',
-    label: '😄👍😍💯'
-  }}
-/>
-<Story
-  name="Tertiary"
-  args={{
-    background: '#ff0',
-    label: '📚📕📈🤓'
-  }}
-/>
-```
\ No newline at end of file
+<Story name="Primary" args={{ background: '#ff0', label: 'Button' }} /> <Story name="Secondary"
+args={{ background: '#ff0', label: '😄👍😍💯' }} /> <Story name="Tertiary" args={{ background:
+'#ff0', label: '📚📕📈🤓' }} />
+```
diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
index d829880a92a9..e3d6366f523a 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx
@@ -28,4 +28,4 @@ export const Basic = {
     props: args,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
index 2a8f80ceb074..587ee88b5a82 100644
--- a/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-addon-example.native-format.mdx
@@ -3,21 +3,14 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Button from './Button.svelte';
 </script>
 
-<Meta
-  title="Button"
-  component={Button}
-  parameters={{
-    myAddon: {
-      data: 'this data is passed to the addon',
-    },
-  }}
-/>
+<Meta title="Button" component={Button} parameters={{ myAddon: { data: 'this data is passed to the
+addon', }, }} />
 
-<Template let:args>
-  <Button {...args} />
-</Template>
-```
\ No newline at end of file
+<template let:args>
+  <button {...args} />
+</template>
+```
diff --git a/docs/snippets/svelte/button-story-with-args.js.mdx b/docs/snippets/svelte/button-story-with-args.js.mdx
index f7c749fca636..f108dca48156 100644
--- a/docs/snippets/svelte/button-story-with-args.js.mdx
+++ b/docs/snippets/svelte/button-story-with-args.js.mdx
@@ -27,4 +27,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-args.native-format.mdx b/docs/snippets/svelte/button-story-with-args.native-format.mdx
index 4e5e67a21603..0bbceda63e98 100644
--- a/docs/snippets/svelte/button-story-with-args.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-args.native-format.mdx
@@ -3,32 +3,20 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Button from './Button.svelte';
 </script>
 
-<Meta
-  title="Button"
-  component={Button}
-  argTypes={{
-    label: { control: 'text' },
-    primary: { control: 'boolean' },
-  }}
-/>
+<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
+'boolean' }, }} />
 
 <!--👇 We create a “template” of how args map to rendering -->
 
-<Template let:args>
-  <Button {...args} />
-</Template>
+<template let:args>
+  <button {...args} />
+</template>
 
 <!-- 👇 Each story then reuses that template -->
 
-<Story
-  name='Primary'
-  args={{
-    primary: true,
-    label: 'Button'
-  }}
-/>
-```
\ No newline at end of file
+<Story name='Primary' args={{ primary: true, label: 'Button' }} />
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.js.mdx b/docs/snippets/svelte/button-story-with-blue-args.js.mdx
index f6665b8c7e24..2c5b60828f78 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -21,4 +21,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-blue-args.native-format.mdx b/docs/snippets/svelte/button-story-with-blue-args.native-format.mdx
index ec793aaceb7f..50180b9baab6 100644
--- a/docs/snippets/svelte/button-story-with-blue-args.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-blue-args.native-format.mdx
@@ -8,17 +8,6 @@
 </script>
 
 <!-- 👇 Creates specific parameters for the story -->
-<Meta
-  title="Button"
-  component={Button}
-  parameters={{
-    backgrounds: {
-      values: [
-        { name: 'red', value: '#f00', },
-        { name: 'green', value: '#0f0', },
-        { name: 'blue', value: '#00f', },
-      ]
-    }
-  }}
-/>
-```
\ No newline at end of file
+<Meta title="Button" component={Button} parameters={{ backgrounds: { values: [ { name: 'red', value:
+'#f00', }, { name: 'green', value: '#0f0', }, { name: 'blue', value: '#00f', }, ] } }} />
+```
diff --git a/docs/snippets/svelte/button-story-with-emojis.js.mdx b/docs/snippets/svelte/button-story-with-emojis.js.mdx
index a14cadc32956..5b3f249cbcb8 100644
--- a/docs/snippets/svelte/button-story-with-emojis.js.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.js.mdx
@@ -46,4 +46,4 @@ export const Tertiary = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
index f30d8290eab2..921d6a7b61ec 100644
--- a/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.native-format.mdx
@@ -1,21 +1,21 @@
 ```html
 <script>
   import { Meta, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Button from './Button.svelte';
 </script>
 
-<Meta title="Button" component={Button} />
+<meta title="Button" component="{Button}" />
 
 <Story name="Primary">
-  <Button background="#ff0" label="Button" />
+  <button background="#ff0" label="Button" />
 </Story>
 
 <Story name="Secondary">
-  <Button background="#ff0" label="😄👍😍💯" />
+  <button background="#ff0" label="😄👍😍💯" />
 </Story>
 
 <Story name="Tertiary">
-  <Button background="#ff0" label="📚📕📈🤓" />
+  <button background="#ff0" label="📚📕📈🤓" />
 </Story>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story.js.mdx b/docs/snippets/svelte/button-story.js.mdx
index f34e8b52b3d2..afbb6742ec8f 100644
--- a/docs/snippets/svelte/button-story.js.mdx
+++ b/docs/snippets/svelte/button-story.js.mdx
@@ -26,4 +26,4 @@ export const Primary = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/button-story.native-format.mdx b/docs/snippets/svelte/button-story.native-format.mdx
index 442f2935989c..790e9daeb99d 100644
--- a/docs/snippets/svelte/button-story.native-format.mdx
+++ b/docs/snippets/svelte/button-story.native-format.mdx
@@ -7,9 +7,9 @@
   import Button from './Button.svelte';
 </script>
 
-<Meta title="Button" component={Button} />
+<meta title="Button" component="{Button}" />
 
 <Story name="Primary">
-  <Button primary=true label="Button" />
+  <button primary="true" label="Button" />
 </Story>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/checkbox-story-csf.native-format.mdx b/docs/snippets/svelte/checkbox-story-csf.native-format.mdx
index d2b7c2c6b114..45c5c2398ab2 100644
--- a/docs/snippets/svelte/checkbox-story-csf.native-format.mdx
+++ b/docs/snippets/svelte/checkbox-story-csf.native-format.mdx
@@ -7,7 +7,7 @@
   import Checkbox from './Checkbox.svelte';
 </script>
 
-<Meta title="MDX/Checkbox" component={Checkbox}/>
+<meta title="MDX/Checkbox" component="{Checkbox}" />
 
 <Story name="allCheckboxes">
   <form>
@@ -16,4 +16,4 @@
     <Checkbox appearance="secondary" id="second" label="Secondary" {checked} />
   </form>
 </Story>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
index a64143e69353..4c3609f924ba 100644
--- a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
+++ b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx
@@ -49,4 +49,4 @@ export const ExampleStory = {
     propertyB: 'Another Item One',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx b/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
index f5f51fc97166..1f9725afe4a0 100644
--- a/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
+++ b/docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx
@@ -3,7 +3,7 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import YourComponent from './YourComponent.svelte';
 
   //👇 Some function to demonstrate the behavior
@@ -14,21 +14,11 @@
 
 <!--👇 Creates specific argTypes and automatically infers them when 'options' is defined -->
 
-<Meta
-  title="YourComponent"
-  component={YourComponent}
-  argTypes={{
-    propertyA: {
-      options: ['Item One', 'Item Two', 'Item Three'],
-      control: { type: 'select' }, 
-    },
-    propertyB: {
-      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
-    },
-  }}
-/>
+<Meta title="YourComponent" component={YourComponent} argTypes={{ propertyA: { options: ['Item One',
+'Item Two', 'Item Three'], control: { type: 'select' }, }, propertyB: { options: ['Another Item
+One', 'Another Item Two', 'Another Item Three'], }, }} />
 
-<Template let:args>
-  <YourComponent {...args} someProperty={someFunction(args.propertyA, args.propertyB)} />
-</Template>
-```
\ No newline at end of file
+<template let:args>
+  <YourComponent {...args} someProperty="{someFunction(args.propertyA," args.propertyB)} />
+</template>
+```
diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx
index 9b88fccbe207..a6c0c9df846c 100644
--- a/docs/snippets/svelte/component-story-figma-integration.js.mdx
+++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx
@@ -29,4 +29,4 @@ export const Example = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
index b45fd8d706f0..642c005950fe 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.js.mdx
@@ -26,4 +26,4 @@ export const WithAnImage = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
index 8471a11e62cf..998bf3d1547b 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx
@@ -7,14 +7,14 @@
   import MyComponent from './MyComponent.svelte';
 </script>
 
-<Meta
-  title="img"
-  component={MyComponent}
-/>
+<meta title="img" component="{MyComponent}" />
 
-<Template>
-  <MyComponent src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder" />
-</Template>
+<template>
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
+</template>
 
 <Story name="WithAnImage" />
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
index d909211f3a01..2b23757b277d 100644
--- a/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.js.mdx
@@ -30,4 +30,4 @@ export const WithAnImage = {
     props: image,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx
index c0fcb8b2ffed..f5cbbf125456 100644
--- a/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx
@@ -14,14 +14,11 @@
   };
 </script>
 
-<Meta
-  title="img"
-  component={MyComponent}
-/>
+<meta title="img" component="{MyComponent}" />
 
-<Template >
+<template>
   <MyComponent {image} />
-</Template>
+</template>
 
 <Story name="WithAnImage" />
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
index 35ed6dc6122b..53c2b6e36f5c 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.js.mdx
@@ -26,4 +26,4 @@ export const WithAnImage = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
index 8e8af2a9e7c6..926917375675 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx
@@ -7,14 +7,11 @@
   import MyComponent from './MyComponent.svelte';
 </script>
 
-<Meta
-  title="img"
-  component={MyComponent}
-/>
+<meta title="img" component="{MyComponent}" />
 
-<Template>
+<template>
   <MyComponent src="/image.png" alt="my image" />
-</Template>
+</template>
 
 <Story name="WithAnImage" />
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/component-story-with-accessibility.js.mdx b/docs/snippets/svelte/component-story-with-accessibility.js.mdx
index 2fe14a937108..8eee67c5040c 100644
--- a/docs/snippets/svelte/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/svelte/component-story-with-accessibility.js.mdx
@@ -38,4 +38,4 @@ export const Inaccessible = {
     backgroundColor: 'red',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/document-screen-fetch.js.mdx b/docs/snippets/svelte/document-screen-fetch.js.mdx
index f29ea5ebc88f..b50d0bc021bd 100644
--- a/docs/snippets/svelte/document-screen-fetch.js.mdx
+++ b/docs/snippets/svelte/document-screen-fetch.js.mdx
@@ -34,14 +34,13 @@
 </script>
 
 {#if status === "error"}
-  <p>There was an error fetching the data!</p>
-{/if} 
-{#if status === "loading"}
-  <p>Loading...</p>
+<p>There was an error fetching the data!</p>
+{/if} {#if status === "loading"}
+<p>Loading...</p>
 {:else}
-  <PageLayout {user}>
-    <DocumentHeader {document} />
-    <DocumentList documents="{subdocuments}" />
-  </PageLayout>
+<PageLayout {user}>
+  <DocumentHeader {document} />
+  <DocumentList documents="{subdocuments}" />
+</PageLayout>
 {/if}
 ```
diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx
index 051c2c64f593..f62071685394 100644
--- a/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx
+++ b/docs/snippets/svelte/document-screen-with-grapqhl.js.mdx
@@ -33,14 +33,14 @@
   const infoResult = query(AllInfoQuery);
 </script>
 
-{#if $infoResult.loading} 
-  <p>Loading...</p>
-{:else if $infoResult.error} 
-  <p>There was an error fetching the data!</p> 
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
 {:else}
-  <PageLayout {$infoResult.data.user}>
-    <DocumentHeader {$infoResult.data.document} />
-    <DocumentList {$infoResult.data.subdocuments} />
-  </PageLayout>
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
 {/if}
 ```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index 4de0633ff067..af887ed841c9 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -97,4 +97,4 @@ export const MockedError = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
index 3247b130184e..a2c0ead93ed4 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
@@ -88,4 +88,4 @@ export const MockedError = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/histogram-story.js.mdx b/docs/snippets/svelte/histogram-story.js.mdx
index 4af932d52dbc..3d6834aacbdd 100644
--- a/docs/snippets/svelte/histogram-story.js.mdx
+++ b/docs/snippets/svelte/histogram-story.js.mdx
@@ -29,4 +29,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/list-story-expanded.native-format.mdx b/docs/snippets/svelte/list-story-expanded.native-format.mdx
index 852f2f333396..41a55d3f38df 100644
--- a/docs/snippets/svelte/list-story-expanded.native-format.mdx
+++ b/docs/snippets/svelte/list-story-expanded.native-format.mdx
@@ -4,34 +4,34 @@
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
-  import List from "./List.svelte";
-  
+  import List from './List.svelte';
+
   import ListItem from './ListItem.svelte';
 </script>
 
-<Meta title="List" component={List} />
+<meta title="List" component="{List}" />
 
-<Template let:args id="Empty">
+<template let:args id="Empty">
   <List {...args} />
-</Template>
+</template>
 
-<Template let:args id="OneItem">
+<template let:args id="OneItem">
   <List {...args}>
     <ListItem />
   </List>
-</Template>
+</template>
 
-<Template let:args id="ManyItems">
+<template let:args id="ManyItems">
   <List {...args}>
     <ListItem />
     <ListItem />
     <ListItem />
   </List>
-</Template>
+</template>
 
 <Story name="Empty" template="Empty" />
 
 <Story name="OneItem" template="OneItem" />
 
 <Story name="MultipleItems" template="ManyItems" />
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/list-story-starter.native-format.mdx b/docs/snippets/svelte/list-story-starter.native-format.mdx
index 047a47c38e4f..4cba137add0b 100644
--- a/docs/snippets/svelte/list-story-starter.native-format.mdx
+++ b/docs/snippets/svelte/list-story-starter.native-format.mdx
@@ -3,17 +3,17 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import List from './List.svelte';
 </script>
 
-<Meta title="List" component={List} />
+<meta title="List" component="{List}" />
 
-<Template let:args>
+<template let:args>
   <List {...args} />
-</Template>
+</template>
 
 <Story name="Empty">
   <List {...args} />
 </Story>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx
index 24945db86ab3..a6ee5f293fca 100644
--- a/docs/snippets/svelte/loader-story.js.mdx
+++ b/docs/snippets/svelte/loader-story.js.mdx
@@ -33,4 +33,4 @@ export const Primary = {
     }),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index 010a758118ae..8fd08bf99921 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // LoginForm.stories.js
 
-import { within, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import { expect } from '@storybook/jest';
 
@@ -28,13 +28,16 @@ export const EmptyForm = {
   }),
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
   render: (args) => ({
     Component: LoginForm,
     props: args,
   }),
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
@@ -53,4 +56,4 @@ export const FilledForm = {
     ).toBeInTheDocument();
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
index 91175c94b285..574edb6725a9 100644
--- a/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-alt-queries.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,18 +15,19 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleWithRole = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-composition.js.mdx b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
index 1b28803f27c4..32e9abec9488 100644
--- a/docs/snippets/svelte/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-composition.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,18 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const FirstStory = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
@@ -35,8 +35,10 @@ export const SecondStory = {
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
@@ -45,11 +47,13 @@ export const CombinedStories = {
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-query-findby.js.mdx b/docs/snippets/svelte/my-component-play-function-query-findby.js.mdx
index ddcd1e605b52..7918af1ceb48 100644
--- a/docs/snippets/svelte/my-component-play-function-query-findby.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-query-findby.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,20 +15,21 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const AsyncExample = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
index b68676b2696a..7b320c376e14 100644
--- a/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-waitfor.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,17 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleAsyncStory = {
   render: (args) => ({
     component: MyComponent,
     props: args,
   }),
-  play: async () => {
-    const exampleElement = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -35,12 +36,12 @@ export const ExampleAsyncStory = {
     });
 
     // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
index c10eba0e2760..955371eef945 100644
--- a/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-canvas.js.mdx
@@ -28,4 +28,4 @@ export const ExampleStory = {
     await userEvent.click(canvas.getByRole('another-element'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
index ef7da34712c9..6610c8d6b0d0 100644
--- a/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-clickevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,19 +15,19 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const ClickExample = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
@@ -36,9 +36,11 @@ export const FireEventExample = {
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
index 32648be43be6..8d9dfa51a3d7 100644
--- a/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-delay.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -15,24 +15,25 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const DelayedStory = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the amount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
diff --git a/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
index b5461b9e438f..f3e5011d0b73 100644
--- a/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/svelte/my-component-play-function-with-selectevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { userEvent, screen } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.svelte';
 
@@ -20,17 +20,18 @@ function sleep(ms) {
 }
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleChangeEvent = {
   render: (args) => ({
     Component: MyComponent,
     props: args,
   }),
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
@@ -41,4 +42,4 @@ export const ExampleChangeEvent = {
     await userEvent.selectOptions(select, ['Yet another item']);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
index 97ad38ff5e70..d26f6efc2c9e 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
@@ -26,4 +26,4 @@ export const WithProp = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx
index fd894dd395f1..e48b11e3ce9d 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx
@@ -7,10 +7,10 @@
 </script>
 
 <Story name="Basic">
-    <MyComponent />
+  <MyComponent />
 </Story>
 
 <Story name="WithProp">
-  <MyComponent prop="value"/>
+  <MyComponent prop="value" />
 </Story>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
index 0d53c78ddab8..ad5ce28e2eeb 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
@@ -38,4 +38,4 @@ export const MyStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx
index b64168452975..0ae7d188020b 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx
@@ -6,33 +6,16 @@
 
   import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
-  import MyComponent from "./MyComponent.svelte";
+  import MyComponent from './MyComponent.svelte';
 </script>
 
-<Meta
-  title="MyComponent"
-  component={MyComponent}
-  parameters={{
-    //👇 The viewports object from the Essentials addon
-    viewport: {
-      //👇 The viewports you want to use
-      viewports: INITIAL_VIEWPORTS,
-      //👇 Your own default viewport
-      defaultViewport: 'iphone6',
-    },
-  }}
-/>
+<Meta title="MyComponent" component={MyComponent} parameters={{ //👇 The viewports object from the
+Essentials addon viewport: { //👇 The viewports you want to use viewports: INITIAL_VIEWPORTS, //👇
+Your own default viewport defaultViewport: 'iphone6', }, }} />
 
-<Template let:args>
+<template let:args>
   <MyComponent {...args} />
-</Template>
+</template>
 
-<Story
-  name="MyStory"
-  parameters={{
-    viewport: {
-      defaultViewport: 'iphonex',
-    },
-  }}
-/>
-```
\ No newline at end of file
+<Story name="MyStory" parameters={{ viewport: { defaultViewport: 'iphonex', }, }} />
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
index d409f02c339f..8ee73b34422d 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -10,4 +10,4 @@ export const StoryWithLocale = ({ globals: { locale } }) => {
     },
   };
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
index 6a3b2c5f9beb..78c5014aa56b 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -43,4 +43,4 @@ export const StoryWithLocale = {
     };
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
index 6e1b1d7ac763..3fb8d79b11d5 100644
--- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
@@ -43,4 +43,4 @@ export const ComplexStory = {
     data: complexData,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-with-env-variables.js.mdx b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
index 2d64ce457d36..c3de7d813274 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.js.mdx
@@ -26,4 +26,4 @@ export const ExampleStory = {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx b/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
index 7ded57ef2db3..5b959a02563a 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.native-format.mdx
@@ -7,19 +7,11 @@
   import MyComponent from './MyComponent.svelte';
 </script>
 
-<Meta
-  title="MyComponent"
-  component={MyComponent}
-/>
+<meta title="MyComponent" component="{MyComponent}" />
 
-<Template let:args>
+<template let:args>
   <MyComponent {...args} />
-</Template>
+</template>
 
-<Story
-  name="ExampleStory"
-  args={{
-    propertyA: process.env.STORYBOOK_DATA_KEY,
-  }}
-/>
-```
\ No newline at end of file
+<Story name="ExampleStory" args={{ propertyA: process.env.STORYBOOK_DATA_KEY, }} />
+```
diff --git a/docs/snippets/svelte/page-story-slots.native-format.mdx b/docs/snippets/svelte/page-story-slots.native-format.mdx
index c47c3170832c..d3680ece9812 100644
--- a/docs/snippets/svelte/page-story-slots.native-format.mdx
+++ b/docs/snippets/svelte/page-story-slots.native-format.mdx
@@ -3,22 +3,17 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Page from './Page.svelte';
 </script>
 
-<Meta title="Page" component={Page} />
+<meta title="Page" component="{Page}" />
 
-<Template let:args>
+<template let:args>
   <Page {...args}>
     <footer>{args.footer}</footer>
   </Page>
-</Template>
+</template>
 
-<Story
-  name="CustomFooter"
-  args={{
-    footer: 'Built with Storybook',
-  }}
-/>
-```
\ No newline at end of file
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook', }} />
+```
diff --git a/docs/snippets/svelte/page-story-with-args-composition.js.mdx b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
index 7fd600d4c084..470bce930cc6 100644
--- a/docs/snippets/svelte/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
@@ -33,4 +33,4 @@ export const SimplePage = {
     subdocuments: DocumentListStories.Simple.args.documents,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx
index 8f75ccbdd52a..746bd89197d1 100644
--- a/docs/snippets/svelte/page-story.js.mdx
+++ b/docs/snippets/svelte/page-story.js.mdx
@@ -29,4 +29,4 @@ export const LoggedIn = {
     ...HeaderStories.LoggedIn.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/register-component-with-play-function.js.mdx b/docs/snippets/svelte/register-component-with-play-function.js.mdx
index f30390cf6252..ed34f9617b22 100644
--- a/docs/snippets/svelte/register-component-with-play-function.js.mdx
+++ b/docs/snippets/svelte/register-component-with-play-function.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // RegistrationForm.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.svelte';
 
@@ -15,18 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/svelte/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const FilledForm = {
   render: (args) => ({
     Component: RegistrationForm,
     props: args,
   }),
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -34,7 +34,7 @@ export const FilledForm = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -42,9 +42,9 @@ export const FilledForm = {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/simple-page-implementation.js.mdx b/docs/snippets/svelte/simple-page-implementation.js.mdx
index 0132a1f6dd91..f8d2fa7ec8ba 100644
--- a/docs/snippets/svelte/simple-page-implementation.js.mdx
+++ b/docs/snippets/svelte/simple-page-implementation.js.mdx
@@ -14,7 +14,7 @@
 <div>
   <PageLayout {user}>
     <DocumentHeader {document} />
-    <DocumentList documents={subdocuments} />
+    <DocumentList documents="{subdocuments}" />
   </PageLayout>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
index 4d39da409e61..2f8446c92ce7 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
@@ -30,4 +30,4 @@ export const NonA11yStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
index c961cdc9007d..0fee21472cab 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -44,4 +44,4 @@ export const ExampleStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
index d30b777cb04f..18618a9ce944 100644
--- a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
@@ -4,4 +4,4 @@
 import MarginDecorator from './MarginDecorator.svelte';
 
 export const decorators = [() => MarginDecorator];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
index c4a8ef2c9ec6..1cd864313742 100644
--- a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
+++ b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx
@@ -3,43 +3,27 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import Table from './Table.svelte';
 </script>
 
-<Meta
-  title="Custom Table"
-  component={Table}
-  argTypes={{
-    size: {
-      options: ['small', 'medium', 'large'],
-    },
-  }}
-/>
+<Meta title="Custom Table" component={Table} argTypes={{ size: { options: ['small', 'medium',
+'large'], }, }} />
 
-<Template let:args>
-  <Table {...args}>
+<template let:args>
+  <table {...args}>
     <tbody>
       {#each args.data as row}
-        <tr>
-          {#each row as col}
-            <td>{col}</td>
-          {/each}
-        </tr>
+      <tr>
+        {#each row as col}
+        <td>{col}</td>
+        {/each}
+      </tr>
       {/each}
     </tbody>
-  </Table>
-</Template>
+  </table>
+</template>
 
 <!-- 👇 The data arg is for the story component and the remaining args get passed to the Table component -->
-<Story
-  name="Numeric"
-  args={{
-    data: [
-      [1, 2, 3],
-      [4, 5, 6],
-    ],
-    size: 'large',
-  }}
-/>
+<Story name="Numeric" args={{ data: [ [1, 2, 3], [4, 5, 6], ], size: 'large', }} />
 ```
diff --git a/docs/snippets/svelte/your-component-with-decorator.js.mdx b/docs/snippets/svelte/your-component-with-decorator.js.mdx
index 874a7d75da3c..53878c57dcd2 100644
--- a/docs/snippets/svelte/your-component-with-decorator.js.mdx
+++ b/docs/snippets/svelte/your-component-with-decorator.js.mdx
@@ -7,29 +7,28 @@ import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
-  decorators:  [() => MarginDecorator]
+  decorators: [() => MarginDecorator],
 };
 
-// Your templates and stories here. 
+// Your templates and stories here.
 // Don't forget to use the component you're testing and not the MarginDecorator component
-
 ```
 
 ```html
 <!-- MarginDecorator.svelte -->
 
 <div>
-  <slot/>
+  <slot />
 </div>
 
 <style>
-  div { 
+  div {
     margin: 3em;
   }
 </style>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/your-component-with-decorator.native-format.mdx b/docs/snippets/svelte/your-component-with-decorator.native-format.mdx
index df3e24915181..849e2c5b5586 100644
--- a/docs/snippets/svelte/your-component-with-decorator.native-format.mdx
+++ b/docs/snippets/svelte/your-component-with-decorator.native-format.mdx
@@ -3,20 +3,17 @@
 
 <script>
   import { Meta, Template } from '@storybook/addon-svelte-csf';
-  
+
   import MarginDecorator from './MarginDecorator.svelte';
 
   import YourComponent from './YourComponent.svelte';
 </script>
 
-<Meta
-  title="YourComponent"
-  component={YourComponent}
-/>
+<meta title="YourComponent" component="{YourComponent}" />
 
-<Template let:args>
+<template let:args>
   <MarginDecorator>
     <!--👇 Your component here -->
   </MarginDecorator>
-</Template>
-```
\ No newline at end of file
+</template>
+```
diff --git a/docs/snippets/svelte/your-component.js.mdx b/docs/snippets/svelte/your-component.js.mdx
index f2e0697e997f..a51cc3af8c7e 100644
--- a/docs/snippets/svelte/your-component.js.mdx
+++ b/docs/snippets/svelte/your-component.js.mdx
@@ -27,4 +27,4 @@ export const FirstStory = {
     //👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/svelte/your-component.native-format.mdx b/docs/snippets/svelte/your-component.native-format.mdx
index f24b4c5a0a76..6c93875e5397 100644
--- a/docs/snippets/svelte/your-component.native-format.mdx
+++ b/docs/snippets/svelte/your-component.native-format.mdx
@@ -3,27 +3,17 @@
 
 <script>
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  
+
   import YourComponent from './YourComponent.svelte';
 </script>
 
 <!--👇 The title determines where your story goes in the story list -->
-<Meta
-  title="YourComponent"
-  component={YourComponent}
-  argTypes={{
-    /* Customize your args here depending on your component */
-  }}
-/>
+<Meta title="YourComponent" component={YourComponent} argTypes={{ /* Customize your args here
+depending on your component */ }} />
 
-<Template let:args>
-  <Button {...args} />
-</Template>
+<template let:args>
+  <button {...args} />
+</template>
 
-<Story
-  name="FirstStory"
-  args={{
-    /* The args you need here will depend on your component */
-  }}
-/>
+<Story name="FirstStory" args={{ /* The args you need here will depend on your component */ }} />
 ```
diff --git a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
index eec81eaa5f4e..50ad3324eb03 100644
--- a/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
+++ b/docs/snippets/vue/apollo-wrapper-component.with-mock-implementation-3.js.mdx
@@ -38,4 +38,4 @@
     },
   });
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/app-story-with-mock.js.mdx b/docs/snippets/vue/app-story-with-mock.js.mdx
index 6890cf9d7964..eadc06eecbd5 100644
--- a/docs/snippets/vue/app-story-with-mock.js.mdx
+++ b/docs/snippets/vue/app-story-with-mock.js.mdx
@@ -40,4 +40,4 @@ export const Success = {
     template: '<App />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-component-with-proptypes.2.mdx b/docs/snippets/vue/button-component-with-proptypes.2.mdx
index 05054200898d..e5ebaf46944c 100644
--- a/docs/snippets/vue/button-component-with-proptypes.2.mdx
+++ b/docs/snippets/vue/button-component-with-proptypes.2.mdx
@@ -28,4 +28,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-component-with-proptypes.3.mdx b/docs/snippets/vue/button-component-with-proptypes.3.mdx
index c7df10109c0d..baa08eeca077 100644
--- a/docs/snippets/vue/button-component-with-proptypes.3.mdx
+++ b/docs/snippets/vue/button-component-with-proptypes.3.mdx
@@ -40,4 +40,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-group-story.2.js.mdx b/docs/snippets/vue/button-group-story.2.js.mdx
index 62e2e4934165..4e22b9e9cdbc 100644
--- a/docs/snippets/vue/button-group-story.2.js.mdx
+++ b/docs/snippets/vue/button-group-story.2.js.mdx
@@ -31,4 +31,4 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-group-story.3.js.mdx b/docs/snippets/vue/button-group-story.3.js.mdx
index f4f074c61a16..b7c3c938d7bf 100644
--- a/docs/snippets/vue/button-group-story.3.js.mdx
+++ b/docs/snippets/vue/button-group-story.3.js.mdx
@@ -33,4 +33,4 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-group-story.ts-2.ts.mdx b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
index 3c32a0adc81b..d0f17034062c 100644
--- a/docs/snippets/vue/button-group-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-2.ts.mdx
@@ -8,16 +8,18 @@ import type { Meta, StoryFn } from '@storybook/vue';
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
-export default {
+const meta: Meta<typeof ButtonGroup> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
   component: ButtonGroup,
-} as Meta<typeof Button>;
+};
+
+export default meta;
 
-const Template: StoryFn<typeof Button> = (args, { argTypes }) => ({
+const Template: StoryFn<typeof ButtonGroup> = (args, { argTypes }) => ({
   components: { ButtonGroup },
   props: Object.keys(argTypes),
   template: '<ButtonGroup v-bind="$props" />',
@@ -28,4 +30,4 @@ Pair.args = {
   buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
   orientation: 'horizontal',
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-group-story.ts-3.ts.mdx b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
index c6bb2b46420e..397fe94b042f 100644
--- a/docs/snippets/vue/button-group-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-group-story.ts-3.ts.mdx
@@ -3,19 +3,22 @@
 
 import ButtonGroup from './ButtonGroup.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
 
-export default {
+const meta: Meta<typeof ButtonGroup> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ButtonGroup',
   component: ButtonGroup,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
 
 export const Pair: Story = {
   render: (args) => ({
@@ -30,4 +33,4 @@ export const Pair: Story = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-implementation.2.mdx b/docs/snippets/vue/button-implementation.2.mdx
index 3331ed5427bb..95cf054cb2b6 100644
--- a/docs/snippets/vue/button-implementation.2.mdx
+++ b/docs/snippets/vue/button-implementation.2.mdx
@@ -50,4 +50,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-implementation.3.mdx b/docs/snippets/vue/button-implementation.3.mdx
index 81073c55e672..fbba7beafc09 100644
--- a/docs/snippets/vue/button-implementation.3.mdx
+++ b/docs/snippets/vue/button-implementation.3.mdx
@@ -54,4 +54,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
index ee3c22d82d28..70aa2a4c499e 100644
--- a/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.2.js.mdx
@@ -25,4 +25,4 @@ export const Text = {
     onClick: action('clicked'),
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
index fcb25d64724f..320a2972c42a 100644
--- a/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-args.3.js.mdx
@@ -29,4 +29,4 @@ export const Text = {
     label: 'Hello',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
index 9f1c4bd3bc40..eb64c5028765 100644
--- a/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler-simplificated.js.mdx
@@ -28,4 +28,4 @@ export const Text = {
     template: '<Button v-bind="args" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-click-handler.2.js.mdx b/docs/snippets/vue/button-story-click-handler.2.js.mdx
index cdd298f8ac38..3d8e0ce067fd 100644
--- a/docs/snippets/vue/button-story-click-handler.2.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.2.js.mdx
@@ -23,4 +23,4 @@ export const Text = {
     },
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-click-handler.3.js.mdx b/docs/snippets/vue/button-story-click-handler.3.js.mdx
index 5d0c507c271c..f5390e0739ab 100644
--- a/docs/snippets/vue/button-story-click-handler.3.js.mdx
+++ b/docs/snippets/vue/button-story-click-handler.3.js.mdx
@@ -25,4 +25,4 @@ export const Text = {
     template: '<Button label="Hello" @click="onClick" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-component-args-primary.js.mdx b/docs/snippets/vue/button-story-component-args-primary.js.mdx
index 8612d8a608a5..18d48834f754 100644
--- a/docs/snippets/vue/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/vue/button-story-component-args-primary.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific argTypes
@@ -19,4 +19,4 @@ export default {
     primary: true,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-component-decorator.js.mdx b/docs/snippets/vue/button-story-component-decorator.js.mdx
index 497c9e6c298d..a4235a834e4e 100644
--- a/docs/snippets/vue/button-story-component-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.js.mdx
@@ -5,11 +5,11 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
index 75a646696fa5..9e4e5353fa52 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-2.ts.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -13,5 +13,7 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
index 95ae0184fdb3..9cd531d99f44 100644
--- a/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-component-decorator.ts-3.ts.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -13,5 +13,7 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-decorator.js.mdx b/docs/snippets/vue/button-story-decorator.js.mdx
index 0f2c85b0d1b9..ec67209ee8c7 100644
--- a/docs/snippets/vue/button-story-decorator.js.mdx
+++ b/docs/snippets/vue/button-story-decorator.js.mdx
@@ -24,4 +24,4 @@ export const Primary = {
   }),
   decorators: [() => ({ template: '<div style="margin: 3em;"><story /></div>' })],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-default-export-with-component.js.mdx b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
index 4f5b035e16d1..5967f5752c9a 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.js.mdx
@@ -5,10 +5,10 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
index 02326201d4aa..80fa6f345ff7 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-2.ts.mdx
@@ -5,12 +5,14 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
index d034f021fcb8..f154433324ce 100644
--- a/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-default-export-with-component.ts-3.ts.mdx
@@ -5,12 +5,14 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-rename-story.js.mdx b/docs/snippets/vue/button-story-rename-story.js.mdx
index 2cbbe957335d..cde3db433fc4 100644
--- a/docs/snippets/vue/button-story-rename-story.js.mdx
+++ b/docs/snippets/vue/button-story-rename-story.js.mdx
@@ -24,4 +24,4 @@ export const Primary = {
     template: '<Button primary label="Button" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-rename-story.ts.mdx b/docs/snippets/vue/button-story-rename-story.ts.mdx
index 196941dad0c2..5a894d5e3897 100644
--- a/docs/snippets/vue/button-story-rename-story.ts.mdx
+++ b/docs/snippets/vue/button-story-rename-story.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -20,10 +23,10 @@ export default {
  * to learn how to use render functions.
  */
 export const Primary: Story = {
-  name:'I am the primary',
+  name: 'I am the primary',
   render: () => ({
     components: { Button },
     template: '<Button primary label="Button" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-using-args.2.js.mdx b/docs/snippets/vue/button-story-using-args.2.js.mdx
index 4883a73fbbcd..498fb2b36111 100644
--- a/docs/snippets/vue/button-story-using-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.2.js.mdx
@@ -52,4 +52,4 @@ export const Tertiary = {
     template: '<Button v-bind="$props" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-using-args.3.js.mdx b/docs/snippets/vue/button-story-using-args.3.js.mdx
index 0a99803e1d16..b2c1a4ec9561 100644
--- a/docs/snippets/vue/button-story-using-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-using-args.3.js.mdx
@@ -58,4 +58,4 @@ export const Tertiary = {
     template: '<Button v-bind="args" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
index 95ddfe52c24d..f6c933467abc 100644
--- a/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-2.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -54,4 +57,4 @@ export const Tertiary: Story = {
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
index 0605e938037b..fa401df1eb9e 100644
--- a/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-using-args.ts-3.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/button-story-with-addon-example.js.mdx b/docs/snippets/vue/button-story-with-addon-example.js.mdx
index 2416e1432620..e227c77e1e03 100644
--- a/docs/snippets/vue/button-story-with-addon-example.js.mdx
+++ b/docs/snippets/vue/button-story-with-addon-example.js.mdx
@@ -23,4 +23,4 @@ export const Basic = {
     template: '<Button label="Hello" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-with-args.2.js.mdx b/docs/snippets/vue/button-story-with-args.2.js.mdx
index 17611ee114ec..1a0cc97a44a5 100644
--- a/docs/snippets/vue/button-story-with-args.2.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.2.js.mdx
@@ -28,4 +28,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-with-args.3.js.mdx b/docs/snippets/vue/button-story-with-args.3.js.mdx
index 20f44a3250a3..c18a834484e5 100644
--- a/docs/snippets/vue/button-story-with-args.3.js.mdx
+++ b/docs/snippets/vue/button-story-with-args.3.js.mdx
@@ -30,4 +30,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-with-blue-args.js.mdx b/docs/snippets/vue/button-story-with-blue-args.js.mdx
index 2c546313794b..1369d50b1268 100644
--- a/docs/snippets/vue/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
@@ -21,4 +21,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
index 25a0b18c0b4c..83d2036f30da 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-2.ts.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,5 +22,7 @@ export default {
       ],
     },
   },
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
index 42c5b8729df9..96084e54082f 100644
--- a/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-blue-args.ts-3.ts.mdx
@@ -5,7 +5,7 @@ import Button from './Button.vue';
 
 import type { Meta } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -22,5 +22,7 @@ export default {
       ],
     },
   },
-} as Meta<typeof Button>;
-```
\ No newline at end of file
+};
+
+export default meta;
+```
diff --git a/docs/snippets/vue/button-story-with-emojis.js.mdx b/docs/snippets/vue/button-story-with-emojis.js.mdx
index a1298fb5308e..cf232bfa7d8f 100644
--- a/docs/snippets/vue/button-story-with-emojis.js.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.js.mdx
@@ -36,4 +36,4 @@ export const Tertiary = {
     components: { Button },
     template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
   }),
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
index 8bf6de905009..cd2644ada8a8 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-2.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
index 09b47b82b287..5e8c393e6ac4 100644
--- a/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story-with-emojis.ts-3.ts.mdx
@@ -3,17 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
 
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -40,4 +42,4 @@ export const Tertiary: Story = {
     template: '<Button background="#ff0" label="📚📕📈🤓" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story.js.mdx b/docs/snippets/vue/button-story.js.mdx
index 1034da9bcf0d..cfb2170c2b38 100644
--- a/docs/snippets/vue/button-story.js.mdx
+++ b/docs/snippets/vue/button-story.js.mdx
@@ -23,4 +23,4 @@ export const Primary = {
     template: '<Button primary label="Button" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/button-story.ts-2.ts.mdx b/docs/snippets/vue/button-story.ts-2.ts.mdx
index b4638b101f8b..7321dce79d02 100644
--- a/docs/snippets/vue/button-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-2.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/button-story.ts-3.ts.mdx b/docs/snippets/vue/button-story.ts-3.ts.mdx
index 8fbbc0a2e241..05baf3e276d6 100644
--- a/docs/snippets/vue/button-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/button-story.ts-3.ts.mdx
@@ -3,16 +3,19 @@
 
 import Button from './Button.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
   component: Button,
-} as Meta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/checkbox-story-csf.js.mdx b/docs/snippets/vue/checkbox-story-csf.js.mdx
index 6d8bedac7379..0e4f07d0d5f0 100644
--- a/docs/snippets/vue/checkbox-story-csf.js.mdx
+++ b/docs/snippets/vue/checkbox-story-csf.js.mdx
@@ -28,4 +28,4 @@ export const allCheckboxes = () => {
       </form>`,
   });
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
index 69d5024a98f1..c450fa1f3117 100644
--- a/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
+++ b/docs/snippets/vue/component-story-custom-args-complex.3.js.mdx
@@ -50,4 +50,4 @@ export const ExampleStory = {
     propertyB: 'Another Item One',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-figma-integration.js.mdx b/docs/snippets/vue/component-story-figma-integration.js.mdx
index 113030fabe16..7297e147acac 100644
--- a/docs/snippets/vue/component-story-figma-integration.js.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.js.mdx
@@ -29,4 +29,4 @@ export const Example = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-figma-integration.ts.mdx b/docs/snippets/vue/component-story-figma-integration.ts.mdx
index b308b60e3c04..9a48149f9c06 100644
--- a/docs/snippets/vue/component-story-figma-integration.ts.mdx
+++ b/docs/snippets/vue/component-story-figma-integration.ts.mdx
@@ -1,24 +1,21 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue'; // For Vue 3 use import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { withDesign } from 'storybook-addon-designs';
 
 import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#default-export
-export default {
+const meta: Meta<typeof MyComponent> = {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
-} as Meta<typeof MyComponent>;
+};
 
-// More on component templates: https://storybook.js.org/docs/7.0/vue/writing-stories/introduction#using-args
-const Template: StoryFn<typeof MyComponent> = () => ({
-  components: { MyComponent },
-  template: '<MyComponent />',
-});
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -37,4 +34,4 @@ export const Example: Story = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
index b2aa4a3a8663..292ead4620a2 100644
--- a/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-cdn.js.mdx
@@ -16,7 +16,8 @@ export default {
  */
 export const WithAnImage = {
   render: () => ({
-    template: '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>',
+    template:
+      '<img src="https://storybook.js.org/images/placeholders/350x150.png" alt="My CDN placeholder"/>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
index 25433007805c..a3f465dca9b7 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.2.js.mdx
@@ -34,4 +34,4 @@ export const WithAnImage = {
     template: `<img :src="src" :alt="alt"/>`,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
index 7c429a2e1743..9ca8d5c9162a 100644
--- a/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-with-import.3.js.mdx
@@ -30,4 +30,4 @@ export const WithAnImage = {
     template: `<img v-bind="image"/>`,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
index 4ef7585553a8..7d4657f108ac 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.js.mdx
@@ -15,4 +15,4 @@ export const WithAnImage = {
     template: '<img src="image.png" alt="my image" />',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
index 0e0876e15954..b592128b85f6 100644
--- a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
@@ -40,4 +40,4 @@ export const Inaccessible = {
     backgroundColor: 'red',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
index f006abce95b7..579275aa78ac 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
@@ -52,4 +52,4 @@ export const Inaccessible = {
     backgroundColor: 'red',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
index b2226c9ebf7a..96a1fb30af0b 100644
--- a/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
+++ b/docs/snippets/vue/component-story-with-custom-render-function.js.mdx
@@ -30,4 +30,4 @@ export const Example = {
     `,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
index 5e7e56c8a5b7..c1800cb73730 100644
--- a/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
+++ b/docs/snippets/vue/component-story-with-custom-render-function.ts.mdx
@@ -1,13 +1,13 @@
 ```ts
 // MyComponent.stories.js
 
-import type { Meta, Story } from '@storybook/vue'; // Replace with '@storybook/vue3' if you're working with Vue3 project
+import type { Meta, StoryObj } from '@storybook/vue'; // Replace with '@storybook/vue3' if you're working with Vue3 project
 
 import Layout from './Layout.vue';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
@@ -16,6 +16,9 @@ export default {
   component: MyComponent,
 };
 
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
 // This story uses a render function to fully control how the component renders.
 export const Example: Story = {
   render: () => ({
@@ -32,4 +35,4 @@ export const Example: Story = {
     `,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/component-test-with-testing-library.js.mdx b/docs/snippets/vue/component-test-with-testing-library.js.mdx
index de5065bd7510..58b8c744a2e3 100644
--- a/docs/snippets/vue/component-test-with-testing-library.js.mdx
+++ b/docs/snippets/vue/component-test-with-testing-library.js.mdx
@@ -19,4 +19,4 @@ test('Checks if the form is valid', () => {
   const isFormValid = getByTestId('invalid-form');
   expect(isFormValid).toBeInTheDocument();
 });
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/document-screen-fetch.3.js.mdx b/docs/snippets/vue/document-screen-fetch.3.js.mdx
index b9fda12d0798..95a5aea46a94 100644
--- a/docs/snippets/vue/document-screen-fetch.3.js.mdx
+++ b/docs/snippets/vue/document-screen-fetch.3.js.mdx
@@ -8,12 +8,8 @@
       <DocumentList :documents="data.subdocuments" />
     </PageLayout>
   </div>
-  <p v-if="loading">
-    Loading...
-  </p>
-  <p v-if="error">
-    There was an error fetching the data!
-  </p>
+  <p v-if="loading">Loading...</p>
+  <p v-if="error">There was an error fetching the data!</p>
 </template>
 <script>
   import { ref } from 'vue';
@@ -51,4 +47,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/document-screen-with-graphql.3.js.mdx b/docs/snippets/vue/document-screen-with-graphql.3.js.mdx
index 98573444cb49..2c9f1609e12d 100644
--- a/docs/snippets/vue/document-screen-with-graphql.3.js.mdx
+++ b/docs/snippets/vue/document-screen-with-graphql.3.js.mdx
@@ -55,4 +55,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
index f09309eee49f..7fd655fcd932 100644
--- a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -95,4 +95,4 @@ export const MockedError = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.2.js.mdx b/docs/snippets/vue/histogram-story.2.js.mdx
index f5f2883cdea0..617bc09acd66 100644
--- a/docs/snippets/vue/histogram-story.2.js.mdx
+++ b/docs/snippets/vue/histogram-story.2.js.mdx
@@ -30,4 +30,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.3.js.mdx b/docs/snippets/vue/histogram-story.3.js.mdx
index e72be14de968..084c8502b148 100644
--- a/docs/snippets/vue/histogram-story.3.js.mdx
+++ b/docs/snippets/vue/histogram-story.3.js.mdx
@@ -32,4 +32,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.mdx-2.mdx b/docs/snippets/vue/histogram-story.mdx-2.mdx
index 11cc1c121369..d34881c24237 100644
--- a/docs/snippets/vue/histogram-story.mdx-2.mdx
+++ b/docs/snippets/vue/histogram-story.mdx-2.mdx
@@ -28,4 +28,4 @@ import Histogram from './Histogram.vue';
       template: `<Histogram v-bind="$props" v-on="$props" />`,
     })} />
 </Canvas>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.mdx-3.mdx b/docs/snippets/vue/histogram-story.mdx-3.mdx
index 02a8fc196731..6cd96f3bcede 100644
--- a/docs/snippets/vue/histogram-story.mdx-3.mdx
+++ b/docs/snippets/vue/histogram-story.mdx-3.mdx
@@ -30,4 +30,4 @@ import Histogram from './Histogram.vue';
       template: '<Histogram v-bind="args" />',
     })} />
 </Canvas>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.ts-2.ts.mdx b/docs/snippets/vue/histogram-story.ts-2.ts.mdx
index df98cd292ec3..b039d3a42b90 100644
--- a/docs/snippets/vue/histogram-story.ts-2.ts.mdx
+++ b/docs/snippets/vue/histogram-story.ts-2.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Histogram.stories.ts
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
 import Histogram from './Histogram.vue';
 
-export default {
+const meta: Meta<typeof Histogram> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
   component: Histogram,
-} as Meta<typeof Histogram>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Histogram>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -21,7 +24,7 @@ export default {
  */
 export const Default: Story = {
   render: (args, { argTypes }) => ({
-    components: { Button },
+    components: { Histogram },
     props: Object.keys(argTypes),
     template: '<Histogram v-bind="$props" v-on="$props" />',
   }),
@@ -32,4 +35,4 @@ export const Default: Story = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/histogram-story.ts-3.ts.mdx b/docs/snippets/vue/histogram-story.ts-3.ts.mdx
index d4a50a7d928a..9eace1302a0c 100644
--- a/docs/snippets/vue/histogram-story.ts-3.ts.mdx
+++ b/docs/snippets/vue/histogram-story.ts-3.ts.mdx
@@ -1,18 +1,21 @@
 ```ts
 // Histogram.stories.ts
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Histogram from './Histogram.vue';
 
-export default {
+const meta: Meta<typeof Histogram> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Histogram',
   component: Histogram,
-} as Meta<typeof Histogram>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Histogram>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -34,4 +37,4 @@ export const Default: Story = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-expanded.2.js.mdx b/docs/snippets/vue/list-story-expanded.2.js.mdx
index 0283f679873c..e5dfab23cee6 100644
--- a/docs/snippets/vue/list-story-expanded.2.js.mdx
+++ b/docs/snippets/vue/list-story-expanded.2.js.mdx
@@ -49,4 +49,4 @@ export const ManyItems = {
       </List>`,
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
index 3f726a3cc090..beaca9d63817 100644
--- a/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-2.ts.mdx
@@ -4,16 +4,19 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
index fe76cffddbb5..de3285c1cf85 100644
--- a/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-expanded.ts-3.ts.mdx
@@ -4,16 +4,19 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/list-story-reuse-data.2.js.mdx b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
index c85a025b01d1..d2d194ea29cd 100644
--- a/docs/snippets/vue/list-story-reuse-data.2.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.2.js.mdx
@@ -37,4 +37,4 @@ export const ManyItems = {
     Unselected: Unselected.args.isSelected,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index 5f0ee1cd7a32..ca44875799be 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -39,4 +39,4 @@ export const ManyItems = {
     Unselected: Unselected.args.isSelected,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
index 1ec06fa325c1..2f86ad7e3080 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-2.ts.mdx
@@ -4,19 +4,22 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
index f1204fd0253c..a4fffcdec2bb 100644
--- a/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.ts-3.ts.mdx
@@ -4,19 +4,22 @@
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './ListItem.stories';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
diff --git a/docs/snippets/vue/list-story-starter.2.js.mdx b/docs/snippets/vue/list-story-starter.2.js.mdx
index 7132fc1ce3e1..2c06c1e0584b 100644
--- a/docs/snippets/vue/list-story-starter.2.js.mdx
+++ b/docs/snippets/vue/list-story-starter.2.js.mdx
@@ -20,4 +20,4 @@ export const Empty = {
     template: '<List v-bind="$props"/>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-starter.3.js.mdx b/docs/snippets/vue/list-story-starter.3.js.mdx
index 4eb68fcdf087..d63867190cc6 100644
--- a/docs/snippets/vue/list-story-starter.3.js.mdx
+++ b/docs/snippets/vue/list-story-starter.3.js.mdx
@@ -22,4 +22,4 @@ export const Empty = {
     template: '<List v-bind="args">',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
index e789dc9114e9..0f78e81fc07f 100644
--- a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -3,16 +3,19 @@
 
 import List from './ListComponent.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
diff --git a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
index d9eac7a10627..0c97ab603a98 100644
--- a/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-3.ts.mdx
@@ -3,16 +3,19 @@
 
 import List from './ListComponent.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof List> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'List',
   component: List,
-} as Meta<typeof List>;
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
 
 // Always an empty list, not super interesting
 export const Empty: Story = {
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index f2ceb52f1e71..b1d87b85d0e3 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -46,4 +46,4 @@ export const OneItem = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index 20d9e6a66fde..ac515f7ebe28 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -49,4 +49,4 @@ export const OneItem = {
     ],
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
index 9efb6d802874..7275ba505504 100644
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx
@@ -30,4 +30,4 @@ export const OneItem = {
     ...Unchecked.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index f29e1f9c91ce..124d826d1abd 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -34,4 +34,4 @@ export const OneItem = {
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
index 67ef97d43b0c..fd6e48b4c127 100644
--- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
@@ -34,4 +34,4 @@ export const OneItem = {
     template: '<List v-bind="$props"><ListItem /></List>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
index 8230ff8d08fc..ffe8b4fbdc36 100644
--- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
@@ -39,4 +39,4 @@ export const OneItem = {
     template: '<List v-bind="args"><ListItem /></List>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/loader-story.3.js.mdx b/docs/snippets/vue/loader-story.3.js.mdx
index 68009a29747e..08e046151282 100644
--- a/docs/snippets/vue/loader-story.3.js.mdx
+++ b/docs/snippets/vue/loader-story.3.js.mdx
@@ -28,4 +28,4 @@ export const Primary = {
     }),
   ],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/login-form-with-play-function.2.js.mdx b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
index 125d8e607521..eba4c93ad335 100644
--- a/docs/snippets/vue/login-form-with-play-function.2.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.2.js.mdx
@@ -29,6 +29,10 @@ export const EmptyForm = {
   }),
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
   render: (args, { argTypes }) => ({
     components: { LoginForm },
@@ -36,7 +40,6 @@ export const FilledForm = {
     template: `<LoginForm v-bind="$props" v-on="$props" />`,
   }),
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
@@ -55,4 +58,4 @@ export const FilledForm = {
     ).toBeInTheDocument();
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/login-form-with-play-function.3.js.mdx b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
index 60c4bb89d983..643c1f24d497 100644
--- a/docs/snippets/vue/login-form-with-play-function.3.js.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.3.js.mdx
@@ -31,6 +31,10 @@ export const EmptyForm = {
   }),
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm = {
   render: (args) => ({
     components: { LoginForm },
@@ -40,7 +44,6 @@ export const FilledForm = {
     template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
   }),
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
@@ -59,4 +62,4 @@ export const FilledForm = {
     ).toBeInTheDocument();
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
index a6e449bc4f20..6a7207c0b544 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-2.mdx
@@ -50,6 +50,7 @@ import LoginForm from './LoginForm.vue';
       props: Object.keys(argTypes),
       components: { LoginForm },
       template: `<LoginForm v-bind="$props" v-on="$props" />`,
-   })} />
+
+})} />
 </Canvas>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
index cc79337b989d..4a24f480ea73 100644
--- a/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.mdx-3.mdx
@@ -55,5 +55,6 @@ import LoginForm from './LoginForm.vue';
       },
       template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
     })} />
+
 </Canvas>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
index 12ae56cb1dda..dffc8f7e3a92 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx
@@ -7,16 +7,19 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import type { Meta, Story } from '@storybook/vue';
+import type { Meta, StoryObj } from '@storybook/vue';
 
-export default {
+const meta: Meta<typeof LoginForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
-} as Meta<typeof LoginForm>;
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginForm>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -31,6 +34,10 @@ export const EmptyForm: Story = {
   }),
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
   render: (args, { argTypes }) => ({
     components: { LoginForm },
@@ -38,7 +45,6 @@ export const FilledForm: Story = {
     template: `<LoginForm v-bind="$props" v-on="$props" />`,
   }),
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
diff --git a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
index 40cea12b6c72..3a094ad98cd7 100644
--- a/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
+++ b/docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx
@@ -7,16 +7,19 @@ import { expect } from '@storybook/jest';
 
 import LoginForm from './LoginForm.vue';
 
-import type { Meta, Story } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 
-export default {
+const meta: Meta<typeof LoginForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Form',
   component: LoginForm,
-} as Meta<typeof LoginForm>;
+};
+
+export default meta;
+type Story = StoryObj<typeof LoginForm>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -33,6 +36,10 @@ export const EmptyForm: Story = {
   }),
 };
 
+/*
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
 export const FilledForm: Story = {
   render: (args) => ({
     components: { LoginForm },
@@ -42,7 +49,6 @@ export const FilledForm: Story = {
     template: '<LoginForm @onSubmit="onSubmit" v-bind="args" />',
   }),
   play: async ({ canvasElement }) => {
-    // Starts querying the component from its root element
     const canvas = within(canvasElement);
 
     // 👇 Simulate interactions with the component
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
index ee1cbfc0fd60..755718824af6 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,18 +15,19 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleWithRole = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-alt-queries.ts.mdx b/docs/snippets/vue/my-component-play-function-alt-queries.ts.mdx
index c177c34a853e..21040f79e58c 100644
--- a/docs/snippets/vue/my-component-play-function-alt-queries.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-alt-queries.ts.mdx
@@ -1,36 +1,39 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'QueryMethods',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const ExampleWithRole: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button', { name: / button label/i }));
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-composition.js.mdx b/docs/snippets/vue/my-component-play-function-composition.js.mdx
index f8476bdb8e60..e132b8037d05 100644
--- a/docs/snippets/vue/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-composition.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,17 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const FirstStory = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
@@ -34,8 +35,10 @@ export const SecondStory = {
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
@@ -44,11 +47,13 @@ export const CombinedStories = {
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-composition.ts.mdx b/docs/snippets/vue/my-component-play-function-composition.ts.mdx
index a51e86d8905a..cab65de51cef 100644
--- a/docs/snippets/vue/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-composition.ts.mdx
@@ -1,35 +1,38 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'MyComponent',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const FirstStory: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.type(canvas.getByTestId('an-element'), 'example-value');
   },
 };
 
@@ -38,8 +41,10 @@ export const SecondStory: Story = {
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    await userEvent.type(screen.getByTestId('other-element'), 'another value');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.type(canvas.getByTestId('other-element'), 'another value');
   },
 };
 
@@ -48,11 +53,13 @@ export const CombinedStories: Story = {
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Runs the FirstStory and Second story play function before running this story's play function
-    await FirstStory.play();
-    await SecondStory.play();
-    await userEvent.type(screen.getByTestId('another-element'), 'random value');
+    await FirstStory.play({ canvasElement });
+    await SecondStory.play({ canvasElement });
+    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-query-findby.js.mdx b/docs/snippets/vue/my-component-play-function-query-findby.js.mdx
index 3c2097674dc1..43a3bf50a8bf 100644
--- a/docs/snippets/vue/my-component-play-function-query-findby.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-query-findby.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,20 +15,21 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const AsyncExample = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-query-findby.ts.mdx b/docs/snippets/vue/my-component-play-function-query-findby.ts.mdx
index 4b880a8ed4fb..bb932cc09a38 100644
--- a/docs/snippets/vue/my-component-play-function-query-findby.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-query-findby.ts.mdx
@@ -1,38 +1,41 @@
-```js
+```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Async Query Methods',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const AsyncExample: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // Other steps
-    
+
     // Waits for the component to be rendered before querying the element
-    await screen.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i }));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
index 824a51ce6c38..e5432ab618ec 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,17 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleAsyncStory = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    const exampleElement = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('Username', {
       selector: 'input',
     });
 
@@ -34,12 +35,12 @@ export const ExampleAsyncStory = {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-waitfor.ts.mdx b/docs/snippets/vue/my-component-play-function-waitfor.ts.mdx
index 8fc40d53df67..1814e7065d97 100644
--- a/docs/snippets/vue/my-component-play-function-waitfor.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-waitfor.ts.mdx
@@ -1,47 +1,50 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent, waitFor } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithAsync',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const ExampleAsyncStory: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    const Input = screen.getByLabelText('Username', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
       selector: 'input',
     });
     await userEvent.type(Input, 'WrongInput', {
       delay: 100,
     });
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const Submit = screen.getByRole('button');
+    const Submit = canvas.getByRole('button');
     await userEvent.click(Submit);
 
     await waitFor(async () => {
-      await userEvent.hover(screen.getByTestId('error'));
+      await userEvent.hover(canvas.getByTestId('error'));
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
index 5a972cb4d332..8c4cf6e3d934 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.js.mdx
@@ -33,4 +33,4 @@ export const ExampleStory = {
     await userEvent.click(canvas.getByRole('another-element'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-canvas.ts.mdx b/docs/snippets/vue/my-component-play-function-with-canvas.ts.mdx
index 88882b52ee0c..382a846755f1 100644
--- a/docs/snippets/vue/my-component-play-function-with-canvas.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-canvas.ts.mdx
@@ -1,22 +1,24 @@
 ```ts
-
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
 import { getByRole, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithCanvasElement',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
@@ -37,4 +39,4 @@ export const ExampleStory: Story = {
     await userEvent.click(canvas.getByRole('another-element'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
index c187bad1f38a..40262b1dfae3 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,18 +15,19 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ClickExample = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
@@ -35,9 +36,11 @@ export const FireEventExample = {
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-clickevent.ts.mdx b/docs/snippets/vue/my-component-play-function-with-clickevent.ts.mdx
index 0c11379e6fec..af45b82e6cca 100644
--- a/docs/snippets/vue/my-component-play-function-with-clickevent.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-clickevent.ts.mdx
@@ -1,36 +1,39 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { fireEvent, screen, userEvent } from '@storybook/testing-library';
+import { fireEvent, userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'ClickExamples',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const ClickExample: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await userEvent.click(screen.getByRole('button'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 
@@ -39,9 +42,11 @@ export const FireEventExample: Story = {
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    await fireEvent.click(screen.getByTestId('data-testid'));
+    await fireEvent.click(canvas.getByTestId('data-testid'));
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
index f653741346ee..c70fd4df0af2 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -15,27 +15,28 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const DelayedStory = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent />',
   }),
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-delay.ts.mdx b/docs/snippets/vue/my-component-play-function-with-delay.ts.mdx
index 3c70bff040dd..158a7ac9fa71 100644
--- a/docs/snippets/vue/my-component-play-function-with-delay.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-delay.ts.mdx
@@ -1,44 +1,48 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
-export default {
+const meta: Meta<typeof MyComponent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithDelay',
   component: MyComponent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const DelayedStory: Story = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
-    const exampleElement = screen.getByLabelText('example-element');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
 
     // The delay option set the ammount of milliseconds between characters being typed
     await userEvent.type(exampleElement, 'random string', {
       delay: 100,
     });
 
-    const AnotherExampleElement = screen.getByLabelText('another-example-element');
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
     await userEvent.type(AnotherExampleElement, 'another random string', {
       delay: 100,
     });
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
index f62f6b8b2058..1731ae11bb44 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // MyComponent.stories.js
 
-import { userEvent, screen } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import MyComponent from './MyComponent.vue';
 
@@ -20,17 +20,18 @@ function sleep(ms) {
 }
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const ExampleChangeEvent = {
   render: () => ({
     components: { MyComponent },
     template: '<MyComponent/>',
   }),
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
@@ -41,4 +42,4 @@ export const ExampleChangeEvent = {
     await userEvent.selectOptions(select, ['Yet another item']);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-play-function-with-selectevent.ts.mdx b/docs/snippets/vue/my-component-play-function-with-selectevent.ts.mdx
index 88728586349f..780a23dc4c33 100644
--- a/docs/snippets/vue/my-component-play-function-with-selectevent.ts.mdx
+++ b/docs/snippets/vue/my-component-play-function-with-selectevent.ts.mdx
@@ -1,21 +1,24 @@
 ```ts
 // MyComponent.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
-import MyComponent from './MyComponent.vue';
+import WithSelectEvent from './WithSelectEvent.vue';
 
-export default {
+const meta: Meta<typeof WithSelectEvent> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'WithSelectEvent',
   component: WithSelectEvent,
-} as Meta<typeof MyComponent>;
+};
+
+export default meta;
+type Story = StoryObj<typeof WithSelectEvent>;
 
 // Custom function to emulate a pause
 function sleep(ms: number) {
@@ -23,18 +26,18 @@ function sleep(ms: number) {
 }
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
-
 export const ExampleChangeEvent: Story = {
   render: () => ({
-    components: { MyComponent },
-    template: '<MyComponent/>',
+    components: { WithSelectEvent },
+    template: '<WithSelectEvent/>',
   }),
-  play: async () => {
-    const select = screen.getByRole('listbox');
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
 
     await userEvent.selectOptions(select, ['One Item']);
     await sleep(2000);
@@ -45,4 +48,4 @@ export const ExampleChangeEvent: Story = {
     await userEvent.selectOptions(select, ['Yet another item']);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
index 0ae747854f0e..4117562da94f 100644
--- a/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/vue/my-component-story-basic-and-props.js.mdx
@@ -25,4 +25,4 @@ export const WithProp = {
     template: '<MyComponent prop="value"/>',
   }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
index 4d5538c3552d..31874de0464b 100644
--- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx
@@ -40,4 +40,4 @@ export const MyStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
index 5c880243841a..62d8d5095320 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -7,4 +7,4 @@ export const StoryWithLocale = ({ globals: { locale } }) => {
     template: `<p>${caption}</p>`,
   };
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
index d7dc941bface..3072805f46eb 100644
--- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx
@@ -40,4 +40,4 @@ export const StoryWithLocale = {
     };
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
index 1c756ffc7701..d28561aea6ff 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.2.js.mdx
@@ -45,4 +45,4 @@ export const ComplexStory = {
     data: complexData,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
index 539600f2ee9a..7ab85bce1c94 100644
--- a/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
+++ b/docs/snippets/vue/my-component-story-with-nonstory.3.js.mdx
@@ -49,4 +49,4 @@ export const ComplexStory = {
     data: complexData,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
index 8186f3f7ee3b..a2da43dffb7f 100644
--- a/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.2.js.mdx
@@ -27,4 +27,4 @@ export const ExampleStory = {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
index 85f983d25af2..244a818f84a3 100644
--- a/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
+++ b/docs/snippets/vue/my-component-with-env-variables.3.js.mdx
@@ -29,4 +29,4 @@ export const ExampleStory = {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story-slots.2.js.mdx b/docs/snippets/vue/page-story-slots.2.js.mdx
index bea8a0bc4711..9c6094525493 100644
--- a/docs/snippets/vue/page-story-slots.2.js.mdx
+++ b/docs/snippets/vue/page-story-slots.2.js.mdx
@@ -33,4 +33,4 @@ export const CustomFooter = {
     footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story-slots.3.js.mdx b/docs/snippets/vue/page-story-slots.3.js.mdx
index 42c640d6d786..9e511b41ec60 100644
--- a/docs/snippets/vue/page-story-slots.3.js.mdx
+++ b/docs/snippets/vue/page-story-slots.3.js.mdx
@@ -35,4 +35,4 @@ export const CustomFooter = {
     footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
index 3a3b6c22a700..dfeff8dc778d 100644
--- a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
@@ -34,4 +34,4 @@ export const Simple = {
     subdocuments: DocumentListStories.Simple.args.documents,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
index d247267a9121..771ef762c790 100644
--- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
@@ -36,4 +36,4 @@ export const Simple = {
     subdocuments: DocumentListStories.Simple.args.documents,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story.2.js.mdx b/docs/snippets/vue/page-story.2.js.mdx
index 04352638586d..7efab172b7ad 100644
--- a/docs/snippets/vue/page-story.2.js.mdx
+++ b/docs/snippets/vue/page-story.2.js.mdx
@@ -30,4 +30,4 @@ export const LoggedIn = {
     ...HeaderStories.LoggedIn.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/page-story.3.js.mdx b/docs/snippets/vue/page-story.3.js.mdx
index 07368d3cbad9..f9de11005454 100644
--- a/docs/snippets/vue/page-story.3.js.mdx
+++ b/docs/snippets/vue/page-story.3.js.mdx
@@ -32,4 +32,4 @@ export const LoggedIn = {
     ...HeaderStories.LoggedIn.args,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/register-component-with-play-function.js.mdx b/docs/snippets/vue/register-component-with-play-function.js.mdx
index 9dc018d2ad58..a1e4271a249e 100644
--- a/docs/snippets/vue/register-component-with-play-function.js.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // RegistrationForm.stories.js
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.vue';
 
@@ -15,17 +15,18 @@ export default {
 };
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const FilledForm = {
   render: () => ({
     components: { RegistrationForm },
     template: '<RegistrationForm />',
   }),
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -33,7 +34,7 @@ export const FilledForm = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -42,9 +43,9 @@ export const FilledForm = {
     });
 
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
 
     await userEvent.click(submitButton);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/register-component-with-play-function.ts.mdx b/docs/snippets/vue/register-component-with-play-function.ts.mdx
index 4bb6bd2c4416..e235c45a657f 100644
--- a/docs/snippets/vue/register-component-with-play-function.ts.mdx
+++ b/docs/snippets/vue/register-component-with-play-function.ts.mdx
@@ -1,34 +1,38 @@
 ```ts
 // RegistrationForm.stories.ts
 
-// import type { Meta, Story } from '@storybook/vue3'; for Vue 3
-import type { Meta, Story } from '@storybook/vue';
+// import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3
+import type { Meta, StoryObj } from '@storybook/vue';
 
-import { screen, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
 
 import RegistrationForm from './RegistrationForm.vue';
 
-export default {
- /* 👇 The title prop is optional.
+const meta: Meta<typeof RegistrationForm> = {
+  /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'RegistrationForm',
   component: RegistrationForm,
-} as Meta<typeof RegistrationForm>;
+};
+
+export default meta;
+type Story = StoryObj<typeof RegistrationForm>;
 
 /*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/7.0/vue/api/csf
- * to learn how to use render functions.
+ * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
  */
 export const FilledForm: Story = {
   render: () => ({
     components: { RegistrationForm },
     template: '<RegistrationForm />',
   }),
-  play: async () => {
-    const emailInput = screen.getByLabelText('email', {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
       selector: 'input',
     });
 
@@ -36,7 +40,7 @@ export const FilledForm: Story = {
       delay: 100,
     });
 
-    const passwordInput = screen.getByLabelText('password', {
+    const passwordInput = canvas.getByLabelText('password', {
       selector: 'input',
     });
 
@@ -45,8 +49,8 @@ export const FilledForm: Story = {
     });
 
     // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = screen.getByRole('button');
+    const submitButton = canvas.getByRole('button');
     await userEvent.click(submitButton);
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/simple-page-implementation.2.mdx b/docs/snippets/vue/simple-page-implementation.2.mdx
index 9e0a6dfad75c..bbe99159d968 100644
--- a/docs/snippets/vue/simple-page-implementation.2.mdx
+++ b/docs/snippets/vue/simple-page-implementation.2.mdx
@@ -12,7 +12,7 @@
   import PageLayout from './PageLayout';
   import DocumentHeader from './DocumentHeader';
   import DocumentList from './DocumentList';
-  
+
   export default {
     name: 'DocumentScreen',
     components: { PageLayout, DocumentHeader, DocumentList },
@@ -36,4 +36,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/simple-page-implementation.3.mdx b/docs/snippets/vue/simple-page-implementation.3.mdx
index 1d94f003b996..4032a2ab05ab 100644
--- a/docs/snippets/vue/simple-page-implementation.3.mdx
+++ b/docs/snippets/vue/simple-page-implementation.3.mdx
@@ -13,7 +13,7 @@
   import DocumentHeader from './DocumentHeader';
   import DocumentList from './DocumentList';
   import { reactive } from 'vue';
-  
+
   export default {
     name: 'DocumentScreen',
     components: { PageLayout, DocumentHeader, DocumentList },
@@ -46,4 +46,4 @@
     },
   };
 </script>
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
index 0fde60b15579..659ab215e582 100644
--- a/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-disable.js.mdx
@@ -29,4 +29,4 @@ export const NonA11yStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
index 7099aee15897..36ab181cc312 100644
--- a/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/vue/storybook-addon-a11y-story-config.js.mdx
@@ -44,4 +44,4 @@ export const ExampleStory = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-global-decorator.js.mdx b/docs/snippets/vue/storybook-preview-global-decorator.js.mdx
index 677b5c8a94af..08c8fcffa71f 100644
--- a/docs/snippets/vue/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/vue/storybook-preview-global-decorator.js.mdx
@@ -1,8 +1,10 @@
 ```js
 // .storybook/preview.js
 
-export const decorators = [(story) => ({
-  components: { story },
-  template: '<div style="margin: 3em;"><story /></div>'
-})];
-```
\ No newline at end of file
+export const decorators = [
+  (story) => ({
+    components: { story },
+    template: '<div style="margin: 3em;"><story /></div>',
+  }),
+];
+```
diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx
index db27c60dbbbc..26f9fd67b085 100644
--- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.2-component.js.mdx
@@ -18,4 +18,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx
index 410f9b2a10c4..424902b13de0 100644
--- a/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-hoc-component-decorator.3-component.js.mdx
@@ -19,4 +19,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.2-library.js.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.2-library.js.mdx
index 922e2e92ade5..29311df5f116 100644
--- a/docs/snippets/vue/storybook-preview-with-library-decorator.2-library.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-library-decorator.2-library.js.mdx
@@ -14,4 +14,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-with-library-decorator.3-library.js.mdx b/docs/snippets/vue/storybook-preview-with-library-decorator.3-library.js.mdx
index 894438ea0541..947dbb4d78ae 100644
--- a/docs/snippets/vue/storybook-preview-with-library-decorator.3-library.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-library-decorator.3-library.js.mdx
@@ -14,4 +14,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx b/docs/snippets/vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx
index d968d1f085fc..a2bfe83cd41a 100644
--- a/docs/snippets/vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-mixin-decorator.2-mixin.js.mdx
@@ -14,4 +14,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx b/docs/snippets/vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx
index d4d5a8c897a2..5d6ee444d6ea 100644
--- a/docs/snippets/vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx
+++ b/docs/snippets/vue/storybook-preview-with-mixin-decorator.3-mixin.js.mdx
@@ -14,4 +14,4 @@ export const decorators = [
     template: '<div style="margin: 3em;"><story /></div>',
   }),
 ];
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config-scripts.json.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config-scripts.json.mdx
index aac5ee0c4b85..6e0a504e6a0a 100644
--- a/docs/snippets/vue/storybook-testing-addon-optional-config-scripts.json.mdx
+++ b/docs/snippets/vue/storybook-testing-addon-optional-config-scripts.json.mdx
@@ -4,4 +4,4 @@
     "test": "jest --setupFiles ./setupFile.js"
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
index e3494ba13440..a02ceae53147 100644
--- a/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
+++ b/docs/snippets/vue/storybook-testing-addon-optional-config.2.js.mdx
@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue';
 import * as globalStorybookConfig from './.storybook/preview';
 
 setGlobalConfig(globalStorybookConfig);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx b/docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx
index 55283e5e6ea0..9b51354b19c3 100644
--- a/docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx
+++ b/docs/snippets/vue/storybook-testing-addon-optional-config.3.js.mdx
@@ -7,4 +7,4 @@ import { setGlobalConfig } from '@storybook/testing-vue3';
 import * as globalStorybookConfig from './.storybook/preview';
 
 setGlobalConfig(globalStorybookConfig);
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
index b15cca26de0d..c8b87f74712f 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx
@@ -41,4 +41,4 @@ export const TableStory = {
     size: 'large',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
index c80f5663c165..1c8e26a3ba71 100644
--- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
+++ b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx
@@ -43,4 +43,4 @@ export const TableStory = {
     size: 'large',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/your-component-with-decorator.js.mdx b/docs/snippets/vue/your-component-with-decorator.js.mdx
index d6bd32c0d686..24be99df6161 100644
--- a/docs/snippets/vue/your-component-with-decorator.js.mdx
+++ b/docs/snippets/vue/your-component-with-decorator.js.mdx
@@ -5,11 +5,11 @@ import YourComponent from './YourComponent.vue';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
   component: YourComponent,
   decorators: [() => ({ template: '<div style="margin: 3em;"><story/></div>' })],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/your-component.2.js.mdx b/docs/snippets/vue/your-component.2.js.mdx
index faf3cd115f9c..694cbf665622 100644
--- a/docs/snippets/vue/your-component.2.js.mdx
+++ b/docs/snippets/vue/your-component.2.js.mdx
@@ -28,4 +28,4 @@ export const FirstStory = {
     //👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/vue/your-component.3.js.mdx b/docs/snippets/vue/your-component.3.js.mdx
index 02dfb7653b4d..c4f122b0d109 100644
--- a/docs/snippets/vue/your-component.3.js.mdx
+++ b/docs/snippets/vue/your-component.3.js.mdx
@@ -30,4 +30,4 @@ export const FirstStory = {
     //👇 The args you need here will depend on your component
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-group-story.js.mdx b/docs/snippets/web-components/button-group-story.js.mdx
index be5be5ad4afc..d94791c59ddb 100644
--- a/docs/snippets/web-components/button-group-story.js.mdx
+++ b/docs/snippets/web-components/button-group-story.js.mdx
@@ -27,4 +27,4 @@ export const Pair = {
     orientation: 'horizontal',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-component-args-primary.js.mdx b/docs/snippets/web-components/button-story-component-args-primary.js.mdx
index 00f18b087cc2..1882c4e80ec3 100644
--- a/docs/snippets/web-components/button-story-component-args-primary.js.mdx
+++ b/docs/snippets/web-components/button-story-component-args-primary.js.mdx
@@ -27,4 +27,4 @@ export default {
 export const Primary = {
   render: ({ primary }) => Button({ primary }),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-component-decorator.js.mdx b/docs/snippets/web-components/button-story-component-decorator.js.mdx
index d48c3b57a715..b0f8dcad8a3e 100644
--- a/docs/snippets/web-components/button-story-component-decorator.js.mdx
+++ b/docs/snippets/web-components/button-story-component-decorator.js.mdx
@@ -22,4 +22,4 @@ export default {
 export const Primary = {
   render: () => html`<demo-button primary></demo-button>`,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-decorator.js.mdx b/docs/snippets/web-components/button-story-decorator.js.mdx
index affc293914c9..4703f975c815 100644
--- a/docs/snippets/web-components/button-story-decorator.js.mdx
+++ b/docs/snippets/web-components/button-story-decorator.js.mdx
@@ -23,4 +23,4 @@ export const Primary = {
   render: (args) => Button(args),
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
index d0319e8ce8a3..c7c3f4a3aae5 100644
--- a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
@@ -10,4 +10,4 @@ export default {
    */
   title: 'Button',
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-rename-story.js.mdx b/docs/snippets/web-components/button-story-rename-story.js.mdx
index 02576065c63b..9b2045e1e0f8 100644
--- a/docs/snippets/web-components/button-story-rename-story.js.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.js.mdx
@@ -20,4 +20,4 @@ export const Primary = {
   name: 'I am the primary',
   render: (args) => Button(args),
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-using-args.js.mdx b/docs/snippets/web-components/button-story-using-args.js.mdx
index ef689a882c1f..5ada8cc77eec 100644
--- a/docs/snippets/web-components/button-story-using-args.js.mdx
+++ b/docs/snippets/web-components/button-story-using-args.js.mdx
@@ -40,4 +40,4 @@ export const Tertiary = {
     label: '📚📕📈🤓',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-with-args.js.mdx b/docs/snippets/web-components/button-story-with-args.js.mdx
index deed847c6c3b..171faadda3c0 100644
--- a/docs/snippets/web-components/button-story-with-args.js.mdx
+++ b/docs/snippets/web-components/button-story-with-args.js.mdx
@@ -23,4 +23,4 @@ export const Primary = {
     label: 'Button',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-with-blue-args.js.mdx b/docs/snippets/web-components/button-story-with-blue-args.js.mdx
index 3c9621d38cf8..746739d4675c 100644
--- a/docs/snippets/web-components/button-story-with-blue-args.js.mdx
+++ b/docs/snippets/web-components/button-story-with-blue-args.js.mdx
@@ -20,4 +20,4 @@ export default {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story-with-emojis.js.mdx b/docs/snippets/web-components/button-story-with-emojis.js.mdx
index 1d2cd87784b8..bf6577d1fa18 100644
--- a/docs/snippets/web-components/button-story-with-emojis.js.mdx
+++ b/docs/snippets/web-components/button-story-with-emojis.js.mdx
@@ -29,4 +29,4 @@ export const Secondary = {
 export const Tertiary = {
   render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/button-story.js.mdx b/docs/snippets/web-components/button-story.js.mdx
index e3ccba0a62e4..8eb69bdcc5c2 100644
--- a/docs/snippets/web-components/button-story.js.mdx
+++ b/docs/snippets/web-components/button-story.js.mdx
@@ -21,4 +21,4 @@ export default {
 export const Primary = {
   render: () => html`<demo-button primary></demo-button>`,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx b/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx
index 9893084eb937..84b0b4a65a65 100644
--- a/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx
+++ b/docs/snippets/web-components/component-story-with-custom-render-function.js.mdx
@@ -27,4 +27,4 @@ export const Example = {
     </layout>
   `,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/histogram-story.js.mdx b/docs/snippets/web-components/histogram-story.js.mdx
index 9448c5179d81..5eff9c6d6908 100644
--- a/docs/snippets/web-components/histogram-story.js.mdx
+++ b/docs/snippets/web-components/histogram-story.js.mdx
@@ -35,4 +35,4 @@ export const Default = {
     label: 'Latency distribution',
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/list-story-expanded.js.mdx b/docs/snippets/web-components/list-story-expanded.js.mdx
index 2d34e8cb48d9..e1965df25016 100644
--- a/docs/snippets/web-components/list-story-expanded.js.mdx
+++ b/docs/snippets/web-components/list-story-expanded.js.mdx
@@ -38,4 +38,4 @@ export const ManyItems = {
     <demo-list-item></demo-list-item>
   </demo-list>`,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/list-story-reuse-data.js.mdx b/docs/snippets/web-components/list-story-reuse-data.js.mdx
index e46cd323079b..d401d3323254 100644
--- a/docs/snippets/web-components/list-story-reuse-data.js.mdx
+++ b/docs/snippets/web-components/list-story-reuse-data.js.mdx
@@ -25,10 +25,9 @@ import { Selected, Unselected } from './demo-list-item.stories';
 export const ManyItems = {
   render: (args) => html`
     <demo-list>
-      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })} ${Unselected(
-        { ...args, ...Unselected.args }
-      )}
+      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })}
+      ${Unselected({ ...args, ...Unselected.args })}
     </demo-list>
   `,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/list-story-starter.js.mdx b/docs/snippets/web-components/list-story-starter.js.mdx
index 174406588fef..29b64913478c 100644
--- a/docs/snippets/web-components/list-story-starter.js.mdx
+++ b/docs/snippets/web-components/list-story-starter.js.mdx
@@ -17,4 +17,4 @@ export default {
 export const Empty = {
   render: () => html`<demo-list></demo-list>`,
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx
index cd4d7bf3fb9a..693324be0174 100644
--- a/docs/snippets/web-components/list-story-unchecked.js.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.js.mdx
@@ -22,10 +22,6 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
-  render: () => html`
-    <List>
-      ${Unchecked({ ...Unchecked.args })}
-    </List>
-  `,
+  render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
 };
 ```
diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx
index 76dc0fb47055..c979ba6c86d2 100644
--- a/docs/snippets/web-components/list-story-unchecked.ts.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx
@@ -2,7 +2,7 @@
 // my-list.stories.ts|tsx
 
 import { html } from 'lit';
-import type { Story } from '../../IStory';
+import type { StoryObj } from '../../IStory';
 import { IList } from './my-list.custom';
 
 import './my-list';
@@ -10,17 +10,15 @@ import './my-list';
 //👇 Instead of importing my-list-item, we import the stories
 import { Unchecked } from './my-list-item.stories';
 
-export default {
+const meta: Meta<typeof Button> = {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'my-list',
 };
 
 export const OneItem: Story<IList> = () => html`
-  <List>
-    ${Unchecked({ ...Unchecked.args })}
-  </List>
+  <List> ${Unchecked({ ...Unchecked.args })} </List>
 `;
 ```
diff --git a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx b/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
index 1a12e9d642ea..5300261d716a 100644
--- a/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/web-components/my-component-story-configure-viewports.js.mdx
@@ -35,4 +35,4 @@ export const InitialButton = {
     },
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
index a659bd8a7fc5..0f45ee3f78c6 100644
--- a/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -9,4 +9,4 @@ export const StoryWithLocale = {
     return html`<p>${caption}</p>`;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
index 27f0e890bb9c..229f12c6c87d 100644
--- a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx
@@ -24,4 +24,4 @@ export const StoryWithLocale = {
     return html`<p>${caption}</p>`;
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/my-component-with-env-variables.js.mdx b/docs/snippets/web-components/my-component-with-env-variables.js.mdx
index b19ba2898945..206ae99cc60c 100644
--- a/docs/snippets/web-components/my-component-with-env-variables.js.mdx
+++ b/docs/snippets/web-components/my-component-with-env-variables.js.mdx
@@ -22,4 +22,4 @@ export const ExampleStory = {
     propertyA: process.env.STORYBOOK_DATA_KEY,
   },
 };
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx b/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx
index 6cc6970bf4ca..ae96d21dbb73 100644
--- a/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/web-components/storybook-preview-global-decorator.js.mdx
@@ -2,4 +2,4 @@
 // .storybook/preview.js
 
 export const decorators = [(story) => html`<div style="margin: 3em">${story()}</div>`],
-```
\ No newline at end of file
+```
diff --git a/docs/snippets/web-components/your-component-with-decorator.js.mdx b/docs/snippets/web-components/your-component-with-decorator.js.mdx
index 65dc05e3414f..5194283a45c6 100644
--- a/docs/snippets/web-components/your-component-with-decorator.js.mdx
+++ b/docs/snippets/web-components/your-component-with-decorator.js.mdx
@@ -8,5 +8,5 @@ import './your-component';
 export default {
   title: 'YourComponent',
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
-}
-```
\ No newline at end of file
+};
+```
diff --git a/docs/versions/next.json b/docs/versions/next.json
index f53693b5963f..b8a07bb13cb5 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.0.0-alpha.48","info":{"plain":"#### Breaking Changes\n\n-   Preact: Make preact use inline stories (without iframe) by default in docs [#19741](https://github.com/storybooks/storybook/pull/19741)\n\n#### Features\n\n-   Angular: Undo template gen removal during deprecation property removal [#19614](https://github.com/storybooks/storybook/pull/19614)\n-   CSF-tools: Support main.js default exports [#19738](https://github.com/storybooks/storybook/pull/19738)\n-   Addon-docs: Disable play functions in docs mode unless you set `parameters.docs.autoplay` [#19659](https://github.com/storybooks/storybook/pull/19659)\n-   Addon-docs: Add docsPage `automatic` to create docs entries for all components [#19713](https://github.com/storybooks/storybook/pull/19713)\n-   CLI: Add docsPage to all Button/Header story templates [#19715](https://github.com/storybooks/storybook/pull/19715)\n\n#### Bug Fixes\n\n-   Svelte: Fix docs rendering [#19705](https://github.com/storybooks/storybook/pull/19705)\n-   React: Expose ReactFramework type [#19704](https://github.com/storybooks/storybook/pull/19704)\n\n#### Maintenance\n\n-   Core: Update index generation to use tags to detect MDX stories [#19712](https://github.com/storybooks/storybook/pull/19712)\n-   CI: Fix cross OS github actions  [#19754](https://github.com/storybooks/storybook/pull/19754)\n-   Blocks: Redo stories for controls [#19744](https://github.com/storybooks/storybook/pull/19744)\n-   Blocks: Setup and create example story for blocks with context [#19740](https://github.com/storybooks/storybook/pull/19740)\n-   Client-api: Fix export from store [#19720](https://github.com/storybooks/storybook/pull/19720)\n-   Pull renderer+builder from framework's package.json + a known list [#19717](https://github.com/storybooks/storybook/pull/19717)\n-   CLI: Add automigration to set docsPage = 'automatic' for existing Storybooks [#19716](https://github.com/storybooks/storybook/pull/19716)\n-   Builder-webpack5: Use import.meta.webpackHot instead of module.hot for check [#19686](https://github.com/storybooks/storybook/pull/19686)\n-   Fix: Point to correct .d.ts files from export maps [#19724](https://github.com/storybooks/storybook/pull/19724)\n-   CLI: Remove deprecated `-s` flag on `sb init` [#19585](https://github.com/storybooks/storybook/pull/19585)\n\n#### Build\n\n-   Build: Fix eslint formatting in scripts [#19765](https://github.com/storybooks/storybook/pull/19765)\n-   Sandboxes: Fix up stories entry to allow HMR [#19750](https://github.com/storybooks/storybook/pull/19750)\n-   Fix prepare script on Windows machines [#19762](https://github.com/storybooks/storybook/pull/19762)\n-   CI: Fix fix handle-release-branches workflow [#19756](https://github.com/storybooks/storybook/pull/19756)\n-   Build: Cancel workflow in CI on steps failure [#19748](https://github.com/storybooks/storybook/pull/19748)\n-   CI: Schedule a daily job that runs all sandboxes [#19699](https://github.com/storybooks/storybook/pull/19699)\n-   Build: Delete node_modules in repro generation [#19734](https://github.com/storybooks/storybook/pull/19734)\n-   Fix: dts facade generator did not support deep links [#19723](https://github.com/storybooks/storybook/pull/19723)\n-   Build: Re-enable test-runner for vue-cli [#19706](https://github.com/storybooks/storybook/pull/19706)\n\n#### Dependency Upgrades\n\n-   Upgrade mdx2-csf to fix mdxSource generation [#19766](https://github.com/storybooks/storybook/pull/19766)\n-   Dependencies: Bump prettier dependency, cleanup config [#19672](https://github.com/storybooks/storybook/pull/19672)\n-   Vue: Add babel loader 9.0.0 to vue-webpack5 peer dependencies [#19697](https://github.com/storybooks/storybook/pull/19697)"}}
\ No newline at end of file
+{"version":"7.0.0-alpha.51","info":{"plain":"#### Bug Fixes\n\n-   NextJS: Fix out-of-the-box babel handling [#19842](https://github.com/storybooks/storybook/pull/19842)\n-   NextJS: Fix import url on windows [#19798](https://github.com/storybooks/storybook/pull/19798)\n-   UI: Fix panel invisible for any addon listed after the interactions panel [#19771](https://github.com/storybooks/storybook/pull/19771)\n-   Core: Bail preview builder on failure [#19849](https://github.com/storybooks/storybook/pull/19849)\n-   Core: Fix double esbuild-register register [#19852](https://github.com/storybooks/storybook/pull/19852)\n-   Composition: Fix regression in the `#root` to `#storybook-root` change [#19848](https://github.com/storybooks/storybook/pull/19848)\n-   UI: Fix `showPanel=false` doesn't work on mobile view [#19807](https://github.com/storybooks/storybook/pull/19807)\n\n#### Maintenance\n\n-   CLI: Replace degit with giget [#19870](https://github.com/storybooks/storybook/pull/19870)\n-   Build: Bundle lib/channel-websocket with tsup [#19694](https://github.com/storybooks/storybook/pull/19694)\n-   Maintenance: Upgrade monorepo to TS 4.9  [#19869](https://github.com/storybooks/storybook/pull/19869)\n\n#### Build\n\n-   Build: Downgrade @types/node [#19890](https://github.com/storybooks/storybook/pull/19890)\n-   Maintenance: Add angular 14 template and skip test runner on angular 15 for now [#19871](https://github.com/storybooks/storybook/pull/19871)\n-   Build: Upgrade Jest to 29 [#19863](https://github.com/storybooks/storybook/pull/19863)\n-   Build: Fix chromatic version to 6.11.2 in local scripts [#19889](https://github.com/storybooks/storybook/pull/19889)\n-   Build: Pin chromatic version to 6.11.2 to temporary fix flakiness [#19874](https://github.com/storybooks/storybook/pull/19874)\n\n#### Dependency Upgrades\n\n-   Bump mdx2-csf dependency [#19885](https://github.com/storybooks/storybook/pull/19885)"}}
\ No newline at end of file
diff --git a/docs/why-storybook.md b/docs/why-storybook.md
index b640ff11699f..9ef118190d66 100644
--- a/docs/why-storybook.md
+++ b/docs/why-storybook.md
@@ -41,20 +41,14 @@ You write stories for granular UI component variation and then use those stories
   paths={[
     'react/histogram-story.js.mdx',
     'react/histogram-story.ts.mdx',
-    'react/histogram-story.mdx.mdx',
     'angular/histogram-story.ts.mdx',
-    'angular/histogram-story.mdx.mdx',
     'vue/histogram-story.2.js.mdx',
     'vue/histogram-story.ts-2.ts.mdx',
-    'vue/histogram-story.mdx-2.mdx',
     'vue/histogram-story.3.js.mdx',
     'vue/histogram-story.ts-3.ts.mdx',
-    'vue/histogram-story.mdx-3.mdx',
     'svelte/histogram-story.js.mdx',
-    'svelte/histogram-story.mdx.mdx',
     'web-components/histogram-story.js.mdx',
     'preact/histogram-story.js.mdx',
-    'preact/histogram-story.mdx.mdx',
     'html/histogram-story.js.mdx',
     'html/histogram-story.ts.mdx',
   ]}
@@ -133,7 +127,7 @@ Storybook is compatible with your continuous integration workflow. Add it as a C
 
 Storybook is powered by [Component Story Format](https://github.com/ComponentDriven/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in.
 
-Reuse stories with [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost.
+Reuse stories with [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost.
 
 ---
 
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 2ee7027d196b..fdcfd48e1daf 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -22,15 +22,10 @@ To define the args of a single story, use the `args` CSF story key:
   paths={[
     'react/button-story-with-args.js.mdx',
     'react/button-story-with-args.ts.mdx',
-    'react/button-story-with-args.mdx.mdx',
     'vue/button-story-with-args.2.js.mdx',
-    'vue/button-story-with-args.mdx-2.mdx.mdx',
     'vue/button-story-with-args.3.js.mdx',
-    'vue/button-story-with-args.mdx-3.mdx.mdx',
     'angular/button-story-with-args.ts.mdx',
-    'angular/button-story-with-args.mdx.mdx',
     'svelte/button-story-with-args.js.mdx',
-    'svelte/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
     'html/button-story-with-args.js.mdx',
@@ -63,13 +58,9 @@ You can also define args at the component level; they will apply to all the comp
   paths={[
     'react/button-story-component-args-primary.js.mdx',
     'react/button-story-component-args-primary.ts.mdx',
-    'react/button-story-component-args-primary.mdx.mdx',
     'vue/button-story-component-args-primary.js.mdx',
-    'vue/button-story-component-args-primary.mdx.mdx',
     'angular/button-story-component-args-primary.ts.mdx',
-    'angular/button-story-component-args-primary.mdx.mdx',
     'svelte/button-story-component-args-primary.js.mdx',
-    'svelte/button-story-component-args-primary.mdx.mdx',
     'web-components/button-story-component-args-primary.js.mdx',
   ]}
 />
@@ -137,13 +128,9 @@ You can use args in your stories to configure the component's appearance, simila
   paths={[
     'react/page-story-slots.js.mdx',
     'react/page-story-slots.ts.mdx',
-    'react/page-story-slots.mdx.mdx',
     'vue/page-story-slots.2.js.mdx',
-    'vue/page-story-slots.mdx-2.mdx.mdx',
     'vue/page-story-slots.3.js.mdx',
-    'vue/page-story-slots.mdx-3.mdx.mdx',
     'angular/page-story-slots.ts.mdx',
-    'angular/page-story-slots.mdx.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 1a5ce8c1b6af..5c2b0e373093 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -20,13 +20,9 @@ Some components require a “harness” to render in a useful way. For instance,
     'react/your-component-with-decorator.story-function-js.js.mdx',
     'react/your-component-with-decorator.ts.mdx',
     'react/your-component-with-decorator.story-function-ts.ts.mdx',
-    'react/your-component-with-decorator.mdx.mdx',
     'vue/your-component-with-decorator.js.mdx',
-    'vue/your-component-with-decorator.mdx.mdx',
     'angular/your-component-with-decorator.ts.mdx',
-    'angular/your-component-with-decorator.mdx.mdx',
     'svelte/your-component-with-decorator.js.mdx',
-    'svelte/your-component-with-decorator.mdx.mdx',
     'web-components/your-component-with-decorator.js.mdx',
   ]}
 />
@@ -90,13 +86,9 @@ To define a decorator for a single story, use the `decorators` key on a named ex
     'react/button-story-decorator.js.mdx',
     'react/button-story-decorator.story-function.js.mdx',
     'react/button-story-decorator.ts.mdx',
-    'react/button-story-decorator.mdx.mdx',
     'vue/button-story-decorator.js.mdx',
-    'vue/button-story-decorator.mdx.mdx',
     'angular/button-story-decorator.ts.mdx',
-    'angular/button-story-decorator.mdx.mdx',
     'svelte/button-story-decorator.js.mdx',
-    'svelte/button-story-decorator.mdx.mdx',
     'web-components/button-story-decorator.js.mdx',
   ]}
 />
@@ -115,13 +107,9 @@ To define a decorator for all stories of a component, use the `decorators` key o
   paths={[
     'react/button-story-component-decorator.js.mdx',
     'react/button-story-component-decorator.ts.mdx',
-    'react/button-story-component-decorator.mdx.mdx',
     'vue/button-story-component-decorator.js.mdx',
-    'vue/button-story-component-decorator.mdx.mdx',
     'angular/button-story-component-decorator.ts.mdx',
-    'angular/button-story-component-decorator.mdx.mdx',
     'svelte/button-story-component-decorator.js.mdx',
-    'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
   ]}
 />
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index f689a468561a..b095bd32e726 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -76,7 +76,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 <CodeSnippets
   paths={[
     'react/button-story.with-hooks.js.mdx',
-    'react/button-story.mdx-with-hooks.mdx.mdx',
   ]}
 />
 
@@ -120,15 +119,11 @@ A story is a function that describes how to render a component. You can have mul
   paths={[
     'react/button-story-with-emojis.js.mdx',
     'react/button-story-with-emojis.ts.mdx',
-    'react/button-story-with-emojis.mdx.mdx',
     'vue/button-story-with-emojis.js.mdx',
     'vue/button-story-with-emojis.ts-2.ts.mdx',
     'vue/button-story-with-emojis.ts-3.ts.mdx',
-    'vue/button-story-with-emojis.mdx.mdx',
     'angular/button-story-with-emojis.ts.mdx',
-    'angular/button-story-with-emojis.mdx.mdx',
     'svelte/button-story-with-emojis.js.mdx',
-    'svelte/button-story-with-emojis.mdx.mdx',
     'web-components/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.js.mdx',
     'html/button-story-with-emojis.ts.mdx',
@@ -215,17 +210,12 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
   paths={[
     'react/login-form-with-play-function.js.mdx',
     'react/login-form-with-play-function.ts.mdx',
-    'react/login-form-with-play-function.mdx.mdx',
     'angular/login-form-with-play-function.ts.mdx',
-    'angular/login-form-with-play-function.mdx.mdx',
     'vue/login-form-with-play-function.2.js.mdx',
     'vue/login-form-with-play-function.ts-2.ts.mdx',
-    'vue/login-form-with-play-function.mdx-2.mdx',
     'vue/login-form-with-play-function.3.js.mdx',
     'vue/login-form-with-play-function.ts-3.ts.mdx',
-    'vue/login-form-with-play-function.mdx-3.mdx',
     'svelte/login-form-with-play-function.js.mdx',
-    'svelte/login-form-with-play-function.mdx.mdx',
   ]}
 />
 
@@ -243,15 +233,11 @@ For instance, suppose you wanted to test your Button component against a differe
   paths={[
     'react/button-story-with-blue-args.js.mdx',
     'react/button-story-with-blue-args.ts.mdx',
-    'react/button-story-with-blue-args.mdx.mdx',
     'vue/button-story-with-blue-args.js.mdx',
     'vue/button-story-with-blue-args.ts-2.ts.mdx',
     'vue/button-story-with-blue-args.ts-3.ts.mdx',
-    'vue/button-story-with-blue-args.mdx.mdx',
     'angular/button-story-with-blue-args.ts.mdx',
-    'angular/button-story-with-blue-args.mdx.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
-    'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.js.mdx',
     'html/button-story-with-blue-args.ts.mdx',
@@ -276,15 +262,11 @@ A simple example is adding padding to a component’s stories. Accomplish this u
   paths={[
     'react/button-story-component-decorator.js.mdx',
     'react/button-story-component-decorator.ts.mdx',
-    'react/button-story-component-decorator.mdx.mdx',
     'vue/button-story-component-decorator.js.mdx',
     'vue/button-story-component-decorator.ts-2.ts.mdx',
     'vue/button-story-component-decorator.ts-3.ts.mdx',
-    'vue/button-story-component-decorator.mdx.mdx',
     'angular/button-story-component-decorator.ts.mdx',
-    'angular/button-story-component-decorator.mdx.mdx',
     'svelte/button-story-component-decorator.js.mdx',
-    'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.js.mdx',
     'html/button-story-component-decorator.ts.mdx',
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index 7576466d6851..8ef3ff29cc4c 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -19,13 +19,9 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
 <CodeSnippets
   paths={[
     'react/loader-story.js.mdx',
-    'react/loader-story.mdx.mdx',
     'vue/loader-story.3.js.mdx',
-    'vue/loader-story.mdx.mdx',
     'angular/loader-story.ts.mdx',
-    'angular/loader-story.mdx.mdx',
     'svelte/loader-story.js.mdx',
-    'svelte/loader-story.mdx.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index d726c01ba901..46fd60d3af85 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -15,7 +15,6 @@ We can set a parameter for a single story with the `parameters` key on a CSF exp
 <CodeSnippets
   paths={[
    'common/component-story-custom-params.js.mdx',
-   'common/component-story-custom-params.mdx.mdx',
   ]}
 />
 
@@ -31,13 +30,9 @@ We can set the parameters for all stories of a component using the `parameters`
   paths={[
     'react/button-story-with-blue-args.js.mdx',
     'react/button-story-with-blue-args.ts.mdx',
-    'react/button-story-with-blue-args.mdx.mdx',
     'vue/button-story-with-blue-args.js.mdx',
-    'vue/button-story-with-blue-args.mdx.mdx',
     'angular/button-story-with-blue-args.ts.mdx',
-    'angular/button-story-with-blue-args.mdx.mdx',
     'svelte/button-story-with-blue-args.js.mdx',
-    'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
   ]}
 />
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index 05a2a6ed768c..959cb171e145 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -43,14 +43,10 @@ Storybook's `play` functions are small code snippets that run once the story fin
   paths={[
    'react/register-component-with-play-function.js.mdx',
    'react/register-component-with-play-function.ts.mdx',
-   'react/register-component-with-play-function.mdx.mdx',
    'angular/register-component-with-play-function.ts.mdx',
-   'angular/register-component-with-play-function.mdx.mdx',
    'vue/register-component-with-play-function.js.mdx',
    'vue/register-component-with-play-function.ts.mdx',
-   'vue/register-component-with-play-function.mdx.mdx',
    'svelte/register-component-with-play-function.js.mdx',
-   'svelte/register-component-with-play-function.mdx.mdx',
   ]}
 />
 
@@ -97,14 +93,10 @@ A common type of component interaction is a button click. If you need to reprodu
   paths={[
    'react/my-component-play-function-with-clickevent.js.mdx',
    'react/my-component-play-function-with-clickevent.ts.mdx',
-   'react/my-component-play-function-with-clickevent.mdx.mdx',
    'angular/my-component-play-function-with-clickevent.ts.mdx',
-   'angular/my-component-play-function-with-clickevent.mdx.mdx',
    'vue/my-component-play-function-with-clickevent.js.mdx',
    'vue/my-component-play-function-with-clickevent.ts.mdx',
-   'vue/my-component-play-function-with-clickevent.mdx.mdx',
    'svelte/my-component-play-function-with-clickevent.js.mdx',
-   'svelte/my-component-play-function-with-clickevent.mdx.mdx',
   ]}
 />
 
@@ -120,14 +112,10 @@ Asides from click events, you can also script additional events with the `play`
   paths={[
    'react/my-component-play-function-with-selectevent.js.mdx',
    'react/my-component-play-function-with-selectevent.ts.mdx',
-   'react/my-component-play-function-with-selectevent.mdx.mdx',
    'angular/my-component-play-function-with-selectevent.ts.mdx',
-   'angular/my-component-play-function-with-selectevent.mdx.mdx',
    'vue/my-component-play-function-with-selectevent.js.mdx',
    'vue/my-component-play-function-with-selectevent.ts.mdx',
-   'vue/my-component-play-function-with-selectevent.mdx.mdx',
    'svelte/my-component-play-function-with-selectevent.js.mdx',
-   'svelte/my-component-play-function-with-selectevent.mdx.mdx',
   ]}
 />
 
@@ -141,14 +129,10 @@ In addition to events, you can also create interactions with the `play` function
   paths={[
    'react/my-component-play-function-with-delay.js.mdx',
    'react/my-component-play-function-with-delay.ts.mdx',
-   'react/my-component-play-function-with-delay.mdx.mdx',
    'angular/my-component-play-function-with-delay.ts.mdx',
-   'angular/my-component-play-function-with-delay.mdx.mdx',
    'vue/my-component-play-function-with-delay.js.mdx',
    'vue/my-component-play-function-with-delay.ts.mdx',
-   'vue/my-component-play-function-with-delay.mdx.mdx',
    'svelte/my-component-play-function-with-delay.js.mdx',
-   'svelte/my-component-play-function-with-delay.mdx.mdx',
   ]}
 />
 
@@ -164,14 +148,10 @@ You can also use the `play` function to verify the existence of an element based
   paths={[
    'react/my-component-play-function-waitfor.js.mdx',
    'react/my-component-play-function-waitfor.ts.mdx',
-   'react/my-component-play-function-waitfor.mdx.mdx',
    'angular/my-component-play-function-waitfor.ts.mdx',
-   'angular/my-component-play-function-waitfor.mdx.mdx',
    'vue/my-component-play-function-waitfor.js.mdx',
    'vue/my-component-play-function-waitfor.ts.mdx',
-   'vue/my-component-play-function-waitfor.mdx.mdx',
    'svelte/my-component-play-function-waitfor.js.mdx',
-   'svelte/my-component-play-function-waitfor.mdx.mdx',
   ]}
 />
 
@@ -187,14 +167,10 @@ If you need, you can also adjust your `play` function to find elements based on
   paths={[
    'react/my-component-play-function-alt-queries.js.mdx',
    'react/my-component-play-function-alt-queries.ts.mdx',
-   'react/my-component-play-function-alt-queries.mdx.mdx',
    'angular/my-component-play-function-alt-queries.ts.mdx',
-   'angular/my-component-play-function-alt-queries.mdx.mdx',
    'vue/my-component-play-function-alt-queries.js.mdx',
    'vue/my-component-play-function-alt-queries.ts.mdx',
-   'vue/my-component-play-function-alt-queries.mdx.mdx',
    'svelte/my-component-play-function-alt-queries.js.mdx',
-   'svelte/my-component-play-function-alt-queries.mdx.mdx',
   ]}
 />
 
@@ -214,14 +190,10 @@ Otherwise, if the component is not immediately available, for instance, due to a
   paths={[
    'react/my-component-play-function-query-findby.js.mdx',
    'react/my-component-play-function-query-findby.ts.mdx',
-   'react/my-component-play-function-query-findby.mdx.mdx',
    'angular/my-component-play-function-query-findby.ts.mdx',
-   'angular/my-component-play-function-query-findby.mdx.mdx',
    'vue/my-component-play-function-query-findby.js.mdx',
    'vue/my-component-play-function-query-findby.ts.mdx',
-   'vue/my-component-play-function-query-findby.mdx.mdx',
    'svelte/my-component-play-function-query-findby.js.mdx',
-   'svelte/my-component-play-function-query-findby.mdx.mdx',
   ]}
 />
 
@@ -237,14 +209,10 @@ By default, each interaction you write inside your `play` function will be execu
   paths={[
    'react/my-component-play-function-with-canvas.js.mdx',
    'react/my-component-play-function-with-canvas.ts.mdx',
-   'react/my-component-play-function-with-canvas.mdx.mdx',
    'angular/my-component-play-function-with-canvas.ts.mdx',
-   'angular/my-component-play-function-with-canvas.mdx.mdx',
    'vue/my-component-play-function-with-canvas.js.mdx',
    'vue/my-component-play-function-with-canvas.ts.mdx',
-   'vue/my-component-play-function-with-canvas.mdx.mdx',
    'svelte/my-component-play-function-with-canvas.js.mdx',
-   'svelte/my-component-play-function-with-canvas.mdx.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index b51f87a5b307..e404aeea9ae4 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -18,7 +18,7 @@ It's useful to write stories that [render two or more components](../writing-sto
 
 <!-- prettier-ignore-end -->
 
-Note that by adding `subcomponents` to the default export, we get an extra pane on the ArgsTable, listing the props of `ListItem`:
+Note that by adding `subcomponents` to the default export, we get an extra panel on the ArgsTable, listing the props of `ListItem`:
 
 ![Storybook story with subcomponent argstable](./argstable-subcomponents.png)
 
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 7a86ddc5e86e..5e07285faf7a 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -61,15 +61,10 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
   paths={[
     'react/component-story-with-accessibility.js.mdx',
     'react/component-story-with-accessibility.ts.mdx',
-    'react/component-story-with-accessibility.mdx.mdx',
     'angular/component-story-with-accessibility.ts.mdx',
-    'angular/component-story-with-accessibility.mdx.mdx',
     'vue/component-story-with-accessibility.2.js.mdx',
-    'vue/component-story-with-accessibility.mdx-2.mdx.mdx',
     'vue/component-story-with-accessibility.3.js.mdx',
-    'vue/component-story-with-accessibility.mdx-3.mdx.mdx',
     'svelte/component-story-with-accessibility.js.mdx',
-    'svelte/component-story-with-accessibility.mdx.mdx',
   ]}
 />
 
@@ -106,7 +101,6 @@ You can also customize your own set of rules for all stories of a component. Upd
 <CodeSnippets
   paths={[
     'common/storybook-addon-a11y-component-config.js.mdx',
-    'common/storybook-addon-a11y-component-config.mdx.mdx',
   ]}
 />
 
@@ -122,13 +116,9 @@ Customize the a11y ruleset at the story level by updating your story to include
   paths={[
     'react/storybook-addon-a11y-story-config.js.mdx',
     'react/storybook-addon-a11y-story-config.ts.mdx',
-    'react/storybook-addon-a11y-story-config.mdx.mdx',
     'angular/storybook-addon-a11y-story-config.ts.mdx',
-    'angular/storybook-addon-a11y-story-config.mdx.mdx',
     'vue/storybook-addon-a11y-story-config.js.mdx',
-    'vue/storybook-addon-a11y-story-config.mdx.mdx',
     'svelte/storybook-addon-a11y-story-config.js.mdx',
-    'svelte/storybook-addon-a11y-story-config.mdx.mdx',
   ]}
 />
 
@@ -144,13 +134,9 @@ Disable accessibility testing for stories or components by adding the following
   paths={[
    'react/storybook-addon-a11y-disable.js.mdx',
    'react/storybook-addon-a11y-disable.ts.mdx',
-   'react/storybook-addon-a11y-disable.mdx.mdx',
    'angular/storybook-addon-a11y-disable.ts.mdx',
-   'angular/storybook-addon-a11y-disable.mdx.mdx',
    'vue/storybook-addon-a11y-disable.js.mdx',
-   'vue/storybook-addon-a11y-disable.mdx.mdx',
    'svelte/storybook-addon-a11y-disable.js.mdx',
-   'svelte/storybook-addon-a11y-disable.mdx.mdx',
   ]}
 />
 
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 03a23935c280..6b3010462830 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -58,15 +58,10 @@ The test itself is defined inside a `play` function connected to a story. Here's
   paths={[
     'react/login-form-with-play-function.js.mdx',
     'react/login-form-with-play-function.ts.mdx',
-    'react/login-form-with-play-function.mdx.mdx',
     'angular/login-form-with-play-function.ts.mdx',
-    'angular/login-form-with-play-function.mdx.mdx',
     'vue/login-form-with-play-function.2.js.mdx',
-    'vue/login-form-with-play-function.mdx-2.mdx',
     'vue/login-form-with-play-function.3.js.mdx',
-    'vue/login-form-with-play-function.mdx-3.mdx',
     'svelte/login-form-with-play-function.js.mdx',
-    'svelte/login-form-with-play-function.mdx.mdx',
   ]}
 />
 
@@ -85,7 +80,7 @@ Once the story loads in the UI, it simulates the user's behavior and verifies th
 
 Under the hood, Storybook’s interaction addon mirrors Testing Library’s [`user-events`](https://testing-library.com/docs/user-event/intro/) API. If you’re familiar with [Testing Library](https://testing-library.com/), you should be at home in Storybook.
 
-Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/ecosystem-user-event/).
+Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/user-event/utility/).
 
 | User events       | Description                                                                                                                                              |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 9f1c75915f83..6cd0a23d5c58 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -167,7 +167,7 @@ You can use your CI provider (for example, [GitHub Actions](https://github.com/f
 
 The test-runner is a generic testing tool that can run locally or on CI and be configured or extended to run all kinds of tests.
 
-[Chromatic](https://www.chromatic.com/) is a cloud-based service that runs [visual](./visual-testing.md) and [interaction tests](./interaction-testing.md) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
+[Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) is a cloud-based service that runs [visual](./visual-testing.md) and [interaction tests](./interaction-testing.md) (and soon accessibility tests) without setting up the test runner. It also syncs with your git provider and manages access control for private projects.
 
 However, you might want to pair the test runner and Chromatic in some cases.
 
diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md
index a0c8bd95934a..6f5095951913 100644
--- a/docs/writing-tests/visual-testing.md
+++ b/docs/writing-tests/visual-testing.md
@@ -8,7 +8,7 @@ Ideal for verifying what the user sees: layout, color, size, and contrast. Story
 
 ![Visually testing a component in Storybook](./component-visual-testing.gif)
 
-There are [many tools](https://github.com/mojoaxel/awesome-regression-testing) for visual testing. We recommend [Chromatic](https://www.chromatic.com) by Storybook maintainers to run visual tests in a lightning-fast cloud browser environment.
+There are [many tools](https://github.com/mojoaxel/awesome-regression-testing) for visual testing. We recommend [Chromatic](https://www.chromatic.com?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) by Storybook maintainers to run visual tests in a lightning-fast cloud browser environment.
 
 For a self-managed alternative to Chromatic, we offer [StoryShots](https://github.com/storybookjs/storybook/tree/main/addons/storyshots). It allows you to run visual tests on stories by integrating with [jest-image-snapshot](https://github.com/storybookjs/storybook/tree/main/addons/storyshots/storyshots-puppeteer#imagesnapshots).
 
@@ -50,7 +50,7 @@ View it online at https://www.chromatic.com/build?appId=...&number=1.
 ```
 
 <div class="aside">
-💡 Before running Chromatic's CLI ensure you have at least two commits added to the repository to prevent build failures, as Chromatic relies on a full Git history graph to establish the baselines. Read more about baselines in Chromatic's <a href="https://www.chromatic.com/docs/branching-and-baselines"> documentation</a>
+💡 Before running Chromatic's CLI ensure you have at least two commits added to the repository to prevent build failures, as Chromatic relies on a full Git history graph to establish the baselines. Read more about baselines in Chromatic's <a href="https://www.chromatic.com/docs/branching-and-baselines?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook"> documentation</a>
 </div>
 
 When Chromatic finishes, it should have successfully deployed your Storybook and established the baselines, that is to say, the starting point for all your component's stories. Additionally, providing you with a link to the published Storybook that you can share with your team to gather feedback.
@@ -67,7 +67,7 @@ For example, let's assume you're working on a component and you tweak the stylin
 
 If the changes are intentional, accept them as baselines. Otherwise, deny them to prevent UI regressions.
 
-Learn how to [integrate Chromatic UI Tests](https://www.chromatic.com/docs/) into your CI pipeline.
+Learn how to [integrate Chromatic UI Tests](https://www.chromatic.com/docs/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook) into your CI pipeline.
 
 ---
 
diff --git a/package.json b/package.json
index bba2585efc35..67b25d53ed45 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
     "start": "yarn task --task dev --template react-vite/default-ts --start-from=install",
     "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
     "get-template": "cd scripts; yarn get-template",
+    "get-report-message": "cd scripts; yarn get-report-message",
     "test": "cd code; yarn test",
     "lint": "cd code; yarn lint",
     "nx": "cd code; yarn nx",
-    "ci-tests": "cd code; yarn ci-tests"
+    "ci-tests": "cd code; yarn ci-tests",
+    "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write"
   },
   "packageManager": "yarn@3.2.4"
 }
diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js
index 0ac9b62a302a..fe8ebf3eb80c 100644
--- a/scripts/.eslintrc.js
+++ b/scripts/.eslintrc.js
@@ -28,5 +28,33 @@ module.exports = {
         'import/extensions': ['error', 'always'],
       },
     },
+    {
+      files: ['*.stories.*'],
+      rules: {
+        // allow expect in stories
+        'jest/no-standalone-expect': ['off'],
+      },
+    },
+    {
+      files: [
+        '*.js',
+        '*.jsx',
+        '*.json',
+        '*.html',
+        '**/.storybook/*.ts',
+        '**/.storybook/*.tsx',
+        'setup-jest.ts',
+      ],
+      parserOptions: {
+        project: null,
+      },
+      rules: {
+        // '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/dot-notation': 'off',
+        '@typescript-eslint/no-implied-eval': 'off',
+        '@typescript-eslint/no-throw-literal': 'off',
+        '@typescript-eslint/return-await': 'off',
+      },
+    },
   ],
 };
diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts
new file mode 100644
index 000000000000..28edcf1fe5a8
--- /dev/null
+++ b/scripts/get-report-message.ts
@@ -0,0 +1,70 @@
+/* eslint-disable no-console */
+import { command } from 'execa';
+import { readJson } from 'fs-extra';
+import { join } from 'path';
+
+type Branch = 'main' | 'next' | 'alpha' | 'next-release' | 'latest-release';
+type Workflow = 'merged' | 'daily';
+
+const getFooter = async (branch: Branch, workflow: Workflow, job: string) => {
+  if (job === 'chromatic-sandboxes') {
+    return `\n\nThis might not necessarily be a bug, it could be a visual diff that you have to review and approve. Please check it!`;
+  }
+
+  // The CI workflows can run on release branches and we should display the version number
+  if (branch === 'next-release' || branch === 'latest-release') {
+    const packageJson = await readJson(join(__dirname, '..', 'code', 'package.json'));
+
+    // running in alpha branch we should just show the version which failed
+    return `\n**Version: ${packageJson.version}**`;
+  }
+
+  const mergeCommits =
+    workflow === 'merged'
+      ? // show single merge for merged workflow
+        `git log -1 --pretty=format:"\`%h\` %<(12)%ar %s [%an]"`
+      : // show last 24h merges for daily workflow
+        `git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar %s [%an]"`;
+
+  const result = await command(mergeCommits, { shell: true });
+  const formattedResult = result.stdout
+    // discord needs escaped line breaks
+    .replace(/\n/g, '\\n')
+    // make links out of pull request ids
+    .replace(/Merge pull request #/g, 'https://github.com/storybookjs/storybook/pull/');
+
+  return `\n\n**Relevant PRs:**\n${formattedResult}`;
+};
+
+// This command is run in Circle CI on failures, to get a rich message to report to Discord
+// Usage: yarn get-report-message type workflow branch
+async function run() {
+  const [, , workflow = '', template = 'none'] = process.argv;
+
+  if (!workflow) {
+    throw new Error('[get-report-message] Missing workflow argument.');
+  }
+
+  const { CIRCLE_BRANCH: currentBranch = '', CIRCLE_JOB: currentJob = '' } = process.env;
+
+  if (!currentBranch || !currentJob) {
+    throw new Error(
+      '[get-report-message] Missing CIRCLE_BRANCH or CIRCLE_JOB environment variables.'
+    );
+  }
+
+  const title = `Oh no! The **${currentJob}** job has failed${
+    template !== 'none' ? ` for **${template}**.` : '.'
+  }`;
+  const body = `\n\n**Branch**: \`${currentBranch}\`\n**Workflow:** ${workflow}`;
+  const footer = await getFooter(currentBranch as Branch, workflow as Workflow, currentJob);
+
+  console.log(`${title}${body}${footer}`.replace(/\n/g, '\\n'));
+}
+
+if (require.main === module) {
+  run().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/get-template.ts b/scripts/get-template.ts
index a8a0b416474b..90298dfb05c2 100644
--- a/scripts/get-template.ts
+++ b/scripts/get-template.ts
@@ -3,7 +3,7 @@ import { pathExists } from 'fs-extra';
 import { resolve } from 'path';
 import { allTemplates, templatesByCadence } from '../code/lib/cli/src/repro-templates';
 
-const sandboxDir = resolve(__dirname, '../sandbox');
+const sandboxDir = process.env.SANDBOX_ROOT || resolve(__dirname, '../sandbox');
 
 export type Cadence = keyof typeof templatesByCadence;
 export type Template = {
diff --git a/scripts/next-repro-generators/generate-repros.ts b/scripts/next-repro-generators/generate-repros.ts
index 03a83f480b6d..c4a48350a0a7 100755
--- a/scripts/next-repro-generators/generate-repros.ts
+++ b/scripts/next-repro-generators/generate-repros.ts
@@ -8,6 +8,8 @@ import { program } from 'commander';
 import { directory } from 'tempy';
 import { execaCommand } from '../utils/exec';
 
+import type { OptionValues } from '../utils/options';
+import { createOptions } from '../utils/options';
 import { allTemplates as reproTemplates } from '../../code/lib/cli/src/repro-templates';
 import storybookVersions from '../../code/lib/cli/src/versions';
 import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory';
@@ -18,7 +20,6 @@ import { localizeYarnConfigFiles, setupYarn } from './utils/yarn';
 import type { GeneratorConfig } from './utils/types';
 import { getStackblitzUrl, renderTemplate } from './utils/template';
 import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
-import { runRegistry } from '../tasks/run-registry';
 
 const OUTPUT_DIRECTORY = join(__dirname, '..', '..', 'repros');
 const BEFORE_DIR_NAME = 'before-storybook';
@@ -117,12 +118,6 @@ const runGenerators = async (
 
   const limit = pLimit(maxConcurrentTasks);
 
-  let controller: AbortController;
-  if (localRegistry) {
-    console.log(`⚙️ Starting local registry: ${LOCAL_REGISTRY_URL}`);
-    controller = await runRegistry({ debug: true });
-  }
-
   await Promise.all(
     generators.map(({ dirName, name, script, expected }) =>
       limit(async () => {
@@ -167,8 +162,10 @@ const runGenerators = async (
         // Remove node_modules to save space and avoid GH actions failing
         // They're not uploaded to the git repros repo anyway
         if (process.env.CLEANUP_REPRO_NODE_MODULES) {
+          console.log(`🗑️ Removing ${join(beforeDir, 'node_modules')}`);
           await remove(join(beforeDir, 'node_modules'));
-          await remove(join(baseDir, 'node_modules'));
+          console.log(`🗑️ Removing ${join(baseDir, AFTER_DIR_NAME, 'node_modules')}`);
+          await remove(join(baseDir, AFTER_DIR_NAME, 'node_modules'));
         }
 
         console.log(
@@ -180,26 +177,22 @@ const runGenerators = async (
       })
     )
   );
-
-  if (controller) {
-    console.log(`🛑 Stopping local registry: ${LOCAL_REGISTRY_URL}`);
-    controller.abort();
-    console.log(`✅ Stopped`);
-  }
-
-  // FIXME: Kill dangling processes. For some reason in CI,
-  // the abort signal gets executed but the child process kill
-  // does not succeed?!?
-  process.exit(0);
 };
 
-const generate = async ({
-  template,
-  localRegistry,
-}: {
-  template?: string;
-  localRegistry?: boolean;
-}) => {
+export const options = createOptions({
+  template: {
+    type: 'string',
+    description: 'Which template would you like to create?',
+    values: Object.keys(reproTemplates),
+  },
+  localRegistry: {
+    type: 'boolean',
+    description: 'Generate reproduction from local registry?',
+    promptType: false,
+  },
+});
+
+export const generate = async ({ template, localRegistry }: OptionValues<typeof options>) => {
   const generatorConfigs = Object.entries(reproTemplates)
     .map(([dirName, configuration]) => ({
       dirName,
@@ -213,17 +206,26 @@ const generate = async ({
       return true;
     });
 
-  runGenerators(generatorConfigs, localRegistry);
+  await runGenerators(generatorConfigs, localRegistry);
 };
 
-program
-  .description('Create a reproduction from a set of possible templates')
-  .option('--template <template>', 'Create a single template') // change this to allow multiple templates or regex
-  .option('--local-registry', 'Use local registry', false)
-  .action((options) => {
-    generate(options).catch((e) => {
-      console.trace(e);
-      process.exit(1);
-    });
-  })
-  .parse(process.argv);
+if (require.main === module) {
+  program
+    .description('Create a reproduction from a set of possible templates')
+    .option('--template <template>', 'Create a single template') // change this to allow multiple templates or regex
+    .option('--local-registry', 'Use local registry', false)
+    .action((optionValues) => {
+      generate(optionValues)
+        .catch((e) => {
+          console.trace(e);
+          process.exit(1);
+        })
+        .then(() => {
+          // FIXME: Kill dangling processes. For some reason in CI,
+          // the abort signal gets executed but the child process kill
+          // does not succeed?!?
+          process.exit(0);
+        });
+    })
+    .parse(process.argv);
+}
diff --git a/scripts/package.json b/scripts/package.json
index 3a5a8696e48a..a741721e6a5a 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -3,13 +3,16 @@
   "version": "7.0.0-alpha.16",
   "private": true,
   "scripts": {
+    "get-report-message": "ts-node ./get-report-message.ts",
     "get-template": "ts-node ./get-template.ts",
     "lint": "yarn lint:js && yarn lint:md",
     "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",
     "task": "ts-node ./task.ts",
-    "test": "jest --config ./jest.config.js"
+    "test": "jest --config ./jest.config.js",
+    "docs:prettier:write": "cd ../docs && prettier --write ./snippets",
+    "docs:prettier:check": "cd ../docs && prettier --check ./snippets"
   },
   "husky": {
     "hooks": {
@@ -26,39 +29,38 @@
   },
   "resolutions": {
     "@nrwl/cli": "14.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/experimental-utils": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/experimental-utils": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "boxen": "^5.1.2",
     "esbuild": "^0.14.48",
-    "eslint": "^8.26.0",
-    "serialize-javascript": "^3.1.0",
-    "typescript": "~4.6.3"
+    "eslint": "^8.27.0",
+    "serialize-javascript": "^3.1.0"
   },
   "dependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-decorators": "^7.17.2",
-    "@babel/plugin-proposal-export-default-from": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.20.2",
+    "@babel/plugin-proposal-export-default-from": "^7.18.10",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-block-scoping": "^7.16.7",
-    "@babel/plugin-transform-destructuring": "^7.17.3",
-    "@babel/plugin-transform-runtime": "^7.18.9",
-    "@babel/plugin-transform-shorthand-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-flow": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.17.2",
-    "@compodoc/compodoc": "^1.1.18",
-    "@emotion/babel-plugin": "^11.10.2",
-    "@emotion/jest": "^11.10.0",
-    "@jest/globals": "^26.6.2",
-    "@linear/sdk": "^1.21.0",
+    "@babel/plugin-transform-arrow-functions": "^7.18.6",
+    "@babel/plugin-transform-block-scoping": "^7.20.2",
+    "@babel/plugin-transform-destructuring": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-flow": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.1",
+    "@compodoc/compodoc": "^1.1.19",
+    "@emotion/babel-plugin": "^11.10.5",
+    "@emotion/jest": "^11.10.5",
+    "@jest/globals": "^29.3.1",
+    "@linear/sdk": "^1.22.0",
     "@nrwl/cli": "14.6.1",
     "@nrwl/nx-cloud": "14.6.0",
     "@nrwl/workspace": "14.6.1",
@@ -78,24 +80,23 @@
     "@types/escodegen": "^0.0.6",
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^9.0.6",
-    "@types/jest": "^26.0.16",
     "@types/js-yaml": "^3.12.6",
-    "@types/node": "^16.0.0",
+    "@types/node": "^16.0.0 || ^18.0.0",
     "@types/node-cleanup": "^2.1.1",
     "@types/node-fetch": "^2.5.7",
     "@types/prompts": "2.0.11",
-    "@types/react": "^16.14.23",
-    "@types/react-dom": "^16.9.14",
+    "@types/react": "^16.14.34",
+    "@types/react-dom": "^16.9.17",
     "@types/semver": "^7.3.4",
     "@types/serve-static": "^1.13.8",
     "@types/shelljs": "^0.8.7",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/experimental-utils": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/experimental-utils": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.5",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "^8.3.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^3.0.1",
@@ -104,6 +105,7 @@
     "codecov": "^3.8.1",
     "commander": "^6.2.1",
     "cross-env": "^7.0.3",
+    "cross-spawn": "^7.0.3",
     "danger": "^10.6.2",
     "detect-port": "^1.3.0",
     "ejs": "^3.1.8",
@@ -111,7 +113,7 @@
     "enzyme-adapter-react-16": "^1.15.5",
     "esbuild": "^0.14.48",
     "esbuild-plugin-alias": "^0.2.1",
-    "eslint": "^8.26.0",
+    "eslint": "^8.27.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-storybook": "^0.6.6",
@@ -123,17 +125,13 @@
     "glob": "^7.1.6",
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom": "^26.6.2",
-    "jest-environment-jsdom-thirteen": "^1.0.1",
-    "jest-enzyme": "^7.1.2",
-    "jest-image-snapshot": "^4.3.0",
-    "jest-jasmine2": "^26.6.3",
-    "jest-junit": "^13.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-image-snapshot": "^6.0.0",
+    "jest-junit": "^14.0.1",
     "jest-os-detection": "^1.3.1",
-    "jest-raw-loader": "^1.0.1",
-    "jest-serializer-html": "^7.0.0",
-    "jest-watch-typeahead": "^0.6.1",
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^2.2.1",
     "js-yaml": "^3.14.1",
     "junit-xml": "^1.2.0",
     "lint-staged": "^10.5.4",
@@ -146,7 +144,7 @@
     "npmlog": "^5.0.1",
     "nx": "14.6.1",
     "p-limit": "^3.1.0",
-    "prettier": ">=2.2.1 <=3.0.0",
+    "prettier": "^2.7.1",
     "pretty-hrtime": "^1.0.0",
     "process": "^0.11.10",
     "prompts": "^2.4.0",
@@ -167,10 +165,9 @@
     "tempy": "^1.0.0",
     "trash": "^7.0.0",
     "ts-dedent": "^2.0.0",
-    "ts-jest": "^26.4.4",
     "ts-node": "^10.4.0",
     "tsup": "^6.2.2",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
     "util": "^0.12.4",
     "wait-on": "^5.2.1",
     "window-size": "^1.1.1",
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
index b5dd30121603..9da70c78d036 100755
--- a/scripts/prepare/bundle.ts
+++ b/scripts/prepare/bundle.ts
@@ -15,7 +15,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     name,
     dependencies,
     peerDependencies,
-    bundler: { entries, platform, pre, post },
+    bundler: { entries = [], untypedEntries = [], platform, pre, post },
   } = await fs.readJson(join(cwd, 'package.json'));
 
   const tsnodePath = join(__dirname, '..', 'node_modules', '.bin', 'ts-node');
@@ -32,38 +32,40 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     await fs.emptyDir(join(process.cwd(), 'dist'));
   }
 
-  if (!optimized) {
-    await Promise.all(
-      entries.map(async (file: string) => {
-        console.log(`skipping generating types for ${file}`);
-        const { name: entryName, dir } = path.parse(file);
-  
-        const pathName = join(process.cwd(), dir.replace('./src', 'dist'), `${entryName}.d.ts`);
-        const srcName = join(process.cwd(), file);
-  
-        const rel = relative(dirname(pathName), dirname(srcName)).split(path.sep).join(path.posix.sep);
-  
-        await fs.ensureFile(pathName);
-        await fs.writeFile(
-          pathName,
-          dedent`
-          // devmode
-          export * from '${rel}/${entryName}';
-        `
-        );
-      })
-    );
-  }
-  
   const tsConfigPath = join(cwd, 'tsconfig.json');
   const tsConfigExists = await fs.pathExists(tsConfigPath);
+
   await Promise.all([
+    // SHIM DTS FILES (only for development)
+    ...(optimized
+      ? []
+      : entries.map(async (file: string) => {
+          const { name: entryName, dir } = path.parse(file);
+
+          const pathName = join(process.cwd(), dir.replace('./src', 'dist'), `${entryName}.d.ts`);
+          const srcName = join(process.cwd(), file);
+
+          const rel = relative(dirname(pathName), dirname(srcName))
+            .split(path.sep)
+            .join(path.posix.sep);
+
+          await fs.ensureFile(pathName);
+          await fs.writeFile(
+            pathName,
+            dedent`
+              // dev-mode
+              export * from '${rel}/${entryName}';
+            `
+          );
+        })),
+
+    // BROWSER EMS
     build({
-      entry: entries.map((e: string) => slash(join(cwd, e))),
+      silent: true,
+      entry: [...entries, ...untypedEntries].map((e: string) => slash(join(cwd, e))),
       watch,
       ...(tsConfigExists ? { tsconfig: tsConfigPath } : {}),
       outDir: join(process.cwd(), 'dist'),
-      // sourcemap: optimized,
       format: ['esm'],
       target: 'chrome100',
       clean: !watch,
@@ -86,17 +88,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       esbuildOptions: (c) => {
         /* eslint-disable no-param-reassign */
         c.conditions = ['module'];
-        c.define = optimized
-          ? {
-              'process.env.NODE_ENV': "'production'",
-              'process.env': '{}',
-              global: 'window',
-            }
-          : {
-              'process.env.NODE_ENV': "'development'",
-              'process.env': '{}',
-              global: 'window',
-            };
+        c.logLevel = 'error';
         c.platform = platform || 'browser';
         c.legalComments = 'none';
         c.minifyWhitespace = optimized;
@@ -105,8 +97,11 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         /* eslint-enable no-param-reassign */
       },
     }),
+
+    // NODE CJS
     build({
-      entry: entries.map((e: string) => slash(join(cwd, e))),
+      silent: true,
+      entry: [...entries, ...untypedEntries].map((e: string) => slash(join(cwd, e))),
       watch,
       outDir: join(process.cwd(), 'dist'),
       ...(tsConfigExists ? { tsconfig: tsConfigPath } : {}),
@@ -118,6 +113,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
       esbuildOptions: (c) => {
         /* eslint-disable no-param-reassign */
+        c.logLevel = 'error';
         c.platform = 'node';
         c.legalComments = 'none';
         c.minifyWhitespace = optimized;
@@ -141,7 +137,7 @@ run({ cwd, flags }).catch((err: unknown) => {
   // Seems to have something to do with running JSON.parse() on binary / base64 encoded sourcemaps
   // in @cspotcode/source-map-support
   if (err instanceof Error) {
-    console.error(err.message);
+    console.error(err.stack);
   }
   process.exit(1);
 });
diff --git a/scripts/task.ts b/scripts/task.ts
index 597483401a27..3defcc6bd6bb 100644
--- a/scripts/task.ts
+++ b/scripts/task.ts
@@ -13,6 +13,7 @@ import { compile } from './tasks/compile';
 import { check } from './tasks/check';
 import { publish } from './tasks/publish';
 import { runRegistryTask } from './tasks/run-registry';
+import { generate } from './tasks/generate';
 import { sandbox } from './tasks/sandbox';
 import { dev } from './tasks/dev';
 import { smokeTest } from './tasks/smoke-test';
@@ -24,7 +25,7 @@ import { e2eTests } from './tasks/e2e-tests';
 
 import { allTemplates as TEMPLATES } from '../code/lib/cli/src/repro-templates';
 
-const sandboxDir = resolve(__dirname, '../sandbox');
+const sandboxDir = process.env.SANDBOX_ROOT || resolve(__dirname, '../sandbox');
 const codeDir = resolve(__dirname, '../code');
 const junitDir = resolve(__dirname, '../test-results');
 
@@ -60,7 +61,7 @@ export type Task = {
   /**
    * Which tasks must be ready before this task can run
    */
-  dependsOn?: TaskKey[] | ((options: PassedOptionValues) => TaskKey[]);
+  dependsOn?: TaskKey[] | ((details: TemplateDetails, options: PassedOptionValues) => TaskKey[]);
   /**
    * Is this task already "ready", and potentially not required?
    */
@@ -87,6 +88,7 @@ export const tasks = {
   publish,
   'run-registry': runRegistryTask,
   // These tasks pertain to a single sandbox in the ../sandboxes dir
+  generate,
   sandbox,
   dev,
   'smoke-test': smokeTest,
@@ -142,11 +144,6 @@ export const options = createOptions({
     inverse: true,
     promptType: false,
   },
-  fromLocalRepro: {
-    type: 'boolean',
-    description: 'Create the template from a local repro (rather than degitting it)?',
-    promptType: false,
-  },
   dryRun: {
     type: 'boolean',
     description: "Don't execute commands, just list them (dry run)?",
@@ -162,6 +159,11 @@ export const options = createOptions({
     description: 'Store results in junit format?',
     promptType: false,
   },
+  skipTemplateStories: {
+    type: 'boolean',
+    description: 'Do not include template stories and their addons',
+    promptType: false,
+  },
 });
 
 type PassedOptionValues = Omit<OptionValues<typeof options>, 'task' | 'startFrom' | 'junit'>;
@@ -176,11 +178,18 @@ async function writeJunitXml(
   taskKey: TaskKey,
   templateKey: TemplateKey,
   startTime: Date,
-  err?: Error
+  err?: Error,
+  systemError?: boolean
 ) {
+  let errorData = {};
+  if (err) {
+    // we want to distinguish whether the error comes from the tests we are running or from arbitrary code
+    errorData = systemError ? { errors: [{ message: err.stack }] } : { errors: [err] };
+  }
+
   const name = `${taskKey} - ${templateKey}`;
   const time = (Date.now() - +startTime) / 1000;
-  const testCase = { name, assertions: 1, time, ...(err && { errors: [err] }) };
+  const testCase = { name, assertions: 1, time, ...errorData };
   const suite = { name, timestamp: startTime, time, testCases: [testCase] };
   const junitXml = getJunitXml({ time, name, suites: [suite] });
   const path = getJunitFilename(taskKey);
@@ -197,7 +206,7 @@ function getTaskKey(task: Task): TaskKey {
  * Get a list of tasks that need to be (possibly) run, in order, to
  * be able to run `finalTask`.
  */
-function getTaskList(finalTask: Task, optionValues: PassedOptionValues) {
+function getTaskList(finalTask: Task, details: TemplateDetails, optionValues: PassedOptionValues) {
   const taskDeps = new Map<Task, Task[]>();
   // Which tasks depend on a given task
   const tasksThatDepend = new Map<Task, Task[]>();
@@ -213,7 +222,9 @@ function getTaskList(finalTask: Task, optionValues: PassedOptionValues) {
     tasksThatDepend.set(task, dependent ? [dependent] : []);
 
     const dependedTaskNames =
-      typeof task.dependsOn === 'function' ? task.dependsOn(optionValues) : task.dependsOn || [];
+      typeof task.dependsOn === 'function'
+        ? task.dependsOn(details, optionValues)
+        : task.dependsOn || [];
     const dependedTasks = dependedTaskNames.map((n) => tasks[n]);
     taskDeps.set(task, dependedTasks);
 
@@ -281,7 +292,7 @@ async function runTask(task: Task, details: TemplateDetails, optionValues: Passe
     const hasJunitFile = await pathExists(junitFilename);
     // If there's a non-test related error (junit report has not been reported already), we report the general failure in a junit report
     if (junitFilename && !hasJunitFile) {
-      await writeJunitXml(getTaskKey(task), details.key, startTime, err);
+      await writeJunitXml(getTaskKey(task), details.key, startTime, err, true);
     }
 
     throw err;
@@ -312,7 +323,7 @@ async function run() {
     junitFilename: junit && getJunitFilename(taskKey),
   };
 
-  const { sortedTasks, tasksThatDepend } = getTaskList(finalTask, optionValues);
+  const { sortedTasks, tasksThatDepend } = getTaskList(finalTask, details, optionValues);
   const sortedTasksReady = await Promise.all(
     sortedTasks.map((t) => t.ready(details, optionValues))
   );
diff --git a/scripts/tasks/chromatic.ts b/scripts/tasks/chromatic.ts
index 343ad47b6d69..a266d524e5b5 100644
--- a/scripts/tasks/chromatic.ts
+++ b/scripts/tasks/chromatic.ts
@@ -13,7 +13,7 @@ export const chromatic: Task = {
     const token = process.env[tokenEnvVarName];
 
     await exec(
-      `npx chromatic \
+      `npx chromatic@6.11.2 \
           --exit-zero-on-changes \
           --storybook-build-dir=${builtSandboxDir} \
           --junit-report=${junitFilename} \
diff --git a/scripts/tasks/generate.ts b/scripts/tasks/generate.ts
new file mode 100644
index 000000000000..80b527895a82
--- /dev/null
+++ b/scripts/tasks/generate.ts
@@ -0,0 +1,30 @@
+import { pathExists, remove } from 'fs-extra';
+import { join, resolve } from 'path';
+
+import type { Task } from '../task';
+
+const logger = console;
+const reprosDir = resolve(__dirname, '../../repros');
+
+export const generate: Task = {
+  description: 'Create the template repro',
+  dependsOn: ['run-registry'],
+  async ready({ key }) {
+    return pathExists(join(reprosDir, key));
+  },
+  async run(details) {
+    const reproDir = join(reprosDir, details.key);
+    if (await this.ready(details)) {
+      logger.info('🗑  Removing old repro dir');
+      await remove(reproDir);
+    }
+
+    // This uses an async import as it depends on `lib/cli` which requires `code` to be installed.
+    const { generate: generateRepro } = await import('../next-repro-generators/generate-repros');
+
+    await generateRepro({
+      template: details.key,
+      localRegistry: true,
+    });
+  },
+};
diff --git a/scripts/tasks/install.ts b/scripts/tasks/install.ts
index f57d593c0bdf..e98be69d65ff 100644
--- a/scripts/tasks/install.ts
+++ b/scripts/tasks/install.ts
@@ -1,4 +1,4 @@
-import { pathExists } from 'fs-extra';
+import { pathExists, remove } from 'fs-extra';
 import { join } from 'path';
 import type { Task } from '../task';
 import { exec } from '../utils/exec';
@@ -9,6 +9,9 @@ export const install: Task = {
     return pathExists(join(codeDir, 'node_modules'));
   },
   async run({ codeDir }, { dryRun, debug }) {
-    return exec(`yarn install`, { cwd: codeDir }, { dryRun, debug });
+    await exec(`yarn install`, { cwd: codeDir }, { dryRun, debug });
+
+    // these are webpack4 types, we we should never use
+    await remove(join(codeDir, 'node_modules', '@types', 'webpack'));
   },
 };
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index aaf608d531e6..17c97f02dbba 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -4,7 +4,6 @@
 /* eslint-disable no-restricted-syntax, no-await-in-loop */
 import { copy, ensureSymlink, ensureDir, existsSync, pathExists } from 'fs-extra';
 import { join, resolve, sep } from 'path';
-import dedent from 'ts-dedent';
 
 import type { Task } from '../task';
 import { executeCLIStep, steps } from '../utils/cli-step';
@@ -40,23 +39,15 @@ export const essentialsAddons = [
 
 export const create: Task['run'] = async (
   { key, template, sandboxDir },
-  { addon: addons, fromLocalRepro, dryRun, debug }
+  { addon: addons, dryRun, debug, skipTemplateStories }
 ) => {
   const parentDir = resolve(sandboxDir, '..');
   await ensureDir(parentDir);
 
-  if (fromLocalRepro) {
+  if ('inDevelopment' in template && template.inDevelopment) {
     const srcDir = join(reprosDir, key, 'after-storybook');
     if (!existsSync(srcDir)) {
-      throw new Error(dedent`
-          Missing repro directory '${srcDir}'!
-
-          To run sandbox against a local repro, you must have already generated
-          the repro template in the /repros directory using:
-          the repro template in the /repros directory using:
-
-          yarn generate-repros-next --template ${key}
-        `);
+      throw new Error(`Missing repro directory '${srcDir}', did the generate task run?`);
     }
     await copy(srcDir, sandboxDir);
   } else {
@@ -70,9 +61,11 @@ export const create: Task['run'] = async (
   }
 
   const cwd = sandboxDir;
-  for (const addon of addons) {
-    const addonName = `@storybook/addon-${addon}`;
-    await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
+  if (!skipTemplateStories) {
+    for (const addon of addons) {
+      const addonName = `@storybook/addon-${addon}`;
+      await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
+    }
   }
 
   const mainConfig = await readMainConfig({ cwd });
@@ -231,8 +224,6 @@ function setSandboxViteFinal(mainConfig: ConfigFile) {
   );
 }
 
-
-
 // Update the stories field to ensure that no TS files
 // that are linked from the renderer are picked up in non-TS projects
 function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
@@ -244,7 +235,6 @@ function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
     ? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx'))
     : stories;
 
-
   mainConfig.setFieldValue(['stories'], [...updatedStories]);
 }
 
@@ -257,7 +247,7 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string) {
     titlePrefix: path,
     files: '**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
   };
-  
+
   mainConfig.setFieldValue(['stories'], [...stories, entry]);
 }
 
@@ -278,7 +268,7 @@ async function linkPackageStories(
     : resolve(cwd, 'template-stories', packageDir);
   await ensureSymlink(source, target);
 
-  if (!linkInDir) addStoriesEntry(mainConfig, packageDir)
+  if (!linkInDir) addStoriesEntry(mainConfig, packageDir);
 
   // Add `previewAnnotation` entries of the form
   //   './template-stories/lib/store/preview.[tj]s'
@@ -320,7 +310,6 @@ function addExtraDependencies({
   }
 }
 
-
 export const addStories: Task['run'] = async (
   { sandboxDir, template },
   { addon: extraAddons, dryRun, debug }
@@ -332,11 +321,7 @@ export const addStories: Task['run'] = async (
 
   // Ensure that we match the right stories in the stories directory
   const packageJson = await import(join(cwd, 'package.json'));
-  updateStoriesField(
-    mainConfig,
-    detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT
-  );
-
+  updateStoriesField(mainConfig, detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT);
 
   // Link in the template/components/index.js from store, the renderer and the addons
   const rendererPath = await workspacePath('renderer', template.expected.renderer);
@@ -345,7 +330,7 @@ export const addStories: Task['run'] = async (
     resolve(cwd, storiesPath, 'components')
   );
   addPreviewAnnotations(mainConfig, [`.${sep}${join(storiesPath, 'components')}`]);
-  
+
   // Add stories for the renderer. NOTE: these *do* need to be processed by the framework build system
   await linkPackageStories(rendererPath, {
     mainConfig,
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index 5c1795649601..286199b5045d 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -6,7 +6,16 @@ const logger = console;
 
 export const sandbox: Task = {
   description: 'Create the sandbox from a template',
-  dependsOn: ({ link }) => (link ? ['compile'] : ['compile', 'run-registry']),
+  dependsOn: ({ template }, { link }) => {
+    if ('inDevelopment' in template && template.inDevelopment) {
+      if (link) throw new Error('Cannot link an in development template');
+
+      return ['run-registry', 'generate'];
+    }
+
+    if (link) return ['compile'];
+    return ['run-registry'];
+  },
   async ready({ sandboxDir }) {
     return pathExists(sandboxDir);
   },
@@ -16,11 +25,10 @@ export const sandbox: Task = {
       await remove(details.sandboxDir);
     }
     const { create, install, addStories } = await import('./sandbox-parts');
-
-    // while (true);
-
     await create(details, options);
     await install(details, options);
-    await addStories(details, options);
+    if (!options.skipTemplateStories) {
+      await addStories(details, options);
+    }
   },
 };
diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json
index 22f702b3c681..4c508e21aac4 100644
--- a/scripts/tsconfig.json
+++ b/scripts/tsconfig.json
@@ -13,8 +13,14 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "strictBindCallApply": true,
-    "lib": ["dom", "esnext"],
-    "types": ["node", "jest"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "types": [
+      "node",
+      "jest"
+    ],
     "strict": false,
     "strictNullChecks": false,
     "forceConsistentCasingInFileNames": true,
@@ -24,24 +30,28 @@
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
     "paths": {
-      "verdaccio": ["./typings.d.ts"]
+      "verdaccio": [
+        "./typings.d.ts"
+      ]
     }
   },
   "exclude": [
     "dist",
     "**/dist",
     "node_modules",
-    "**/node_modules",
-    "**/*.spec.ts",
-    "**/__tests__",
-    "**/setup-jest.ts"
+    "**/node_modules"
+  ],
+  "include": [
+    "./**/*",
+    "./.eslintrc.js"
   ],
-  "include": ["./**/*", "./.eslintrc.js"],
   "ts-node": {
     "transpileOnly": true,
     "files": true,
     "compilerOptions": {
-      "types": ["node"]
+      "types": [
+        "node"
+      ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 33682b64b50c..8ec4709bac20 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -61,7 +61,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/cli@npm:^7.17.6":
+"@babel/cli@npm:^7.19.3":
   version: 7.19.3
   resolution: "@babel/cli@npm:7.19.3"
   dependencies:
@@ -104,7 +104,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.17.5, @babel/core@npm:^7.7.5":
+"@babel/compat-data@npm:^7.20.0, @babel/compat-data@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/compat-data@npm:7.20.1"
+  checksum: d27b97d47be1b8928153525e1ffa1faa9068c2eae65bf4c0fbce1595841f6f52f7492a625c911688d32a91cb31f082ee1f72f3b9e43a970361215b38e2c28fc5
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.17.5":
   version: 7.19.3
   resolution: "@babel/core@npm:7.19.3"
   dependencies:
@@ -127,7 +134,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.19.3, @babel/generator@npm:^7.4.0, @babel/generator@npm:^7.7.2":
+"@babel/core@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/core@npm:7.20.2"
+  dependencies:
+    "@ampproject/remapping": ^2.1.0
+    "@babel/code-frame": ^7.18.6
+    "@babel/generator": ^7.20.2
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-module-transforms": ^7.20.2
+    "@babel/helpers": ^7.20.1
+    "@babel/parser": ^7.20.2
+    "@babel/template": ^7.18.10
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.2
+    convert-source-map: ^1.7.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.1
+    semver: ^6.3.0
+  checksum: 7c2a040db56f9807a7b11f19a056a842864512b5f3e5ca00491dae8501b9a19a57ae8c268373bc425bc734d47d6d01db711cc6e662bfb24794baa15e73f6fd20
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.19.3, @babel/generator@npm:^7.7.2":
   version: 7.19.3
   resolution: "@babel/generator@npm:7.19.3"
   dependencies:
@@ -138,6 +168,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.20.1, @babel/generator@npm:^7.20.2":
+  version: 7.20.4
+  resolution: "@babel/generator@npm:7.20.4"
+  dependencies:
+    "@babel/types": ^7.20.2
+    "@jridgewell/gen-mapping": ^0.3.2
+    jsesc: ^2.5.1
+  checksum: 48181434693f3348804f01dad53b5fd293319bc71119662bdfa64ccc3c32c5cf1a51b2ea3f7091310c950a894f418e05f3c957ee3f7f1790443487a93608d57e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-annotate-as-pure@npm:7.18.6"
@@ -171,6 +212,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.20.0":
+  version: 7.20.0
+  resolution: "@babel/helper-compilation-targets@npm:7.20.0"
+  dependencies:
+    "@babel/compat-data": ^7.20.0
+    "@babel/helper-validator-option": ^7.18.6
+    browserslist: ^4.21.3
+    semver: ^6.3.0
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: d4250dec03d1eef1e2c3f1bed1ebf4e0b6899762111023d07c1c6cb1ce7f8456344bf488355f0780e92fc6ce0e25f977ae50b8b638291d55d0154f13b99c7530
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.19.0":
   version: 7.19.0
   resolution: "@babel/helper-create-class-features-plugin@npm:7.19.0"
@@ -188,6 +243,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.20.2"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.18.6
+    "@babel/helper-environment-visitor": ^7.18.9
+    "@babel/helper-function-name": ^7.19.0
+    "@babel/helper-member-expression-to-functions": ^7.18.9
+    "@babel/helper-optimise-call-expression": ^7.18.6
+    "@babel/helper-replace-supers": ^7.19.1
+    "@babel/helper-split-export-declaration": ^7.18.6
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 93ae5401481b59b9fbed64c77b1c83d6e83f361fe2963fd521cf6863b8ff70b7173499de8662900c33d7487c0913ee866d5a0d87d4c19a873f479df99605e686
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.19.0":
   version: 7.19.0
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.19.0"
@@ -285,6 +357,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.19.6, @babel/helper-module-transforms@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-module-transforms@npm:7.20.2"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.18.9
+    "@babel/helper-module-imports": ^7.18.6
+    "@babel/helper-simple-access": ^7.20.2
+    "@babel/helper-split-export-declaration": ^7.18.6
+    "@babel/helper-validator-identifier": ^7.19.1
+    "@babel/template": ^7.18.10
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.2
+  checksum: 9c5e9853a5b83cb7f4ec5ac15ae0e57a9ea47be47c57bb7ef56b6b3d55eb30547bfa9acb90f6a2b25f94764765c10de196908eba745a27b2bcf4fefcbb314ee7
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-optimise-call-expression@npm:7.18.6"
@@ -301,6 +389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-plugin-utils@npm:7.20.2"
+  checksum: bf4de040e57b7ddff36ea599e963c391eb246d5a95207bb9ef3e33073c451bcc0821e3a9cc08dfede862a6dcc110d7e6e7d9a483482f852be358c5b60add499c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.18.6, @babel/helper-remap-async-to-generator@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/helper-remap-async-to-generator@npm:7.18.9"
@@ -337,6 +432,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-simple-access@npm:^7.19.4, @babel/helper-simple-access@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/helper-simple-access@npm:7.20.2"
+  dependencies:
+    "@babel/types": ^7.20.2
+  checksum: 79cea28155536c74b37839748caea534bc413fac8c512e6101e9eecfe83f670db77bc782bdb41114caecbb1e2a73007ff6015d6a5ce58cae5363b8c5bd2dcee9
+  languageName: node
+  linkType: hard
+
 "@babel/helper-skip-transparent-expression-wrappers@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.18.9"
@@ -362,6 +466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.19.4":
+  version: 7.19.4
+  resolution: "@babel/helper-string-parser@npm:7.19.4"
+  checksum: e20c81582e75df2a020a1c547376668a6e1e1c2ca535a6b7abb25b83d5536c99c0d113184bbe87c1a26e923a9bb0c6e5279fca8db6bd609cd3499fafafc01598
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.18.6, @babel/helper-validator-identifier@npm:^7.19.1":
   version: 7.19.1
   resolution: "@babel/helper-validator-identifier@npm:7.19.1"
@@ -399,6 +510,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/helpers@npm:7.20.1"
+  dependencies:
+    "@babel/template": ^7.18.10
+    "@babel/traverse": ^7.20.1
+    "@babel/types": ^7.20.0
+  checksum: be1096271946b265ea1b9391d3fa1a8690230858081f6ba35ef3c0030ec0113aa9c350a764c65b1d162584c73a853c1ed2dac294e9dd113885097b172078f0b6
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/highlight@npm:7.18.6"
@@ -410,7 +532,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.19.3, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.7.0":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.18.10, @babel/parser@npm:^7.19.3, @babel/parser@npm:^7.7.0":
   version: 7.19.3
   resolution: "@babel/parser@npm:7.19.3"
   bin:
@@ -419,6 +541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.20.1, @babel/parser@npm:^7.20.2":
+  version: 7.20.3
+  resolution: "@babel/parser@npm:7.20.3"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 6bd67dd32683cd3a8d4c5ed19085fc47582361eb28cf1dbd03f655350827002e3d8abc8be7c9e3a79d17668bf855899a4bd7f261b7fafcc82870bd9de18f9016
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.18.6"
@@ -457,7 +588,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:^7.16.7, @babel/plugin-proposal-class-properties@npm:^7.18.6":
+"@babel/plugin-proposal-async-generator-functions@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.1"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.18.9
+    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-remap-async-to-generator": ^7.18.9
+    "@babel/plugin-syntax-async-generators": ^7.8.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: b99ba70c51143921bc84f37b59cf1cbb6b264301e49048fcc4964a15865e865c3ddb48d4ac7a3d2a48c186eb8964ff975370a99082b23484b046d3206f988590
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-proposal-class-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
   dependencies:
@@ -482,18 +627,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-decorators@npm:^7.17.2":
-  version: 7.19.3
-  resolution: "@babel/plugin-proposal-decorators@npm:7.19.3"
+"@babel/plugin-proposal-decorators@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-proposal-decorators@npm:7.20.2"
   dependencies:
-    "@babel/helper-create-class-features-plugin": ^7.19.0
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-create-class-features-plugin": ^7.20.2
+    "@babel/helper-plugin-utils": ^7.20.2
     "@babel/helper-replace-supers": ^7.19.1
     "@babel/helper-split-export-declaration": ^7.18.6
     "@babel/plugin-syntax-decorators": ^7.19.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b51493858cf9be2a39fc9e680c058e1cc1c02962f454cbeb9ac371265bed899d09edfa967ffdefb19c57b83b69c5650d5367ff4dc284cb2f9cbf0a0fb9a257fc
+  checksum: 814699de0c0ca8eda6161b70ad0e454107bbb366d4c3fa9e20e15a824cd08429c6bbe7d6ea474e3ceaedd4594e23f0a5d06c481c81f2dca33b35f7ad273c081a
   languageName: node
   linkType: hard
 
@@ -509,7 +654,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-export-default-from@npm:^7.16.7":
+"@babel/plugin-proposal-export-default-from@npm:^7.18.10":
   version: 7.18.10
   resolution: "@babel/plugin-proposal-export-default-from@npm:7.18.10"
   dependencies:
@@ -581,7 +726,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-object-rest-spread@npm:^7.17.3, @babel/plugin-proposal-object-rest-spread@npm:^7.18.9":
+"@babel/plugin-proposal-object-rest-spread@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.18.9"
   dependencies:
@@ -596,6 +741,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-proposal-object-rest-spread@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.2"
+  dependencies:
+    "@babel/compat-data": ^7.20.1
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
+    "@babel/plugin-transform-parameters": ^7.20.1
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2d803fd45b42312580cab2197ce9bbd4d12b60c9560bfacb2398178baf3d5c9d29538959a40463021b831c32eeb2a4fa109f1069361f6de80a17a4344ba80b7a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-proposal-optional-catch-binding@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-optional-catch-binding@npm:7.18.6"
@@ -621,7 +781,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-private-methods@npm:^7.16.11, @babel/plugin-proposal-private-methods@npm:^7.18.6":
+"@babel/plugin-proposal-private-methods@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-private-methods@npm:7.18.6"
   dependencies:
@@ -769,6 +929,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-assertions@npm:^7.20.0":
+  version: 7.20.0
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.20.0"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.19.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0ac0176984ad799b39264070007737c514ea95e4b3c3c515ecddef958629abcd3c8e8810fd60fb63de5a8f3f7022dd2c7af7580b819a9207acc372c8b8ec878e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-meta@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
@@ -791,7 +962,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6":
+"@babel/plugin-syntax-jsx@npm:^7.17.12, @babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
   dependencies:
@@ -901,7 +1072,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.16.7, @babel/plugin-transform-arrow-functions@npm:^7.18.6":
+"@babel/plugin-transform-arrow-functions@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.18.6"
   dependencies:
@@ -936,7 +1107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.16.7, @babel/plugin-transform-block-scoping@npm:^7.18.9":
+"@babel/plugin-transform-block-scoping@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/plugin-transform-block-scoping@npm:7.18.9"
   dependencies:
@@ -947,6 +1118,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-block-scoping@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.20.2"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.20.2
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: e1cf333d384c642c9f44c57fe14f384e11e91627e7df37256821891686e0464f1c3b7de93312ec46155a8f1313019f31aed6ce878d22259764f8835509ecb60a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-classes@npm:^7.19.0":
   version: 7.19.0
   resolution: "@babel/plugin-transform-classes@npm:7.19.0"
@@ -966,6 +1148,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-classes@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-classes@npm:7.20.2"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.18.6
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-environment-visitor": ^7.18.9
+    "@babel/helper-function-name": ^7.19.0
+    "@babel/helper-optimise-call-expression": ^7.18.6
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/helper-replace-supers": ^7.19.1
+    "@babel/helper-split-export-declaration": ^7.18.6
+    globals: ^11.1.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: b9956a774a1d10d20e157abe4e1834156c46152ec3b5231b2f4a0e7fe4e2b934465d5e39872d424b4baa55944f95646ca6f2b23070ac3a824223fea918981d11
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-computed-properties@npm:^7.18.9":
   version: 7.18.9
   resolution: "@babel/plugin-transform-computed-properties@npm:7.18.9"
@@ -977,7 +1178,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.17.3, @babel/plugin-transform-destructuring@npm:^7.18.13":
+"@babel/plugin-transform-destructuring@npm:^7.18.13":
   version: 7.18.13
   resolution: "@babel/plugin-transform-destructuring@npm:7.18.13"
   dependencies:
@@ -988,6 +1189,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-destructuring@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/plugin-transform-destructuring@npm:7.20.2"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.20.2
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 1989312c031636103d1fc83a6edf9e24f8445a5395a72b8dc9741f98c31dacbf13db7831b651975d9d7ee57381abce299fae8b4bde599f8efa00dd8b7eb8e298
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dotall-regex@npm:^7.18.6, @babel/plugin-transform-dotall-regex@npm:^7.4.4":
   version: 7.18.6
   resolution: "@babel/plugin-transform-dotall-regex@npm:7.18.6"
@@ -1094,6 +1306,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-amd@npm:^7.19.6":
+  version: 7.19.6
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.19.6"
+  dependencies:
+    "@babel/helper-module-transforms": ^7.19.6
+    "@babel/helper-plugin-utils": ^7.19.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 937c3aff2b5fdad44294480ed97208d9799df7f6ef5c0e5d3b01eea387fae9dbdcca5241db359c9c0050917a1a4ebd00cfd0220dffe7823f17ae1c41e960cb88
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-commonjs@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.18.6"
@@ -1108,6 +1332,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-commonjs@npm:^7.19.6":
+  version: 7.19.6
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.19.6"
+  dependencies:
+    "@babel/helper-module-transforms": ^7.19.6
+    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-simple-access": ^7.19.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: a5c504eb3f65ee805d27ab64fb399e3628f1e1e09e61a7764708bf2525a97503f3cd527b71f2b46cf26a18a9ff95fa0507f664600ed68881a58c8e8e6ed9a7d6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-systemjs@npm:^7.19.0":
   version: 7.19.0
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.19.0"
@@ -1123,6 +1360,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-systemjs@npm:^7.19.6":
+  version: 7.19.6
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.19.6"
+  dependencies:
+    "@babel/helper-hoist-variables": ^7.18.6
+    "@babel/helper-module-transforms": ^7.19.6
+    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-validator-identifier": ^7.19.1
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0f05058170f1d2027bda95ae8d57b021698f4d7f33df859c95db072ae80941079c5049ac12bde3bc87311436e9451e5edca8205754e9a4e5b54bd6e4f3ecf2ed
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-umd@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-modules-umd@npm:7.18.6"
@@ -1181,6 +1432,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-parameters@npm:^7.20.1":
+  version: 7.20.3
+  resolution: "@babel/plugin-transform-parameters@npm:7.20.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.20.2
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 34cd3b5c9019cad22e3ec1f7ec16cdab4858fb45073a7ddac8f269e5151c4ce8edece04ef76376767572024b506c1a30024b840371d014df61cd869a889ad16c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-property-literals@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-property-literals@npm:7.18.6"
@@ -1264,9 +1526,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:^7.18.9":
-  version: 7.19.1
-  resolution: "@babel/plugin-transform-runtime@npm:7.19.1"
+"@babel/plugin-transform-runtime@npm:^7.19.6":
+  version: 7.19.6
+  resolution: "@babel/plugin-transform-runtime@npm:7.19.6"
   dependencies:
     "@babel/helper-module-imports": ^7.18.6
     "@babel/helper-plugin-utils": ^7.19.0
@@ -1276,11 +1538,11 @@ __metadata:
     semver: ^6.3.0
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 6b68438aff9558d42366954882d9e0f45df0e324a69c7e36a69155335998f4edbe4752a09d3d1ab2cc4e8f97ed63ad9f9f135b90d3b679d0ef7fecfa3295af39
+  checksum: 39c1a7a6421dbd00d599082b4c38ed1b3ba5844af1249d3860d7de7ce7e6451641ee0fc5b237af4a02f5cd77c7896a2b50799d0f90b1b30b6d2cd92061b2fdff
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.16.7, @babel/plugin-transform-shorthand-properties@npm:^7.18.6":
+"@babel/plugin-transform-shorthand-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.18.6"
   dependencies:
@@ -1467,7 +1729,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.16.7":
+"@babel/preset-env@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/preset-env@npm:7.20.2"
+  dependencies:
+    "@babel/compat-data": ^7.20.1
+    "@babel/helper-compilation-targets": ^7.20.0
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/helper-validator-option": ^7.18.6
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.18.6
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.18.9
+    "@babel/plugin-proposal-async-generator-functions": ^7.20.1
+    "@babel/plugin-proposal-class-properties": ^7.18.6
+    "@babel/plugin-proposal-class-static-block": ^7.18.6
+    "@babel/plugin-proposal-dynamic-import": ^7.18.6
+    "@babel/plugin-proposal-export-namespace-from": ^7.18.9
+    "@babel/plugin-proposal-json-strings": ^7.18.6
+    "@babel/plugin-proposal-logical-assignment-operators": ^7.18.9
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.18.6
+    "@babel/plugin-proposal-numeric-separator": ^7.18.6
+    "@babel/plugin-proposal-object-rest-spread": ^7.20.2
+    "@babel/plugin-proposal-optional-catch-binding": ^7.18.6
+    "@babel/plugin-proposal-optional-chaining": ^7.18.9
+    "@babel/plugin-proposal-private-methods": ^7.18.6
+    "@babel/plugin-proposal-private-property-in-object": ^7.18.6
+    "@babel/plugin-proposal-unicode-property-regex": ^7.18.6
+    "@babel/plugin-syntax-async-generators": ^7.8.4
+    "@babel/plugin-syntax-class-properties": ^7.12.13
+    "@babel/plugin-syntax-class-static-block": ^7.14.5
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
+    "@babel/plugin-syntax-import-assertions": ^7.20.0
+    "@babel/plugin-syntax-json-strings": ^7.8.3
+    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
+    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
+    "@babel/plugin-syntax-numeric-separator": ^7.10.4
+    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
+    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
+    "@babel/plugin-syntax-optional-chaining": ^7.8.3
+    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
+    "@babel/plugin-syntax-top-level-await": ^7.14.5
+    "@babel/plugin-transform-arrow-functions": ^7.18.6
+    "@babel/plugin-transform-async-to-generator": ^7.18.6
+    "@babel/plugin-transform-block-scoped-functions": ^7.18.6
+    "@babel/plugin-transform-block-scoping": ^7.20.2
+    "@babel/plugin-transform-classes": ^7.20.2
+    "@babel/plugin-transform-computed-properties": ^7.18.9
+    "@babel/plugin-transform-destructuring": ^7.20.2
+    "@babel/plugin-transform-dotall-regex": ^7.18.6
+    "@babel/plugin-transform-duplicate-keys": ^7.18.9
+    "@babel/plugin-transform-exponentiation-operator": ^7.18.6
+    "@babel/plugin-transform-for-of": ^7.18.8
+    "@babel/plugin-transform-function-name": ^7.18.9
+    "@babel/plugin-transform-literals": ^7.18.9
+    "@babel/plugin-transform-member-expression-literals": ^7.18.6
+    "@babel/plugin-transform-modules-amd": ^7.19.6
+    "@babel/plugin-transform-modules-commonjs": ^7.19.6
+    "@babel/plugin-transform-modules-systemjs": ^7.19.6
+    "@babel/plugin-transform-modules-umd": ^7.18.6
+    "@babel/plugin-transform-named-capturing-groups-regex": ^7.19.1
+    "@babel/plugin-transform-new-target": ^7.18.6
+    "@babel/plugin-transform-object-super": ^7.18.6
+    "@babel/plugin-transform-parameters": ^7.20.1
+    "@babel/plugin-transform-property-literals": ^7.18.6
+    "@babel/plugin-transform-regenerator": ^7.18.6
+    "@babel/plugin-transform-reserved-words": ^7.18.6
+    "@babel/plugin-transform-shorthand-properties": ^7.18.6
+    "@babel/plugin-transform-spread": ^7.19.0
+    "@babel/plugin-transform-sticky-regex": ^7.18.6
+    "@babel/plugin-transform-template-literals": ^7.18.9
+    "@babel/plugin-transform-typeof-symbol": ^7.18.9
+    "@babel/plugin-transform-unicode-escapes": ^7.18.10
+    "@babel/plugin-transform-unicode-regex": ^7.18.6
+    "@babel/preset-modules": ^0.1.5
+    "@babel/types": ^7.20.2
+    babel-plugin-polyfill-corejs2: ^0.3.3
+    babel-plugin-polyfill-corejs3: ^0.6.0
+    babel-plugin-polyfill-regenerator: ^0.4.1
+    core-js-compat: ^3.25.1
+    semver: ^6.3.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 8e4c86d9acf2557eaca4c55ffe69bb76f30d675f2576e5e1b872ef671acec7c80df3759d77cd33ff934d5a49f26950c4d9e63718c4c3295455bc2df88788d7ad
+  languageName: node
+  linkType: hard
+
+"@babel/preset-flow@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-flow@npm:7.18.6"
   dependencies:
@@ -1495,7 +1842,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.16.7":
+"@babel/preset-react@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-react@npm:7.18.6"
   dependencies:
@@ -1511,7 +1858,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.16.7":
+"@babel/preset-typescript@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/preset-typescript@npm:7.18.6"
   dependencies:
@@ -1543,7 +1890,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0":
+"@babel/runtime@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/runtime@npm:7.20.1"
+  dependencies:
+    regenerator-runtime: ^0.13.10
+  checksum: ec10f4c4cb23d6473b5451ecc44f8993629d56f02dbaa597f40920b3ade49d9ff0f82e752cf768afb48cf9c9e73febab9da393e239a318b2fc8a11136622eea4
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
   dependencies:
@@ -1554,7 +1910,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2":
+"@babel/traverse@npm:^7.19.0, @babel/traverse@npm:^7.19.1, @babel/traverse@npm:^7.19.3, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:^7.7.2":
   version: 7.19.3
   resolution: "@babel/traverse@npm:7.19.3"
   dependencies:
@@ -1572,7 +1928,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
+"@babel/traverse@npm:^7.20.1":
+  version: 7.20.1
+  resolution: "@babel/traverse@npm:7.20.1"
+  dependencies:
+    "@babel/code-frame": ^7.18.6
+    "@babel/generator": ^7.20.1
+    "@babel/helper-environment-visitor": ^7.18.9
+    "@babel/helper-function-name": ^7.19.0
+    "@babel/helper-hoist-variables": ^7.18.6
+    "@babel/helper-split-export-declaration": ^7.18.6
+    "@babel/parser": ^7.20.1
+    "@babel/types": ^7.20.0
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: 6b2611f26bcc52bcdf515ed4932c316b20511f4595ca26a1db71b18273d7e2aaf435156708f968914bbf34a2dfac7c3e6618fffc9169eed5537dcdb85143da5a
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.19.3, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
   version: 7.19.3
   resolution: "@babel/types@npm:7.19.3"
   dependencies:
@@ -1583,6 +1957,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2":
+  version: 7.20.2
+  resolution: "@babel/types@npm:7.20.2"
+  dependencies:
+    "@babel/helper-string-parser": ^7.19.4
+    "@babel/helper-validator-identifier": ^7.19.1
+    to-fast-properties: ^2.0.0
+  checksum: 62bb4665a9fcb149a8791f42c0509c23f6bd5da01c8319d4f49a16b5b49e2bfb97c5f7a99cf7935f94994da059feabaf90c29e3f380684f5328fc33fafb09984
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -1590,19 +1975,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cnakazawa/watch@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "@cnakazawa/watch@npm:1.0.4"
-  dependencies:
-    exec-sh: ^0.3.2
-    minimist: ^1.2.0
-  bin:
-    watch: cli.js
-  checksum: 8678b6f582bdc5ffe59c0d45c2ad21f4ea1d162ec7ddb32e85078fca481c26958f27bcdef6007b8e9a066da090ccf9d31e1753f8de1e5f32466a04227d70dc31
-  languageName: node
-  linkType: hard
-
-"@compodoc/compodoc@npm:^1.1.18":
+"@compodoc/compodoc@npm:^1.1.19":
   version: 1.1.19
   resolution: "@compodoc/compodoc@npm:1.1.19"
   dependencies:
@@ -1703,35 +2076,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.10.2":
-  version: 11.10.2
-  resolution: "@emotion/babel-plugin@npm:11.10.2"
+"@emotion/babel-plugin@npm:^11.10.5":
+  version: 11.10.5
+  resolution: "@emotion/babel-plugin@npm:11.10.5"
   dependencies:
     "@babel/helper-module-imports": ^7.16.7
     "@babel/plugin-syntax-jsx": ^7.17.12
     "@babel/runtime": ^7.18.3
     "@emotion/hash": ^0.9.0
     "@emotion/memoize": ^0.8.0
-    "@emotion/serialize": ^1.1.0
+    "@emotion/serialize": ^1.1.1
     babel-plugin-macros: ^3.1.0
     convert-source-map: ^1.5.0
     escape-string-regexp: ^4.0.0
     find-root: ^1.1.0
     source-map: ^0.5.7
-    stylis: 4.0.13
+    stylis: 4.1.3
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 571876a4b1445c07c1a54721ab5ae72dbe4194586bceacf2b1891dce5e86755bff7e84c00af9fd047d8b96bf6a407ad8d6fcc2c788174857f84ec3c316c5c35c
+  checksum: b877d089c07ad7e571f7d1b8393c21b8ab54dc24b4b7533827c00549a4fe5345af55869f57c139f7dec09615b93ca66195aa31023bbc5af89cf3ec85e80a2281
   languageName: node
   linkType: hard
 
-"@emotion/css-prettifier@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/css-prettifier@npm:1.1.0"
+"@emotion/css-prettifier@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@emotion/css-prettifier@npm:1.1.1"
   dependencies:
     "@emotion/memoize": ^0.8.0
-    stylis: 4.0.13
-  checksum: 0ca881d7096678de456ed74ca2a28ed7f7a473829f7b91f8d9480d1404afb14f36adfbe8a5f789ef7cfabd08ac3dd9aa56d6285babd6b6ed031f2e92dc23fe1b
+    stylis: 4.1.3
+  checksum: b921139e04d443ea3c8170cb90ae3c758e9effacdba99c5edab5d69400bcf464da283d20a92b4a1e8c74bb3e5feb8ebaee2e74ff5c84d5eab9989b000e5c7c42
   languageName: node
   linkType: hard
 
@@ -1742,24 +2115,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/jest@npm:^11.10.0":
-  version: 11.10.0
-  resolution: "@emotion/jest@npm:11.10.0"
+"@emotion/jest@npm:^11.10.5":
+  version: 11.10.5
+  resolution: "@emotion/jest@npm:11.10.5"
   dependencies:
     "@babel/runtime": ^7.18.3
-    "@emotion/css-prettifier": ^1.1.0
+    "@emotion/css-prettifier": ^1.1.1
     chalk: ^4.1.0
     specificity: ^0.4.1
-    stylis: 4.0.13
+    stylis: 4.1.3
   peerDependencies:
-    "@types/jest": ^26.0.14 || ^27.0.0 || ^28.0.0
+    "@types/jest": ^26.0.14 || ^27.0.0 || ^28.0.0 || ^29.0.0
     enzyme-to-json: ^3.2.1
   peerDependenciesMeta:
     "@types/jest":
       optional: true
     enzyme-to-json:
       optional: true
-  checksum: d1d566e3958fb17d1bc3fe37b398546bdfc92666a34c0281a27108d7630219af0c90ec05633ec7fc55794a5f714d517d1ee9489435620b40ec9982136ad6e16a
+  checksum: 4629a2eac0bf1aa5a590c0fecedfa908325f3c7f66f13811058162e1fe94e2fc5282dbe321f9cb1593a3220e193e88e054ab138276c3f425b4a202ce1d135f17
   languageName: node
   linkType: hard
 
@@ -1770,16 +2143,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@emotion/serialize@npm:1.1.0"
+"@emotion/serialize@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@emotion/serialize@npm:1.1.1"
   dependencies:
     "@emotion/hash": ^0.9.0
     "@emotion/memoize": ^0.8.0
     "@emotion/unitless": ^0.8.0
     "@emotion/utils": ^1.2.0
     csstype: ^3.0.2
-  checksum: a122fc4c34425bc76d0c72b14c8e0617ccc72709fbbed695c506ca493dc478df15eba0c1ec45807e7dd248430b2e0dbf8ba8fe9035832087138e0f8e51ac4100
+  checksum: ea353abbf530ede8b74fe4df30eb626f245f710ce0bfcb9d34e72630a1dede688fddf02b1143f33a1a4ef5b66b70715a3c1cd6a12ec43f5b585ed60d4f3e8712
   languageName: node
   linkType: hard
 
@@ -1946,116 +2319,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/console@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/console@npm:24.9.0"
+"@jest/console@npm:^28.1.1, @jest/console@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "@jest/console@npm:28.1.3"
   dependencies:
-    "@jest/source-map": ^24.9.0
-    chalk: ^2.0.1
-    slash: ^2.0.0
-  checksum: 7fffdd61898c1ecc9d05023a28fdcb5447a87ee78bdd0a8e4e9b8e6a8f770a1093ff46e2816fe5e1321cc0f07623cc46ea937890de5a746f59d18588aa82bd91
-  languageName: node
-  linkType: hard
-
-"@jest/console@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/console@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    chalk: ^4.0.0
-    jest-message-util: ^26.6.2
-    jest-util: ^26.6.2
-    slash: ^3.0.0
-  checksum: e85a68b1ef49e5ecadb0055812c2493a92592b5206c26e78ce6b21869aff2847e4c808beae1dd353738c24fd51fa9d5bf135ced62931844a5d57f9ff4f40743a
-  languageName: node
-  linkType: hard
-
-"@jest/console@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/console@npm:27.5.1"
-  dependencies:
-    "@jest/types": ^27.5.1
+    "@jest/types": ^28.1.3
     "@types/node": "*"
     chalk: ^4.0.0
-    jest-message-util: ^27.5.1
-    jest-util: ^27.5.1
+    jest-message-util: ^28.1.3
+    jest-util: ^28.1.3
     slash: ^3.0.0
-  checksum: 6cb46d721698aaeb0d57ace967f7a36bbefc20719d420ea8bf8ec8adf9994cb1ec11a93bbd9b1514c12a19b5dd99dcbbd1d3e22fd8bea8e41e845055b03ac18d
+  checksum: c539b814cd9d3eadb53ce04e2ac00716fe0d808511cb64aebf2920bcb1646c65f094188a7f9aa74fca73a501c00ee5835e906717dc3682cbb4ecf7fbb316fc75
   languageName: node
   linkType: hard
 
-"@jest/console@npm:^28.1.1, @jest/console@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "@jest/console@npm:28.1.3"
+"@jest/console@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/console@npm:29.3.1"
   dependencies:
-    "@jest/types": ^28.1.3
+    "@jest/types": ^29.3.1
     "@types/node": "*"
     chalk: ^4.0.0
-    jest-message-util: ^28.1.3
-    jest-util: ^28.1.3
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
     slash: ^3.0.0
-  checksum: c539b814cd9d3eadb53ce04e2ac00716fe0d808511cb64aebf2920bcb1646c65f094188a7f9aa74fca73a501c00ee5835e906717dc3682cbb4ecf7fbb316fc75
+  checksum: f4773d50b6588eb44daffdf808891f32a827e3f99ae8cca74efb5a9fc117655e418e97e13fcbbf530062321fa940ba88d028e66d27bdf97e41231b2e5b114626
   languageName: node
   linkType: hard
 
-"@jest/core@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "@jest/core@npm:26.6.3"
+"@jest/core@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/core@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/reporters": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/console": ^29.3.1
+    "@jest/reporters": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
     ansi-escapes: ^4.2.1
     chalk: ^4.0.0
+    ci-info: ^3.2.0
     exit: ^0.1.2
-    graceful-fs: ^4.2.4
-    jest-changed-files: ^26.6.2
-    jest-config: ^26.6.3
-    jest-haste-map: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-resolve-dependencies: ^26.6.3
-    jest-runner: ^26.6.3
-    jest-runtime: ^26.6.3
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    jest-watcher: ^26.6.2
-    micromatch: ^4.0.2
-    p-each-series: ^2.1.0
-    rimraf: ^3.0.0
+    graceful-fs: ^4.2.9
+    jest-changed-files: ^29.2.0
+    jest-config: ^29.3.1
+    jest-haste-map: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-resolve-dependencies: ^29.3.1
+    jest-runner: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
+    jest-watcher: ^29.3.1
+    micromatch: ^4.0.4
+    pretty-format: ^29.3.1
     slash: ^3.0.0
     strip-ansi: ^6.0.0
-  checksum: 3a4816997f1e206e0dfc6ad236f53b8a554a9b705aa78a62bc754697b8adf8314187a5ac8cfbd31ee6a38feec1412dc17c85cefe39e6d9e21f5e7e2697452e7e
-  languageName: node
-  linkType: hard
-
-"@jest/environment@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/environment@npm:24.9.0"
-  dependencies:
-    "@jest/fake-timers": ^24.9.0
-    "@jest/transform": ^24.9.0
-    "@jest/types": ^24.9.0
-    jest-mock: ^24.9.0
-  checksum: 267128ede9193374bfd1f1c9e4df8c0b31c17dcf853401b591639c39187ea3552c2ff2f3e8a75191b2dcb1e55a6c499fce2713edaa64d81fa6674ca27895e0ba
-  languageName: node
-  linkType: hard
-
-"@jest/environment@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/environment@npm:26.6.2"
-  dependencies:
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    jest-mock: ^26.6.2
-  checksum: b489afb2fa9bbde360f222bc905abd9abd77ae5802b16ca7a34d018405ad7df57a506c01efae8ff8b566c211314ec74b3f37a1cb850623e15eb1e6d020582197
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  checksum: 06a930365498e9cf902537746090c6ce2d98c1c394d81a458f0a74c287a5321306cad25c1aec1f55222b9e3d514d7f8de6e8d44eea3bc6d63ae75b618eb473bc
   languageName: node
   linkType: hard
 
@@ -2071,6 +2400,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/environment@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/environment@npm:29.3.1"
+  dependencies:
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-mock: ^29.3.1
+  checksum: 46982c52649854e7766b8129a81a59fefefb898f853fe2a1394e72c5492a183f4e596eb91f3d4ba614a7117869ccf2c509ba190747c96085de4fa8300bb65226
+  languageName: node
+  linkType: hard
+
 "@jest/expect-utils@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/expect-utils@npm:28.1.3"
@@ -2089,6 +2430,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/expect-utils@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/expect-utils@npm:29.3.1"
+  dependencies:
+    jest-get-type: ^29.2.0
+  checksum: dc58ff9c5c7e893c056f3560cb1445771dcc1555df0b5aeff4808c6425ca9b921eae5b4f92b433b89c401e445694f5484b352f06620bac9e7cb97b8f56ee3e21
+  languageName: node
+  linkType: hard
+
 "@jest/expect@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/expect@npm:28.1.3"
@@ -2099,28 +2449,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/fake-timers@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/fake-timers@npm:24.9.0"
-  dependencies:
-    "@jest/types": ^24.9.0
-    jest-message-util: ^24.9.0
-    jest-mock: ^24.9.0
-  checksum: ce0d8146bfd2e2822eb45aaf6965a858bd4e6a490fd30f0f3bc5941edd2fca33942e1a37bba3d85d3dbc275c18cb362e8c4f0805a2e246ec09bbeb6b4c8b1364
-  languageName: node
-  linkType: hard
-
-"@jest/fake-timers@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/fake-timers@npm:26.6.2"
+"@jest/expect@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/expect@npm:29.3.1"
   dependencies:
-    "@jest/types": ^26.6.2
-    "@sinonjs/fake-timers": ^6.0.1
-    "@types/node": "*"
-    jest-message-util: ^26.6.2
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-  checksum: 861b033ead8c749f0fecffb84cbe88603291d9db66129494d0059dee101616a2aa646fc32c8cab468826eeb32647d2b0b4f72869f048163cb3406ddd2902ece0
+    expect: ^29.3.1
+    jest-snapshot: ^29.3.1
+  checksum: 705bdad3f5af7c87d252a26dab890ac7f560d53439b364b4260f68b2dba271464bd7de7cfe2b03db7abaccc409da4da338075f870a1c31a1b4770bab6e67c53f
   languageName: node
   linkType: hard
 
@@ -2138,14 +2473,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/globals@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/globals@npm:26.6.2"
+"@jest/fake-timers@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/fake-timers@npm:29.3.1"
   dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/types": ^26.6.2
-    expect: ^26.6.2
-  checksum: 6516baa19339a62c8f5eeb2ef3871bfa5bd5645016f1eb87dbe52a37658e7b33b836a1325ba40db250df5d06c08dd1cb1532fbfac5712f4041561525b59bb03f
+    "@jest/types": ^29.3.1
+    "@sinonjs/fake-timers": ^9.1.2
+    "@types/node": "*"
+    jest-message-util: ^29.3.1
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: b2fe1ea5d8ff3aa9ef099550d5897adba0ed53f8971e134ad589a52346b1f6914df986ef5c847264f7446a7dcae66946f4107cb1087b630a447cf13ad334b59b
   languageName: node
   linkType: hard
 
@@ -2160,6 +2498,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/globals@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/globals@npm:29.3.1"
+  dependencies:
+    "@jest/environment": ^29.3.1
+    "@jest/expect": ^29.3.1
+    "@jest/types": ^29.3.1
+    jest-mock: ^29.3.1
+  checksum: cda0fc6e1f8fd5a72f576c227db7a0b5ec47baa168e7aae0aca2b8f8d08d97b0c563a154460b96dcbaf3991584111a852ce783ceb66fc526cf440faa668b3893
+  languageName: node
+  linkType: hard
+
 "@jest/reporters@npm:28.1.1":
   version: 28.1.1
   resolution: "@jest/reporters@npm:28.1.1"
@@ -2198,39 +2548,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/reporters@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/reporters@npm:26.6.2"
+"@jest/reporters@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/reporters@npm:29.3.1"
   dependencies:
     "@bcoe/v8-coverage": ^0.2.3
-    "@jest/console": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/console": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@jridgewell/trace-mapping": ^0.3.15
+    "@types/node": "*"
     chalk: ^4.0.0
     collect-v8-coverage: ^1.0.0
     exit: ^0.1.2
-    glob: ^7.1.2
-    graceful-fs: ^4.2.4
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
     istanbul-lib-coverage: ^3.0.0
-    istanbul-lib-instrument: ^4.0.3
+    istanbul-lib-instrument: ^5.1.0
     istanbul-lib-report: ^3.0.0
     istanbul-lib-source-maps: ^4.0.0
-    istanbul-reports: ^3.0.2
-    jest-haste-map: ^26.6.2
-    jest-resolve: ^26.6.2
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    node-notifier: ^8.0.0
+    istanbul-reports: ^3.1.3
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+    jest-worker: ^29.3.1
     slash: ^3.0.0
-    source-map: ^0.6.0
     string-length: ^4.0.1
-    terminal-link: ^2.0.0
-    v8-to-istanbul: ^7.0.0
-  dependenciesMeta:
+    strip-ansi: ^6.0.0
+    v8-to-istanbul: ^9.0.1
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
     node-notifier:
       optional: true
-  checksum: 311f8c467fc2e810ca884cd9ef032c6c58a88c4c54b41a7c85ae6da5a27b3d4c7042938f62611cf19a336a0d487976b348b8f3414cced2802b815d81bf7c1d5f
+  checksum: c961d44d868d019f6a722e31370785ffe91f1746ee65337c5bb1c557cc053bfc0a54fc07d703c6d3d2ad16e87241f2d22ee59895161049fafd4f94f893cdb9bf
   languageName: node
   linkType: hard
 
@@ -2252,28 +2603,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/source-map@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/source-map@npm:24.9.0"
-  dependencies:
-    callsites: ^3.0.0
-    graceful-fs: ^4.1.15
-    source-map: ^0.6.0
-  checksum: 3c897d605a5ca36cff02aac53bbb7d47fc4c50d7565b678d8d3353979933297260b5baf74cc4140809447b9e0700262385ba77f64f76068abad3ba66481dcdf4
-  languageName: node
-  linkType: hard
-
-"@jest/source-map@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/source-map@npm:26.6.2"
-  dependencies:
-    callsites: ^3.0.0
-    graceful-fs: ^4.2.4
-    source-map: ^0.6.0
-  checksum: fad0b35abf71b9e35b63d4ea7ddafb227a176fa44b84b8efc749ec3911991203f4a58019dd403af8380de4de752f0d40c9fe4c69f76a0866d266e964a02042cb
-  languageName: node
-  linkType: hard
-
 "@jest/source-map@npm:^28.1.2":
   version: 28.1.2
   resolution: "@jest/source-map@npm:28.1.2"
@@ -2285,6 +2614,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/source-map@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "@jest/source-map@npm:29.2.0"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.15
+    callsites: ^3.0.0
+    graceful-fs: ^4.2.9
+  checksum: 6b63d7a1deb59f59fdd7c6f5700069401ec6228e788f3446a6f9ead2e4926c394e1d00eced3f77296a218089c0a173d2aeb5c7b9fd6205ddb160a9f28e644ea8
+  languageName: node
+  linkType: hard
+
 "@jest/test-result@npm:28.1.1":
   version: 28.1.1
   resolution: "@jest/test-result@npm:28.1.1"
@@ -2297,41 +2637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/test-result@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/test-result@npm:24.9.0"
-  dependencies:
-    "@jest/console": ^24.9.0
-    "@jest/types": ^24.9.0
-    "@types/istanbul-lib-coverage": ^2.0.0
-  checksum: 450d068a39ace6219883d820c9fa17d9e455bd5c03b03f0a5d3924d860cdd2e36234cc15367bc42f18421ac42365c33fbe6077d860b7659b719d4d39de9d1331
-  languageName: node
-  linkType: hard
-
-"@jest/test-result@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/test-result@npm:26.6.2"
-  dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/istanbul-lib-coverage": ^2.0.0
-    collect-v8-coverage: ^1.0.0
-  checksum: 4b6f480ebf917f2f6beb5ebefc1c6dedaa768030706f184be9a545e3ad457bde802bae78c50e06f68310084921fb048e030a8eca2adfd7df9f46a6663abb0b98
-  languageName: node
-  linkType: hard
-
-"@jest/test-result@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/test-result@npm:27.5.1"
-  dependencies:
-    "@jest/console": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/istanbul-lib-coverage": ^2.0.0
-    collect-v8-coverage: ^1.0.0
-  checksum: 4fb8cbefda8f645c57e2fc0d0df169b0bf5f6cb456b42dc09f5138595b736e800d8d83e3fd36a47fd801a2359988c841792d7fc46784bec908c88b39b6581749
-  languageName: node
-  linkType: hard
-
 "@jest/test-result@npm:^28.1.1, @jest/test-result@npm:^28.1.3":
   version: 28.1.3
   resolution: "@jest/test-result@npm:28.1.3"
@@ -2344,16 +2649,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/test-sequencer@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "@jest/test-sequencer@npm:26.6.3"
+"@jest/test-result@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/test-result@npm:29.3.1"
   dependencies:
-    "@jest/test-result": ^26.6.2
-    graceful-fs: ^4.2.4
-    jest-haste-map: ^26.6.2
-    jest-runner: ^26.6.3
-    jest-runtime: ^26.6.3
-  checksum: 670cf1161a22716f8396baf2a2d9d1741ad169f8a0115f6b0c4f88f2cfc29fec9179bbcfd87f579a46a69b38af47abd5656fb7ded5face06c3960d8e1cdbbdae
+    "@jest/console": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/istanbul-lib-coverage": ^2.0.0
+    collect-v8-coverage: ^1.0.0
+  checksum: 6433a278119d5cdca1f92d1727850c9092a816a95bd5f3efb86b413599f1281d3f4e44ce564e25428ee1759c46cf8916e86fe077c0d94026a4b9ca40cb6722ed
   languageName: node
   linkType: hard
 
@@ -2369,50 +2673,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/transform@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/transform@npm:24.9.0"
-  dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/types": ^24.9.0
-    babel-plugin-istanbul: ^5.1.0
-    chalk: ^2.0.1
-    convert-source-map: ^1.4.0
-    fast-json-stable-stringify: ^2.0.0
-    graceful-fs: ^4.1.15
-    jest-haste-map: ^24.9.0
-    jest-regex-util: ^24.9.0
-    jest-util: ^24.9.0
-    micromatch: ^3.1.10
-    pirates: ^4.0.1
-    realpath-native: ^1.1.0
-    slash: ^2.0.0
-    source-map: ^0.6.1
-    write-file-atomic: 2.4.1
-  checksum: 3def8fce5a23ddd29984e0d31a8924e12a3d9ce96c9ca0cd20412232511656931dee54833f71897566c99ee1c975b53d2ef3dc69ce62191eb78d2f7e1414cb9e
-  languageName: node
-  linkType: hard
-
-"@jest/transform@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "@jest/transform@npm:26.6.2"
+"@jest/test-sequencer@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/test-sequencer@npm:29.3.1"
   dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/types": ^26.6.2
-    babel-plugin-istanbul: ^6.0.0
-    chalk: ^4.0.0
-    convert-source-map: ^1.4.0
-    fast-json-stable-stringify: ^2.0.0
-    graceful-fs: ^4.2.4
-    jest-haste-map: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-util: ^26.6.2
-    micromatch: ^4.0.2
-    pirates: ^4.0.1
+    "@jest/test-result": ^29.3.1
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
     slash: ^3.0.0
-    source-map: ^0.6.1
-    write-file-atomic: ^3.0.0
-  checksum: 1a1d636528d9b122b87b870633763c67f131533fce61e5db536dfbbea0bbfe8fe130daededb686ccc230389473a2b8ece5d0e1eaf380066d8902bde48579de31
+  checksum: 30399c44fcbacbe2b538b720d4857f2edf5be29b7ce7ea9c1a4af87d7526b5a0896d379bcf7a61608f18f86732edfbade24ec3b7091f9e26bb4bd0fe8a68fb79
   languageName: node
   linkType: hard
 
@@ -2439,14 +2708,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "@jest/types@npm:24.9.0"
+"@jest/transform@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/transform@npm:29.3.1"
   dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.0
-    "@types/istanbul-reports": ^1.1.1
-    "@types/yargs": ^13.0.0
-  checksum: 990b03f5e27de292a7fea6b12cd87256dd281263afe37020cad5dceb0b775945a528bafdbc2e41bf8a29c346f94a7aa5580517c5c65a2b33f245f43d3b9b4694
+    "@babel/core": ^7.11.6
+    "@jest/types": ^29.3.1
+    "@jridgewell/trace-mapping": ^0.3.15
+    babel-plugin-istanbul: ^6.1.1
+    chalk: ^4.0.0
+    convert-source-map: ^2.0.0
+    fast-json-stable-stringify: ^2.1.0
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-util: ^29.3.1
+    micromatch: ^4.0.4
+    pirates: ^4.0.4
+    slash: ^3.0.0
+    write-file-atomic: ^4.0.1
+  checksum: 5e43dea16b6985f7f28bb7f1d8f7c8e1a980dd3325265ef48e8bbc7ba02530e26094541693ac1fb8dd791b7615adf3ef0b537d60ee8fe8299b1ab84f445451e0
   languageName: node
   linkType: hard
 
@@ -2504,6 +2785,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/types@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "@jest/types@npm:29.3.1"
+  dependencies:
+    "@jest/schemas": ^29.0.0
+    "@types/istanbul-lib-coverage": ^2.0.0
+    "@types/istanbul-reports": ^3.0.0
+    "@types/node": "*"
+    "@types/yargs": ^17.0.8
+    chalk: ^4.0.0
+  checksum: c1ae1a66fbe403c82578d55cc5a061bffce2426f830c9365d0ab033f48580f3beb378631efe85e420709ff898fca6f7dd8fca9eb412dfed3d88a80c422065188
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.1.0":
   version: 0.1.1
   resolution: "@jridgewell/gen-mapping@npm:0.1.1"
@@ -2525,7 +2820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/resolve-uri@npm:^3.0.3":
+"@jridgewell/resolve-uri@npm:3.1.0, @jridgewell/resolve-uri@npm:^3.0.3":
   version: 3.1.0
   resolution: "@jridgewell/resolve-uri@npm:3.1.0"
   checksum: 78055e2526108331126366572045355051a930f017d1904a4f753d3f4acee8d92a14854948095626f6163cffc24ea4e3efa30637417bb866b84743dec7ef6fd9
@@ -2539,7 +2834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10":
+"@jridgewell/sourcemap-codec@npm:1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.10":
   version: 1.4.14
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
   checksum: 3fbaff1387c1338b097eeb6ff92890d7838f7de0dde259e4983763b44540bfd5ca6a1f7644dc8ad003a57f7e80670d5b96a8402f1386ba9aee074743ae9bad51
@@ -2566,7 +2861,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@linear/sdk@npm:^1.21.0":
+"@jridgewell/trace-mapping@npm:^0.3.15":
+  version: 0.3.17
+  resolution: "@jridgewell/trace-mapping@npm:0.3.17"
+  dependencies:
+    "@jridgewell/resolve-uri": 3.1.0
+    "@jridgewell/sourcemap-codec": 1.4.14
+  checksum: 40b65fcbdd7cc5a60dbe0a2780b6670ebbc1a31c96e43833e0bf2fee0773b1ba5137ab7d137b28fc3f215567bd5f9d06b7b30634ba15636c13bd8a863c20ae9a
+  languageName: node
+  linkType: hard
+
+"@linear/sdk@npm:^1.22.0":
   version: 1.22.0
   resolution: "@linear/sdk@npm:1.22.0"
   dependencies:
@@ -3106,15 +3411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sinonjs/fake-timers@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "@sinonjs/fake-timers@npm:6.0.1"
-  dependencies:
-    "@sinonjs/commons": ^1.7.0
-  checksum: a77bead4d71b40d6f7f9a3ad66a00269aa2c078260f43f594b8aed4676c6c4e7c2b642d4b8e34df314e1c971589455f7b4267ab831bf44ffdccc0bda599850ad
-  languageName: node
-  linkType: hard
-
 "@sinonjs/fake-timers@npm:^9.1.2":
   version: 9.1.2
   resolution: "@sinonjs/fake-timers@npm:9.1.2"
@@ -3319,29 +3615,29 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/scripts@workspace:."
   dependencies:
-    "@babel/cli": ^7.17.6
-    "@babel/core": ^7.17.5
-    "@babel/plugin-proposal-class-properties": ^7.16.7
-    "@babel/plugin-proposal-decorators": ^7.17.2
-    "@babel/plugin-proposal-export-default-from": ^7.16.7
-    "@babel/plugin-proposal-object-rest-spread": ^7.17.3
-    "@babel/plugin-proposal-private-methods": ^7.16.11
+    "@babel/cli": ^7.19.3
+    "@babel/core": ^7.20.2
+    "@babel/plugin-proposal-class-properties": ^7.18.6
+    "@babel/plugin-proposal-decorators": ^7.20.2
+    "@babel/plugin-proposal-export-default-from": ^7.18.10
+    "@babel/plugin-proposal-object-rest-spread": ^7.20.2
+    "@babel/plugin-proposal-private-methods": ^7.18.6
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
-    "@babel/plugin-transform-arrow-functions": ^7.16.7
-    "@babel/plugin-transform-block-scoping": ^7.16.7
-    "@babel/plugin-transform-destructuring": ^7.17.3
-    "@babel/plugin-transform-runtime": ^7.18.9
-    "@babel/plugin-transform-shorthand-properties": ^7.16.7
-    "@babel/preset-env": ^7.16.11
-    "@babel/preset-flow": ^7.16.7
-    "@babel/preset-react": ^7.16.7
-    "@babel/preset-typescript": ^7.16.7
-    "@babel/runtime": ^7.17.2
-    "@compodoc/compodoc": ^1.1.18
-    "@emotion/babel-plugin": ^11.10.2
-    "@emotion/jest": ^11.10.0
-    "@jest/globals": ^26.6.2
-    "@linear/sdk": ^1.21.0
+    "@babel/plugin-transform-arrow-functions": ^7.18.6
+    "@babel/plugin-transform-block-scoping": ^7.20.2
+    "@babel/plugin-transform-destructuring": ^7.20.2
+    "@babel/plugin-transform-runtime": ^7.19.6
+    "@babel/plugin-transform-shorthand-properties": ^7.18.6
+    "@babel/preset-env": ^7.20.2
+    "@babel/preset-flow": ^7.18.6
+    "@babel/preset-react": ^7.18.6
+    "@babel/preset-typescript": ^7.18.6
+    "@babel/runtime": ^7.20.1
+    "@compodoc/compodoc": ^1.1.19
+    "@emotion/babel-plugin": ^11.10.5
+    "@emotion/jest": ^11.10.5
+    "@jest/globals": ^29.3.1
+    "@linear/sdk": ^1.22.0
     "@nrwl/cli": 14.6.1
     "@nrwl/nx-cloud": 14.6.0
     "@nrwl/workspace": 14.6.1
@@ -3361,25 +3657,24 @@ __metadata:
     "@types/escodegen": ^0.0.6
     "@types/express": ^4.17.11
     "@types/fs-extra": ^9.0.6
-    "@types/jest": ^26.0.16
     "@types/js-yaml": ^3.12.6
     "@types/lodash": ^4
-    "@types/node": ^16.0.0
+    "@types/node": ^16.0.0 || ^18.0.0
     "@types/node-cleanup": ^2.1.1
     "@types/node-fetch": ^2.5.7
     "@types/prompts": 2.0.11
-    "@types/react": ^16.14.23
-    "@types/react-dom": ^16.9.14
+    "@types/react": ^16.14.34
+    "@types/react-dom": ^16.9.17
     "@types/semver": ^7.3.4
     "@types/serve-static": ^1.13.8
     "@types/shelljs": ^0.8.7
-    "@typescript-eslint/eslint-plugin": ^5.40.1
-    "@typescript-eslint/experimental-utils": ^5.40.1
-    "@typescript-eslint/parser": ^5.40.1
+    "@typescript-eslint/eslint-plugin": ^5.43.0
+    "@typescript-eslint/experimental-utils": ^5.43.0
+    "@typescript-eslint/parser": ^5.43.0
     babel-core: ^7.0.0-bridge.0
     babel-eslint: ^10.1.0
-    babel-jest: ^26.6.3
-    babel-loader: ^8.2.5
+    babel-jest: ^29.3.1
+    babel-loader: ^8.3.0
     babel-plugin-add-react-displayname: ^0.0.5
     babel-plugin-dynamic-import-node: ^2.3.3
     babel-plugin-macros: ^3.0.1
@@ -3388,6 +3683,7 @@ __metadata:
     codecov: ^3.8.1
     commander: ^6.2.1
     cross-env: ^7.0.3
+    cross-spawn: ^7.0.3
     danger: ^10.6.2
     detect-port: ^1.3.0
     ejs: ^3.1.8
@@ -3395,7 +3691,7 @@ __metadata:
     enzyme-adapter-react-16: ^1.15.5
     esbuild: ^0.14.48
     esbuild-plugin-alias: ^0.2.1
-    eslint: ^8.26.0
+    eslint: ^8.27.0
     eslint-plugin-import: ^2.26.0
     eslint-plugin-react: ^7.31.10
     eslint-plugin-storybook: ^0.6.6
@@ -3407,17 +3703,13 @@ __metadata:
     glob: ^7.1.6
     http-server: ^0.12.3
     husky: ^4.3.7
-    jest: ^26.6.3
-    jest-environment-jsdom: ^26.6.2
-    jest-environment-jsdom-thirteen: ^1.0.1
-    jest-enzyme: ^7.1.2
-    jest-image-snapshot: ^4.3.0
-    jest-jasmine2: ^26.6.3
-    jest-junit: ^13.0.0
+    jest: ^29.3.1
+    jest-environment-jsdom: ^29.3.1
+    jest-image-snapshot: ^6.0.0
+    jest-junit: ^14.0.1
     jest-os-detection: ^1.3.1
-    jest-raw-loader: ^1.0.1
-    jest-serializer-html: ^7.0.0
-    jest-watch-typeahead: ^0.6.1
+    jest-serializer-html: ^7.1.0
+    jest-watch-typeahead: ^2.2.1
     js-yaml: ^3.14.1
     junit-xml: ^1.2.0
     lint-staged: ^10.5.4
@@ -3430,7 +3722,7 @@ __metadata:
     npmlog: ^5.0.1
     nx: 14.6.1
     p-limit: ^3.1.0
-    prettier: ">=2.2.1 <=3.0.0"
+    prettier: ^2.7.1
     pretty-hrtime: ^1.0.0
     process: ^0.11.10
     prompts: ^2.4.0
@@ -3452,11 +3744,10 @@ __metadata:
     tempy: ^1.0.0
     trash: ^7.0.0
     ts-dedent: ^2.0.0
-    ts-jest: ^26.4.4
     ts-loader: ^9.2.8
     ts-node: ^10.4.0
     tsup: ^6.2.2
-    typescript: ~4.6.3
+    typescript: ^4.9.3
     util: ^0.12.4
     verdaccio: ^4.10.0
     verdaccio-auth-memory: ^9.7.2
@@ -3656,7 +3947,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7":
+"@types/babel__core@npm:^7.1.14":
   version: 7.1.19
   resolution: "@types/babel__core@npm:7.1.19"
   dependencies:
@@ -3688,7 +3979,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.4, @types/babel__traverse@npm:^7.0.6":
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
   version: 7.18.2
   resolution: "@types/babel__traverse@npm:7.18.2"
   dependencies:
@@ -3707,7 +3998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/cheerio@npm:*, @types/cheerio@npm:^0.22.22":
+"@types/cheerio@npm:*":
   version: 0.22.31
   resolution: "@types/cheerio@npm:0.22.31"
   dependencies:
@@ -3815,7 +4106,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/graceful-fs@npm:^4.1.2, @types/graceful-fs@npm:^4.1.3":
+"@types/graceful-fs@npm:^4.1.3":
   version: 4.1.5
   resolution: "@types/graceful-fs@npm:4.1.5"
   dependencies:
@@ -3847,16 +4138,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-reports@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "@types/istanbul-reports@npm:1.1.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": "*"
-    "@types/istanbul-lib-report": "*"
-  checksum: 80b76715f4ac74a4ddfc82d7942b2faaefbe9fdce8e7dfdfa497b3fb60a3e707b632c6e70e1565cfe30045eaebaf7aad0d6c3d102652d1da8fdb0bf095924eb3
-  languageName: node
-  linkType: hard
-
 "@types/istanbul-reports@npm:^3.0.0":
   version: 3.0.1
   resolution: "@types/istanbul-reports@npm:3.0.1"
@@ -3876,16 +4157,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^26.0.16":
-  version: 26.0.24
-  resolution: "@types/jest@npm:26.0.24"
-  dependencies:
-    jest-diff: ^26.0.0
-    pretty-format: ^26.0.0
-  checksum: 1085ac96af43566518daf3aca60cb7881bfe2ffe1f5343738933e386ebf909095fde15273c3e99c685854dfc833b05b156fb5daf68707c0daa1c0c0db13a665b
-  languageName: node
-  linkType: hard
-
 "@types/js-yaml@npm:^3.12.6":
   version: 3.12.7
   resolution: "@types/js-yaml@npm:3.12.7"
@@ -3893,6 +4164,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jsdom@npm:^20.0.0":
+  version: 20.0.1
+  resolution: "@types/jsdom@npm:20.0.1"
+  dependencies:
+    "@types/node": "*"
+    "@types/tough-cookie": "*"
+    parse5: ^7.0.0
+  checksum: 3d4b2a3eab145674ee6da482607c5e48977869109f0f62560bf91ae1a792c9e847ac7c6aaf243ed2e97333cb3c51aef314ffa54a19ef174b8f9592dfcb836b25
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.9":
   version: 7.0.11
   resolution: "@types/json-schema@npm:7.0.11"
@@ -3975,10 +4257,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^16.0.0":
-  version: 16.11.65
-  resolution: "@types/node@npm:16.11.65"
-  checksum: 5d66c2e0119ff194b2e196b0016d5d083fd332a114cea04822fbc22a7733b2feba0db9de380a289f457312a24b2f313396084b682d670038f5b2ced2d14fc659
+"@types/node@npm:^16.0.0 || ^18.0.0":
+  version: 18.11.9
+  resolution: "@types/node@npm:18.11.9"
+  checksum: aeaa925406f841c41679b32def9391a9892171e977105e025050e9f66e2830b4c50d0d974a1af0077ead3337a1f3bdf49ee7e7f402ebf2e034a3f97d9d240dba
   languageName: node
   linkType: hard
 
@@ -3996,7 +4278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prettier@npm:^2.0.0, @types/prettier@npm:^2.1.5":
+"@types/prettier@npm:^2.1.5":
   version: 2.7.1
   resolution: "@types/prettier@npm:2.7.1"
   checksum: 1acbc69eb6f36cf04256ab2a7a05737b670a81d96de9f5f4d765d8c1f5f68978a6a5800dc059968075ef2492a26a39f6ccdff72a4d8639144297235548b789cc
@@ -4040,12 +4322,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^16.9.14":
-  version: 16.9.16
-  resolution: "@types/react-dom@npm:16.9.16"
+"@types/react-dom@npm:^16.9.17":
+  version: 16.9.17
+  resolution: "@types/react-dom@npm:16.9.17"
   dependencies:
     "@types/react": ^16
-  checksum: 1d3feea5f32d70644a94e6b3d15371585bd5f3defe3981a936f299d5a0ebd6ef0208057201c990e7feaab3c2092bb9e889ae74ee316e3a48e15069e72a8e1575
+  checksum: c9c36d071f5e7480a74948ceed0cf2080194f9e0922de69a3c877629b1e7cb5f87e47afaea7d095a2dccfcf273746416f7780dd68830ea89dba68499758db10b
   languageName: node
   linkType: hard
 
@@ -4060,7 +4342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^16, @types/react@npm:^16.14.23":
+"@types/react@npm:^16":
   version: 16.14.32
   resolution: "@types/react@npm:16.14.32"
   dependencies:
@@ -4071,6 +4353,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^16.14.34":
+  version: 16.14.34
+  resolution: "@types/react@npm:16.14.34"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: 0cc204f87badeabd4641beb415e82b574152596e65304f5e63cd41948b23036f3e7ae658a86aa5357c2ab4f0f4f9402dfd5077c3df0c5294130a45d92add9bac
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.2
   resolution: "@types/scheduler@npm:0.16.2"
@@ -4105,13 +4398,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stack-utils@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@types/stack-utils@npm:1.0.1"
-  checksum: 4c4a8c48ba556bbe5fad2232cd9598b7f5f3e110451a3ad5cdf7e42204abf3d1abd30a9e6679d576e8e901e1f6b38e744af1f75f384e697c89bee53e5443b8c9
-  languageName: node
-  linkType: hard
-
 "@types/stack-utils@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/stack-utils@npm:2.0.1"
@@ -4128,6 +4414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tough-cookie@npm:*":
+  version: 4.0.2
+  resolution: "@types/tough-cookie@npm:4.0.2"
+  checksum: 38d01fc79a9a87166253b8c548bb401599424c57a818bea1b47a68be6dcd37fc3bff381f978354e00221f284937d5066bb92d58bf79952f9d21deb934e8ec9a7
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2":
   version: 2.0.6
   resolution: "@types/unist@npm:2.0.6"
@@ -4156,15 +4449,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^13.0.0":
-  version: 13.0.12
-  resolution: "@types/yargs@npm:13.0.12"
-  dependencies:
-    "@types/yargs-parser": "*"
-  checksum: 81fdac6832d69f2f2a33bb3d77887f571677d5a9ccfd5a171ff3e76252a6c6a9773850a0df6ba9ed0328433a36596488ec4e2ce5d9bc49d713a59bbfef8e12a0
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^15.0.0":
   version: 15.0.14
   resolution: "@types/yargs@npm:15.0.14"
@@ -4192,15 +4476,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.40.1"
+"@typescript-eslint/eslint-plugin@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.40.1
-    "@typescript-eslint/type-utils": 5.40.1
-    "@typescript-eslint/utils": 5.40.1
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/type-utils": 5.43.0
+    "@typescript-eslint/utils": 5.43.0
     debug: ^4.3.4
     ignore: ^5.2.0
+    natural-compare-lite: ^1.4.0
     regexpp: ^3.2.0
     semver: ^7.3.7
     tsutils: ^3.21.0
@@ -4210,54 +4495,54 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: d89f18a56ff7e9598c6ac68b7c91eb75331e1957971438a04c4cc0c600af273a5da06f4aa0f543925a209a6dd119ddc3e2e6523c1465734d67b12dfe097e9b56
+  checksum: 98f984ab9e0fbae0536a49f1d32c367ff54e3dbf4619710370c917abac865c90b363435a79b8860f6cdc34941661e3e321eca558f0584aaf0b937953ffb3d7cc
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:^5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/experimental-utils@npm:5.40.1"
+"@typescript-eslint/experimental-utils@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/utils": 5.40.1
+    "@typescript-eslint/utils": 5.43.0
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: c9fcb0ee8a2a484543c706ac443460f00dff28a46140c1ae861aada716f030492b63e56bf1c6d832e404ebe6777aa0e2bbb96ed34142e7f70762e9ef65471493
+  checksum: 28fbb4e62059dcb88b6397e81aa30053fbe30ccec76cdc6d947c305c8062e7b47306a13918483a63e4e97ca0871a9b22a481f4ef2b8316bac81e030becbfb3b1
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/parser@npm:5.40.1"
+"@typescript-eslint/parser@npm:^5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/parser@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.40.1
-    "@typescript-eslint/types": 5.40.1
-    "@typescript-eslint/typescript-estree": 5.40.1
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/typescript-estree": 5.43.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: abe851a89ed1619b3bfb37d7e666adf3f8fe3027a6aa8a20b1f88282e759dd5cb2c478971ca4132409084c568ab1b9ce9c3fea8aed6a46393445d0e981611417
+  checksum: e32a411b08d22e5e33f1d8160ce45882ec7596d360de459bda2d30cc4f0eec71d0b05c99567c33529c18789e48e430f0b89634cf43481db010b3ab5ecca0f5a6
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/scope-manager@npm:5.40.1"
+"@typescript-eslint/scope-manager@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.40.1
-    "@typescript-eslint/visitor-keys": 5.40.1
-  checksum: 6dececfc112ab908f12e8fae728da043b148d8ed6d64e108f37f07ed314663c240808647469054bfaf4d8b2fae91830a97462c439f61c3b6bfff8d6e018ae763
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/visitor-keys": 5.43.0
+  checksum: f30f7ae64cf518123959c6189508372041a60acad8b412c5fe628214707161f7cb66730aca575be0bca2ccee83c2b59de6c1c139cfb269f6b344cd0921a466b4
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/type-utils@npm:5.40.1"
+"@typescript-eslint/type-utils@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/type-utils@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.40.1
-    "@typescript-eslint/utils": 5.40.1
+    "@typescript-eslint/typescript-estree": 5.43.0
+    "@typescript-eslint/utils": 5.43.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -4265,23 +4550,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 0e060303e0eda941e1b0436a3302803588e8cda6d57eb46463dd82cfd5f969873cebdb45874ac3a1e3140c11bca7ab2812b5e2766a2d75114f148f9dc5d30838
+  checksum: 4ed87a1856ab556d2c456c6696ad791dc71b7ae4e745281eba148418695b2a5848403a607352516c8f2007b10dd4b0884a356e8edda51f1d6fcb52d4216c600a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/types@npm:5.40.1"
-  checksum: ad3d54291b43689d3ef573d1574106a8097407e6d89d74f076337c86ae3ee319c27e2466d5d99859abd6c4f1c96b0ae34e308464a1f76df22e0fdbeab6fd4d79
+"@typescript-eslint/types@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/types@npm:5.43.0"
+  checksum: 93feae3f3a51100f46076649cc02bcd80bdeec88670a8fdfa63927b614f90b039cf1ec4f98367107112e744b567d35eec5fedc465aaea0a92aa835933dfc45e5
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/typescript-estree@npm:5.40.1"
+"@typescript-eslint/typescript-estree@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.40.1
-    "@typescript-eslint/visitor-keys": 5.40.1
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/visitor-keys": 5.43.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -4290,35 +4575,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 6c6cf712eebc80d2f6c48916009d7fad28f10d8bbe455e2190ab9b866e7aa74c48fab211151e8d11757a8aac62bafd7ee39ce8e69ddec8ad754e62bd1e0e79b1
+  checksum: ba08a7093d285966bef5938d3874bbad647ca929bae245e3d67ef22062868e540661b42c13a3166b052d8d6738f18ab83df9207fbd632ffdf255001f2f329ce8
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/utils@npm:5.40.1"
+"@typescript-eslint/utils@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/utils@npm:5.43.0"
   dependencies:
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.40.1
-    "@typescript-eslint/types": 5.40.1
-    "@typescript-eslint/typescript-estree": 5.40.1
+    "@typescript-eslint/scope-manager": 5.43.0
+    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/typescript-estree": 5.43.0
     eslint-scope: ^5.1.1
     eslint-utils: ^3.0.0
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 1c74083cf8696c2bc703c5465de7df42feeb2f376c6fc5062962bebac04f80075655ab2cddef3580a535253156e3df495e193e9acd77bf799ac295346d1c092c
+  checksum: 8e8ce2c710601cdaba8919382f81383aa0c4e8f0d01755cd35c7ad08e145b09bd43e1b7fa032bc685490057c89b84fc1082c3f4bde0bed20ef54363fcb7200c0
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.40.1":
-  version: 5.40.1
-  resolution: "@typescript-eslint/visitor-keys@npm:5.40.1"
+"@typescript-eslint/visitor-keys@npm:5.43.0":
+  version: 5.43.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.43.0"
   dependencies:
-    "@typescript-eslint/types": 5.40.1
+    "@typescript-eslint/types": 5.43.0
     eslint-visitor-keys: ^3.3.0
-  checksum: a1be113da3d85b02c2635ecb9189a057b4039820eff2e2fc4c0aed3f1fb86afdfe61cc0892b6e231cbfd522ae76f1d0a1380b27ffcf05e7d670f517b3ded589c
+  checksum: 8a5511dcfffd0167d0db9f71b995ca79353b7fe196a91a6c64e2161640ad5fb622f402930bac81febde204fe7946940e395d3e31f9c8df69cb2a1349c5ac7ef7
   languageName: node
   linkType: hard
 
@@ -4393,7 +4678,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abab@npm:^2.0.0, abab@npm:^2.0.3, abab@npm:^2.0.5":
+"abab@npm:^2.0.0, abab@npm:^2.0.6":
   version: 2.0.6
   resolution: "abab@npm:2.0.6"
   checksum: 0b245c3c3ea2598fe0025abf7cc7bb507b06949d51e8edae5d12c1b847a0a0c09639abcb94788332b4e2044ac4491c1e8f571b51c7826fd4b0bda1685ad4a278
@@ -4462,7 +4747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-globals@npm:^4.1.0, acorn-globals@npm:^4.3.0, acorn-globals@npm:^4.3.2":
+"acorn-globals@npm:^4.3.2":
   version: 4.3.4
   resolution: "acorn-globals@npm:4.3.4"
   dependencies:
@@ -4472,13 +4757,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-globals@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "acorn-globals@npm:6.0.0"
+"acorn-globals@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "acorn-globals@npm:7.0.1"
   dependencies:
-    acorn: ^7.1.1
-    acorn-walk: ^7.1.1
-  checksum: 5f92390a3fd7e5a4f84fe976d4650e2a33ecf27135aa9efc5406e3406df7f00a1bbb00648ee0c8058846f55ad0924ff574e6c73395705690e754589380a41801
+    acorn: ^8.1.0
+    acorn-walk: ^8.0.2
+  checksum: 7437f58e92d99292dbebd0e79531af27d706c9f272f31c675d793da6c82d897e75302a8744af13c7f7978a8399840f14a353b60cf21014647f71012982456d2b
   languageName: node
   linkType: hard
 
@@ -4509,30 +4794,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^7.0.0, acorn-walk@npm:^7.1.1":
+"acorn-walk@npm:^7.0.0":
   version: 7.2.0
   resolution: "acorn-walk@npm:7.2.0"
   checksum: ff99f3406ed8826f7d6ef6ac76b7608f099d45a1ff53229fa267125da1924188dbacf02e7903dfcfd2ae4af46f7be8847dc7d564c73c4e230dfb69c8ea8e6b4c
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.1.1":
+"acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
   version: 8.2.0
   resolution: "acorn-walk@npm:8.2.0"
   checksum: dbe92f5b2452c93e960c5594e666dd1fae141b965ff2cb4a1e1d0381e3e4db4274c5ce4ffa3d681a86ca2a8d4e29d5efc0670a08e23fd2800051ea387df56ca2
   languageName: node
   linkType: hard
 
-"acorn@npm:^5.5.3":
-  version: 5.7.4
-  resolution: "acorn@npm:5.7.4"
-  bin:
-    acorn: bin/acorn
-  checksum: b29e61d48fa31ae69d38d74bb213b77b32de6317f125890a6cb76b44d173adccbcd3a07fc9a86acdfe8ab0a80f42b5ec6290df8b7944e0506504ac3b716232bd
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^6.0.1, acorn@npm:^6.0.4":
+"acorn@npm:^6.0.1":
   version: 6.4.2
   resolution: "acorn@npm:6.4.2"
   bin:
@@ -4541,7 +4817,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^7.0.0, acorn@npm:^7.1.0, acorn@npm:^7.1.1":
+"acorn@npm:^7.0.0, acorn@npm:^7.1.0":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
   bin:
@@ -4550,7 +4826,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.8.0":
+"acorn@npm:^8.1.0":
+  version: 8.8.1
+  resolution: "acorn@npm:8.8.1"
+  bin:
+    acorn: bin/acorn
+  checksum: 9fd00e3373ecd6c7e8f6adfb3216f5bc9ac050e6fc4ef932f03dbd1d45ccc08289ae16fc9eec10c5de8f1ca65b5f70c02635e1e9015d109dae96fdede340abf5
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^8.4.1, acorn@npm:^8.8.0":
   version: 8.8.0
   resolution: "acorn@npm:8.8.0"
   bin:
@@ -4713,7 +4998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.1":
+"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0":
   version: 4.3.2
   resolution: "ansi-escapes@npm:4.3.2"
   dependencies:
@@ -4722,6 +5007,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-escapes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "ansi-escapes@npm:6.0.0"
+  dependencies:
+    type-fest: ^3.0.0
+  checksum: 398d05fabb13e1a28988f45863ea4c9b7ae658c5d838a03cb8530c6988b451329c1502e0ddeab2502a27d316ce851bb9f4a2943b7f55b3d840b46aa1ef1aee20
+  languageName: node
+  linkType: hard
+
 "ansi-gray@npm:^0.1.1":
   version: 0.1.1
   resolution: "ansi-gray@npm:0.1.1"
@@ -4731,13 +5025,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-regex@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "ansi-regex@npm:2.1.1"
-  checksum: 78cebaf50bce2cb96341a7230adf28d804611da3ce6bf338efa7b72f06cc6ff648e29f80cd95e582617ba58d5fdbec38abfeed3500a98bce8381a9daec7c548b
-  languageName: node
-  linkType: hard
-
 "ansi-regex@npm:^5.0.0, ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
@@ -4745,10 +5032,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "ansi-styles@npm:2.2.1"
-  checksum: 7c68aed4f1857389e7a12f85537ea5b40d832656babbf511cc7ecd9efc52889b9c3e5653a71a6aade783c3c5e0aa223ad4ff8e83c27ac8a666514e6c79068cab
+"ansi-regex@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "ansi-regex@npm:6.0.1"
+  checksum: cbe16dbd2c6b2735d1df7976a7070dd277326434f0212f43abf6d87674095d247968209babdaad31bb00882fa68807256ba9be340eec2f1004de14ca75f52a08
   languageName: node
   linkType: hard
 
@@ -4791,16 +5078,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "anymatch@npm:2.0.0"
-  dependencies:
-    micromatch: ^3.1.4
-    normalize-path: ^2.1.1
-  checksum: a0d745e52f0233048724b9c9d7b1d8a650f7a50151a0f1d2cce1857b09fd096052d334f8c570cc88596edef8249ae778f767db94025cd00f81e154a37bb7e34e
-  languageName: node
-  linkType: hard
-
 "anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
@@ -4908,27 +5185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-diff@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "arr-diff@npm:4.0.0"
-  checksum: 67b80067137f70c89953b95f5c6279ad379c3ee39f7143578e13bd51580a40066ee2a55da066e22d498dce10f68c2d70056d7823f972fab99dfbf4c78d0bc0f7
-  languageName: node
-  linkType: hard
-
-"arr-flatten@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "arr-flatten@npm:1.1.0"
-  checksum: bef53be02ed3bc58f202b3861a5b1eb6e1ae4fecf39c3ad4d15b1e0433f941077d16e019a33312d820844b0661777322acbb7d0c447b04d9bdf7d6f9c532548a
-  languageName: node
-  linkType: hard
-
-"arr-union@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "arr-union@npm:3.1.0"
-  checksum: 7d5aa05894e54aa93c77c5726c1dd5d8e8d3afe4f77983c0aa8a14a8a5cbe8b18f0cf4ecaa4ac8c908ef5f744d2cbbdaa83fd6e96724d15fea56cfa7f5efdd51
-  languageName: node
-  linkType: hard
-
 "array-equal@npm:^1.0.0":
   version: 1.0.0
   resolution: "array-equal@npm:1.0.0"
@@ -4986,13 +5242,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-unique@npm:^0.3.2":
-  version: 0.3.2
-  resolution: "array-unique@npm:0.3.2"
-  checksum: dbf4462cdba8a4b85577be07705210b3d35be4b765822a3f52962d907186617638ce15e0603a4fefdcf82f4cbbc9d433f8cbbd6855148a68872fa041b6474121
-  languageName: node
-  linkType: hard
-
 "array.prototype.filter@npm:^1.0.0":
   version: 1.0.1
   resolution: "array.prototype.filter@npm:1.0.1"
@@ -5042,19 +5291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.reduce@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "array.prototype.reduce@npm:1.0.4"
-  dependencies:
-    call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    es-abstract: ^1.19.2
-    es-array-method-boxes-properly: ^1.0.0
-    is-string: ^1.0.7
-  checksum: 1a71487c9f1e75447b7abd97f1abadb39f6f6aecbb2073c35231574e9be6faee2588e828aca2ae302b5646f069b30cb5d80b4e3144c18f8f6bcc78fcadfee7e7
-  languageName: node
-  linkType: hard
-
 "asn1@npm:~0.2.3":
   version: 0.2.6
   resolution: "asn1@npm:0.2.6"
@@ -5071,13 +5307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assign-symbols@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "assign-symbols@npm:1.0.0"
-  checksum: 29a654b8a6da6889a190d0d0efef4b1bfb5948fa06cbc245054aef05139f889f2f7c75b989917e3fde853fc4093b88048e4de8578a73a76f113d41bfd66e5775
-  languageName: node
-  linkType: hard
-
 "ast-transform@npm:0.0.0":
   version: 0.0.0
   resolution: "ast-transform@npm:0.0.0"
@@ -5177,15 +5406,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"atob@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "atob@npm:2.1.2"
-  bin:
-    atob: bin/atob.js
-  checksum: ada635b519dc0c576bb0b3ca63a73b50eefacf390abb3f062558342a8d68f2db91d0c8db54ce81b0d89de3b0f000de71f3ae7d761fd7d8cc624278fe443d6c7e
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -5255,44 +5475,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-jest@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "babel-jest@npm:26.6.3"
+"babel-jest@npm:^28.1.1":
+  version: 28.1.3
+  resolution: "babel-jest@npm:28.1.3"
   dependencies:
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/babel__core": ^7.1.7
-    babel-plugin-istanbul: ^6.0.0
-    babel-preset-jest: ^26.6.2
+    "@jest/transform": ^28.1.3
+    "@types/babel__core": ^7.1.14
+    babel-plugin-istanbul: ^6.1.1
+    babel-preset-jest: ^28.1.3
     chalk: ^4.0.0
-    graceful-fs: ^4.2.4
+    graceful-fs: ^4.2.9
     slash: ^3.0.0
   peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: 355e431fbd663fd43dcf68c93edcf66e31c3295c35754739edb3ce39435fdc407de75540b310b370e6eb924af528839b6effb8de21870ad12423aac31e258221
+    "@babel/core": ^7.8.0
+  checksum: 612a6317c176d2d890d9e7c5fc1379a6b2aca784522c1242db9dbcc6e18f2cdaa793e3d649346d37333576b37953fadd53a415787e32ec0fac8b79c35aaafd11
   languageName: node
   linkType: hard
 
-"babel-jest@npm:^28.1.1":
-  version: 28.1.3
-  resolution: "babel-jest@npm:28.1.3"
+"babel-jest@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "babel-jest@npm:29.3.1"
   dependencies:
-    "@jest/transform": ^28.1.3
+    "@jest/transform": ^29.3.1
     "@types/babel__core": ^7.1.14
     babel-plugin-istanbul: ^6.1.1
-    babel-preset-jest: ^28.1.3
+    babel-preset-jest: ^29.2.0
     chalk: ^4.0.0
     graceful-fs: ^4.2.9
     slash: ^3.0.0
   peerDependencies:
     "@babel/core": ^7.8.0
-  checksum: 612a6317c176d2d890d9e7c5fc1379a6b2aca784522c1242db9dbcc6e18f2cdaa793e3d649346d37333576b37953fadd53a415787e32ec0fac8b79c35aaafd11
+  checksum: 0ac669113d54a331e43cf3a5f39895bb8feadaad76c741027197c9c63dedff1835f1414877931dcb2daca614d8b50bc3c9c671fd44b46dca365fbec1c42e661a
   languageName: node
   linkType: hard
 
-"babel-loader@npm:^8.2.5":
-  version: 8.2.5
-  resolution: "babel-loader@npm:8.2.5"
+"babel-loader@npm:^8.3.0":
+  version: 8.3.0
+  resolution: "babel-loader@npm:8.3.0"
   dependencies:
     find-cache-dir: ^3.3.1
     loader-utils: ^2.0.0
@@ -5301,7 +5520,7 @@ __metadata:
   peerDependencies:
     "@babel/core": ^7.0.0
     webpack: ">=2"
-  checksum: 6d11d59f0d8e94f230b7529ef805d03e42df5130849cbc21b0954c081bef5325390bbedf378b00355f4b447aee014012d37565777ba6fc17ffbb2352f5736601
+  checksum: 7b83bae35a12fbc5cdf250e2d36a288305fe5b6d20ab044ab7c09bbf456c8895b80af7a4f1e8b64b5c07a4fd48d4b5144dab40b4bc72a4fed532dc000362f38f
   languageName: node
   linkType: hard
 
@@ -5321,19 +5540,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-istanbul@npm:^5.1.0":
-  version: 5.2.0
-  resolution: "babel-plugin-istanbul@npm:5.2.0"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.0.0
-    find-up: ^3.0.0
-    istanbul-lib-instrument: ^3.3.0
-    test-exclude: ^5.2.3
-  checksum: 0691eda883872913c01be6c0afa209c868fa538f12cafd2cd6b9271edbbbe9842ece42bbf51c55864f67b19aae294a69cfdd175b1a52a5f998bfe32d8859ec74
-  languageName: node
-  linkType: hard
-
-"babel-plugin-istanbul@npm:^6.0.0, babel-plugin-istanbul@npm:^6.1.1":
+"babel-plugin-istanbul@npm:^6.1.1":
   version: 6.1.1
   resolution: "babel-plugin-istanbul@npm:6.1.1"
   dependencies:
@@ -5346,27 +5553,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-jest-hoist@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "babel-plugin-jest-hoist@npm:26.6.2"
+"babel-plugin-jest-hoist@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-plugin-jest-hoist@npm:28.1.3"
   dependencies:
     "@babel/template": ^7.3.3
     "@babel/types": ^7.3.3
-    "@types/babel__core": ^7.0.0
+    "@types/babel__core": ^7.1.14
     "@types/babel__traverse": ^7.0.6
-  checksum: 2fcddf7b338e38453d6a42c23db5b790e4188fcbffeba8ff74a62b7d64fe5a642b009a7bd780e47840c382600628de2a6486a92bb151648c64028a6c628e9bfd
+  checksum: 4a47f1673bdfcc15b0968d5577119b1abc6eb199a2d627be56c60872fba7b65455cbc7d631896d33e6ec27831bf43600a1d66616d3bc3a37a8784c1596339eeb
   languageName: node
   linkType: hard
 
-"babel-plugin-jest-hoist@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "babel-plugin-jest-hoist@npm:28.1.3"
+"babel-plugin-jest-hoist@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "babel-plugin-jest-hoist@npm:29.2.0"
   dependencies:
     "@babel/template": ^7.3.3
     "@babel/types": ^7.3.3
     "@types/babel__core": ^7.1.14
     "@types/babel__traverse": ^7.0.6
-  checksum: 4a47f1673bdfcc15b0968d5577119b1abc6eb199a2d627be56c60872fba7b65455cbc7d631896d33e6ec27831bf43600a1d66616d3bc3a37a8784c1596339eeb
+  checksum: 37888f5161cfefefebe7f81c6fb3cc3a38ff793f1b1d6196a5b5b3a72f778476cdfb78eb4a4e1bc09903f952bfc28c4854a88433e2dd31366512c85e493e32f9
   languageName: node
   linkType: hard
 
@@ -5439,27 +5646,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "babel-preset-jest@npm:26.6.2"
+"babel-preset-jest@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "babel-preset-jest@npm:28.1.3"
   dependencies:
-    babel-plugin-jest-hoist: ^26.6.2
+    babel-plugin-jest-hoist: ^28.1.3
     babel-preset-current-node-syntax: ^1.0.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: b6e0efe33b485eb2fba019026933e46d680605b3bf84a6b7378f1df8344b890f66318c49129921dd98bf5819694316312a97b50b16d9aa377faf8624f9f0db5b
+  checksum: b30f4102012f9474be4649ea8dba848614ae995418173c5d4a0e606785f03320aea1e8889b5f163f0336c06d5901100b47cd77a45c54fcbf149ff06ad4fa907c
   languageName: node
   linkType: hard
 
-"babel-preset-jest@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "babel-preset-jest@npm:28.1.3"
+"babel-preset-jest@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "babel-preset-jest@npm:29.2.0"
   dependencies:
-    babel-plugin-jest-hoist: ^28.1.3
+    babel-plugin-jest-hoist: ^29.2.0
     babel-preset-current-node-syntax: ^1.0.0
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: b30f4102012f9474be4649ea8dba848614ae995418173c5d4a0e606785f03320aea1e8889b5f163f0336c06d5901100b47cd77a45c54fcbf149ff06ad4fa907c
+  checksum: bc72a6a64dd77b1075cbeaa53ee925b33e78d32e44fe3676c57941baa3ae8f59f6e2f399cef5b2d3ce2eecefb41e401ed4e276f4310f36519f4821c57227fb16
   languageName: node
   linkType: hard
 
@@ -5491,21 +5698,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base@npm:^0.11.1":
-  version: 0.11.2
-  resolution: "base@npm:0.11.2"
-  dependencies:
-    cache-base: ^1.0.1
-    class-utils: ^0.3.5
-    component-emitter: ^1.2.1
-    define-property: ^1.0.0
-    isobject: ^3.0.1
-    mixin-deep: ^1.2.0
-    pascalcase: ^0.1.1
-  checksum: 30a2c0675eb52136b05ef496feb41574d9f0bb2d6d677761da579c00a841523fccf07f1dbabec2337b5f5750f428683b8ca60d89e56a1052c4ae1c0cd05de64d
-  languageName: node
-  linkType: hard
-
 "basic-auth@npm:^1.0.3":
   version: 1.1.0
   resolution: "basic-auth@npm:1.1.0"
@@ -5566,15 +5758,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bindings@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "bindings@npm:1.5.0"
-  dependencies:
-    file-uri-to-path: 1.0.0
-  checksum: 3dab2491b4bb24124252a91e656803eac24292473e56554e35bbfe3cc1875332cfa77600c3bac7564049dc95075bf6fcc63a4609920ff2d64d0fe405fcf0d4ba
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -5666,24 +5849,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^2.3.1":
-  version: 2.3.2
-  resolution: "braces@npm:2.3.2"
-  dependencies:
-    arr-flatten: ^1.1.0
-    array-unique: ^0.3.2
-    extend-shallow: ^2.0.1
-    fill-range: ^4.0.0
-    isobject: ^3.0.1
-    repeat-element: ^1.1.2
-    snapdragon: ^0.8.1
-    snapdragon-node: ^2.0.1
-    split-string: ^3.0.2
-    to-regex: ^3.0.1
-  checksum: 72b27ea3ea2718f061c29e70fd6e17606e37c65f5801abddcf0b0052db1de7d60f3bf92cfc220ab57b44bd0083a5f69f9d03b3461d2816cfe9f9398207acc728
-  languageName: node
-  linkType: hard
-
 "braces@npm:^3.0.2, braces@npm:~3.0.2":
   version: 3.0.2
   resolution: "braces@npm:3.0.2"
@@ -5757,15 +5922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bs-logger@npm:0.x":
-  version: 0.2.6
-  resolution: "bs-logger@npm:0.2.6"
-  dependencies:
-    fast-json-stable-stringify: 2.x
-  checksum: 80e89aaaed4b68e3374ce936f2eb097456a0dddbf11f75238dbd53140b1e39259f0d248a5089ed456f1158984f22191c3658d54a713982f676709fbe1a6fa5a0
-  languageName: node
-  linkType: hard
-
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -5803,7 +5959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-from@npm:1.x, buffer-from@npm:^1.0.0":
+"buffer-from@npm:^1.0.0":
   version: 1.1.2
   resolution: "buffer-from@npm:1.1.2"
   checksum: 124fff9d66d691a86d3b062eff4663fe437a9d9ee4b47b1b9e97f5a5d14f6d5399345db80f796827be7c95e70a8e765dd404b7c3ff3b3324f98e9b0c8826cc34
@@ -5934,23 +6090,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cache-base@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "cache-base@npm:1.0.1"
-  dependencies:
-    collection-visit: ^1.0.0
-    component-emitter: ^1.2.1
-    get-value: ^2.0.6
-    has-value: ^1.0.0
-    isobject: ^3.0.1
-    set-value: ^2.0.0
-    to-object-path: ^0.3.0
-    union-value: ^1.0.0
-    unset-value: ^1.0.0
-  checksum: a7142e25c73f767fa520957dcd179b900b86eac63b8cfeaa3b2a35e18c9ca5968aa4e2d2bed7a3e7efd10f13be404344cfab3a4156217e71f9bdb95940bb9c8c
-  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"
@@ -5982,7 +6121,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^6.0.0, camelcase@npm:^6.2.0":
+"camelcase@npm:^6.2.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 0d701658219bd3116d12da3eab31acddb3f9440790c0792e0d398f0a520a6a4058018e546862b6fba89d7ae990efaeb97da71e1913e9ebf5a8b5621a3d55c710
@@ -5996,15 +6135,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"capture-exit@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "capture-exit@npm:2.0.0"
-  dependencies:
-    rsvp: ^4.8.4
-  checksum: d68df1e15937809501644a49c0267ef323b5b6a0cae5c08bbdceafd718aa08241844798bfdd762cf6756bc2becd83122aabc25b5222192f18093113bec670617
-  languageName: node
-  linkType: hard
-
 "caseless@npm:~0.12.0":
   version: 0.12.0
   resolution: "caseless@npm:0.12.0"
@@ -6032,20 +6162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "chalk@npm:1.1.3"
-  dependencies:
-    ansi-styles: ^2.2.1
-    escape-string-regexp: ^1.0.2
-    has-ansi: ^2.0.0
-    strip-ansi: ^3.0.0
-    supports-color: ^2.0.0
-  checksum: 28c3e399ec286bb3a7111fd4225ebedb0d7b813aef38a37bca7c498d032459c265ef43404201d5fbb8d888d29090899c95335b4c0cda13e8b126ff15c541cef8
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^2.0.0, chalk@npm:^2.0.1, chalk@npm:^2.3.0":
+"chalk@npm:^2.0.0, chalk@npm:^2.3.0":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -6080,6 +6197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"char-regex@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "char-regex@npm:2.0.1"
+  checksum: ec592229ac3ef18f2ea1f5676ae9a829c37150db55fd7f709edce1bcdc9f506de22ae19388d853704806e51af71fe9239bcb7e7be583296951bfbf2a9a9763a2
+  languageName: node
+  linkType: hard
+
 "character-entities-legacy@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-entities-legacy@npm:1.1.4"
@@ -6177,20 +6301,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"circular-json-es6@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "circular-json-es6@npm:2.0.2"
-  checksum: eaaceb3dbdf113996d96af2cf0779be1544420baf3c07fada7e239aacdd4d866c0cad794095f1cef505c614ec5e1bc88c84f1b38d2004ffcac2fa87ee1a1807b
-  languageName: node
-  linkType: hard
-
-"cjs-module-lexer@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "cjs-module-lexer@npm:0.6.0"
-  checksum: a4fe091f5551e8580d74c0afbf767893ea0ace49f8e33eecb54ae8e325661f31d44752171b4ec52d33aca90c4d854114afe315aa6021780a3c49a0f4a67924b5
-  languageName: node
-  linkType: hard
-
 "cjs-module-lexer@npm:^1.0.0":
   version: 1.2.2
   resolution: "cjs-module-lexer@npm:1.2.2"
@@ -6198,18 +6308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"class-utils@npm:^0.3.5":
-  version: 0.3.6
-  resolution: "class-utils@npm:0.3.6"
-  dependencies:
-    arr-union: ^3.1.0
-    define-property: ^0.2.5
-    isobject: ^3.0.0
-    static-extend: ^0.1.1
-  checksum: d44f4afc7a3e48dba4c2d3fada5f781a1adeeff371b875c3b578bc33815c6c29d5d06483c2abfd43a32d35b104b27b67bfa39c2e8a422fa858068bd756cfbd42
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -6257,17 +6355,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "cliui@npm:6.0.0"
-  dependencies:
-    string-width: ^4.2.0
-    strip-ansi: ^6.0.0
-    wrap-ansi: ^6.2.0
-  checksum: 35229b1bb48647e882104cac374c9a18e34bbf0bace0e2cf03000326b6ca3050d6b59545d91e17bfe3705f4a0e2988787aa5cde6331bf5cbbf0164732cef6492
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^7.0.2":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
@@ -6347,16 +6434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collection-visit@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "collection-visit@npm:1.0.0"
-  dependencies:
-    map-visit: ^1.0.0
-    object-visit: ^1.0.0
-  checksum: add72a8d1c37cb90e53b1aaa2c31bf1989bfb733f0b02ce82c9fa6828c7a14358dba2e4f8e698c02f69e424aeccae1ffb39acdeaf872ade2f41369e84a2fcf8a
-  languageName: node
-  linkType: hard
-
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -6470,13 +6547,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"component-emitter@npm:^1.2.1":
-  version: 1.3.0
-  resolution: "component-emitter@npm:1.3.0"
-  checksum: 68774a0a3754fb6c0ba53c2e88886dfbd0c773931066abb1d7fd1b0c893b2a838d8f088ab4dca1f18cc1a4fc2e6932019eba3ded2d931b5ba2241ce40e93a24f
-  languageName: node
-  linkType: hard
-
 "compressible@npm:~2.0.16":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
@@ -6592,6 +6662,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "convert-source-map@npm:2.0.0"
+  checksum: 8f2f7a27a1a011cc6cc88cc4da2d7d0cfa5ee0369508baae3d98c260bb3ac520691464e5bbe4ae7cdf09860c1d69ecc6f70c63c6e7c7f7e3f18ec08484dc7d9b
+  languageName: node
+  linkType: hard
+
 "cookie-signature@npm:1.0.6":
   version: 1.0.6
   resolution: "cookie-signature@npm:1.0.6"
@@ -6623,13 +6700,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-descriptor@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "copy-descriptor@npm:0.1.1"
-  checksum: 161f6760b7348c941007a83df180588fe2f1283e0867cc027182734e0f26134e6cc02de09aa24a95dc267b2e2025b55659eef76c8019df27bc2d883033690181
-  languageName: node
-  linkType: hard
-
 "core-js-compat@npm:^3.25.1":
   version: 3.25.5
   resolution: "core-js-compat@npm:3.25.5"
@@ -6788,26 +6858,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssom@npm:0.3.x, cssom@npm:>= 0.3.2 < 0.4.0, cssom@npm:^0.3.4, cssom@npm:~0.3.6":
-  version: 0.3.8
-  resolution: "cssom@npm:0.3.8"
-  checksum: d74017b209440822f9e24d8782d6d2e808a8fdd58fa626a783337222fe1c87a518ba944d4c88499031b4786e68772c99dfae616638d71906fe9f203aeaf14411
-  languageName: node
-  linkType: hard
-
-"cssom@npm:^0.4.1, cssom@npm:^0.4.4":
+"cssom@npm:^0.4.1":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
   checksum: 0d4fc70255ea3afbd4add79caffa3b01720929da91105340600d8c0f06c31716f933c6314c3d43b62b57c9637bc2eb35296a9e2db427e8b572ee38a4be2b5f82
   languageName: node
   linkType: hard
 
-"cssstyle@npm:^1.0.0, cssstyle@npm:^1.1.1":
-  version: 1.4.0
-  resolution: "cssstyle@npm:1.4.0"
-  dependencies:
-    cssom: 0.3.x
-  checksum: 213df71e2f78d43608aca51d5eeb2dbcb6224fb7bb222e9f5d4c8b0d6abdca0681774642e4c35304a74d447178ca6b4f492685984491260cd286743b4fd88f27
+"cssom@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cssom@npm:0.5.0"
+  checksum: 8c4121c243baf0678c65dcac29b201ff0067dfecf978de9d5c83b2ff127a8fdefd2bfd54577f5ad8c80ed7d2c8b489ae01c82023545d010c4ecb87683fb403dd
+  languageName: node
+  linkType: hard
+
+"cssom@npm:~0.3.6":
+  version: 0.3.8
+  resolution: "cssom@npm:0.3.8"
+  checksum: d74017b209440822f9e24d8782d6d2e808a8fdd58fa626a783337222fe1c87a518ba944d4c88499031b4786e68772c99dfae616638d71906fe9f203aeaf14411
   languageName: node
   linkType: hard
 
@@ -6921,7 +6989,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-urls@npm:^1.0.0, data-urls@npm:^1.1.0":
+"data-urls@npm:^1.1.0":
   version: 1.1.0
   resolution: "data-urls@npm:1.1.0"
   dependencies:
@@ -6932,14 +7000,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"data-urls@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "data-urls@npm:2.0.0"
+"data-urls@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "data-urls@npm:3.0.2"
   dependencies:
-    abab: ^2.0.3
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^8.0.0
-  checksum: 1246442178eb756afb1d99e54669a119eafb3e69c73300d14089687c50c64f9feadd93c973f496224a12f89daa94267a6114aecd70e9b279c09d908c5be44d01
+    abab: ^2.0.6
+    whatwg-mimetype: ^3.0.0
+    whatwg-url: ^11.0.0
+  checksum: 051c3aaaf3e961904f136aab095fcf6dff4db23a7fc759dd8ba7b3e6ba03fc07ef608086caad8ab910d864bd3b5e57d0d2f544725653d77c96a2c971567045f4
   languageName: node
   linkType: hard
 
@@ -6950,7 +7018,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.9":
+"debug@npm:2.6.9, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
   dependencies:
@@ -6998,17 +7066,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decamelize@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "decamelize@npm:1.2.0"
-  checksum: 85c39fe8fbf0482d4a1e224ef0119db5c1897f8503bcef8b826adff7a1b11414972f6fef2d7dec2ee0b4be3863cf64ac1439137ae9e6af23a3d8dcbe26a5b4b2
-  languageName: node
-  linkType: hard
-
-"decimal.js@npm:^10.2.1":
-  version: 10.4.1
-  resolution: "decimal.js@npm:10.4.1"
-  checksum: 7dfe188af43c50c10cea18349d0f85cf89ac2952e53b5f359f4a37606b789da54116cea0060497794df9deca8f98fd6b662562507031ade66be974d2c49898bd
+"decimal.js@npm:^10.4.1":
+  version: 10.4.2
+  resolution: "decimal.js@npm:10.4.2"
+  checksum: 2f50de33c9c9fcd4c7ffd74cd02edecadeaa4d954e14ef721ee1d381d293c9237b1a90f54198b91f06fd5d3bb8b97079bba54fbc9ccd205d9e6bc8ffa82f6202
   languageName: node
   linkType: hard
 
@@ -7026,15 +7087,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal-ident@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "deep-equal-ident@npm:1.1.1"
-  dependencies:
-    lodash.isequal: ^3.0
-  checksum: c81139d54181a4a15b829ce31effa96e197f3e48fd51a1758c1a583c08060f9e4ca658943702610df5e70a64206122d4e955e612adfc88c6f0a3a717b7ea0878
-  languageName: node
-  linkType: hard
-
 "deep-equal@npm:^1.0.0":
   version: 1.1.1
   resolution: "deep-equal@npm:1.1.1"
@@ -7099,15 +7151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-property@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "define-property@npm:0.2.5"
-  dependencies:
-    is-descriptor: ^0.1.0
-  checksum: 9986915c0893818dedc9ca23eaf41370667762fd83ad8aa4bf026a28563120dbaacebdfbfbf2b18d3b929026b9c6ee972df1dbf22de8fafb5fe6ef18361e4750
-  languageName: node
-  linkType: hard
-
 "define-property@npm:^1.0.0":
   version: 1.0.0
   resolution: "define-property@npm:1.0.0"
@@ -7117,16 +7160,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-property@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "define-property@npm:2.0.2"
-  dependencies:
-    is-descriptor: ^1.0.2
-    isobject: ^3.0.1
-  checksum: f91a08ad008fa764172a2c072adc7312f10217ade89ddaea23018321c6d71b2b68b8c229141ed2064179404e345c537f1a2457c379824813695b51a6ad3e4969
-  languageName: node
-  linkType: hard
-
 "del@npm:^6.0.0":
   version: 6.1.1
   resolution: "del@npm:6.1.1"
@@ -7226,13 +7259,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff-sequences@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "diff-sequences@npm:26.6.2"
-  checksum: a576b78f542377ce2bb032aa91aaf12376c6f562f79b2570f5fe16b4c18acff78de144ae44f0d86bedfe9c29ef38aa027db963850213e07bbc1c1a3b2834e861
-  languageName: node
-  linkType: hard
-
 "diff-sequences@npm:^28.1.1":
   version: 28.1.1
   resolution: "diff-sequences@npm:28.1.1"
@@ -7247,6 +7273,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff-sequences@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "diff-sequences@npm:29.3.1"
+  checksum: adbacc8d56c42f73c12a90e253c2b7024d2cd52c30bd81a3960a9cfd35164f8ecd3d8dd82ded38b0e48585923b56bd28f9aae942e6d1b23f444213b9d786b925
+  languageName: node
+  linkType: hard
+
 "diff@npm:^4.0.1":
   version: 4.0.2
   resolution: "diff@npm:4.0.2"
@@ -7375,12 +7408,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domexception@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "domexception@npm:2.0.1"
+"domexception@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "domexception@npm:4.0.0"
   dependencies:
-    webidl-conversions: ^5.0.0
-  checksum: 24a3a07b85420671bc805ead7305e0f2ec9e55f104889b64c5a9fa7d93681e514f05c65f947bd9401b3da67f77b92fe7861bd15f4d0d418c4d32e34a2cd55d38
+    webidl-conversions: ^7.0.0
+  checksum: 774277cd9d4df033f852196e3c0077a34dbd15a96baa4d166e0e47138a80f4c0bdf0d94e4703e6ff5883cec56bb821a6fff84402d8a498e31de7c87eb932a294
   languageName: node
   linkType: hard
 
@@ -7564,10 +7597,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emittery@npm:^0.7.1":
-  version: 0.7.2
-  resolution: "emittery@npm:0.7.2"
-  checksum: a90d8b59a14de5f3c2bf9d9884867ab6f62d1da1363b660e1429543286f627372c07b70d78465e739f4a616ba1e6638f63c831ef0da146b89c7935f1e5a96ad5
+"emittery@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "emittery@npm:0.13.1"
+  checksum: 1573d0ae29ab34661b6c63251ff8f5facd24ccf6a823f19417ae8ba8c88ea450325788c67f16c99edec8de4b52ce93a10fe441ece389fd156e88ee7dab9bfa35
   languageName: node
   linkType: hard
 
@@ -7730,18 +7763,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enzyme-matchers@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "enzyme-matchers@npm:7.1.2"
-  dependencies:
-    circular-json-es6: ^2.0.1
-    deep-equal-ident: ^1.1.1
-  peerDependencies:
-    enzyme: ">=3.4.0"
-  checksum: 21c947d7122c33ada71596c40e5611c6108c6591c9d5ba0fb6bea8633792fdd894881696e3e1b394154b42cca885c3d1d89263ef9a3b1e301db25fdfb6fca394
-  languageName: node
-  linkType: hard
-
 "enzyme-shallow-equal@npm:^1.0.1, enzyme-shallow-equal@npm:^1.0.4":
   version: 1.0.4
   resolution: "enzyme-shallow-equal@npm:1.0.4"
@@ -7752,19 +7773,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enzyme-to-json@npm:^3.3.0":
-  version: 3.6.2
-  resolution: "enzyme-to-json@npm:3.6.2"
-  dependencies:
-    "@types/cheerio": ^0.22.22
-    lodash: ^4.17.21
-    react-is: ^16.12.0
-  peerDependencies:
-    enzyme: ^3.4.0
-  checksum: 90fba5bbcfda37f456d483a46d7a077123fb65f74e59bab1e137e30c84f5b3149114efae7f9736f7ea49dd9171299645816bc5f6649b16a19d47c8bd1d6d8065
-  languageName: node
-  linkType: hard
-
 "enzyme@npm:^3.11.0":
   version: 3.11.0
   resolution: "enzyme@npm:3.11.0"
@@ -7822,7 +7830,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1, es-abstract@npm:^1.19.2, es-abstract@npm:^1.19.4, es-abstract@npm:^1.19.5, es-abstract@npm:^1.20.0, es-abstract@npm:^1.20.1":
+"es-abstract@npm:^1.19.0, es-abstract@npm:^1.19.1, es-abstract@npm:^1.19.2, es-abstract@npm:^1.19.4, es-abstract@npm:^1.19.5, es-abstract@npm:^1.20.0":
   version: 1.20.3
   resolution: "es-abstract@npm:1.20.3"
   dependencies:
@@ -8192,7 +8200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-string-regexp@npm:^1.0.2, escape-string-regexp@npm:^1.0.5":
+"escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
   checksum: a968ad453dd0c2724e14a4f20e177aaf32bb384ab41b674a8454afe9a41c5e6fe8903323e0a1052f56289d04bd600f81278edf140b0fcc02f5cac98d0f5b5371
@@ -8213,7 +8221,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escodegen@npm:^1.11.0, escodegen@npm:^1.11.1, escodegen@npm:^1.9.1":
+"escodegen@npm:^1.11.1":
   version: 1.14.3
   resolution: "escodegen@npm:1.14.3"
   dependencies:
@@ -8571,9 +8579,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.26.0":
-  version: 8.26.0
-  resolution: "eslint@npm:8.26.0"
+"eslint@npm:^8.27.0":
+  version: 8.27.0
+  resolution: "eslint@npm:8.27.0"
   dependencies:
     "@eslint/eslintrc": ^1.3.3
     "@humanwhocodes/config-array": ^0.11.6
@@ -8616,7 +8624,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: da97a44bac58770d44dc6a2daa57cbb67ac888c060dde5a87c7785ea34a2cea61568d5238d375a14bfd548ffff7cd61691ab5a81c4625c7c97412b2d45b63843
+  checksum: 8fc3ecac3c620ca8758b63428981dee35758a312e607dfec0fd3815b9847b49e466ed7d0e2cadeb35e2a46d7f430581cc38e1e26bfd77728dde4e34bd9bd8686
   languageName: node
   linkType: hard
 
@@ -8772,13 +8780,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exec-sh@npm:^0.3.2":
-  version: 0.3.6
-  resolution: "exec-sh@npm:0.3.6"
-  checksum: de29ed40c263989ea151cfc8561c9a41a443185d1998b0ff7aee248323af3b46db3a1dc5341816297d0c02dca472b188640490aa4ba3cae017f531f98102607d
-  languageName: node
-  linkType: hard
-
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -8811,7 +8812,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^4.0.0, execa@npm:^4.0.2, execa@npm:^4.1.0":
+"execa@npm:^4.0.2, execa@npm:^4.1.0":
   version: 4.1.0
   resolution: "execa@npm:4.1.0"
   dependencies:
@@ -8869,21 +8870,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expand-brackets@npm:^2.1.4":
-  version: 2.1.4
-  resolution: "expand-brackets@npm:2.1.4"
-  dependencies:
-    debug: ^2.3.3
-    define-property: ^0.2.5
-    extend-shallow: ^2.0.1
-    posix-character-classes: ^0.1.0
-    regex-not: ^1.0.0
-    snapdragon: ^0.8.1
-    to-regex: ^3.0.1
-  checksum: 3e2fb95d2d7d7231486493fd65db913927b656b6fcdfcce41e139c0991a72204af619ad4acb1be75ed994ca49edb7995ef241dbf8cf44dc3c03d211328428a87
-  languageName: node
-  linkType: hard
-
 "expand-tilde@npm:^2.0.2":
   version: 2.0.2
   resolution: "expand-tilde@npm:2.0.2"
@@ -8893,20 +8879,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "expect@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    ansi-styles: ^4.0.0
-    jest-get-type: ^26.3.0
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-regex-util: ^26.0.0
-  checksum: e84ab6c96e99eaf92586e5c554317413352082b66be952ba338bf690e15106c0b6350ac99d0d66237d675cc75963811255120d47172a8e764b1d6a9ae2b6b1b4
-  languageName: node
-  linkType: hard
-
 "expect@npm:^28.1.3":
   version: 28.1.3
   resolution: "expect@npm:28.1.3"
@@ -8933,6 +8905,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expect@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "expect@npm:29.3.1"
+  dependencies:
+    "@jest/expect-utils": ^29.3.1
+    jest-get-type: ^29.2.0
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: 0662836949648b65ea80c0fc4777818bd384c00d2ad3d442ec1bea69a604097f94673a432245ae750b09bc8d292f381a31dcc59cf0433a9b2adfba501e257d63
+  languageName: node
+  linkType: hard
+
 "express@npm:4.17.1":
   version: 4.17.1
   resolution: "express@npm:4.17.1"
@@ -9028,16 +9013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend-shallow@npm:^3.0.0, extend-shallow@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "extend-shallow@npm:3.0.2"
-  dependencies:
-    assign-symbols: ^1.0.0
-    is-extendable: ^1.0.1
-  checksum: f39581b8f98e3ad94995e33214fff725b0297cf09f2725b6f624551cfb71e0764accfd0af80becc0182af5014d2a57b31b85ec999f9eb8a6c45af81752feac9a
-  languageName: node
-  linkType: hard
-
 "extend@npm:^3.0.0, extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
@@ -9045,22 +9020,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extglob@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "extglob@npm:2.0.4"
-  dependencies:
-    array-unique: ^0.3.2
-    define-property: ^1.0.0
-    expand-brackets: ^2.1.4
-    extend-shallow: ^2.0.1
-    fragment-cache: ^0.2.1
-    regex-not: ^1.0.0
-    snapdragon: ^0.8.1
-    to-regex: ^3.0.1
-  checksum: e1a891342e2010d046143016c6c03d58455c2c96c30bf5570ea07929984ee7d48fad86b363aee08f7a8a638f5c3a66906429b21ecb19bc8e90df56a001cd282c
-  languageName: node
-  linkType: hard
-
 "extract-zip@npm:^1.6.6":
   version: 1.7.0
   resolution: "extract-zip@npm:1.7.0"
@@ -9157,7 +9116,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-json-stable-stringify@npm:2.1.0, fast-json-stable-stringify@npm:2.x, fast-json-stable-stringify@npm:^2.0.0":
+"fast-json-stable-stringify@npm:2.1.0, fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
   checksum: 7f081eb0b8a64e0057b3bb03f974b3ef00135fbf36c1c710895cd9300f13c94ba809bb3a81cf4e1b03f6e5285610a61abbd7602d0652de423144dfee5a389c9b
@@ -9251,13 +9210,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-uri-to-path@npm:1.0.0":
-  version: 1.0.0
-  resolution: "file-uri-to-path@npm:1.0.0"
-  checksum: 3b545e3a341d322d368e880e1c204ef55f1d45cdea65f7efc6c6ce9e0c4d22d802d5629320eb779d006fe59624ac17b0e848d83cc5af7cd101f206cb704f5519
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.1":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -9267,21 +9219,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fill-range@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "fill-range@npm:4.0.0"
-  dependencies:
-    extend-shallow: ^2.0.1
-    is-number: ^3.0.0
-    repeat-string: ^1.6.1
-    to-regex-range: ^2.1.0
-  checksum: ccd57b7c43d7e28a1f8a60adfa3c401629c08e2f121565eece95e2386ebc64dedc7128d8c3448342aabf19db0c55a34f425f148400c7a7be9a606ba48749e089
-  languageName: node
-  linkType: hard
-
-"fill-range@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "fill-range@npm:7.0.1"
+"fill-range@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "fill-range@npm:7.0.1"
   dependencies:
     to-regex-range: ^5.0.1
   checksum: 7cdad7d426ffbaadf45aeb5d15ec675bbd77f7597ad5399e3d2766987ed20bda24d5fac64b3ee79d93276f5865608bb22344a26b9b1ae6c4d00bd94bf611623f
@@ -9433,13 +9373,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-in@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "for-in@npm:1.0.2"
-  checksum: 42bb609d564b1dc340e1996868b67961257fd03a48d7fdafd4f5119530b87f962be6b4d5b7e3a3fc84c9854d149494b1d358e0b0ce9837e64c4c6603a49451d6
-  languageName: node
-  linkType: hard
-
 "forever-agent@npm:~0.6.1":
   version: 0.6.1
   resolution: "forever-agent@npm:0.6.1"
@@ -9469,6 +9402,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "form-data@npm:4.0.0"
+  dependencies:
+    asynckit: ^0.4.0
+    combined-stream: ^1.0.8
+    mime-types: ^2.1.12
+  checksum: cb6f3ac49180be03ff07ba3ff125f9eba2ff0b277fb33c7fc47569fc5e616882c5b1c69b9904c4c4187e97dd0419dd03b134174756f296dec62041e6527e2c6e
+  languageName: node
+  linkType: hard
+
 "form-data@npm:~2.3.2":
   version: 2.3.3
   resolution: "form-data@npm:2.3.3"
@@ -9503,15 +9447,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fragment-cache@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "fragment-cache@npm:0.2.1"
-  dependencies:
-    map-cache: ^0.2.2
-  checksum: 5891d1c1d1d5e1a7fb3ccf28515c06731476fa88f7a50f4ede8a0d8d239a338448e7f7cc8b73db48da19c229fa30066104fe6489862065a4f1ed591c42fbeabf
-  languageName: node
-  linkType: hard
-
 "fresh@npm:0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
@@ -9586,18 +9521,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^1.2.7":
-  version: 1.2.13
-  resolution: "fsevents@npm:1.2.13"
-  dependencies:
-    bindings: ^1.5.0
-    nan: ^2.12.1
-  checksum: 4427ff08db9ee7327f2c3ad58ec56f9096a917eed861bfffaa2e2be419479cdf37d00750869ab9ecbf5f59f32ad999bd59577d73fc639193e6c0ce52bb253e02
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
   version: 2.3.2
   resolution: "fsevents@npm:2.3.2"
   dependencies:
@@ -9607,17 +9531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
-  version: 1.2.13
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
-  dependencies:
-    bindings: ^1.5.0
-    nan: ^2.12.1
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
+"fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
@@ -9699,7 +9613,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-caller-file@npm:^2.0.1, get-caller-file@npm:^2.0.5":
+"get-caller-file@npm:^2.0.5":
   version: 2.0.5
   resolution: "get-caller-file@npm:2.0.5"
   checksum: c6c7b60271931fa752aeb92f2b47e355eac1af3a2673f47c9589e8f8a41adc74d45551c1bc57b5e66a80609f10ffb72b6f575e4370d61cc3f7f3aaff01757cde
@@ -9780,13 +9694,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-value@npm:^2.0.3, get-value@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "get-value@npm:2.0.6"
-  checksum: f069c132791b357c8fc4adfe9e2929b0a2c6e95f98ca7bc6fcbc27f8a302e552f86b4ae61ec56d9e9ac2544b93b6a39743d479866a37b43fcc104088ba74f0d9
-  languageName: node
-  linkType: hard
-
 "getpass@npm:^0.1.1":
   version: 0.1.7
   resolution: "getpass@npm:0.1.7"
@@ -9900,7 +9807,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
+"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -10017,7 +9924,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, 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":
+"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.10
   resolution: "graceful-fs@npm:4.2.10"
   checksum: 4223a833e38e1d0d2aea630c2433cfb94ddc07dfc11d511dbd6be1d16688c5be848acc31f9a5d0d0ddbfb56d2ee5a6ae0278aceeb0ca6a13f27e06b9956fb952
@@ -10054,13 +9961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"growly@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "growly@npm:1.3.0"
-  checksum: 3043bd5c064e87f89e8c9b66894ed09fd882c7fa645621a543b45b72f040c7241e25061207a858ab191be2fbdac34795ff57c2a40962b154a6b2908a5e509252
-  languageName: node
-  linkType: hard
-
 "handlebars@npm:4.7.7, handlebars@npm:^4.7.7":
   version: 4.7.7
   resolution: "handlebars@npm:4.7.7"
@@ -10103,15 +10003,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-ansi@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "has-ansi@npm:2.0.0"
-  dependencies:
-    ansi-regex: ^2.0.0
-  checksum: f54e4887b9f8f3c4bfefd649c48825b3c093987c92c27880ee9898539e6f01aed261e82e73153c3f920fde0db5bf6ebd58deb498ed1debabcb4bc40113ccdf05
-  languageName: node
-  linkType: hard
-
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -10149,7 +10040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3":
+"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3":
   version: 1.0.3
   resolution: "has-symbols@npm:1.0.3"
   checksum: e6922b4345a3f37069cdfe8600febbca791c94988c01af3394d86ca3360b4b93928bbf395859158f88099cb10b19d98e3bbab7c9ff2c1bd09cf665ee90afa2c3
@@ -10172,45 +10063,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-value@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "has-value@npm:0.3.1"
-  dependencies:
-    get-value: ^2.0.3
-    has-values: ^0.1.4
-    isobject: ^2.0.0
-  checksum: 7a7c2e9d07bc9742c81806150adb154d149bc6155267248c459cd1ce2a64b0759980d26213260e4b7599c8a3754551179f155ded88d0533a0d2bc7bc29028432
-  languageName: node
-  linkType: hard
-
-"has-value@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-value@npm:1.0.0"
-  dependencies:
-    get-value: ^2.0.6
-    has-values: ^1.0.0
-    isobject: ^3.0.0
-  checksum: 17cdccaf50f8aac80a109dba2e2ee5e800aec9a9d382ef9deab66c56b34269e4c9ac720276d5ffa722764304a1180ae436df077da0dd05548cfae0209708ba4d
-  languageName: node
-  linkType: hard
-
-"has-values@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "has-values@npm:0.1.4"
-  checksum: a8f00ad862c20289798c35243d5bd0b0a97dd44b668c2204afe082e0265f2d0bf3b89fc8cc0ef01a52b49f10aa35cf85c336ee3a5f1cac96ed490f5e901cdbf2
-  languageName: node
-  linkType: hard
-
-"has-values@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "has-values@npm:1.0.0"
-  dependencies:
-    is-number: ^3.0.0
-    kind-of: ^4.0.0
-  checksum: a6f2a1cc6b2e43eacc68e62e71ad6890def7f4b13d2ef06b4ad3ee156c23e470e6df144b9b467701908e17633411f1075fdff0cab45fb66c5e0584d89b25f35e
-  languageName: node
-  linkType: hard
-
 "has@npm:^1.0.1, has@npm:^1.0.3":
   version: 1.0.3
   resolution: "has@npm:1.0.3"
@@ -10271,12 +10123,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-encoding-sniffer@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "html-encoding-sniffer@npm:2.0.1"
+"html-encoding-sniffer@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-encoding-sniffer@npm:3.0.0"
   dependencies:
-    whatwg-encoding: ^1.0.5
-  checksum: 6dc3aa2d35a8f0c8c7906ffb665dd24a88f7004f913fafdd3541d24a4da6182ab30c4a0a81387649a1234ecb90182c4136220ed12ae3dc1a57ed68e533dea416
+    whatwg-encoding: ^2.0.0
+  checksum: b17b3b0fb5d061d8eb15121c3b0b536376c3e295ecaf09ba48dd69c6b6c957839db124fe1e2b3f11329753a4ee01aa7dedf63b7677999e86da17fbbdd82c5386
   languageName: node
   linkType: hard
 
@@ -10531,7 +10383,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"https-proxy-agent@npm:^5.0.0":
+"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"
   dependencies:
@@ -10624,7 +10476,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -10785,15 +10637,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"invariant@npm:^2.2.4":
-  version: 2.2.4
-  resolution: "invariant@npm:2.2.4"
-  dependencies:
-    loose-envify: ^1.0.0
-  checksum: 5af133a917c0bcf65e84e7f23e779e7abc1cd49cb7fdc62d00d1de74b0d8c1b5ee74ac7766099fb3be1b05b26dfc67bab76a17030d2fe7ea2eef867434362dfc
-  languageName: node
-  linkType: hard
-
 "ip-regex@npm:^2.1.0":
   version: 2.1.0
   resolution: "ip-regex@npm:2.1.0"
@@ -10815,15 +10658,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-accessor-descriptor@npm:^0.1.6":
-  version: 0.1.6
-  resolution: "is-accessor-descriptor@npm:0.1.6"
-  dependencies:
-    kind-of: ^3.0.2
-  checksum: f2c314b314ec6e8a6e559351bff3c7ee9aed7a5e9c6f61dd8cb9e1382c8bfe33dca3f0e0af13daf9ded9e6e66390ff23b4acfb615d7a249009a51506a7b0f151
-  languageName: node
-  linkType: hard
-
 "is-accessor-descriptor@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-accessor-descriptor@npm:1.0.0"
@@ -10916,17 +10750,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-ci@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-ci@npm:2.0.0"
-  dependencies:
-    ci-info: ^2.0.0
-  bin:
-    is-ci: bin.js
-  checksum: 17de4e2cd8f993c56c86472dd53dd9e2c7f126d0ee55afe610557046cdd64de0e8feadbad476edc9eeff63b060523b8673d9094ed2ab294b59efb5a66dd05a9a
-  languageName: node
-  linkType: hard
-
 "is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
   version: 2.10.0
   resolution: "is-core-module@npm:2.10.0"
@@ -10936,15 +10759,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-data-descriptor@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "is-data-descriptor@npm:0.1.4"
-  dependencies:
-    kind-of: ^3.0.2
-  checksum: 32fda7e966b2c1f093230d5ef2aad1bb86e43e7280da50961e38ec31dbd8a50570a2911fd45277d321074a0762adc98e8462bb62820462594128857225e90d21
-  languageName: node
-  linkType: hard
-
 "is-data-descriptor@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-data-descriptor@npm:1.0.0"
@@ -10970,18 +10784,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-descriptor@npm:^0.1.0":
-  version: 0.1.6
-  resolution: "is-descriptor@npm:0.1.6"
-  dependencies:
-    is-accessor-descriptor: ^0.1.6
-    is-data-descriptor: ^0.1.4
-    kind-of: ^5.0.0
-  checksum: 6b8f5617b764ef8c6be3d54830184357e6cdedd8e0eddf1b97d0658616ac170bfdbc7c1ad00e0aa9f5b767acdb9d6c63d4df936501784b34936bd0f9acf3b665
-  languageName: node
-  linkType: hard
-
-"is-descriptor@npm:^1.0.0, is-descriptor@npm:^1.0.2":
+"is-descriptor@npm:^1.0.0":
   version: 1.0.2
   resolution: "is-descriptor@npm:1.0.2"
   dependencies:
@@ -11008,22 +10811,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
+"is-extendable@npm:^0.1.0":
   version: 0.1.1
   resolution: "is-extendable@npm:0.1.1"
   checksum: dd5ca3994a28e1740d1e25192e66eed128e0b2ff161a7ea348e87ae4f616554b486854de423877a2a2c171d5f7cd6e8093b91f54533bc88a59ee1c9838c43879
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-extendable@npm:1.0.1"
-  dependencies:
-    is-plain-object: ^2.0.4
-  checksum: 1d6678a5be1563db6ecb121331c819c38059703f0179f52aa80c242c223ee9c6b66470286636c0e63d7163e4d905c0a7d82a096e0b5eaeabb51b9f8d0af0d73f
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -11151,15 +10945,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "is-plain-object@npm:2.0.4"
-  dependencies:
-    isobject: ^3.0.1
-  checksum: f050fdd5203d9c81e8c4df1b3ff461c4bc64e8b5ca383bcdde46131361d0a678e80bcf00b5257646f6c636197629644d53bd8e2375aea633de09a82d57e942f4
-  languageName: node
-  linkType: hard
-
 "is-plain-object@npm:^5.0.0":
   version: 5.0.0
   resolution: "is-plain-object@npm:5.0.0"
@@ -11282,13 +11067,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-windows@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-windows@npm:1.0.2"
-  checksum: b32f418ab3385604a66f1b7a3ce39d25e8881dee0bd30816dc8344ef6ff9df473a732bcc1ec4e84fe99b2f229ae474f7133e8e93f9241686cfcf7eebe53ba7a5
-  languageName: node
-  linkType: hard
-
 "is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
@@ -11298,7 +11076,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:1.0.0, isarray@npm:~1.0.0":
+"isarray@npm:~1.0.0":
   version: 1.0.0
   resolution: "isarray@npm:1.0.0"
   checksum: 18b5be6669be53425f0b84098732670ed4e727e3af33bc7f948aac01782110eb9a18b3b329c5323bcdd3acdaae547ee077d3951317e7f133bff7105264b3003d
@@ -11312,22 +11090,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isobject@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "isobject@npm:2.1.0"
-  dependencies:
-    isarray: 1.0.0
-  checksum: c4cafec73b3b2ee11be75dff8dafd283b5728235ac099b07d7873d5182553a707768e208327bbc12931b9422d8822280bf88d894a0024ff5857b3efefb480e7b
-  languageName: node
-  linkType: hard
-
-"isobject@npm:^3.0.0, isobject@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "isobject@npm:3.0.1"
-  checksum: 03344f5064a82f099a0cd1a8a407f4c0d20b7b8485e8e816c39f249e9416b06c322e8dec5b842b6bb8a06de0af9cb48e7bc1b5352f0fadc2f0abac033db3d4db
-  languageName: node
-  linkType: hard
-
 "isobject@npm:^4.0.0":
   version: 4.0.0
   resolution: "isobject@npm:4.0.0"
@@ -11352,13 +11114,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-coverage@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "istanbul-lib-coverage@npm:2.0.5"
-  checksum: 370bd6940532ea2737a85532870f3024b113774ce3e637438cccfaf979a7598aa29d342f4adcc3d73e306155c907b519bc1c5c6887a29234f605a1a472747821
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-lib-coverage@npm:3.2.0"
@@ -11366,33 +11121,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-instrument@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "istanbul-lib-instrument@npm:3.3.0"
-  dependencies:
-    "@babel/generator": ^7.4.0
-    "@babel/parser": ^7.4.3
-    "@babel/template": ^7.4.0
-    "@babel/traverse": ^7.4.3
-    "@babel/types": ^7.4.0
-    istanbul-lib-coverage: ^2.0.5
-    semver: ^6.0.0
-  checksum: 988eb9d58ae0ae69686369f6809a610f6f8db5c5f73931a496b02b941da56cfc176f84af0dd8db819ad2e6aca6dc2f38c91a288f1c6a3f79cfb10320180e998d
-  languageName: node
-  linkType: hard
-
-"istanbul-lib-instrument@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "istanbul-lib-instrument@npm:4.0.3"
-  dependencies:
-    "@babel/core": ^7.7.5
-    "@istanbuljs/schema": ^0.1.2
-    istanbul-lib-coverage: ^3.0.0
-    semver: ^6.3.0
-  checksum: 7f1005566a912e33e847576b2c1072d48a7c556810a54d912f3e2f0bd966171e68b30c40b0c1ce6ee9b8864de422d0c10e2d0dfd2d25b48723950cc78cd437c2
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-instrument@npm:^5.0.4, istanbul-lib-instrument@npm:^5.1.0":
   version: 5.2.0
   resolution: "istanbul-lib-instrument@npm:5.2.0"
@@ -11428,7 +11156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-reports@npm:^3.0.2, istanbul-reports@npm:^3.1.3":
+"istanbul-reports@npm:^3.1.3":
   version: 3.1.5
   resolution: "istanbul-reports@npm:3.1.5"
   dependencies:
@@ -11452,14 +11180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-changed-files@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-changed-files@npm:26.6.2"
+"jest-changed-files@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-changed-files@npm:29.2.0"
   dependencies:
-    "@jest/types": ^26.6.2
-    execa: ^4.0.0
-    throat: ^5.0.0
-  checksum: 6b679ba45c3fe08f659b59e2c22b6b773436e498aa57e62694ea1f185ed3d4e439bc1831dedca3df7b28d1562eec31ae9d79c65c8caea1dd5e620419da20013d
+    execa: ^5.0.0
+    p-limit: ^3.1.0
+  checksum: 2d3ed094ff26e6c3d5151d3bc6314c352c96f2070a3c92278711a214eeae2a6f931d619843f9e3a796c066a2ad1a7cc22f30f9e21c8bbde2fbaddbd10a64f8b8
   languageName: node
   linkType: hard
 
@@ -11490,26 +11217,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-cli@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-cli@npm:26.6.3"
+"jest-circus@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-circus@npm:29.3.1"
   dependencies:
-    "@jest/core": ^26.6.3
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/environment": ^29.3.1
+    "@jest/expect": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    chalk: ^4.0.0
+    co: ^4.6.0
+    dedent: ^0.7.0
+    is-generator-fn: ^2.0.0
+    jest-each: ^29.3.1
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    p-limit: ^3.1.0
+    pretty-format: ^29.3.1
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: 01f706a16b2a89fc1af2df984c4bae5286a2540f0ddc3a252c165825161a3c234c11d85d73856693ac3a5789d199fe6574899323cad1b0905a23e4a8a1af5a56
+  languageName: node
+  linkType: hard
+
+"jest-cli@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-cli@npm:29.3.1"
+  dependencies:
+    "@jest/core": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
     chalk: ^4.0.0
     exit: ^0.1.2
-    graceful-fs: ^4.2.4
+    graceful-fs: ^4.2.9
     import-local: ^3.0.2
-    is-ci: ^2.0.0
-    jest-config: ^26.6.3
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
+    jest-config: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
     prompts: ^2.0.1
-    yargs: ^15.4.1
+    yargs: ^17.3.1
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
   bin:
     jest: bin/jest.js
-  checksum: 3f62c26b300549115bcfc0393d7d49467d414d200bb211a8843fd48d0296ddbfc5e6fe808c64ad2039127657b662e3ba3db44166341bd5db2d089bf09cf82a2c
+  checksum: df1beb004be8913bcabe536b3071ec6568524b8d94ba480423ad4c89c03660163a54615c0e6e557a7894b24ea2c68bf556ee1af06f2cbf5e4e0c9ac6ae223b90
   languageName: node
   linkType: hard
 
@@ -11551,46 +11309,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-config@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-config@npm:26.6.3"
+"jest-config@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-config@npm:29.3.1"
   dependencies:
-    "@babel/core": ^7.1.0
-    "@jest/test-sequencer": ^26.6.3
-    "@jest/types": ^26.6.2
-    babel-jest: ^26.6.3
+    "@babel/core": ^7.11.6
+    "@jest/test-sequencer": ^29.3.1
+    "@jest/types": ^29.3.1
+    babel-jest: ^29.3.1
     chalk: ^4.0.0
+    ci-info: ^3.2.0
     deepmerge: ^4.2.2
-    glob: ^7.1.1
-    graceful-fs: ^4.2.4
-    jest-environment-jsdom: ^26.6.2
-    jest-environment-node: ^26.6.2
-    jest-get-type: ^26.3.0
-    jest-jasmine2: ^26.6.3
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    micromatch: ^4.0.2
-    pretty-format: ^26.6.2
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    jest-circus: ^29.3.1
+    jest-environment-node: ^29.3.1
+    jest-get-type: ^29.2.0
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-runner: ^29.3.1
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
+    micromatch: ^4.0.4
+    parse-json: ^5.2.0
+    pretty-format: ^29.3.1
+    slash: ^3.0.0
+    strip-json-comments: ^3.1.1
   peerDependencies:
+    "@types/node": "*"
     ts-node: ">=9.0.0"
   peerDependenciesMeta:
+    "@types/node":
+      optional: true
     ts-node:
       optional: true
-  checksum: 7ca34c8d4fa48d9af081e05a2a7a54df5ad03df14dc1edca52f162c65f54fbd3745c14512b3f9dd42b753bd90d4aec4b86a7e1fdd410780bc79d27be3af5a36e
-  languageName: node
-  linkType: hard
-
-"jest-diff@npm:^26.0.0, jest-diff@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-diff@npm:26.6.2"
-  dependencies:
-    chalk: ^4.0.0
-    diff-sequences: ^26.6.2
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 3a9c88c8f308487059788ab1199e12f9b4657168964a2307573760b4d41ab5b851e5bef70125ef5ceddc1e201d6753d6ceae88994c197990dd9307cb7d94b9a1
+  checksum: 395f9057cc93e59ea433901c1edc9660eb18e3543c214f4064e2be6e193f8e3db452995d91267fc21b6e53ab85b4f6fbb94db31c5543ec5db1c6dc44b157f950
   languageName: node
   linkType: hard
 
@@ -11618,12 +11371,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-docblock@npm:^26.0.0":
-  version: 26.0.0
-  resolution: "jest-docblock@npm:26.0.0"
+"jest-diff@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-diff@npm:29.3.1"
   dependencies:
-    detect-newline: ^3.0.0
-  checksum: 769c9379a906b98afd9fa2feca3a271a06bec62e26bb99e7bba4182ead955b677cbedeaa7b129653dd21ee9473604c40836651f7c4c1265e37ca2a68e01e0f8b
+    chalk: ^4.0.0
+    diff-sequences: ^29.3.1
+    jest-get-type: ^29.2.0
+    pretty-format: ^29.3.1
+  checksum: 6bbe1fc91f9e7351e995f725029d984392fd0fe2374e64953c2b38a8d857f93b845fcf5d9421cccf2be077f651374f6b7ca6c5970687b2b6521452c15c1e3286
   languageName: node
   linkType: hard
 
@@ -11636,16 +11392,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-each@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-each@npm:26.6.2"
+"jest-docblock@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-docblock@npm:29.2.0"
   dependencies:
-    "@jest/types": ^26.6.2
-    chalk: ^4.0.0
-    jest-get-type: ^26.3.0
-    jest-util: ^26.6.2
-    pretty-format: ^26.6.2
-  checksum: 93fca8619afba3e9f77903929a5f4ba84a4b4ab22852d062a24e7029038456b2d5bef5761afa1c3ac52a59434484f101d44beae35f3b7e5ec1a8aa695a1c879a
+    detect-newline: ^3.0.0
+  checksum: 2e5ac2ce86475afa4b0f15fa388206f187d936d0612e45ad29e0aa18158ee951c1d83b1f1ec7deee535f7afa80dbbc875d79398879703045a262dbf8344280de
   languageName: node
   linkType: hard
 
@@ -11662,70 +11414,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-enzyme@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "jest-environment-enzyme@npm:7.1.2"
-  dependencies:
-    jest-environment-jsdom: ^24.0.0
-  peerDependencies:
-    enzyme: 3.x
-    jest: ">=22.0.0"
-    react: ^0.13.0 || ^0.14.0 || ^15.0.0 || >=16.x
-  checksum: 4dba286640f9619d9fdc56682dddfcb82538e0d5fe1c26f0fa99c8e6b786b945ee841ea87834f0957f630e8cca95d9487e85e9752f00b78e03deb9616dfe5f24
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom-thirteen@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "jest-environment-jsdom-thirteen@npm:1.0.1"
-  dependencies:
-    jest-mock: ^24.0.0
-    jest-util: ^24.0.0
-    jsdom: ^13.0.0
-  checksum: bd067dcdf9c8ac019911abaf7db8f98dd554a65b0c33317e8b8143bf9f413ce3fb3d4c1ac0e3c62fbe187c4b7e3e3bad6bee2103a22eb53b663451b4f92ebc64
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^24.0.0":
-  version: 24.9.0
-  resolution: "jest-environment-jsdom@npm:24.9.0"
-  dependencies:
-    "@jest/environment": ^24.9.0
-    "@jest/fake-timers": ^24.9.0
-    "@jest/types": ^24.9.0
-    jest-mock: ^24.9.0
-    jest-util: ^24.9.0
-    jsdom: ^11.5.1
-  checksum: 1f428e495000a8e221a11aa43e33dbb8d8073bcd5aa218b08652b12b9c6d39e7f56de1525e14b5c141d76c53fa07b62a6492e307f2513592f27556ac9913d437
-  languageName: node
-  linkType: hard
-
-"jest-environment-jsdom@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-environment-jsdom@npm:26.6.2"
+"jest-each@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-each@npm:29.3.1"
   dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-    jsdom: ^16.4.0
-  checksum: 5bbcc49240d59e966adb690ae73bdd7cd650b401a2420837c4770dbd148ddb2d417bcfb9fe0b4f5e85fda5d5d2e93e62788b699350eb6bd924cbf6bc9c833080
+    "@jest/types": ^29.3.1
+    chalk: ^4.0.0
+    jest-get-type: ^29.2.0
+    jest-util: ^29.3.1
+    pretty-format: ^29.3.1
+  checksum: c40262f290cf396406289d1a3884a02048b155e3d55da061f0b5d32b385cc6030799c88998733392335dd69c78da8aa6bed82399f5e8db642f5ef9e370425fc3
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-environment-node@npm:26.6.2"
+"jest-environment-jsdom@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-environment-jsdom@npm:29.3.1"
   dependencies:
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/types": ^26.6.2
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/jsdom": ^20.0.0
     "@types/node": "*"
-    jest-mock: ^26.6.2
-    jest-util: ^26.6.2
-  checksum: 887382992bfd8110337cdc6e8a931f647d78363aa1ed777a2d9ff0f2edc468e6cc9e9b9a5d26c772534d0bd8ec41d860e433beb2d6f3c8a8a2cab3007ceec126
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+    jsdom: ^20.0.0
+  peerDependencies:
+    canvas: ^2.5.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 14e7af0f1d7e8eba6dc46962fd0b9556f1488776978d6b15e1408c1564bb7f04315ee7e24eed62cb4604fd46cb7e04180561f831273c27c13ab49fef27c1246f
   languageName: node
   linkType: hard
 
@@ -11743,24 +11462,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-enzyme@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "jest-enzyme@npm:7.1.2"
+"jest-environment-node@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-environment-node@npm:29.3.1"
   dependencies:
-    enzyme-matchers: ^7.1.2
-    enzyme-to-json: ^3.3.0
-    jest-environment-enzyme: ^7.1.2
-  peerDependencies:
-    enzyme: ">=3.4.0"
-    jest: ">=22.0.0"
-  checksum: a27a393addf4bbe12166c46d392b0bc7d6f0a0fa9f59e5d34ca2ae5ca671f725a72c1f4a633535a53dfe0878cc9c8c591be8d52dd66998d9e87a6ab4b8a92561
-  languageName: node
-  linkType: hard
-
-"jest-get-type@npm:^26.3.0":
-  version: 26.3.0
-  resolution: "jest-get-type@npm:26.3.0"
-  checksum: 112fc7f962d1c4625a51b6ccfe6e9c8e54ab80816bf8dbf2b1bf25d12c0f75c74ebad0c2f37622aea81019a2087451bfb12a46619ed6717e64ee875ea2de5520
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-mock: ^29.3.1
+    jest-util: ^29.3.1
+  checksum: b74e1ed332eaab4a15384ddfceb340867aa98cc2c4387d8001fe13087a3586e91f89c79f830f3f4a72547c08283b030cc4267d1a91456ab69b9e29602773b280
   languageName: node
   linkType: hard
 
@@ -11778,82 +11490,64 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-haste-map@npm:24.9.0"
-  dependencies:
-    "@jest/types": ^24.9.0
-    anymatch: ^2.0.0
-    fb-watchman: ^2.0.0
-    fsevents: ^1.2.7
-    graceful-fs: ^4.1.15
-    invariant: ^2.2.4
-    jest-serializer: ^24.9.0
-    jest-util: ^24.9.0
-    jest-worker: ^24.9.0
-    micromatch: ^3.1.10
-    sane: ^4.0.3
-    walker: ^1.0.7
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 734e52354c95d1982eb4a40e9663119952bd17364b67dcf9757893956c4d3a370199531c29cab70636ab005582172b89d46553cc0afedfd343a7600b4913a81e
+"jest-get-type@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-get-type@npm:29.2.0"
+  checksum: 6466631b344ff8e9d3fa6a47bafa4fc2baf42ec8b4f5de5c99fa1edda128af869da319af4cf770662776e4ed7a3e44656eba690cf5b662c664605b0331762bc7
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-haste-map@npm:26.6.2"
+"jest-haste-map@npm:^28.1.1, jest-haste-map@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-haste-map@npm:28.1.3"
   dependencies:
-    "@jest/types": ^26.6.2
-    "@types/graceful-fs": ^4.1.2
+    "@jest/types": ^28.1.3
+    "@types/graceful-fs": ^4.1.3
     "@types/node": "*"
     anymatch: ^3.0.3
     fb-watchman: ^2.0.0
-    fsevents: ^2.1.2
-    graceful-fs: ^4.2.4
-    jest-regex-util: ^26.0.0
-    jest-serializer: ^26.6.2
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    micromatch: ^4.0.2
-    sane: ^4.0.3
-    walker: ^1.0.7
+    fsevents: ^2.3.2
+    graceful-fs: ^4.2.9
+    jest-regex-util: ^28.0.2
+    jest-util: ^28.1.3
+    jest-worker: ^28.1.3
+    micromatch: ^4.0.4
+    walker: ^1.0.8
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: 85a40d8ecf4bfb659613f107c963c7366cdf6dcceb0ca73dc8ca09fbe0e2a63b976940f573db6260c43011993cb804275f447f268c3bc4b680c08baed300701d
+  checksum: 6a2beedd31f5d67b508d57fbfdd8858cfbd2f59a61737fc74cac4b9f60120faeda8c40189afba331324b08e10bc2281521292cdb6713fb3cab7770828f4e83d9
   languageName: node
   linkType: hard
 
-"jest-haste-map@npm:^28.1.1, jest-haste-map@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "jest-haste-map@npm:28.1.3"
+"jest-haste-map@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-haste-map@npm:29.3.1"
   dependencies:
-    "@jest/types": ^28.1.3
+    "@jest/types": ^29.3.1
     "@types/graceful-fs": ^4.1.3
     "@types/node": "*"
     anymatch: ^3.0.3
     fb-watchman: ^2.0.0
     fsevents: ^2.3.2
     graceful-fs: ^4.2.9
-    jest-regex-util: ^28.0.2
-    jest-util: ^28.1.3
-    jest-worker: ^28.1.3
+    jest-regex-util: ^29.2.0
+    jest-util: ^29.3.1
+    jest-worker: ^29.3.1
     micromatch: ^4.0.4
     walker: ^1.0.8
   dependenciesMeta:
     fsevents:
       optional: true
-  checksum: 6a2beedd31f5d67b508d57fbfdd8858cfbd2f59a61737fc74cac4b9f60120faeda8c40189afba331324b08e10bc2281521292cdb6713fb3cab7770828f4e83d9
+  checksum: 9f1309a727cf91ac15e329ce8f266c289bc9df4ccf1577f2187cd90ef6dbe4d7e2872432e5a8054a500340458e8c0a03f12a50e415cf305720dbd1e229531e08
   languageName: node
   linkType: hard
 
-"jest-image-snapshot@npm:^4.3.0":
-  version: 4.5.1
-  resolution: "jest-image-snapshot@npm:4.5.1"
+"jest-image-snapshot@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "jest-image-snapshot@npm:6.0.0"
   dependencies:
-    chalk: ^1.1.3
+    chalk: ^4.0.0
     get-stdin: ^5.0.1
     glur: ^1.1.2
     lodash: ^4.17.4
@@ -11863,56 +11557,20 @@ __metadata:
     rimraf: ^2.6.2
     ssim.js: ^3.1.1
   peerDependencies:
-    jest: ">=20 <=27"
-  checksum: 270934f48183e5e0719ab1bfef91bce223f26ae99c68d2478f40caecdb6f43abcbabfa05c785f0a214ef5a24c1a54b9547c50e1c2dd9256e4fdf45589ac63dfd
+    jest: ">=20 <=29"
+  checksum: 2ec7ab03f0857d603b272aedf6fb2d18c85eb3cda43c2388f9f9f51b43b0fe1a18ec1d84c8a3598b11506bbc941caab9a49ab19309ce865d86bcc32ff6a1920e
   languageName: node
   linkType: hard
 
-"jest-jasmine2@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-jasmine2@npm:26.6.3"
-  dependencies:
-    "@babel/traverse": ^7.1.0
-    "@jest/environment": ^26.6.2
-    "@jest/source-map": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    chalk: ^4.0.0
-    co: ^4.6.0
-    expect: ^26.6.2
-    is-generator-fn: ^2.0.0
-    jest-each: ^26.6.2
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-runtime: ^26.6.3
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    pretty-format: ^26.6.2
-    throat: ^5.0.0
-  checksum: 9154ceb08fdfd263a1850af9008b6e5ab4d1242af45fede5a6580fc1db85cd9072a27b609590e76ae8d80e281b2ec96476528e8d37938b92061b746e88330f77
-  languageName: node
-  linkType: hard
-
-"jest-junit@npm:^13.0.0":
-  version: 13.2.0
-  resolution: "jest-junit@npm:13.2.0"
+"jest-junit@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "jest-junit@npm:14.0.1"
   dependencies:
     mkdirp: ^1.0.4
     strip-ansi: ^6.0.1
     uuid: ^8.3.2
     xml: ^1.0.1
-  checksum: c77c8fb91d9250ed062cf2e36243b5876bed1bf47a168fa3c73acd9c90ad49929e08fe52fe5b1ef7d65ad29a5e00838a696894b28372f5d89e489934e85ea1b5
-  languageName: node
-  linkType: hard
-
-"jest-leak-detector@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-leak-detector@npm:26.6.2"
-  dependencies:
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 6062c04531126d1dfb3dee21483963dd75a975cb89a105b54cf767cc350b174ffcc9177d8750d14e30f36c475be7d96554c558bdf1f1ae6ad9b93bcea7097312
+  checksum: ec06ffad0326f037e62637b0c9935f2668c4657bebf4b81ab3b14867482b754f479c93cd13fe8915b763a7196a3dbc3edf323f062026763e4a79891b617e5945
   languageName: node
   linkType: hard
 
@@ -11926,15 +11584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-matcher-utils@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-matcher-utils@npm:26.6.2"
+"jest-leak-detector@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-leak-detector@npm:29.3.1"
   dependencies:
-    chalk: ^4.0.0
-    jest-diff: ^26.6.2
-    jest-get-type: ^26.3.0
-    pretty-format: ^26.6.2
-  checksum: 1303fc4dfd80848483b64bafc99beb31678653ad3f34b4c23e982a16016aec1f8a7de4a583044d9c43e59ee7e68e07c57f3a8b51e40fbefe42eafad45cc725ed
+    jest-get-type: ^29.2.0
+    pretty-format: ^29.3.1
+  checksum: d9d6e107a49cf44d748936a60a3190175b76e5d9aabd9c40c0196dafa8941fd6cb3ef60e57a85f65f5ce466d28b14ad7fceea83f81ec1e8769ae9cde5ceb901a
   languageName: node
   linkType: hard
 
@@ -11962,53 +11618,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-message-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-message-util@npm:24.9.0"
+"jest-matcher-utils@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-matcher-utils@npm:29.3.1"
   dependencies:
-    "@babel/code-frame": ^7.0.0
-    "@jest/test-result": ^24.9.0
-    "@jest/types": ^24.9.0
-    "@types/stack-utils": ^1.0.1
-    chalk: ^2.0.1
-    micromatch: ^3.1.10
-    slash: ^2.0.0
-    stack-utils: ^1.0.1
-  checksum: 24d0d5bae7bf580179446def5c6a3b1c6ea727b39464d84388393b1b7e653beeac7f2dd3a9fe57d31e780d5555eaf9ed1cf224c3437f3b270c32e7ca37db0013
-  languageName: node
-  linkType: hard
-
-"jest-message-util@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-message-util@npm:26.6.2"
-  dependencies:
-    "@babel/code-frame": ^7.0.0
-    "@jest/types": ^26.6.2
-    "@types/stack-utils": ^2.0.0
     chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    micromatch: ^4.0.2
-    pretty-format: ^26.6.2
-    slash: ^3.0.0
-    stack-utils: ^2.0.2
-  checksum: f6138d67154137cf3e985b2b469d0c78846cce787fed16b107c177fc9c6eb2606b7bce8e88d2a6bc830262d77469ecf26c70925cefc98dee83b5e8ed08981ff5
-  languageName: node
-  linkType: hard
-
-"jest-message-util@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-message-util@npm:27.5.1"
-  dependencies:
-    "@babel/code-frame": ^7.12.13
-    "@jest/types": ^27.5.1
-    "@types/stack-utils": ^2.0.0
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.9
-    micromatch: ^4.0.4
-    pretty-format: ^27.5.1
-    slash: ^3.0.0
-    stack-utils: ^2.0.3
-  checksum: 447c99061006949bd0c5ac3fcf4dfad11e763712ada1b3df1c1f276d1d4f55b3f7a8bee27591cd1fe23b56220830b2a74f321925d345374d1b7cf9cd536f19b5
+    jest-diff: ^29.3.1
+    jest-get-type: ^29.2.0
+    pretty-format: ^29.3.1
+  checksum: 4efdcc2fa33a403285e26521f795c9c7ad537a30e5b4183a8d97fd9f05251107ef2ef1397dbb420a2517fa91606655cb1103a0c60a52b1f003d928dbea3963e3
   languageName: node
   linkType: hard
 
@@ -12046,22 +11664,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^24.0.0, jest-mock@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-mock@npm:24.9.0"
+"jest-message-util@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-message-util@npm:29.3.1"
   dependencies:
-    "@jest/types": ^24.9.0
-  checksum: a06ae0e76b0d270806e45298fdc9d637fe21d0e0efa8254845ac19a39b7d70a248a6f84b0341f36b2e062e9f225a0ee6ce68c1bdedb5f3a56635585ef8d6beb4
-  languageName: node
-  linkType: hard
-
-"jest-mock@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-mock@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-  checksum: cf77b49efe76cdedc63363ccdbae8bc68e0301fbded669e7b45647b7b7c1dce90985cf6a3a13da161f644523d7d0aad03184c6f39302ee4b52f954a1de37960f
+    "@babel/code-frame": ^7.12.13
+    "@jest/types": ^29.3.1
+    "@types/stack-utils": ^2.0.0
+    chalk: ^4.0.0
+    graceful-fs: ^4.2.9
+    micromatch: ^4.0.4
+    pretty-format: ^29.3.1
+    slash: ^3.0.0
+    stack-utils: ^2.0.3
+  checksum: 09291af22383d14a6ac0e4faea6382e07e38a89b67985ac48fd4604037572c847021d471f11f1866fd696875218996740a10a176acc26fbe072e4394d52129e0
   languageName: node
   linkType: hard
 
@@ -12085,6 +11701,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-mock@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-mock@npm:29.3.1"
+  dependencies:
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    jest-util: ^29.3.1
+  checksum: d36a54364721e80a95f9af43358e25513d6f052a53b6625bd5238948d9d297ea3c180893cedbcc9e68c1e7b2e9326ac6ae08195b9c0578692a278323fe493ae4
+  languageName: node
+  linkType: hard
+
 "jest-os-detection@npm:^1.3.1":
   version: 1.3.1
   resolution: "jest-os-detection@npm:1.3.1"
@@ -12104,34 +11731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-raw-loader@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "jest-raw-loader@npm:1.0.1"
-  checksum: 14c5630f34f3f4a0d45036d5a180ca4c971d3428171100c5e4d6a00541bffb5599ee8592dd2c1abbd7e1caed635971b9c59394737dd76402278e41d025793c08
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-regex-util@npm:24.9.0"
-  checksum: 6a4dfda09d47c486eaeafafd2d836bdfc3dbeccef7d3e11d3a230f27078accbe51b694bc64d9efb7654d7f5acaa6ba70416d99d4ec97d33e452aa856d2cda03a
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^26.0.0":
-  version: 26.0.0
-  resolution: "jest-regex-util@npm:26.0.0"
-  checksum: 988675764a08945b90f48e6f5a8640b0d9885a977f100a168061d10037d53808a6cdb7dc8cb6fe9b1332f0523b42bf3edbb6d2cc6c7f7ba582d05d432efb3e60
-  languageName: node
-  linkType: hard
-
-"jest-regex-util@npm:^27.0.0":
-  version: 27.5.1
-  resolution: "jest-regex-util@npm:27.5.1"
-  checksum: f9790d417b667b38155c4bbd58f2afc0ad9f774381e5358776df02df3f29564069d4773c7ba050db6826bad8a4cc7ef82c3b4c65bfa508e419fdd063a9682c42
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^28.0.2":
   version: 28.0.2
   resolution: "jest-regex-util@npm:28.0.2"
@@ -12139,14 +11738,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-resolve-dependencies@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-resolve-dependencies@npm:26.6.3"
+"jest-regex-util@npm:^29.0.0, jest-regex-util@npm:^29.2.0":
+  version: 29.2.0
+  resolution: "jest-regex-util@npm:29.2.0"
+  checksum: 7e500f4f6fcbf5f46d284e83c9ade2e47707ee51e90d82e531fe10de05924a13dff89280d7184f1050129a070ce6db6336b41e2fd3bd07b8c32a91e8235f9840
+  languageName: node
+  linkType: hard
+
+"jest-resolve-dependencies@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-resolve-dependencies@npm:29.3.1"
   dependencies:
-    "@jest/types": ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-snapshot: ^26.6.2
-  checksum: d8a9392354d7775e2e7234e854069a1e0d21ea616b8de162562b57d77e296b8259952d03f10e2a3031a2369657d5950a807391455dadbafb3f4523804a2585d6
+    jest-regex-util: ^29.2.0
+    jest-snapshot: ^29.3.1
+  checksum: 93c23ac52ec60bc7c5f672acc19dbed113bf152f36f416e59c6f5cf94266349aeb963657dfd7bddcf29eee4c7151aa8a8b4856e47ee07afda56c02fdea0e19cf
   languageName: node
   linkType: hard
 
@@ -12167,22 +11772,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-resolve@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-resolve@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    jest-pnp-resolver: ^1.2.2
-    jest-util: ^26.6.2
-    read-pkg-up: ^7.0.1
-    resolve: ^1.18.1
-    slash: ^3.0.0
-  checksum: 9ead2ebe49efeb6c428c25b2da0e773844692cbd1b0b55145c950592053113e67b6121f9cfe1dcea901df3cea8c06ee38a464a37a9b611dc9f1ab376ea7be35a
-  languageName: node
-  linkType: hard
-
 "jest-resolve@npm:^28.1.1, jest-resolve@npm:^28.1.3":
   version: 28.1.3
   resolution: "jest-resolve@npm:28.1.3"
@@ -12200,31 +11789,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-runner@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-runner@npm:26.6.3"
+"jest-resolve@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-resolve@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/environment": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
     chalk: ^4.0.0
-    emittery: ^0.7.1
-    exit: ^0.1.2
-    graceful-fs: ^4.2.4
-    jest-config: ^26.6.3
-    jest-docblock: ^26.0.0
-    jest-haste-map: ^26.6.2
-    jest-leak-detector: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-resolve: ^26.6.2
-    jest-runtime: ^26.6.3
-    jest-util: ^26.6.2
-    jest-worker: ^26.6.2
-    source-map-support: ^0.5.6
-    throat: ^5.0.0
-  checksum: 81ce9ce686623c93e50b34babd12a4fdd05edf00b0478570ae57aa2384942fe6fc1c8ca8ee6715ec15561d350f45ec3c26a19304c20b91d4cf51e73b54b0d347
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
+    jest-pnp-resolver: ^1.2.2
+    jest-util: ^29.3.1
+    jest-validate: ^29.3.1
+    resolve: ^1.20.0
+    resolve.exports: ^1.1.0
+    slash: ^3.0.0
+  checksum: 61aca0adae54fa62262f31e98ee5c8be19a9704d3c5684604a8308fa724b4dca54dd82be2d68307d7e95153dbdb459c19bab57fdc8a26da96d966823e97d4d1e
   languageName: node
   linkType: hard
 
@@ -12257,40 +11835,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-runtime@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest-runtime@npm:26.6.3"
+"jest-runner@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-runner@npm:29.3.1"
   dependencies:
-    "@jest/console": ^26.6.2
-    "@jest/environment": ^26.6.2
-    "@jest/fake-timers": ^26.6.2
-    "@jest/globals": ^26.6.2
-    "@jest/source-map": ^26.6.2
-    "@jest/test-result": ^26.6.2
-    "@jest/transform": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/yargs": ^15.0.0
+    "@jest/console": ^29.3.1
+    "@jest/environment": ^29.3.1
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
     chalk: ^4.0.0
-    cjs-module-lexer: ^0.6.0
-    collect-v8-coverage: ^1.0.0
-    exit: ^0.1.2
-    glob: ^7.1.3
-    graceful-fs: ^4.2.4
-    jest-config: ^26.6.3
-    jest-haste-map: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-mock: ^26.6.2
-    jest-regex-util: ^26.0.0
-    jest-resolve: ^26.6.2
-    jest-snapshot: ^26.6.2
-    jest-util: ^26.6.2
-    jest-validate: ^26.6.2
-    slash: ^3.0.0
-    strip-bom: ^4.0.0
-    yargs: ^15.4.1
-  bin:
-    jest-runtime: bin/jest-runtime.js
-  checksum: d0fd139d01b9af87b5546586e8c3907d61e95c07d52fe29d7e247f08830a074f1d35c5417449fcfc5c1e5e210dd5c08c48e4789ca7900586e7624c202388a346
+    emittery: ^0.13.1
+    graceful-fs: ^4.2.9
+    jest-docblock: ^29.2.0
+    jest-environment-node: ^29.3.1
+    jest-haste-map: ^29.3.1
+    jest-leak-detector: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-resolve: ^29.3.1
+    jest-runtime: ^29.3.1
+    jest-util: ^29.3.1
+    jest-watcher: ^29.3.1
+    jest-worker: ^29.3.1
+    p-limit: ^3.1.0
+    source-map-support: 0.5.13
+  checksum: ba1edbf662cd5a8b63a0b58842a6daa3e1fbb98dd30bdd1636ec0662c460b49fd3bd6d0851c5b6a899c952b7cffb649ba7d2b25cabcfe9097efbde49123a1694
   languageName: node
   linkType: hard
 
@@ -12324,53 +11894,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-serializer-html@npm:^7.0.0":
-  version: 7.1.0
-  resolution: "jest-serializer-html@npm:7.1.0"
-  dependencies:
-    diffable-html: ^4.1.0
-  checksum: e8383431fbacd5ebb9a7c053c849a0d1e0a183e625aba1ede726260186931b229468dc6456b9b821a137123a88ea3b4325884a5c01c5d78b39c106c3d5c18fcc
-  languageName: node
-  linkType: hard
-
-"jest-serializer@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-serializer@npm:24.9.0"
-  checksum: 9f871cdd08750f1b9f5aef0e8ba58d2045863b4ff2268dd50f3e6d666b6eb5a9a45dad9c6dfad9d2ab2d148f78d11e2ef29d28be85b31a4e8068c718d449f623
-  languageName: node
-  linkType: hard
-
-"jest-serializer@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-serializer@npm:26.6.2"
+"jest-runtime@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-runtime@npm:29.3.1"
   dependencies:
+    "@jest/environment": ^29.3.1
+    "@jest/fake-timers": ^29.3.1
+    "@jest/globals": ^29.3.1
+    "@jest/source-map": ^29.2.0
+    "@jest/test-result": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
     "@types/node": "*"
-    graceful-fs: ^4.2.4
-  checksum: 1c67aa1acefdc0b244f2629aaef12a56e563a5c5cb817970d2b97bdad5e8aae187b269c8d356c42ff9711436499c4da71ec8400e6280dab110be8cc5300884b0
+    chalk: ^4.0.0
+    cjs-module-lexer: ^1.0.0
+    collect-v8-coverage: ^1.0.0
+    glob: ^7.1.3
+    graceful-fs: ^4.2.9
+    jest-haste-map: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-mock: ^29.3.1
+    jest-regex-util: ^29.2.0
+    jest-resolve: ^29.3.1
+    jest-snapshot: ^29.3.1
+    jest-util: ^29.3.1
+    slash: ^3.0.0
+    strip-bom: ^4.0.0
+  checksum: 585cfbfc45280c673ff4137f432f7713284d976a7b769a0a2b520527a93bc15ee59e166255fcbc518387f073019d05eff3b373e33e8d94117ffc98d8ec700ff0
   languageName: node
   linkType: hard
 
-"jest-snapshot@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-snapshot@npm:26.6.2"
+"jest-serializer-html@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "jest-serializer-html@npm:7.1.0"
   dependencies:
-    "@babel/types": ^7.0.0
-    "@jest/types": ^26.6.2
-    "@types/babel__traverse": ^7.0.4
-    "@types/prettier": ^2.0.0
-    chalk: ^4.0.0
-    expect: ^26.6.2
-    graceful-fs: ^4.2.4
-    jest-diff: ^26.6.2
-    jest-get-type: ^26.3.0
-    jest-haste-map: ^26.6.2
-    jest-matcher-utils: ^26.6.2
-    jest-message-util: ^26.6.2
-    jest-resolve: ^26.6.2
-    natural-compare: ^1.4.0
-    pretty-format: ^26.6.2
-    semver: ^7.3.2
-  checksum: b7b829e7179411cf9a5718d9cf4214e3ac66c41fa17c2f32b7273d12a5e4e85e30504335c4a673f6537af660531fe7c475d09266d63cf19aae3d346809a9a4a2
+    diffable-html: ^4.1.0
+  checksum: e8383431fbacd5ebb9a7c053c849a0d1e0a183e625aba1ede726260186931b229468dc6456b9b821a137123a88ea3b4325884a5c01c5d78b39c106c3d5c18fcc
   languageName: node
   linkType: hard
 
@@ -12405,65 +11964,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:28.1.1":
-  version: 28.1.1
-  resolution: "jest-util@npm:28.1.1"
+"jest-snapshot@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-snapshot@npm:29.3.1"
   dependencies:
-    "@jest/types": ^28.1.1
-    "@types/node": "*"
+    "@babel/core": ^7.11.6
+    "@babel/generator": ^7.7.2
+    "@babel/plugin-syntax-jsx": ^7.7.2
+    "@babel/plugin-syntax-typescript": ^7.7.2
+    "@babel/traverse": ^7.7.2
+    "@babel/types": ^7.3.3
+    "@jest/expect-utils": ^29.3.1
+    "@jest/transform": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/babel__traverse": ^7.0.6
+    "@types/prettier": ^2.1.5
+    babel-preset-current-node-syntax: ^1.0.0
     chalk: ^4.0.0
-    ci-info: ^3.2.0
+    expect: ^29.3.1
     graceful-fs: ^4.2.9
-    picomatch: ^2.2.3
-  checksum: 24f311d1b0c46f7ae9f37b020ee2932551d27882256b259768d3ce9915b43861808f1a40711344c4e567013858f11e11fc9ca19509e2c17810310e927185c705
-  languageName: node
-  linkType: hard
-
-"jest-util@npm:^24.0.0, jest-util@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-util@npm:24.9.0"
-  dependencies:
-    "@jest/console": ^24.9.0
-    "@jest/fake-timers": ^24.9.0
-    "@jest/source-map": ^24.9.0
-    "@jest/test-result": ^24.9.0
-    "@jest/types": ^24.9.0
-    callsites: ^3.0.0
-    chalk: ^2.0.1
-    graceful-fs: ^4.1.15
-    is-ci: ^2.0.0
-    mkdirp: ^0.5.1
-    slash: ^2.0.0
-    source-map: ^0.6.0
-  checksum: 80bd56f09be4d9d6519b24f8b902f434cefbb1cdc8521bf2f32995a4e9f5abecc88a6172c31494b88df3cd2df3db5daf86271c4f200856aa7dd216e2a69f20fc
-  languageName: node
-  linkType: hard
-
-"jest-util@npm:^26.1.0, jest-util@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-util@npm:26.6.2"
-  dependencies:
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    chalk: ^4.0.0
-    graceful-fs: ^4.2.4
-    is-ci: ^2.0.0
-    micromatch: ^4.0.2
-  checksum: ab93709840f87bdf478d082f5465467c27a20a422cbe456cc2a56961d8c950ea52511995fb6063f62a113737f3dd714b836a1fbde51abef96642a5975e835a01
+    jest-diff: ^29.3.1
+    jest-get-type: ^29.2.0
+    jest-haste-map: ^29.3.1
+    jest-matcher-utils: ^29.3.1
+    jest-message-util: ^29.3.1
+    jest-util: ^29.3.1
+    natural-compare: ^1.4.0
+    pretty-format: ^29.3.1
+    semver: ^7.3.5
+  checksum: ca65a637fc9547dea580342247f6adcdd83cf9bacc0af7ad2ff2b8a0d3310a09b983708071382f16957d717b90670b22cbf3849c46e2ec0f2c45d769826e12f3
   languageName: node
   linkType: hard
 
-"jest-util@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "jest-util@npm:27.5.1"
+"jest-util@npm:28.1.1":
+  version: 28.1.1
+  resolution: "jest-util@npm:28.1.1"
   dependencies:
-    "@jest/types": ^27.5.1
+    "@jest/types": ^28.1.1
     "@types/node": "*"
     chalk: ^4.0.0
     ci-info: ^3.2.0
     graceful-fs: ^4.2.9
     picomatch: ^2.2.3
-  checksum: 0f60cd2a2e09a6646ccd4ff489f1970282c0694724104979e897bd5164f91204726f5408572bf5e759d09e59d5c4e4dc65a643d2b630e06a10402bba07bf2a2e
+  checksum: 24f311d1b0c46f7ae9f37b020ee2932551d27882256b259768d3ce9915b43861808f1a40711344c4e567013858f11e11fc9ca19509e2c17810310e927185c705
   languageName: node
   linkType: hard
 
@@ -12495,17 +12038,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-validate@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-validate@npm:26.6.2"
+"jest-util@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-util@npm:29.3.1"
   dependencies:
-    "@jest/types": ^26.6.2
-    camelcase: ^6.0.0
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
     chalk: ^4.0.0
-    jest-get-type: ^26.3.0
-    leven: ^3.1.0
-    pretty-format: ^26.6.2
-  checksum: 0c8df164641e797f80011e359553411e097ea495b95b41100be00d6c827bfd854e92ef8c528fe4cac0d113055a5075d1409f2616099ec648dbd6809bb0a29c67
+    ci-info: ^3.2.0
+    graceful-fs: ^4.2.9
+    picomatch: ^2.2.3
+  checksum: c03606c389cf6f454962e4670fcb5d346e0cef166d71a6d70cde2ffaff9a0744fbf7b0651a01ac07e5ade790e95937bcaa604601ebb4c8dbf3e4c641027e61d0
   languageName: node
   linkType: hard
 
@@ -12523,50 +12066,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-watch-typeahead@npm:^0.6.1":
-  version: 0.6.5
-  resolution: "jest-watch-typeahead@npm:0.6.5"
+"jest-validate@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-validate@npm:29.3.1"
   dependencies:
-    ansi-escapes: ^4.3.1
-    chalk: ^4.0.0
-    jest-regex-util: ^27.0.0
-    jest-watcher: ^27.0.0
-    slash: ^3.0.0
-    string-length: ^4.0.1
-    strip-ansi: ^6.0.0
-  peerDependencies:
-    jest: ^26.0.0 || ^27.0.0
-  checksum: fd298fcc1581d7c34301b54a8891ba70fdc529adbf98e7ed98c5bdd92e7ac63b01e00341101f8f49c1c2f8cce4c6f677a4be1dad3fb1d0c0303b6e8e25717446
-  languageName: node
-  linkType: hard
-
-"jest-watcher@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-watcher@npm:26.6.2"
-  dependencies:
-    "@jest/test-result": ^26.6.2
-    "@jest/types": ^26.6.2
-    "@types/node": "*"
-    ansi-escapes: ^4.2.1
+    "@jest/types": ^29.3.1
+    camelcase: ^6.2.0
     chalk: ^4.0.0
-    jest-util: ^26.6.2
-    string-length: ^4.0.1
-  checksum: 3a0caf17f3d586ec7099a576757336e6ba5ac6f2449e66aa1416214b32188970b1fa10f83e1aef58254a30a55a6698cbbb16aa5187c8023516d8bea8833aee12
+    jest-get-type: ^29.2.0
+    leven: ^3.1.0
+    pretty-format: ^29.3.1
+  checksum: 5398f1c324582f290a99f6d68d9345ff9d16bbdcce06dfa4a81b0115aeeef6f9252cb64396c9ab968dafddbe762f68c8874b6c993a991b1c7f6f5e55cccb31a9
   languageName: node
   linkType: hard
 
-"jest-watcher@npm:^27.0.0":
-  version: 27.5.1
-  resolution: "jest-watcher@npm:27.5.1"
+"jest-watch-typeahead@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "jest-watch-typeahead@npm:2.2.1"
   dependencies:
-    "@jest/test-result": ^27.5.1
-    "@jest/types": ^27.5.1
-    "@types/node": "*"
-    ansi-escapes: ^4.2.1
+    ansi-escapes: ^6.0.0
     chalk: ^4.0.0
-    jest-util: ^27.5.1
-    string-length: ^4.0.1
-  checksum: e42f5e38bc4da56bde6ccec4b13b7646460a3d6b567934e0ca96d72c2ce837223ffbb84a2f8428197da4323870c03f00969237f9b40f83a3072111a8cd66cc4b
+    jest-regex-util: ^29.0.0
+    jest-watcher: ^29.0.0
+    slash: ^5.0.0
+    string-length: ^5.0.1
+    strip-ansi: ^7.0.1
+  peerDependencies:
+    jest: ^27.0.0 || ^28.0.0 || ^29.0.0
+  checksum: 2f47433ac6dd1dfd3015182b325108bc95e15dfbb577e7730468172b15b7d91be443f4d68a3849963e1f29e96d031eaf2b79cae6f45e64630383129a2d5e2e2d
   languageName: node
   linkType: hard
 
@@ -12586,48 +12113,61 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^24.9.0":
-  version: 24.9.0
-  resolution: "jest-worker@npm:24.9.0"
+"jest-watcher@npm:^29.0.0, jest-watcher@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-watcher@npm:29.3.1"
   dependencies:
-    merge-stream: ^2.0.0
-    supports-color: ^6.1.0
-  checksum: ea9f4751976d08807d33598244e6c3a60ce5889cdabf1f4e6f3e57dddcf2190978e6284f0865326f64e93677cebac53220d71a52e57d1205c467c6f09efa8bc2
+    "@jest/test-result": ^29.3.1
+    "@jest/types": ^29.3.1
+    "@types/node": "*"
+    ansi-escapes: ^4.2.1
+    chalk: ^4.0.0
+    emittery: ^0.13.1
+    jest-util: ^29.3.1
+    string-length: ^4.0.1
+  checksum: d3d029762c2d431bcff21635d959eb0aa000cc480e2a47277e8d36c57b8a76f6deab721015948cb8448238331813edcb44bec20f29670f80621709b0c0ca30ef
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^26.6.2":
-  version: 26.6.2
-  resolution: "jest-worker@npm:26.6.2"
+"jest-worker@npm:^28.1.1, jest-worker@npm:^28.1.3":
+  version: 28.1.3
+  resolution: "jest-worker@npm:28.1.3"
   dependencies:
     "@types/node": "*"
     merge-stream: ^2.0.0
-    supports-color: ^7.0.0
-  checksum: 07e4dba650381604cda253ab6d5837fe0279c8d68c25884995b45bfe149a7a1e1b5a97f304b4518f257dac2a9ddc1808d57d650649c3ab855e9e60cf824d2970
+    supports-color: ^8.0.0
+  checksum: d6715268fd6c9fd8431987d42e4ae0981dc6352fd7a5c90aadb9c67562dc6161486a98960f5d1bd36dbafb202d8d98a6fdb181711acbc5e55ee6ab85fa94c931
   languageName: node
   linkType: hard
 
-"jest-worker@npm:^28.1.1, jest-worker@npm:^28.1.3":
-  version: 28.1.3
-  resolution: "jest-worker@npm:28.1.3"
+"jest-worker@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest-worker@npm:29.3.1"
   dependencies:
     "@types/node": "*"
+    jest-util: ^29.3.1
     merge-stream: ^2.0.0
     supports-color: ^8.0.0
-  checksum: d6715268fd6c9fd8431987d42e4ae0981dc6352fd7a5c90aadb9c67562dc6161486a98960f5d1bd36dbafb202d8d98a6fdb181711acbc5e55ee6ab85fa94c931
+  checksum: 8f089e3283c2a84d70d24caacfcf9986592ebde6757d938aa43a2a9d59607724da16a148d9dee93197a25c2fe4f2ee84ade105a88edc4c168ca2ad7881a56837
   languageName: node
   linkType: hard
 
-"jest@npm:^26.6.3":
-  version: 26.6.3
-  resolution: "jest@npm:26.6.3"
+"jest@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "jest@npm:29.3.1"
   dependencies:
-    "@jest/core": ^26.6.3
+    "@jest/core": ^29.3.1
+    "@jest/types": ^29.3.1
     import-local: ^3.0.2
-    jest-cli: ^26.6.3
+    jest-cli: ^29.3.1
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
   bin:
     jest: bin/jest.js
-  checksum: 4469f5c426f5b00855e2264dc4fce5ab16c0fab31d2dc6fc829d769ca7ec84a9c74763f7c1d281d085ad55897927a08df2b4778b0df899a66188ff0722e17d29
+  checksum: 97dae1a4346280c7ba6aa361b48d37e6776d338e308c2f188b4493f435d9c87c923658084b86e6c51f7a48bf5000e3879afee46141c8ee6a4275994cabd3a29a
   languageName: node
   linkType: hard
 
@@ -12741,111 +12281,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsdom@npm:^11.5.1":
-  version: 11.12.0
-  resolution: "jsdom@npm:11.12.0"
-  dependencies:
-    abab: ^2.0.0
-    acorn: ^5.5.3
-    acorn-globals: ^4.1.0
-    array-equal: ^1.0.0
-    cssom: ">= 0.3.2 < 0.4.0"
-    cssstyle: ^1.0.0
-    data-urls: ^1.0.0
-    domexception: ^1.0.1
-    escodegen: ^1.9.1
-    html-encoding-sniffer: ^1.0.2
-    left-pad: ^1.3.0
-    nwsapi: ^2.0.7
-    parse5: 4.0.0
-    pn: ^1.1.0
-    request: ^2.87.0
-    request-promise-native: ^1.0.5
-    sax: ^1.2.4
-    symbol-tree: ^3.2.2
-    tough-cookie: ^2.3.4
-    w3c-hr-time: ^1.0.1
-    webidl-conversions: ^4.0.2
-    whatwg-encoding: ^1.0.3
-    whatwg-mimetype: ^2.1.0
-    whatwg-url: ^6.4.1
-    ws: ^5.2.0
-    xml-name-validator: ^3.0.0
-  checksum: a909aa35527a337a55ddd66f99a0993d24e5a42ce5ef1ae0724a5fef5c9b4799f763dfd65d33798ca1feb83c604716aa054241e2b4b2274de2caa9566156566a
-  languageName: node
-  linkType: hard
-
-"jsdom@npm:^13.0.0":
-  version: 13.2.0
-  resolution: "jsdom@npm:13.2.0"
-  dependencies:
-    abab: ^2.0.0
-    acorn: ^6.0.4
-    acorn-globals: ^4.3.0
-    array-equal: ^1.0.0
-    cssom: ^0.3.4
-    cssstyle: ^1.1.1
-    data-urls: ^1.1.0
-    domexception: ^1.0.1
-    escodegen: ^1.11.0
-    html-encoding-sniffer: ^1.0.2
-    nwsapi: ^2.0.9
-    parse5: 5.1.0
-    pn: ^1.1.0
-    request: ^2.88.0
-    request-promise-native: ^1.0.5
-    saxes: ^3.1.5
-    symbol-tree: ^3.2.2
-    tough-cookie: ^2.5.0
-    w3c-hr-time: ^1.0.1
-    w3c-xmlserializer: ^1.0.1
-    webidl-conversions: ^4.0.2
-    whatwg-encoding: ^1.0.5
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^7.0.0
-    ws: ^6.1.2
-    xml-name-validator: ^3.0.0
-  checksum: e4bd3120f5c1077f6ace1ac2e069a104f48ff4df6507097b6740990c783ecec6017122dd9904f2500805d8003932020d32c9f922b21c3009864dfb70fbeac6bf
-  languageName: node
-  linkType: hard
-
-"jsdom@npm:^16.4.0":
-  version: 16.7.0
-  resolution: "jsdom@npm:16.7.0"
+"jsdom@npm:^20.0.0":
+  version: 20.0.2
+  resolution: "jsdom@npm:20.0.2"
   dependencies:
-    abab: ^2.0.5
-    acorn: ^8.2.4
-    acorn-globals: ^6.0.0
-    cssom: ^0.4.4
+    abab: ^2.0.6
+    acorn: ^8.8.0
+    acorn-globals: ^7.0.0
+    cssom: ^0.5.0
     cssstyle: ^2.3.0
-    data-urls: ^2.0.0
-    decimal.js: ^10.2.1
-    domexception: ^2.0.1
+    data-urls: ^3.0.2
+    decimal.js: ^10.4.1
+    domexception: ^4.0.0
     escodegen: ^2.0.0
-    form-data: ^3.0.0
-    html-encoding-sniffer: ^2.0.1
-    http-proxy-agent: ^4.0.1
-    https-proxy-agent: ^5.0.0
+    form-data: ^4.0.0
+    html-encoding-sniffer: ^3.0.0
+    http-proxy-agent: ^5.0.0
+    https-proxy-agent: ^5.0.1
     is-potential-custom-element-name: ^1.0.1
-    nwsapi: ^2.2.0
-    parse5: 6.0.1
-    saxes: ^5.0.1
+    nwsapi: ^2.2.2
+    parse5: ^7.1.1
+    saxes: ^6.0.0
     symbol-tree: ^3.2.4
-    tough-cookie: ^4.0.0
-    w3c-hr-time: ^1.0.2
-    w3c-xmlserializer: ^2.0.0
-    webidl-conversions: ^6.1.0
-    whatwg-encoding: ^1.0.5
-    whatwg-mimetype: ^2.3.0
-    whatwg-url: ^8.5.0
-    ws: ^7.4.6
-    xml-name-validator: ^3.0.0
+    tough-cookie: ^4.1.2
+    w3c-xmlserializer: ^3.0.0
+    webidl-conversions: ^7.0.0
+    whatwg-encoding: ^2.0.0
+    whatwg-mimetype: ^3.0.0
+    whatwg-url: ^11.0.0
+    ws: ^8.9.0
+    xml-name-validator: ^4.0.0
   peerDependencies:
     canvas: ^2.5.0
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: e9ba6ea5f5e0d18647ccedec16bc3c69c8c739732ffcb27c66ffd3cc3f876add291ca4f0b9c209ace939ce2aa3ba9e4d67b7f05317921a4d3eab02fe1cc164ef
+  checksum: c6707fdfe92504dbef8ec1727ca638bba5b6c7e01b5fdda48d385e2e8f7e3d5b92f13380448ae9f28e2643a69010bef8ca0f691532390f99d4b722edfe1c8d76
   languageName: node
   linkType: hard
 
@@ -12867,13 +12338,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-parse-better-errors@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "json-parse-better-errors@npm:1.0.2"
-  checksum: 2f1287a7c833e397c9ddd361a78638e828fc523038bb3441fd4fc144cfd2c6cd4963ffb9e207e648cf7b692600f1e1e524e965c32df5152120910e4903a47dcb
-  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"
@@ -12909,22 +12373,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-safe@npm:~5.0.1":
-  version: 5.0.1
-  resolution: "json-stringify-safe@npm:5.0.1"
-  checksum: 7dbf35cd0411d1d648dceb6d59ce5857ec939e52e4afc37601aa3da611f0987d5cee5b38d58329ceddf3ed48bd7215229c8d52059ab01f2444a338bf24ed0f37
-  languageName: node
-  linkType: hard
-
-"json5@npm:2.x, json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "json5@npm:2.2.1"
-  bin:
-    json5: lib/cli.js
-  checksum: a7174bc4e146613750a04a8a7fe2bc4ab6f4cad20486f8d7026cc4546b3ee1dc3762fc5e7377557ae99414745aac782486e409f31c363084a455e05cb495ce7a
-  languageName: node
-  linkType: hard
-
+"json-stringify-safe@npm:~5.0.1":
+  version: 5.0.1
+  resolution: "json-stringify-safe@npm:5.0.1"
+  checksum: 7dbf35cd0411d1d648dceb6d59ce5857ec939e52e4afc37601aa3da611f0987d5cee5b38d58329ceddf3ed48bd7215229c8d52059ab01f2444a338bf24ed0f37
+  languageName: node
+  linkType: hard
+
 "json5@npm:^1.0.1":
   version: 1.0.1
   resolution: "json5@npm:1.0.1"
@@ -12936,6 +12391,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json5@npm:^2.0.0, json5@npm:^2.1.0, json5@npm:^2.1.2, json5@npm:^2.2.0, json5@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "json5@npm:2.2.1"
+  bin:
+    json5: lib/cli.js
+  checksum: a7174bc4e146613750a04a8a7fe2bc4ab6f4cad20486f8d7026cc4546b3ee1dc3762fc5e7377557ae99414745aac782486e409f31c363084a455e05cb495ce7a
+  languageName: node
+  linkType: hard
+
 "jsonc-parser@npm:3.0.0":
   version: 3.0.0
   resolution: "jsonc-parser@npm:3.0.0"
@@ -13056,7 +12520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^3.0.2, kind-of@npm:^3.0.3, kind-of@npm:^3.2.0":
+"kind-of@npm:^3.0.2":
   version: 3.2.2
   resolution: "kind-of@npm:3.2.2"
   dependencies:
@@ -13065,22 +12529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "kind-of@npm:4.0.0"
-  dependencies:
-    is-buffer: ^1.1.5
-  checksum: d6c44c75ee36898142dfc7106afbd50593216c37f96acb81a7ab33ca1a6938ce97d5692b8fc8fccd035f83811a9d97749d68771116441a48eedd0b68e2973165
-  languageName: node
-  linkType: hard
-
-"kind-of@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "kind-of@npm:5.1.0"
-  checksum: fe85b7a2ed4b4d5a12e16e01d00d5c336e1760842fe0da38283605b9880c984288935e87b13138909e4d23d2d197a1d492f7393c6638d2c0fab8a900c4fb0392
-  languageName: node
-  linkType: hard
-
 "kind-of@npm:^6.0.0, kind-of@npm:^6.0.2":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -13137,13 +12585,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"left-pad@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "left-pad@npm:1.3.0"
-  checksum: 3fb59c76e281a2f5c810ad71dbbb8eba8b10c6cf94733dc7f27b8c516a5376cacea53543e76f6ae477d866c8954b27f1e15ca349424c2542474eb5bb1d2b6955
-  languageName: node
-  linkType: hard
-
 "level-codec@npm:^9.0.0":
   version: 9.0.2
   resolution: "level-codec@npm:9.0.2"
@@ -13354,18 +12795,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"load-json-file@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "load-json-file@npm:4.0.0"
-  dependencies:
-    graceful-fs: ^4.1.2
-    parse-json: ^4.0.0
-    pify: ^3.0.0
-    strip-bom: ^3.0.0
-  checksum: 6b48f6a0256bdfcc8970be2c57f68f10acb2ee7e63709b386b2febb6ad3c86198f840889cdbe71d28f741cbaa2f23a7771206b138cd1bdd159564511ca37c1d5
-  languageName: node
-  linkType: hard
-
 "load-plugin@npm:^3.0.0":
   version: 3.0.0
   resolution: "load-plugin@npm:3.0.0"
@@ -13431,31 +12860,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash._baseisequal@npm:^3.0.0":
-  version: 3.0.7
-  resolution: "lodash._baseisequal@npm:3.0.7"
-  dependencies:
-    lodash.isarray: ^3.0.0
-    lodash.istypedarray: ^3.0.0
-    lodash.keys: ^3.0.0
-  checksum: 7b514d2ab579602f39b70e5f09039666f6617175595ef686da34f6ff5ea924b1c69d2022b83df91cf1b40a69a0ccd9682c376d1acb2fff7c21c6c9cf2c583e27
-  languageName: node
-  linkType: hard
-
-"lodash._bindcallback@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "lodash._bindcallback@npm:3.0.1"
-  checksum: c135bc26cfbe6fd11b3d2ffc7b8307fbbcecd3fbb45f6ecec301614207a164388fd7ee3f07e3ad0745bbe4c8d3acefc61b967a07b2d43b5b5f5dfdf661ed945a
-  languageName: node
-  linkType: hard
-
-"lodash._getnative@npm:^3.0.0":
-  version: 3.9.1
-  resolution: "lodash._getnative@npm:3.9.1"
-  checksum: 858cff25fc52353a1e39f44ff87fc1e1e8a85da513818f0caebe50c2795cf5cbce9d71a3e91ec0972bee3b174a74d697a38c6bb16d0b416dcc32322ae152a104
-  languageName: node
-  linkType: hard
-
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -13498,20 +12902,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isarguments@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "lodash.isarguments@npm:3.1.0"
-  checksum: 5e8f95ba10975900a3920fb039a3f89a5a79359a1b5565e4e5b4310ed6ebe64011e31d402e34f577eca983a1fc01ff86c926e3cbe602e1ddfc858fdd353e62d8
-  languageName: node
-  linkType: hard
-
-"lodash.isarray@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "lodash.isarray@npm:3.0.4"
-  checksum: c6daf1a1e450f20b1426595dc33cfe415d68c1267d3d081253e77430972865ee8d0ab98d777afb448350c677999802d43a7690eb16986e64b8450efc31e5667d
-  languageName: node
-  linkType: hard
-
 "lodash.isboolean@npm:^3.0.3":
   version: 3.0.3
   resolution: "lodash.isboolean@npm:3.0.3"
@@ -13519,16 +12909,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isequal@npm:^3.0":
-  version: 3.0.4
-  resolution: "lodash.isequal@npm:3.0.4"
-  dependencies:
-    lodash._baseisequal: ^3.0.0
-    lodash._bindcallback: ^3.0.0
-  checksum: 27c7792f5fd49f14032537dba47d49bdf523dbce336c384e6320cfe3fe39141b54d4fed8565bedf1f6b7bfa2190fb0da49d8f454ecab1d64dd2865dfaaa55a95
-  languageName: node
-  linkType: hard
-
 "lodash.isequal@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.isequal@npm:4.5.0"
@@ -13571,24 +12951,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.istypedarray@npm:^3.0.0":
-  version: 3.0.6
-  resolution: "lodash.istypedarray@npm:3.0.6"
-  checksum: 8e4216dfe7f2acae00acc1fe1078ad9babb5b0d4852d508f65c59ce66884328992be23316b4cde6a2e73bbd684471019e79afaf33752912d3dadd9d268a97800
-  languageName: node
-  linkType: hard
-
-"lodash.keys@npm:^3.0.0":
-  version: 3.1.2
-  resolution: "lodash.keys@npm:3.1.2"
-  dependencies:
-    lodash._getnative: ^3.0.0
-    lodash.isarguments: ^3.0.0
-    lodash.isarray: ^3.0.0
-  checksum: ac4c70f0ac158d282ca0097a8ac8e2e433f6d727635ee53b11585ce30c0bc264e7eb0ac6155aad69715f1ab73dd8d00322769d79120afd40adaa383f9bee705a
-  languageName: node
-  linkType: hard
-
 "lodash.keys@npm:^4.0.8":
   version: 4.2.0
   resolution: "lodash.keys@npm:4.2.0"
@@ -13645,7 +13007,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4.17.21, lodash@npm:4.x, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0":
+"lodash@npm:4.17.21, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -13695,7 +13057,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -13798,7 +13160,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-error@npm:1.x, make-error@npm:^1.1.1":
+"make-error@npm:^1.1.1":
   version: 1.3.6
   resolution: "make-error@npm:1.3.6"
   checksum: 171e458d86854c6b3fc46610cfacf0b45149ba043782558c6875d9f42f222124384ad0b468c92e996d815a8a2003817a710c0a160e49c1c394626f76fa45396f
@@ -13862,13 +13224,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-cache@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "map-cache@npm:0.2.2"
-  checksum: 05e3eb005c1b80b9f949ca007687640e8c5d0fc88dc45c3c3ab4902a3bec79d66a58f3e3b04d6985d90cd267c629c7b46c977e9c34433e8c11ecfcbb9f0fa290
-  languageName: node
-  linkType: hard
-
 "map-or-similar@npm:^1.5.0":
   version: 1.5.0
   resolution: "map-or-similar@npm:1.5.0"
@@ -13890,15 +13245,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-visit@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "map-visit@npm:1.0.0"
-  dependencies:
-    object-visit: ^1.0.0
-  checksum: fb3475e5311939a6147e339999113db607adc11c7c3cd3103e5e9dbf502898416ecba6b1c7c649c6d4d12941de00cee58b939756bdf20a9efe7d4fa5a5738b73
-  languageName: node
-  linkType: hard
-
 "markdown-extensions@npm:^1.1.0":
   version: 1.1.1
   resolution: "markdown-extensions@npm:1.1.1"
@@ -14060,27 +13406,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^3.1.10, micromatch@npm:^3.1.4":
-  version: 3.1.10
-  resolution: "micromatch@npm:3.1.10"
-  dependencies:
-    arr-diff: ^4.0.0
-    array-unique: ^0.3.2
-    braces: ^2.3.1
-    define-property: ^2.0.2
-    extend-shallow: ^3.0.2
-    extglob: ^2.0.4
-    fragment-cache: ^0.2.1
-    kind-of: ^6.0.2
-    nanomatch: ^1.2.9
-    object.pick: ^1.3.0
-    regex-not: ^1.0.0
-    snapdragon: ^0.8.1
-    to-regex: ^3.0.2
-  checksum: 531a32e7ac92bef60657820202be71b63d0f945c08a69cc4c239c0b19372b751483d464a850a2e3a5ff6cc9060641e43d44c303af104c1a27493d137d8af017f
-  languageName: node
-  linkType: hard
-
 "micromatch@npm:^4.0.0, micromatch@npm:^4.0.2, micromatch@npm:^4.0.4":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -14200,7 +13525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
+"minimist@npm:^1.1.0, minimist@npm:^1.1.3, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6":
   version: 1.2.6
   resolution: "minimist@npm:1.2.6"
   checksum: d0b566204044481c4401abbd24cc75814e753b37268e7fe7ccc78612bf3e37bf1e45a6c43fb0b119445ea1c413c000bde013f320b7211974f2f49bcbec1d0dbf
@@ -14292,16 +13617,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mixin-deep@npm:^1.2.0":
-  version: 1.3.2
-  resolution: "mixin-deep@npm:1.3.2"
-  dependencies:
-    for-in: ^1.0.2
-    is-extendable: ^1.0.1
-  checksum: cb39ffb73c377222391af788b4c83d1a6cecb2d9fceb7015384f8deb46e151a9b030c21ef59a79cb524d4557e3f74c7248ab948a62a6e7e296b42644863d183b
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:0.5.5":
   version: 0.5.5
   resolution: "mkdirp@npm:0.5.5"
@@ -14313,15 +13628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:1.x, mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "mkdirp@npm:1.0.4"
-  bin:
-    mkdirp: bin/cmd.js
-  checksum: 46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.4, mkdirp@npm:^0.5.6, mkdirp@npm:~0.5.1":
   version: 0.5.6
   resolution: "mkdirp@npm:0.5.6"
@@ -14333,6 +13639,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mkdirp@npm:^1.0.3, mkdirp@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "mkdirp@npm:1.0.4"
+  bin:
+    mkdirp: bin/cmd.js
+  checksum: 46ea0f3ffa8bc6a5bc0c7081ffc3907777f0ed6516888d40a518c5111f8366d97d2678911ad1a6882bf592fa9de6c784fea32e1687bb94e1f4944170af48a5cf
+  languageName: node
+  linkType: hard
+
 "mocha-list-tests@npm:^1.0.5":
   version: 1.1.0
   resolution: "mocha-list-tests@npm:1.1.0"
@@ -14437,7 +13752,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1, nan@npm:^2.14.0":
+"nan@npm:^2.14.0":
   version: 2.16.0
   resolution: "nan@npm:2.16.0"
   dependencies:
@@ -14446,25 +13761,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanomatch@npm:^1.2.9":
-  version: 1.2.13
-  resolution: "nanomatch@npm:1.2.13"
-  dependencies:
-    arr-diff: ^4.0.0
-    array-unique: ^0.3.2
-    define-property: ^2.0.2
-    extend-shallow: ^3.0.2
-    fragment-cache: ^0.2.1
-    is-windows: ^1.0.2
-    kind-of: ^6.0.2
-    object.pick: ^1.3.0
-    regex-not: ^1.0.0
-    snapdragon: ^0.8.1
-    to-regex: ^3.0.1
-  checksum: 0f5cefa755ca2e20c86332821995effb24acb79551ddaf51c1b9112628cad234a0d8fd9ac6aa56ad1f8bfad6ff6ae86e851acb960943249d9fa44b091479953a
-  languageName: node
-  linkType: hard
-
 "napi-macros@npm:~2.0.0":
   version: 2.0.0
   resolution: "napi-macros@npm:2.0.0"
@@ -14472,6 +13768,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: f6cef26f5044515754802c0fc475d81426f3b90fe88c20fabe08771ce1f736ce46e0397c10acb569a4dd0acb84c7f1ee70676122f95d5bfdd747af3a6c6bbaa8
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -14657,20 +13960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-notifier@npm:^8.0.0":
-  version: 8.0.2
-  resolution: "node-notifier@npm:8.0.2"
-  dependencies:
-    growly: ^1.3.0
-    is-wsl: ^2.2.0
-    semver: ^7.3.2
-    shellwords: ^0.1.1
-    uuid: ^8.3.0
-    which: ^2.0.2
-  checksum: 8df8618628c14ef26214a376dbde425264b92ae5e5944d21807f41e3d2ed3ff29f6c5aba089f4a5f22328b2157aa874e93f2304a2134b1ee59508cedf7e889bb
-  languageName: node
-  linkType: hard
-
 "node-releases@npm:^2.0.6":
   version: 2.0.6
   resolution: "node-releases@npm:2.0.6"
@@ -14700,7 +13989,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-package-data@npm:^2.3.2, normalize-package-data@npm:^2.5.0":
+"normalize-package-data@npm:^2.5.0":
   version: 2.5.0
   resolution: "normalize-package-data@npm:2.5.0"
   dependencies:
@@ -14712,15 +14001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "normalize-path@npm:2.1.1"
-  dependencies:
-    remove-trailing-separator: ^1.0.1
-  checksum: db814326ff88057437233361b4c7e9cac7b54815b051b57f2d341ce89b1d8ec8cbd43e7fa95d7652b3b69ea8fcc294b89b8530d556a84d1bdace94229e1e9a8b
-  languageName: node
-  linkType: hard
-
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -14797,7 +14077,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nwsapi@npm:^2.0.7, nwsapi@npm:^2.0.9, nwsapi@npm:^2.2.0":
+"nwsapi@npm:^2.2.0, nwsapi@npm:^2.2.2":
   version: 2.2.2
   resolution: "nwsapi@npm:2.2.2"
   checksum: f7c4fedb0dc0786204ee99f440e9827d6e01a0c0322e93b5c9a9a382dd0bd9650d98ca3d1967a77554e3ec1f9a46a20cfea80a41fb00e91c5101c53d8b2c9aed
@@ -14866,17 +14146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-copy@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "object-copy@npm:0.1.0"
-  dependencies:
-    copy-descriptor: ^0.1.0
-    define-property: ^0.2.5
-    kind-of: ^3.0.3
-  checksum: 79314b05e9d626159a04f1d913f4c4aba9eae8848511cf5f4c8e3b04bb3cc313b65f60357f86462c959a14c2d58380fedf89b6b32ecec237c452a5ef3900a293
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.12.2, object-inspect@npm:^1.6.0, object-inspect@npm:^1.7.0, object-inspect@npm:^1.9.0":
   version: 1.12.2
   resolution: "object-inspect@npm:1.12.2"
@@ -14901,15 +14170,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-visit@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "object-visit@npm:1.0.1"
-  dependencies:
-    isobject: ^3.0.0
-  checksum: 086b475bda24abd2318d2b187c3e928959b89f5cb5883d6fe5a42d03719b61fc18e765f658de9ac8730e67ba9ff26d61e73d991215948ff9ecefe771e0071029
-  languageName: node
-  linkType: hard
-
 "object.assign@npm:^4.1.0, object.assign@npm:^4.1.2, object.assign@npm:^4.1.3, object.assign@npm:^4.1.4":
   version: 4.1.4
   resolution: "object.assign@npm:4.1.4"
@@ -14944,18 +14204,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.getownpropertydescriptors@npm:^2.1.1":
-  version: 2.1.4
-  resolution: "object.getownpropertydescriptors@npm:2.1.4"
-  dependencies:
-    array.prototype.reduce: ^1.0.4
-    call-bind: ^1.0.2
-    define-properties: ^1.1.4
-    es-abstract: ^1.20.1
-  checksum: 5c8bfddd2c8e68e4f70d56db3f4ccf18d3cc0f90ffc59c362668ce680ac32101ed1a2d700916371850fcd06277db9014e92b1f829b6a611b36549e842360d1ea
-  languageName: node
-  linkType: hard
-
 "object.hasown@npm:^1.1.1":
   version: 1.1.1
   resolution: "object.hasown@npm:1.1.1"
@@ -14966,15 +14214,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.pick@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "object.pick@npm:1.3.0"
-  dependencies:
-    isobject: ^3.0.1
-  checksum: cd316ec986e49895a28f2df9182de9cdeee57cd2a952c122aacc86344c28624fe002d9affc4f48b5014ec7c033da9942b08821ddb44db8c5bac5b3ec54bdc31e
-  languageName: node
-  linkType: hard
-
 "object.values@npm:^1.1.1, object.values@npm:^1.1.2, object.values@npm:^1.1.5":
   version: 1.1.5
   resolution: "object.values@npm:1.1.5"
@@ -15153,13 +14392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-each-series@npm:^2.1.0":
-  version: 2.2.0
-  resolution: "p-each-series@npm:2.2.0"
-  checksum: 32a7cce1312bf70f99079db2ff070fc3ee2ed6efe0fa0444616fa38f79730ad09b461d009127d25254c4c865c40b6664e2c656b1a7b2c4781756d9173c974269
-  languageName: node
-  linkType: hard
-
 "p-finally@npm:^1.0.0":
   version: 1.0.0
   resolution: "p-finally@npm:1.0.0"
@@ -15292,16 +14524,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "parse-json@npm:4.0.0"
-  dependencies:
-    error-ex: ^1.3.1
-    json-parse-better-errors: ^1.0.1
-  checksum: 8d80790b772ccb1bcea4e09e2697555e519d83d04a77c2b4237389b813f82898943a93ffff7d0d2406203bdd0c30dcf95b1661e3a53f83d0e417f053957bef32
-  languageName: node
-  linkType: hard
-
 "parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -15347,13 +14569,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:4.0.0":
-  version: 4.0.0
-  resolution: "parse5@npm:4.0.0"
-  checksum: 59e240aaea30d9668ba711e35367fe696d8ffadb5a8f1bb4afe8f3d4f47ac26dcfe9e35a8a6ab34e6504b3afe465b7bec302b6bbe0dd6cb13bd1c212b699d9db
-  languageName: node
-  linkType: hard
-
 "parse5@npm:5.1.0":
   version: 5.1.0
   resolution: "parse5@npm:5.1.0"
@@ -15361,14 +14576,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse5@npm:6.0.1":
-  version: 6.0.1
-  resolution: "parse5@npm:6.0.1"
-  checksum: 595821edc094ecbcfb9ddcb46a3e1fe3a718540f8320eff08b8cf6742a5114cce2d46d45f95c26191c11b184dcaf4e2960abcd9c5ed9eb9393ac9a37efcfdecb
-  languageName: node
-  linkType: hard
-
-"parse5@npm:^7.0.0":
+"parse5@npm:^7.0.0, parse5@npm:^7.1.1":
   version: 7.1.1
   resolution: "parse5@npm:7.1.1"
   dependencies:
@@ -15384,13 +14592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascalcase@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "pascalcase@npm:0.1.1"
-  checksum: 48dfe90618e33810bf58211d8f39ad2c0262f19ad6354da1ba563935b5f429f36409a1fb9187c220328f7a4dc5969917f8e3e01ee089b5f1627b02aefe39567b
-  languageName: node
-  linkType: hard
-
 "path-browserify@npm:^1.0.1":
   version: 1.0.1
   resolution: "path-browserify@npm:1.0.1"
@@ -15676,13 +14877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"posix-character-classes@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "posix-character-classes@npm:0.1.1"
-  checksum: cce88011548a973b4af58361cd8f5f7b5a6faff8eef0901565802f067bcabf82597e920d4c97c22068464be3cbc6447af589f6cc8a7d813ea7165be60a0395bc
-  languageName: node
-  linkType: hard
-
 "postcss-load-config@npm:^3.0.1":
   version: 3.1.4
   resolution: "postcss-load-config@npm:3.1.4"
@@ -15724,7 +14918,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:>=2.2.1 <=3.0.0":
+"prettier@npm:^2.7.1":
   version: 2.7.1
   resolution: "prettier@npm:2.7.1"
   bin:
@@ -15733,7 +14927,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^26.0.0, pretty-format@npm:^26.6.2":
+"pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
   dependencies:
@@ -15745,7 +14939,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2, pretty-format@npm:^27.5.1":
+"pretty-format@npm:^27.0.2":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"
   dependencies:
@@ -15779,6 +14973,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^29.3.1":
+  version: 29.3.1
+  resolution: "pretty-format@npm:29.3.1"
+  dependencies:
+    "@jest/schemas": ^29.0.0
+    ansi-styles: ^5.0.0
+    react-is: ^18.0.0
+  checksum: 8c0b27a7f31c678a382de70217c524b752b14c6aaf56f94098b04208d91965e4b4f92c268e6c1124c20c3cf8de146dd4ba6a4d1f1033ae67c0dcccd4de23e98b
+  languageName: node
+  linkType: hard
+
 "pretty-hrtime@npm:^1.0.0":
   version: 1.0.3
   resolution: "pretty-hrtime@npm:1.0.3"
@@ -16101,7 +15306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.8.6":
+"react-is@npm:^16.13.1, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -16147,16 +15352,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg-up@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "read-pkg-up@npm:4.0.0"
-  dependencies:
-    find-up: ^3.0.0
-    read-pkg: ^3.0.0
-  checksum: c889c5bd9a4de84bfb5234ed7e5450b90cf83d05a25025ba04cfe3e1f12302e689d5c445b1c67cc564fbd7e1b931f638fea0299a188e1fd36eac183a1167b533
-  languageName: node
-  linkType: hard
-
 "read-pkg-up@npm:^7.0.1":
   version: 7.0.1
   resolution: "read-pkg-up@npm:7.0.1"
@@ -16168,17 +15363,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "read-pkg@npm:3.0.0"
-  dependencies:
-    load-json-file: ^4.0.0
-    normalize-package-data: ^2.3.2
-    path-type: ^3.0.0
-  checksum: 65acf2df89fbcd506b48b7ced56a255ba00adf7ecaa2db759c86cc58212f6fd80f1f0b7a85c848551a5d0685232e9b64f45c1fd5b48d85df2761a160767eeb93
-  languageName: node
-  linkType: hard
-
 "read-pkg@npm:^5.2.0":
   version: 5.2.0
   resolution: "read-pkg@npm:5.2.0"
@@ -16243,15 +15427,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"realpath-native@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "realpath-native@npm:1.1.0"
-  dependencies:
-    util.promisify: ^1.0.0
-  checksum: 8211c9d7046266ef1f504a8fc11d4dacaff9b5e915756993157d6dd3c112f2f4c5ece6c18732f1970c2bd8d49015fb0d4d8c75cd934f4354160360b74548ddb5
-  languageName: node
-  linkType: hard
-
 "rechoir@npm:^0.6.2":
   version: 0.6.2
   resolution: "rechoir@npm:0.6.2"
@@ -16294,6 +15469,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.13.10":
+  version: 0.13.11
+  resolution: "regenerator-runtime@npm:0.13.11"
+  checksum: 12b069dc774001fbb0014f6a28f11c09ebfe3c0d984d88c9bced77fdb6fedbacbca434d24da9ae9371bfbf23f754869307fb51a4c98a8b8b18e5ef748677ca24
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
   version: 0.13.9
   resolution: "regenerator-runtime@npm:0.13.9"
@@ -16310,16 +15492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regex-not@npm:^1.0.0, regex-not@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "regex-not@npm:1.0.2"
-  dependencies:
-    extend-shallow: ^3.0.2
-    safe-regex: ^1.1.0
-  checksum: a0f8d6045f63b22e9759db10e248369c443b41cedd7dba0922d002b66c2734bc2aef0d98c4d45772d1f756245f4c5203856b88b9624bba2a58708858a8d485d6
-  languageName: node
-  linkType: hard
-
 "regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.1, regexp.prototype.flags@npm:^1.4.3":
   version: 1.4.3
   resolution: "regexp.prototype.flags@npm:1.4.3"
@@ -16638,21 +15810,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-trailing-separator@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "remove-trailing-separator@npm:1.1.0"
-  checksum: 3568f9f8f5af3737b4aee9e6e1e8ec4be65a92da9cb27f989e0893714d50aa95ed2ff02d40d1fa35e1b1a234dc9c2437050ef356704a3999feaca6667d9e9bfc
-  languageName: node
-  linkType: hard
-
-"repeat-element@npm:^1.1.2":
-  version: 1.1.4
-  resolution: "repeat-element@npm:1.1.4"
-  checksum: 81aa8d82bc845780803ef52df3533fa399974b99df571d0bb86e91f0ffca9ee4b9c4e8e5e72af087938cc28d2aef93d106a6d01da685d72ce96455b90a9f9f69
-  languageName: node
-  linkType: hard
-
-"repeat-string@npm:^1.0.0, repeat-string@npm:^1.5.0, repeat-string@npm:^1.6.1":
+"repeat-string@npm:^1.0.0, repeat-string@npm:^1.5.0":
   version: 1.6.1
   resolution: "repeat-string@npm:1.6.1"
   checksum: 87fa21bfdb2fbdedc44b9a5b118b7c1239bdd2c2c1e42742ef9119b7d412a5137a1d23f1a83dc6bb686f4f27429ac6f542e3d923090b44181bafa41e8ac0174d
@@ -16670,7 +15828,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"request-promise-native@npm:^1.0.5, request-promise-native@npm:^1.0.7":
+"request-promise-native@npm:^1.0.7":
   version: 1.0.9
   resolution: "request-promise-native@npm:1.0.9"
   dependencies:
@@ -16711,7 +15869,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"request@npm:2.88.2, request@npm:^2.87.0, request@npm:^2.88.0":
+"request@npm:2.88.2, request@npm:^2.88.0":
   version: 2.88.2
   resolution: "request@npm:2.88.2"
   dependencies:
@@ -16753,13 +15911,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-main-filename@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "require-main-filename@npm:2.0.0"
-  checksum: db91467d9ead311b4111cbd73a4e67fa7820daed2989a32f7023785a2659008c6d119752d9c4ac011ae07e537eb86523adff99804c5fdb39cd3a017f9b401bb6
-  languageName: node
-  linkType: hard
-
 "requireindex@npm:^1.1.0, requireindex@npm:^1.2.0":
   version: 1.2.0
   resolution: "requireindex@npm:1.2.0"
@@ -16797,13 +15948,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-url@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "resolve-url@npm:0.2.1"
-  checksum: c285182cfcddea13a12af92129ce0569be27fb0074ffaefbd3ba3da2eac2acecdfc996d435c4982a9fa2b4708640e52837c9153a5ab9255886a00b0b9e8d2a54
-  languageName: node
-  linkType: hard
-
 "resolve.exports@npm:1.1.0, resolve.exports@npm:^1.1.0":
   version: 1.1.0
   resolution: "resolve.exports@npm:1.1.0"
@@ -16818,7 +15962,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.18.1, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
+"resolve@npm:^1.1.5, resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -16851,7 +15995,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.1.5#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.18.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.5#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
   dependencies:
@@ -16972,13 +16116,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rsvp@npm:^4.8.4":
-  version: 4.8.5
-  resolution: "rsvp@npm:4.8.5"
-  checksum: 7978f01060a48204506a8ebe15cdbd468498f5ae538b1d7ee3e7630375ba7cb2f98df2f596c12d3f4d5d5c21badc1c6ca8009f5142baded8511609a28eabd19a
-  languageName: node
-  linkType: hard
-
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"
@@ -17038,15 +16175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-regex@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "safe-regex@npm:1.1.0"
-  dependencies:
-    ret: ~0.1.10
-  checksum: 547d58aa5184cbef368fd5ed5f28d20f911614748c5da6b35f53fd6626396707587251e6e3d1e3010fd3ff1212e413841b8825eaa5f317017ca62a30899af31a
-  languageName: node
-  linkType: hard
-
 "safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.0.2, safer-buffer@npm:^2.1.0, safer-buffer@npm:~2.1.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"
@@ -17054,25 +16182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sane@npm:^4.0.3":
-  version: 4.1.0
-  resolution: "sane@npm:4.1.0"
-  dependencies:
-    "@cnakazawa/watch": ^1.0.3
-    anymatch: ^2.0.0
-    capture-exit: ^2.0.0
-    exec-sh: ^0.3.2
-    execa: ^1.0.0
-    fb-watchman: ^2.0.0
-    micromatch: ^3.1.4
-    minimist: ^1.1.1
-    walker: ~1.0.5
-  bin:
-    sane: ./src/cli.js
-  checksum: 7d0991ecaa10b02c6d0339a6f7e31db776971f3b659a351916dcc7ce3464671e72b54d80bcce118e39d4343e1e56c699fe35f6cb89fbd88b07095b72841cbfb0
-  languageName: node
-  linkType: hard
-
 "sax@npm:^1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"
@@ -17080,7 +16189,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"saxes@npm:^3.1.5, saxes@npm:^3.1.9":
+"saxes@npm:^3.1.9":
   version: 3.1.11
   resolution: "saxes@npm:3.1.11"
   dependencies:
@@ -17089,12 +16198,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"saxes@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "saxes@npm:5.0.1"
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
   dependencies:
     xmlchars: ^2.2.0
-  checksum: b7476c41dbe1c3a89907d2546fecfba234de5e66743ef914cde2603f47b19bed09732ab51b528ad0f98b958369d8be72b6f5af5c9cfad69972a73d061f0b3952
+  checksum: 3847b839f060ef3476eb8623d099aa502ad658f5c40fd60c105ebce86d244389b0d76fcae30f4d0c728d7705ceb2f7e9b34bb54717b6a7dbedaf5dad2d9a4b74
   languageName: node
   linkType: hard
 
@@ -17175,23 +16284,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.x, semver@npm:^7.0.0, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
-  version: 7.3.8
-  resolution: "semver@npm:7.3.8"
-  dependencies:
-    lru-cache: ^6.0.0
+"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "semver@npm:6.3.0"
   bin:
-    semver: bin/semver.js
-  checksum: 7e581d679530db31757301c2117721577a2bb36a301a443aac833b8efad372cda58e7f2a464fe4412ae1041cc1f63a6c1fe0ced8c57ce5aca1e0b57bb0d627b9
+    semver: ./bin/semver.js
+  checksum: 1f4959e15bcfbaf727e964a4920f9260141bb8805b399793160da4e7de128e42a7d1f79c1b7d5cd21a6073fba0d55feb9966f5fef3e5ccb8e1d7ead3d7527458
   languageName: node
   linkType: hard
 
-"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0":
-  version: 6.3.0
-  resolution: "semver@npm:6.3.0"
+"semver@npm:^7.0.0, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
+  version: 7.3.8
+  resolution: "semver@npm:7.3.8"
+  dependencies:
+    lru-cache: ^6.0.0
   bin:
-    semver: ./bin/semver.js
-  checksum: 1f4959e15bcfbaf727e964a4920f9260141bb8805b399793160da4e7de128e42a7d1f79c1b7d5cd21a6073fba0d55feb9966f5fef3e5ccb8e1d7ead3d7527458
+    semver: bin/semver.js
+  checksum: 7e581d679530db31757301c2117721577a2bb36a301a443aac833b8efad372cda58e7f2a464fe4412ae1041cc1f63a6c1fe0ced8c57ce5aca1e0b57bb0d627b9
   languageName: node
   linkType: hard
 
@@ -17283,18 +16392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-value@npm:^2.0.0, set-value@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "set-value@npm:2.0.1"
-  dependencies:
-    extend-shallow: ^2.0.1
-    is-extendable: ^0.1.1
-    is-plain-object: ^2.0.3
-    split-string: ^3.0.1
-  checksum: 4c40573c4f6540456e4b38b95f570272c4cfbe1d12890ad4057886da8535047cd772dfadf5b58e2e87aa244dfb4c57e3586f6716b976fc47c5144b6b09e1811b
-  languageName: node
-  linkType: hard
-
 "setprototypeof@npm:1.1.0":
   version: 1.1.0
   resolution: "setprototypeof@npm:1.1.0"
@@ -17368,13 +16465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shellwords@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "shellwords@npm:0.1.1"
-  checksum: 7d66b28927e0b524b71b2e185651fcd88a70473a077dd230fbf86188380e948ffb36cea00832d78fc13c93cd15f6f52286fb05f2746b7580623ca1ec619eb004
-  languageName: node
-  linkType: hard
-
 "shx@npm:^0.3.2":
   version: 0.3.4
   resolution: "shx@npm:0.3.4"
@@ -17440,6 +16530,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "slash@npm:5.0.0"
+  checksum: 157e61f9c749d107a2069a8d6169f40451bf8853e4e104938afd6c02ad224059033bc0420aeb85ad5ff71d36ca483a90bd1ea831a2ffa427317ce4844bcd966a
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "slice-ansi@npm:3.0.0"
@@ -17476,42 +16573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"snapdragon-node@npm:^2.0.1":
-  version: 2.1.1
-  resolution: "snapdragon-node@npm:2.1.1"
-  dependencies:
-    define-property: ^1.0.0
-    isobject: ^3.0.0
-    snapdragon-util: ^3.0.1
-  checksum: 7616e6a1ca054afe3ad8defda17ebe4c73b0800d2e0efd635c44ee1b286f8ac7900517314b5330862ce99b28cd2782348ee78bae573ff0f55832ad81d9657f3f
-  languageName: node
-  linkType: hard
-
-"snapdragon-util@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "snapdragon-util@npm:3.0.1"
-  dependencies:
-    kind-of: ^3.2.0
-  checksum: 4441856d343399ba7f37f79681949d51b922e290fcc07e7bc94655a50f584befa4fb08f40c3471cd160e004660161964d8ff140cba49baa59aa6caba774240e3
-  languageName: node
-  linkType: hard
-
-"snapdragon@npm:^0.8.1":
-  version: 0.8.2
-  resolution: "snapdragon@npm:0.8.2"
-  dependencies:
-    base: ^0.11.1
-    debug: ^2.2.0
-    define-property: ^0.2.5
-    extend-shallow: ^2.0.1
-    map-cache: ^0.2.2
-    source-map: ^0.5.6
-    source-map-resolve: ^0.5.0
-    use: ^3.1.0
-  checksum: dfdac1f73d47152d72fc07f4322da09bbddfa31c1c9c3ae7346f252f778c45afa5b03e90813332f02f04f6de8003b34a168c456f8bb719024d092f932520ffca
-  languageName: node
-  linkType: hard
-
 "socks-proxy-agent@npm:^6.0.0":
   version: 6.2.1
   resolution: "socks-proxy-agent@npm:6.2.1"
@@ -17567,19 +16628,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-resolve@npm:^0.5.0":
-  version: 0.5.3
-  resolution: "source-map-resolve@npm:0.5.3"
-  dependencies:
-    atob: ^2.1.2
-    decode-uri-component: ^0.2.0
-    resolve-url: ^0.2.1
-    source-map-url: ^0.4.0
-    urix: ^0.1.0
-  checksum: 410acbe93882e058858d4c1297be61da3e1533f95f25b95903edddc1fb719654e705663644677542d1fb78a66390238fad1a57115fc958a0724cf9bb509caf57
-  languageName: node
-  linkType: hard
-
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -17590,23 +16638,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.6":
-  version: 0.5.21
-  resolution: "source-map-support@npm:0.5.21"
-  dependencies:
-    buffer-from: ^1.0.0
-    source-map: ^0.6.0
-  checksum: 9ee09942f415e0f721d6daad3917ec1516af746a8120bba7bb56278707a37f1eb8642bde456e98454b8a885023af81a16e646869975f06afc1a711fb90484e7d
-  languageName: node
-  linkType: hard
-
-"source-map-url@npm:^0.4.0":
-  version: 0.4.1
-  resolution: "source-map-url@npm:0.4.1"
-  checksum: f8af0678500d536c7f643e32094d6718a4070ab4ca2d2326532512cfbe2d5d25a45849b4b385879326f2d7523bb3b686d0360dd347a3cda09fd89a5c28d4bc58
-  languageName: node
-  linkType: hard
-
 "source-map@npm:0.7.3":
   version: 0.7.3
   resolution: "source-map@npm:0.7.3"
@@ -17637,13 +16668,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.7.3":
-  version: 0.7.4
-  resolution: "source-map@npm:0.7.4"
-  checksum: dc0cf3768fe23c345ea8760487f8c97ef6fca8a73c83cd7c9bf2fde8bc2c34adb9c0824d6feb14bc4f9e37fb522e18af621543f1289038a66ac7586da29aa7dc
-  languageName: node
-  linkType: hard
-
 "source-map@npm:~0.1.30":
   version: 0.1.43
   resolution: "source-map@npm:0.1.43"
@@ -17710,15 +16734,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"split-string@npm:^3.0.1, split-string@npm:^3.0.2":
-  version: 3.1.0
-  resolution: "split-string@npm:3.1.0"
-  dependencies:
-    extend-shallow: ^3.0.0
-  checksum: 72d7cd625445c7af215130e1e2bc183013bb9dd48a074eda1d35741e2b0dcb355e6df5b5558a62543a24dcec37dd1d6eb7a6228ff510d3c9de0f3dc1d1da8a70
-  languageName: node
-  linkType: hard
-
 "split@npm:0.3":
   version: 0.3.3
   resolution: "split@npm:0.3.3"
@@ -17790,16 +16805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stack-utils@npm:^1.0.1":
-  version: 1.0.5
-  resolution: "stack-utils@npm:1.0.5"
-  dependencies:
-    escape-string-regexp: ^2.0.0
-  checksum: 9e65d2a3f4fd13c4fe2615804a6721b5bd1067d7cbc1aa20588e5a9d0cd05b9dc83ae574a4c03180d2bf78804a8453406e1cef70ab47adfb38724aad67a308f5
-  languageName: node
-  linkType: hard
-
-"stack-utils@npm:^2.0.2, stack-utils@npm:^2.0.3":
+"stack-utils@npm:^2.0.3":
   version: 2.0.5
   resolution: "stack-utils@npm:2.0.5"
   dependencies:
@@ -17817,16 +16823,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"static-extend@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "static-extend@npm:0.1.2"
-  dependencies:
-    define-property: ^0.2.5
-    object-copy: ^0.1.0
-  checksum: 284f5865a9e19d079f1badbcd70d5f9f82e7a08393f818a220839cd5f71729e89105e1c95322bd28e833161d484cee671380ca443869ae89578eef2bf55c0653
-  languageName: node
-  linkType: hard
-
 "static-module@npm:^3.0.2":
   version: 3.0.4
   resolution: "static-module@npm:3.0.4"
@@ -17929,6 +16925,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-length@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "string-length@npm:5.0.1"
+  dependencies:
+    char-regex: ^2.0.0
+    strip-ansi: ^7.0.1
+  checksum: 311fa5758d397bd616be17150dfefaab4755ed292a3112237924d10ba5122f606064ad4880a293387401c1d7aa20d79f7936728bac2abed17a5e48f5b317cbc8
+  languageName: node
+  linkType: hard
+
 "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.2, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -18018,15 +17024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "strip-ansi@npm:3.0.1"
-  dependencies:
-    ansi-regex: ^2.0.0
-  checksum: f6e7fbe8e700105dccf7102eae20e4f03477537c74b286fd22cfc970f139002ed6f0d9c10d0e21aa9ed9245e0fa3c9275930e8795c5b947da136e4ecb644a70f
-  languageName: node
-  linkType: hard
-
 "strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -18036,6 +17033,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-ansi@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "strip-ansi@npm:7.0.1"
+  dependencies:
+    ansi-regex: ^6.0.1
+  checksum: a94805f54caefae6cf4870ee6acfe50cff69d90a37994bf02c096042d9939ee211e1568f34b9fa5efa03c7d7fea79cb3ac8a4e517ceb848284ae300da06ca7e9
+  languageName: node
+  linkType: hard
+
 "strip-bom@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-bom@npm:3.0.0"
@@ -18094,10 +17100,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.0.13":
-  version: 4.0.13
-  resolution: "stylis@npm:4.0.13"
-  checksum: bd567c440b4f1acf8962b1b3aa7985c4e04d7badfe1e0f1c7ee2a60912de2718973850c524001a3d52f5fc9a0e3dcd204b8bd7e2d47d4934462e9f749fd9c7bc
+"stylis@npm:4.1.3":
+  version: 4.1.3
+  resolution: "stylis@npm:4.1.3"
+  checksum: 3e4670f26f79bcfba628dcc2756d9d415edfcbf4ec51e40f3b628fd15286222257317cad57390752964eba85cca6163a7621ce90038d68dd630a674479e52334
   languageName: node
   linkType: hard
 
@@ -18118,13 +17124,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "supports-color@npm:2.0.0"
-  checksum: 570e0b63be36cccdd25186350a6cb2eaad332a95ff162fa06d9499982315f2fe4217e69dd98e862fbcd9c81eaff300a825a1fe7bf5cc752e5b84dfed042b0dda
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.0.0, supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -18134,7 +17133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^6.0.0, supports-color@npm:^6.1.0":
+"supports-color@npm:^6.0.0":
   version: 6.1.0
   resolution: "supports-color@npm:6.1.0"
   dependencies:
@@ -18288,18 +17287,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"test-exclude@npm:^5.2.3":
-  version: 5.2.3
-  resolution: "test-exclude@npm:5.2.3"
-  dependencies:
-    glob: ^7.1.3
-    minimatch: ^3.0.4
-    read-pkg-up: ^4.0.0
-    require-main-filename: ^2.0.0
-  checksum: 36d767a6ab71b170aa42092a5d540d6974a350fcfed342f29351c6e47cf061b73fabb4fe8b316ce989d6a7f058475417af209818e3702f5e7e17f4544a93535c
-  languageName: node
-  linkType: hard
-
 "test-exclude@npm:^6.0.0":
   version: 6.0.0
   resolution: "test-exclude@npm:6.0.0"
@@ -18336,13 +17323,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"throat@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "throat@npm:5.0.0"
-  checksum: 1b9c661dabf93ff9026fecd781ccfd9b507c41b9d5e581614884fffd09f3f9ebfe26d3be668ccf904fd324dd3f6efe1a3ec7f83e91b1dff9fdcc6b7d39b8bfe3
-  languageName: node
-  linkType: hard
-
 "through2@npm:^2.0.0, through2@npm:~2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
@@ -18397,25 +17377,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-object-path@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "to-object-path@npm:0.3.0"
-  dependencies:
-    kind-of: ^3.0.2
-  checksum: 731832a977614c03a770363ad2bd9e9c82f233261861724a8e612bb90c705b94b1a290a19f52958e8e179180bb9b71121ed65e245691a421467726f06d1d7fc3
-  languageName: node
-  linkType: hard
-
-"to-regex-range@npm:^2.1.0":
-  version: 2.1.1
-  resolution: "to-regex-range@npm:2.1.1"
-  dependencies:
-    is-number: ^3.0.0
-    repeat-string: ^1.6.1
-  checksum: 440d82dbfe0b2e24f36dd8a9467240406ad1499fc8b2b0f547372c22ed1d092ace2a3eb522bb09bfd9c2f39bf1ca42eb78035cf6d2b8c9f5c78da3abc96cd949
-  languageName: node
-  linkType: hard
-
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -18425,18 +17386,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-regex@npm:^3.0.1, to-regex@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "to-regex@npm:3.0.2"
-  dependencies:
-    define-property: ^2.0.2
-    extend-shallow: ^3.0.2
-    regex-not: ^1.0.2
-    safe-regex: ^1.1.0
-  checksum: 99d0b8ef397b3f7abed4bac757b0f0bb9f52bfd39167eb7105b144becfaa9a03756892352d01ac6a911f0c1ceef9f81db68c46899521a3eed054082042796120
-  languageName: node
-  linkType: hard
-
 "to-vfile@npm:^6.0.0":
   version: 6.1.0
   resolution: "to-vfile@npm:6.1.0"
@@ -18461,7 +17410,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^2.3.3, tough-cookie@npm:^2.3.4, tough-cookie@npm:^2.5.0, tough-cookie@npm:~2.5.0":
+"tough-cookie@npm:^2.3.3, tough-cookie@npm:~2.5.0":
   version: 2.5.0
   resolution: "tough-cookie@npm:2.5.0"
   dependencies:
@@ -18482,7 +17431,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tough-cookie@npm:^4.0.0":
+"tough-cookie@npm:^4.1.2":
   version: 4.1.2
   resolution: "tough-cookie@npm:4.1.2"
   dependencies:
@@ -18513,12 +17462,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "tr46@npm:2.1.0"
+"tr46@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "tr46@npm:3.0.0"
   dependencies:
     punycode: ^2.1.1
-  checksum: 397f5c39d97c5fe29fa9bab73b03853be18ad2738b2c66ee5ce84ecb36b091bdaec493f9b3cee711d45f7678f342452600843264cc8242b591c8dc983146a6c4
+  checksum: cdc47cad3a9d0b6cb293e39ccb1066695ae6fdd39b9e4f351b010835a1f8b4f3a6dc3a55e896b421371187f22b48d7dac1b693de4f6551bdef7b6ab6735dfe3b
   languageName: node
   linkType: hard
 
@@ -18589,29 +17538,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-jest@npm:^26.4.4":
-  version: 26.5.6
-  resolution: "ts-jest@npm:26.5.6"
-  dependencies:
-    bs-logger: 0.x
-    buffer-from: 1.x
-    fast-json-stable-stringify: 2.x
-    jest-util: ^26.1.0
-    json5: 2.x
-    lodash: 4.x
-    make-error: 1.x
-    mkdirp: 1.x
-    semver: 7.x
-    yargs-parser: 20.x
-  peerDependencies:
-    jest: ">=26 <27"
-    typescript: ">=3.8 <5.0"
-  bin:
-    ts-jest: cli.js
-  checksum: f86db9a8489409549c61c007c37f6f745b7e1b2c88af5118b3fdff729cf897d97f20eb11af1ae9cdbeb709d942c945a49272555ba5c1d274ab382e46566fbbdb
-  languageName: node
-  linkType: hard
-
 "ts-loader@npm:^9.2.8":
   version: 9.4.1
   resolution: "ts-loader@npm:9.4.1"
@@ -18831,6 +17757,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "type-fest@npm:3.2.0"
+  checksum: 075596e804faf646e68c15916642726b96a1848a4e91f1818b94dc1805c28235d6514ab086c87d5314787411b13d0950d7165312619857ad7dce5e134b702698
+  languageName: node
+  linkType: hard
+
 "type-is@npm:~1.6.17, type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
@@ -18855,7 +17788,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typedarray-to-buffer@npm:^3.1.5, typedarray-to-buffer@npm:~3.1.5":
+"typedarray-to-buffer@npm:~3.1.5":
   version: 3.1.5
   resolution: "typedarray-to-buffer@npm:3.1.5"
   dependencies:
@@ -18871,23 +17804,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~4.6.3":
-  version: 4.6.4
-  resolution: "typescript@npm:4.6.4"
+"typescript@npm:^4.0.3, typescript@npm:^4.9.3":
+  version: 4.9.3
+  resolution: "typescript@npm:4.9.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 92e2c0328485a4f7bd7435f5b105f03addff32f867e241dc3be8c372ed801a138c732d9a55697696d2f82a80dd6ad4bddff1ad6b0d1884bf4a24b92e71094c44
+  checksum: bddcb0794f2b8aa52094b9de9d70848fdf46ccecac68403e1c407dc9f1a4e4e28979887acd648e1917b1144e5d8fbfb4c824309d8806d393b4194aa39c71fe5e
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~4.6.3#~builtin<compat/typescript>":
-  version: 4.6.4
-  resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=701156"
+"typescript@patch:typescript@^4.0.3#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.3#~builtin<compat/typescript>":
+  version: 4.9.3
+  resolution: "typescript@patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=701156"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 0e3fa814d454942a689daf4c00f82328d323e7ecd4077e3265d45375e64642611631f4c882a71be87774468ba03793e9b8ff4bccfac3018194a9e36d8f72c251
+  checksum: 525998e7edb2a0d92bfe4f27f3219a6e0e1eef5eb0e4e3682653dde6ccb327fc72500dc9f9ad601cbb2aca036d364cd1c1d0f726e115e23fa456b3f40cebb501
   languageName: node
   linkType: hard
 
@@ -19044,18 +17977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"union-value@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "union-value@npm:1.0.1"
-  dependencies:
-    arr-union: ^3.1.0
-    get-value: ^2.0.6
-    is-extendable: ^0.1.1
-    set-value: ^2.0.1
-  checksum: 8758d880cb9545f62ce9cfb9b791b2b7a206e0ff5cc4b9d7cd6581da2c6839837fbb45e639cf1fd8eef3cae08c0201b614b7c06dd9f5f70d9dbe7c5fe2fbf592
-  languageName: node
-  linkType: hard
-
 "union@npm:~0.5.0":
   version: 0.5.0
   resolution: "union@npm:0.5.0"
@@ -19233,16 +18154,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unset-value@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "unset-value@npm:1.0.0"
-  dependencies:
-    has-value: ^0.3.1
-    isobject: ^3.0.0
-  checksum: 68a796dde4a373afdbf017de64f08490a3573ebee549136da0b3a2245299e7f65f647ef70dc13c4ac7f47b12fba4de1646fa0967a365638578fedce02b9c0b1f
-  languageName: node
-  linkType: hard
-
 "update-browserslist-db@npm:^1.0.9":
   version: 1.0.9
   resolution: "update-browserslist-db@npm:1.0.9"
@@ -19266,13 +18177,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"urix@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "urix@npm:0.1.0"
-  checksum: 264f1b29360c33c0aec5fb9819d7e28f15d1a3b83175d2bcc9131efe8583f459f07364957ae3527f1478659ec5b2d0f1ad401dfb625f73e4d424b3ae35fc5fc0
-  languageName: node
-  linkType: hard
-
 "url-join@npm:^2.0.5":
   version: 2.0.5
   resolution: "url-join@npm:2.0.5"
@@ -19297,13 +18201,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "use@npm:3.1.1"
-  checksum: 75b48673ab80d5139c76922630d5a8a44e72ed58dbaf54dee1b88352d10e1c1c1fc332066c782d8ae9a56503b85d3dc67ff6d2ffbd9821120466d1280ebb6d6e
-  languageName: node
-  linkType: hard
-
 "user-home@npm:^2.0.0":
   version: 2.0.0
   resolution: "user-home@npm:2.0.0"
@@ -19320,19 +18217,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util.promisify@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "util.promisify@npm:1.1.1"
-  dependencies:
-    call-bind: ^1.0.0
-    define-properties: ^1.1.3
-    for-each: ^0.3.3
-    has-symbols: ^1.0.1
-    object.getownpropertydescriptors: ^2.1.1
-  checksum: aacccbf770c667430ca3b7fce9a2a04a80fcd1f9f4de5507ea54cc3bbbcdcd33cbd2501ac23d1c477c5c40817234f6068b89cf7792f0610fe6e7df7ac0fe83ce
-  languageName: node
-  linkType: hard
-
 "util@npm:^0.12.4":
   version: 0.12.4
   resolution: "util@npm:0.12.4"
@@ -19363,7 +18247,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^8.0.0, uuid@npm:^8.3.0, uuid@npm:^8.3.2":
+"uuid@npm:^8.0.0, uuid@npm:^8.3.2":
   version: 8.3.2
   resolution: "uuid@npm:8.3.2"
   bin:
@@ -19386,18 +18270,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8-to-istanbul@npm:^7.0.0":
-  version: 7.1.2
-  resolution: "v8-to-istanbul@npm:7.1.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.1
-    convert-source-map: ^1.6.0
-    source-map: ^0.7.3
-  checksum: a901917e3e321e2c74a9582cbe6652ff2b983040a683c924ce98fbccdfe249cbcb34d7d7913a13a7e4eee9bed3a51c7181b09103f4405d92f4ebac1cc40dc005
-  languageName: node
-  linkType: hard
-
-"v8-to-istanbul@npm:^9.0.0":
+"v8-to-istanbul@npm:^9.0.0, v8-to-istanbul@npm:^9.0.1":
   version: 9.0.1
   resolution: "v8-to-istanbul@npm:9.0.1"
   dependencies:
@@ -19609,7 +18482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-hr-time@npm:^1.0.1, w3c-hr-time@npm:^1.0.2":
+"w3c-hr-time@npm:^1.0.1":
   version: 1.0.2
   resolution: "w3c-hr-time@npm:1.0.2"
   dependencies:
@@ -19618,7 +18491,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-xmlserializer@npm:^1.0.1, w3c-xmlserializer@npm:^1.1.2":
+"w3c-xmlserializer@npm:^1.1.2":
   version: 1.1.2
   resolution: "w3c-xmlserializer@npm:1.1.2"
   dependencies:
@@ -19629,12 +18502,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"w3c-xmlserializer@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "w3c-xmlserializer@npm:2.0.0"
+"w3c-xmlserializer@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "w3c-xmlserializer@npm:3.0.0"
   dependencies:
-    xml-name-validator: ^3.0.0
-  checksum: 92b8af34766f5bb8f37c505bc459ee1791b30af778d3a86551f7dd3b1716f79cb98c71d65d03f2bf6eba6b09861868eaf2be7e233b9202b26a9df7595f2bd290
+    xml-name-validator: ^4.0.0
+  checksum: 8c455303ee2aec813f8688f4a1618b78d2fd90156a233c8ef60b853418a6b23f00fe86b680f7584f48d1c2348ee0677ad43be6fb6fcc032130cfda4de8c7188e
   languageName: node
   linkType: hard
 
@@ -19653,7 +18526,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"walker@npm:^1.0.7, walker@npm:^1.0.8, walker@npm:~1.0.5":
+"walker@npm:^1.0.8":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"
   dependencies:
@@ -19692,17 +18565,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webidl-conversions@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "webidl-conversions@npm:5.0.0"
-  checksum: bf31df332ed11e1114bfcae7712d9ab2c37e7faa60ba32d8fdbee785937c0b012eee235c19d2b5d84f5072db84a160e8d08dd382da7f850feec26a4f46add8ff
-  languageName: node
-  linkType: hard
-
-"webidl-conversions@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "webidl-conversions@npm:6.1.0"
-  checksum: 66ad3b9073cd1e0e173444d8c636673b016e25b5856694429072cc966229adb734a8d410188e031effadcfb837936d79bc9e87c48f4d5925a90d42dec97f6590
+"webidl-conversions@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "webidl-conversions@npm:7.0.0"
+  checksum: 228d8cb6d270c23b0720cb2d95c579202db3aaf8f633b4e9dd94ec2000a04e7e6e43b76a94509cdb30479bd00ae253ab2371a2da9f81446cc313f89a4213a2c4
   languageName: node
   linkType: hard
 
@@ -19724,7 +18590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-encoding@npm:^1.0.1, whatwg-encoding@npm:^1.0.3, whatwg-encoding@npm:^1.0.5":
+"whatwg-encoding@npm:^1.0.1, whatwg-encoding@npm:^1.0.5":
   version: 1.0.5
   resolution: "whatwg-encoding@npm:1.0.5"
   dependencies:
@@ -19733,13 +18599,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-mimetype@npm:^2.1.0, whatwg-mimetype@npm:^2.2.0, whatwg-mimetype@npm:^2.3.0":
+"whatwg-encoding@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "whatwg-encoding@npm:2.0.0"
+  dependencies:
+    iconv-lite: 0.6.3
+  checksum: 91b90a49f312dc751496fd23a7e68981e62f33afe938b97281ad766235c4872fc4e66319f925c5e9001502b3040dd25a33b02a9c693b73a4cbbfdc4ad10c3e3e
+  languageName: node
+  linkType: hard
+
+"whatwg-mimetype@npm:^2.2.0, whatwg-mimetype@npm:^2.3.0":
   version: 2.3.0
   resolution: "whatwg-mimetype@npm:2.3.0"
   checksum: 81c5eaf660b1d1c27575406bcfdf58557b599e302211e13e3c8209020bbac903e73c17f9990f887232b39ce570cc8638331b0c3ff0842ba224a5c2925e830b06
   languageName: node
   linkType: hard
 
+"whatwg-mimetype@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "whatwg-mimetype@npm:3.0.0"
+  checksum: 323895a1cda29a5fb0b9ca82831d2c316309fede0365047c4c323073e3239067a304a09a1f4b123b9532641ab604203f33a1403b5ca6a62ef405bcd7a204080f
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "whatwg-url@npm:11.0.0"
+  dependencies:
+    tr46: ^3.0.0
+    webidl-conversions: ^7.0.0
+  checksum: f7ec264976d7c725e0696fcaf9ebe056e14422eacbf92fdbb4462034609cba7d0c85ffa1aab05e9309d42969bcf04632ba5ed3f3882c516d7b093053315bf4c1
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^5.0.0":
   version: 5.0.0
   resolution: "whatwg-url@npm:5.0.0"
@@ -19750,17 +18642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^6.4.1":
-  version: 6.5.0
-  resolution: "whatwg-url@npm:6.5.0"
-  dependencies:
-    lodash.sortby: ^4.7.0
-    tr46: ^1.0.1
-    webidl-conversions: ^4.0.2
-  checksum: 5afeff7da025fbaecceca6a5e0cdc6d10666efab245d0e5d785263a09a16b3afce7a81712512e184c98e70bdb79fb20d0ecd34553e9c121a9ba4f36760db4226
-  languageName: node
-  linkType: hard
-
 "whatwg-url@npm:^7.0.0":
   version: 7.1.0
   resolution: "whatwg-url@npm:7.1.0"
@@ -19772,17 +18653,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-url@npm:^8.0.0, whatwg-url@npm:^8.5.0":
-  version: 8.7.0
-  resolution: "whatwg-url@npm:8.7.0"
-  dependencies:
-    lodash: ^4.7.0
-    tr46: ^2.1.0
-    webidl-conversions: ^6.1.0
-  checksum: de0bc94387dba586b278e701cf5a1c1f5002725d22b8564dbca2cab1966ef24b839018e57ae2423fb514d8a2dd3aa3bf97323e2f89b55cd89e79141e432e9df1
-  languageName: node
-  linkType: hard
-
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"
@@ -19796,13 +18666,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-module@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "which-module@npm:2.0.0"
-  checksum: 946ffdbcd6f0cf517638f8f2319c6d51e528c3b41bc2c0f5dc3dc46047347abd7326aea5cdf5def0a8b32bdca313ac87a32ce5a76b943fe1ca876c4557e6b716
-  languageName: node
-  linkType: hard
-
 "which-pm-runs@npm:^1.0.0":
   version: 1.1.0
   resolution: "which-pm-runs@npm:1.1.0"
@@ -19947,29 +18810,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:2.4.1":
-  version: 2.4.1
-  resolution: "write-file-atomic@npm:2.4.1"
-  dependencies:
-    graceful-fs: ^4.1.11
-    imurmurhash: ^0.1.4
-    signal-exit: ^3.0.2
-  checksum: 51f5927aeb8b2c8bf43cc37db23e3abd24c870b383e6773ad1b655bb119dcc50a9e262b023d427d6e82d079a901cdf42f42d7ea78045a57e4d50e64831817b21
-  languageName: node
-  linkType: hard
-
-"write-file-atomic@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "write-file-atomic@npm:3.0.3"
-  dependencies:
-    imurmurhash: ^0.1.4
-    is-typedarray: ^1.0.0
-    signal-exit: ^3.0.2
-    typedarray-to-buffer: ^3.1.5
-  checksum: 7fb67affd811c7a1221bed0c905c26e28f0041e138fb19ccf02db57a0ef93ea69220959af3906b920f9b0411d1914474cdd90b93a96e5cd9e8368d9777caac0e
-  languageName: node
-  linkType: hard
-
 "write-file-atomic@npm:^4.0.1":
   version: 4.0.2
   resolution: "write-file-atomic@npm:4.0.2"
@@ -19980,16 +18820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^5.2.0":
-  version: 5.2.3
-  resolution: "ws@npm:5.2.3"
-  dependencies:
-    async-limiter: ~1.0.0
-  checksum: 3f329b29a893c660b01be81654c9bca422a0de3396e644aae165e4e998e74b2b713adcbba876f183cd74a4f488376cbb7442d1c87455084d69fce1e2f25ef088
-  languageName: node
-  linkType: hard
-
-"ws@npm:^6.1.0, ws@npm:^6.1.2":
+"ws@npm:^6.1.0":
   version: 6.2.2
   resolution: "ws@npm:6.2.2"
   dependencies:
@@ -19998,7 +18829,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^7.0.0, ws@npm:^7.4.6":
+"ws@npm:^7.0.0":
   version: 7.5.9
   resolution: "ws@npm:7.5.9"
   peerDependencies:
@@ -20013,6 +18844,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.9.0":
+  version: 8.11.0
+  resolution: "ws@npm:8.11.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: b672b312f357afba8568b9dbb9e08b9e8a20845659b35fa6b340dc848efe371379f5e22bb1dc89c4b2940d5e2dc52dd1de85dde41776875fce115a448f94754f
+  languageName: node
+  linkType: hard
+
 "xdg-basedir@npm:^4.0.0":
   version: 4.0.0
   resolution: "xdg-basedir@npm:4.0.0"
@@ -20039,6 +18885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xml-name-validator@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "xml-name-validator@npm:4.0.0"
+  checksum: c1bfa219d64e56fee265b2bd31b2fcecefc063ee802da1e73bad1f21d7afd89b943c9e2c97af2942f60b1ad46f915a4c81e00039c7d398b53cf410e29d3c30bd
+  languageName: node
+  linkType: hard
+
 "xml@npm:^1.0.1":
   version: 1.0.1
   resolution: "xml@npm:1.0.1"
@@ -20069,13 +18922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"y18n@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "y18n@npm:4.0.3"
-  checksum: 308a2efd7cc296ab2c0f3b9284fd4827be01cfeb647b3ba18230e3a416eb1bc887ac050de9f8c4fd9e7856b2e8246e05d190b53c96c5ad8d8cb56dffb6f81024
-  languageName: node
-  linkType: hard
-
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"
@@ -20104,13 +18950,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:20.x":
-  version: 20.2.9
-  resolution: "yargs-parser@npm:20.2.9"
-  checksum: 0685a8e58bbfb57fab6aefe03c6da904a59769bd803a722bb098bd5b0f29d274a1357762c7258fb487512811b8063fb5d2824a3415a0a4540598335b3b086c72
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:21.0.1":
   version: 21.0.1
   resolution: "yargs-parser@npm:21.0.1"
@@ -20125,36 +18964,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^18.1.2":
-  version: 18.1.3
-  resolution: "yargs-parser@npm:18.1.3"
-  dependencies:
-    camelcase: ^5.0.0
-    decamelize: ^1.2.0
-  checksum: 25df918833592a83f52e7e4f91ba7d7bfaa2b891ebf7fe901923c2ee797534f23a176913ff6ff7ebbc1cc1725a044cc6a6539fed8bfd4e13b5b16376875f9499
-  languageName: node
-  linkType: hard
-
-"yargs@npm:^15.4.1":
-  version: 15.4.1
-  resolution: "yargs@npm:15.4.1"
-  dependencies:
-    cliui: ^6.0.0
-    decamelize: ^1.2.0
-    find-up: ^4.1.0
-    get-caller-file: ^2.0.1
-    require-directory: ^2.1.1
-    require-main-filename: ^2.0.0
-    set-blocking: ^2.0.0
-    string-width: ^4.2.0
-    which-module: ^2.0.0
-    y18n: ^4.0.0
-    yargs-parser: ^18.1.2
-  checksum: f1ca680c974333a5822732825cca7e95306c5a1e7750eb7b973ce6dc4f97a6b0a8837203c8b194f461969bfe1fb1176d1d423036635285f6010b392fa498ab2d
-  languageName: node
-  linkType: hard
-
-"yargs@npm:^17.4.0":
+"yargs@npm:^17.3.1, yargs@npm:^17.4.0":
   version: 17.6.0
   resolution: "yargs@npm:17.6.0"
   dependencies: