diff --git a/.circleci/config.yml b/.circleci/config.yml index ad07b40429a4..c71bbbbae66b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -124,7 +124,7 @@ jobs: yarn docs:prettier:check build: executor: - class: large + class: xlarge name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: @@ -768,22 +768,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 35 + parallelism: 37 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 35 + parallelism: 37 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 32 + parallelism: 34 requires: - build-sandboxes - e2e-production: - parallelism: 30 + parallelism: 32 requires: - build-sandboxes - e2e-dev: @@ -791,7 +791,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 32 requires: - build-sandboxes - test-portable-stories: diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index cc88ce6182fd..8aa7928748bc 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -154,18 +154,6 @@ jobs: git merge ${{ github.ref_name }} git push origin ${{ steps.target.outputs.target }} - - name: Ensure `next` is a minor version ahead of `main` - if: steps.target.outputs.target == 'main' - run: | - git checkout next - git pull - - yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}" - - git add .. - git diff --staged --quiet || git commit -m "Bump next to be one minor ahead of main [skip ci]" - git push origin next - - name: Sync CHANGELOG.md from `main` to `next` if: steps.target.outputs.target == 'main' working-directory: . diff --git a/CHANGELOG.md b/CHANGELOG.md index ef1c0ad4edbf..0fdbefeb9821 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,139 @@ +## 8.1.1 + +- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin! +- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman! +- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold! +- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic! +- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee! +- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic! + +## 8.1.0 + +Storybook 8.1 is here with a tone of new features and bug fixes: + +- 🏷️ Static tag-based filtering +- 🦺 Type-safe, standards-based module mocking +- 🐣 New `beforeEach` test hook +- 🧳 Portable Stories API for Playwright Component Testing +- 🐕‍🦺 Support the new signal-based input & output functions in Angular +- 2️⃣ Two new ways to create stories: generating them from story controls or from your components directly! + +
+List of all updates + + - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560! + - Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold! + - Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish! + - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold! + - Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf! + - Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf! + - Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic! + - Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic! + - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman! + - Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic! + - Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic! + - Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic! + - Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98! + - Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic! + - Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota! + - Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz! + - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue! + - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf! + - CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman! + - CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen! + - CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen! + - CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n! + - CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman! + - CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf! + - CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n! + - CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen! + - CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic! + - CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf! + - Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata! + - Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic! + - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic! + - Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic! + - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf! + - Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic! + - Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru! + - Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld! + - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday! + - Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday! + - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold! + - Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen! + - Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic! + - Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen! + - Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen! + - CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen! + - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen! + - CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen! + - Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry! + - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding! + - Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi! + - Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic! + - Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic! + - Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic! + - Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695! + - Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin! + - Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! + - MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold! + - Next.js: Fix Compatibility with + + +## 8.0.10 + +- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold! +- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe! +- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori! + +## 8.0.9 + +- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold! +- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen! +- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf! +- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695! +- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13! +- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf! +- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen! +- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold! + ## 8.0.8 - Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 5d6baeac2136..9fd08c30bb5d 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,69 @@ +## 8.2.0-alpha.1 + +- CLI: Add optional `--dev` and `--no-dev` options to `storybook init` CLI - [#26918](https://github.com/storybookjs/storybook/pull/26918), thanks @fastfrwrd! +- CLI: Include `@storybook/addon-svelte-csf` when initializing new projects - [#27070](https://github.com/storybookjs/storybook/pull/27070), thanks @benmccann! +- Dependency: Upgrade `webpack-virtual-modules` to 0.6.0 - [#27102](https://github.com/storybookjs/storybook/pull/27102), thanks @fyodorovandrei! +- Dependency: bump `markdown-to-jsx` to v7.4.5 - [#26694](https://github.com/storybookjs/storybook/pull/26694), thanks @xyy94813! +- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin! +- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman! +- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold! +- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic! +- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee! +- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic! + +## 8.2.0-alpha.0 + + +## 8.1.0-beta.1 + +- API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman! +- CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman! +- CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman! +- Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin! +- Next.js: Fix Compatibility with Migration -- [From version 7.x to 8.0.0](#from-version-7x-to-800) +- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x) - [Portable stories](#portable-stories) + - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup) + - [main.js `docs.autodocs` is deprecated](#mainjs-docsautodocs-is-deprecated) + - [`docs` and `story` system tags removed](#docs-and-story-system-tags-removed) + - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) + - [Title block `of` prop](#title-block-of-prop) +- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Portable stories](#portable-stories-1) - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) - [Type change in `composeStories` API](#type-change-in-composestories-api) - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions) @@ -90,17 +97,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -126,7 +133,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -140,7 +147,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -190,7 +197,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -403,6 +410,78 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 8.0.x to 8.1.x + +### Portable stories + +#### @storybook/nextjs requires specific path aliases to be setup + +In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: + +```js +const nextJest = require("next/jest.js"); +const { getPackageAliases } = require("@storybook/nextjs/export-mocks"); +const createJestConfig = nextJest(); +const customJestConfig = { + moduleNameMapper: { + ...getPackageAliases(), // Add aliases for @storybook/nextjs mocks + }, +}; +module.exports = createJestConfig(customJestConfig); +``` + +This will make sure you end using the correct implementation of the packages and avoid having issues in your tests. + +### main.js `docs.autodocs` is deprecated + +The `docs.autodocs` setting in `main.js` is deprecated in 8.1 and will be removed in 9.0. + +It has been replaced with a tags-based system which is more flexible than before. + +`docs.autodocs` takes three values: +- `true`: generate autodocs for every component +- `false`: don't generate autodocs at all +- `tag`: generate autodocs for components that have been tagged `'autodocs'`. + +Starting in 8.1, to generate autodocs for every component (`docs.autodocs = true`), add the following code to `.storybook/preview.js`: + +```js +// .storybook/preview.js +export default { + tags: ['autodocs'], +} +``` + +Tags cascade, so setting `'autodocs'` at the project level automatically propagates to every component and story. If you set autodocs globally and want to opt-out for a particular component, you can remove the `'autodocs'` tag for a component like this: + +```js +// Button.stories.ts +export default { + component: Button, + tags: ['!autodocs'], +} +``` + +If you had set `docs.autodocs = 'tag'`, the default setting, you can remove the setting from `.storybook/main.js`. That is now the default behavior. + +If you had set `docs.autodocs = false`, this still works in 8.x, but will go away in 9.0 as a breaking change. If you don't want autodocs at all, simply remove the `'autodocs'` tag throughout your Storybook and autodocs will not be created. + +### `docs` and `story` system tags removed + +Storybook automatically added the tag `'docs'` to any docs entry in the index and `'story'` to any story entry in the index. This behavior was undocumented, and in an effort to reduce the number of tags we've removed them in 8.1. If you depended on these tags, please file an issue on the [Storybook monorepo](https://github.com/storybookjs/storybook) and let us know! + +### Subtitle block and `parameters.componentSubtitle` + +The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). + +`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. + +### Title block `of` prop + +The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). + +It still accepts being passed `children`. + ## From version 7.x to 8.0.0 ### Portable stories @@ -3820,7 +3899,7 @@ export default { We are replacing `@storybook/addon-knobs` with `@storybook/addon-controls`. - [Rationale & discussion](https://github.com/storybookjs/storybook/discussions/15060) -- [Migration notes](https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#how-do-i-migrate-from-addon-knobs) +- [Migration notes](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/README.md#how-do-i-migrate-from-addon-knobs) #### Deprecated scoped blocks imports @@ -5049,7 +5128,7 @@ SB 5.1.0 added [support for project root `babel.config.js` files](https://github ### React native server -Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons. +Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons. 5.1 refactors both pieces: diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index b4ead0743136..77244acd16a9 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index ece8a2ec4e3b..ebd0ec217b69 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts index ab8fd3b36a0b..008598f4ceb3 100644 --- a/code/addons/actions/src/addArgsHelpers.ts +++ b/code/addons/actions/src/addArgsHelpers.ts @@ -51,13 +51,11 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => { return {}; } - const argTypesWithAction = Object.entries(argTypes).filter( - ([name, argType]) => !!argType['action'] - ); + const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action); return argTypesWithAction.reduce((acc, [name, argType]) => { if (isInInitialArgs(name, initialArgs)) { - acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name); + acc[name] = action(typeof argType.action === 'string' ? argType.action : name); } return acc; }, {} as Args); diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index a3e48337107f..8a5d84d41c0a 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -1,22 +1,23 @@ -import type { FC, PropsWithChildren } from 'react'; -import React, { Fragment } from 'react'; -import { styled, withTheme } from '@storybook/theming'; +import type { ElementRef, ReactNode } from 'react'; +import React, { forwardRef, Fragment, useEffect, useRef } from 'react'; import type { Theme } from '@storybook/theming'; +import { styled, withTheme } from '@storybook/theming'; import { Inspector } from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; -import { Action, InspectorContainer, Counter } from './style'; +import { Action, Counter, InspectorContainer } from './style'; import type { ActionDisplay } from '../../models'; -const UnstyledWrapped: FC> = ({ - children, - className, -}) => ( - - {children} - +const UnstyledWrapped = forwardRef( + ({ children, className }, ref) => ( + + {children} + + ) ); +UnstyledWrapped.displayName = 'UnstyledWrapped'; + export const Wrapper = styled(UnstyledWrapped)({ margin: 0, padding: '10px 5px 20px', @@ -39,24 +40,34 @@ interface ActionLoggerProps { onClear: () => void; } -export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( - - - {actions.map((action: ActionDisplay) => ( - - {action.count > 1 && {action.count}} - - - - - ))} - - - - -); +export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { + const wrapperRef = useRef>(null); + const wrapper = wrapperRef.current; + const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; + + useEffect(() => { + // Scroll to bottom, when the action panel was already scrolled down + if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; + }, [wasAtBottom, actions.length]); + + return ( + + + {actions.map((action: ActionDisplay) => ( + + {action.count > 1 && {action.count}} + + + + + ))} + + + + ); +}; diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx index bb88fd7f5b2a..6f5d5f3a1366 100644 --- a/code/addons/actions/src/containers/ActionLogger/index.tsx +++ b/code/addons/actions/src/containers/ActionLogger/index.tsx @@ -63,12 +63,12 @@ export default class ActionLogger extends Component { this.setState((prevState: ActionLoggerState) => { const actions = [...prevState.actions]; - const previous = actions.length && actions[0]; + const previous = actions.length && actions[actions.length - 1]; if (previous && safeDeepEqual(previous.data, action.data)) { previous.count++; } else { action.count = 1; - actions.unshift(action); + actions.push(action); } return { actions: actions.slice(0, action.options.limit) }; }); diff --git a/code/addons/actions/src/decorator.ts b/code/addons/actions/src/decorator.ts index 3022714f1253..34618f08e7ae 100644 --- a/code/addons/actions/src/decorator.ts +++ b/code/addons/actions/src/decorator.ts @@ -62,8 +62,8 @@ export const withActions: (storyFn: PartialStoryFn) => T[ parameterName: PARAM_KEY, skipIfNoParametersOrOptions: true, wrapper: (getStory, context, { parameters }) => { - if (parameters?.['handles']) { - applyEventHandlers(actions, ...parameters['handles']); + if (parameters?.handles) { + applyEventHandlers(actions, ...parameters.handles); } return getStory(context); diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index d49a048da231..eebb09acb71b 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -18,7 +18,26 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function' ) { const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType; - onMockCall((mock, args) => action(mock.getMockName())(args)); + onMockCall((mock, args) => { + const name = mock.getMockName(); + + // TODO: Make this a configurable API in 8.2 + if ( + !/^next\/.*::/.test(name) || + [ + 'next/router::useRouter()', + 'next/navigation::useRouter()', + 'next/navigation::redirect', + 'next/cache::', + 'next/headers::cookies().set', + 'next/headers::cookies().delete', + 'next/headers::headers().set', + 'next/headers::headers().delete', + ].some((prefix) => name.startsWith(prefix)) + ) { + action(name)(args); + } + }); subscribed = true; } }; diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts index 824494bda1c9..9d84cae3d361 100644 --- a/code/addons/actions/template/stories/spies.stories.ts +++ b/code/addons/actions/template/stories/spies.stories.ts @@ -1,24 +1,27 @@ import { global as globalThis } from '@storybook/global'; import { spyOn } from '@storybook/test'; -export default { +const meta = { component: globalThis.Components.Button, - loaders() { + beforeEach() { spyOn(console, 'log').mockName('console.log'); - }, - args: { - label: 'Button', - }, - parameters: { - chromatic: { disable: true }, + console.log('first'); }, }; +export default meta; + export const ShowSpyOnInActions = { + parameters: { + chromatic: { disable: true }, + }, + beforeEach() { + console.log('second'); + }, args: { + label: 'Button', onClick: () => { - console.log('first'); - console.log('second'); + console.log('third'); }, }, }; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 6a28feca7160..dffb0ccd7c78 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 2a4619bcdf8a..2362661f5231 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -52,6 +52,7 @@ }, "dependencies": { "@storybook/blocks": "workspace:*", + "dequal": "^2.0.2", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -59,6 +60,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", + "@storybook/icons": "^1.2.5", "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 1f1a90cce007..6e82b0c0e727 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -1,5 +1,6 @@ -import type { FC } from 'react'; -import React, { useEffect, useState } from 'react'; +import { dequal as deepEqual } from 'dequal'; +import React, { useEffect, useMemo, useState } from 'react'; +import { global } from '@storybook/global'; import { useArgs, useGlobals, @@ -8,9 +9,26 @@ import { useStorybookState, } from '@storybook/manager-api'; import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; - +import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; + import { PARAM_KEY } from './constants'; +import { SaveStory } from './SaveStory'; + +// Remove undefined values (top-level only) +const clean = (obj: { [key: string]: any }) => + Object.entries(obj).reduce( + (acc, [key, value]) => (value !== undefined ? Object.assign(acc, { [key]: value }) : acc), + {} as typeof obj + ); + +const AddonWrapper = styled.div({ + display: 'grid', + gridTemplateRows: '1fr 39px', + height: '100%', + maxHeight: '100vh', + overflowY: 'auto', +}); interface ControlsParameters { sort?: SortType; @@ -18,9 +36,14 @@ interface ControlsParameters { presetColors?: PresetColor[]; } -export const ControlsPanel: FC = () => { +interface ControlsPanelProps { + saveStory: () => Promise; + createStory: (storyName: string) => Promise; +} + +export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => { const [isLoading, setIsLoading] = useState(true); - const [args, updateArgs, resetArgs] = useArgs(); + const [args, updateArgs, resetArgs, initialArgs] = useArgs(); const [globals] = useGlobals(); const rows = useArgTypes(); const { expanded, sort, presetColors } = useParameter(PARAM_KEY, {}); @@ -42,18 +65,28 @@ export const ControlsPanel: FC = () => { return acc; }, {} as ArgTypes); + const hasUpdatedArgs = useMemo( + () => !!args && !!initialArgs && !deepEqual(clean(args), clean(initialArgs)), + [args, initialArgs] + ); + return ( - + + + {hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && ( + + )} + ); }; diff --git a/code/addons/controls/src/SaveStory.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx new file mode 100644 index 000000000000..9dbe620da7fb --- /dev/null +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SaveStory } from './SaveStory'; +import { expect, fireEvent, fn, userEvent, within } from '@storybook/test'; + +const meta = { + component: SaveStory, + args: { + saveStory: fn((...args) => Promise.resolve(action('saveStory')(...args))), + createStory: fn((...args) => Promise.resolve(action('createStory')(...args))), + resetArgs: fn(action('resetArgs')), + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Creating = { + play: async ({ canvasElement }) => { + const createButton = await within(canvasElement).findByRole('button', { name: /Create/i }); + await fireEvent.click(createButton); + await new Promise((resolve) => setTimeout(resolve, 300)); + }, +} satisfies Story; + +export const Created: Story = { + play: async (context) => { + await Creating.play(context); + + const dialog = await within(document.body).findByRole('dialog'); + const input = await within(dialog).findByRole('textbox'); + await userEvent.type(input, 'MyNewStory'); + + fireEvent.submit(dialog.getElementsByTagName('form')[0]); + await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); + }, +}; + +export const CreatingFailed: Story = { + args: { + // eslint-disable-next-line local-rules/no-uncategorized-errors + createStory: fn((...args) => Promise.reject(new Error('Story already exists.'))), + }, + play: Created.play, +}; diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx new file mode 100644 index 000000000000..8f72826c6460 --- /dev/null +++ b/code/addons/controls/src/SaveStory.tsx @@ -0,0 +1,219 @@ +import { + Bar as BaseBar, + Button, + Form, + IconButton, + Modal, + TooltipNote, + WithTooltip, +} from '@storybook/components'; +import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons'; +import { keyframes, styled } from '@storybook/theming'; +import React from 'react'; + +const slideIn = keyframes({ + from: { transform: 'translateY(40px)' }, + to: { transform: 'translateY(0)' }, +}); + +const highlight = keyframes({ + from: { background: 'var(--highlight-bg-color)' }, + to: {}, +}); + +const Container = styled.div({ + containerType: 'size', + position: 'sticky', + bottom: 0, + height: 39, + overflow: 'hidden', + zIndex: 1, +}); + +const Bar = styled(BaseBar)(({ theme }) => ({ + '--highlight-bg-color': theme.base === 'dark' ? '#153B5B' : '#E0F0FF', + display: 'flex', + flexDirection: 'row-reverse', // hide Info rather than Actions on overflow + alignItems: 'center', + justifyContent: 'space-between', + flexWrap: 'wrap', + gap: 6, + padding: '6px 10px', + animation: `${slideIn} 300ms, ${highlight} 2s`, + background: theme.background.bar, + borderTop: `1px solid ${theme.appBorderColor}`, + fontSize: theme.typography.size.s2, + + '@container (max-width: 799px)': { + flexDirection: 'row', + justifyContent: 'flex-end', + }, +})); + +const Info = styled.div({ + display: 'flex', + flex: '99 0 auto', + alignItems: 'center', + marginLeft: 10, + gap: 6, +}); + +const Actions = styled.div(({ theme }) => ({ + display: 'flex', + flex: '1 0 0', + alignItems: 'center', + gap: 2, + color: theme.color.mediumdark, + fontSize: theme.typography.size.s2, +})); + +const Label = styled.div({ + '@container (max-width: 799px)': { + lineHeight: 0, + textIndent: '-9999px', + '&::after': { + content: 'attr(data-short-label)', + display: 'block', + lineHeight: 'initial', + textIndent: '0', + }, + }, +}); + +const ModalInput = styled(Form.Input)(({ theme }) => ({ + '::placeholder': { + color: theme.color.mediumdark, + }, + '&:invalid:not(:placeholder-shown)': { + boxShadow: `${theme.color.negative} 0 0 0 1px inset`, + }, +})); + +type SaveStoryProps = { + saveStory: () => Promise; + createStory: (storyName: string) => Promise; + resetArgs: () => void; +}; + +export const SaveStory = ({ saveStory, createStory, resetArgs }: SaveStoryProps) => { + const inputRef = React.useRef(null); + const [saving, setSaving] = React.useState(false); + const [creating, setCreating] = React.useState(false); + const [storyName, setStoryName] = React.useState(''); + const [errorMessage, setErrorMessage] = React.useState(null); + + const onSaveStory = async () => { + if (saving) return; + setSaving(true); + await saveStory().catch(() => {}); + setSaving(false); + }; + + const onShowForm = () => { + setCreating(true); + setStoryName(''); + setTimeout(() => inputRef.current?.focus(), 0); + }; + const onChange = (e: React.ChangeEvent) => { + const value = e.target.value + .replace(/^[^a-z]/i, '') + .replace(/[^a-z0-9-_ ]/gi, '') + .replaceAll(/([-_ ]+[a-z0-9])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, '')); + setStoryName(value.charAt(0).toUpperCase() + value.slice(1)); + }; + const onSubmitForm = async (event: React.FormEvent) => { + event.preventDefault(); + if (saving) return; + try { + setErrorMessage(null); + setSaving(true); + await createStory(storyName.replace(/^[^a-z]/i, '').replaceAll(/[^a-z0-9]/gi, '')); + setCreating(false); + setSaving(false); + } catch (e: any) { + setErrorMessage(e.message); + setSaving(false); + } + }; + + return ( + + + + } + > + + + + + + + } + > + + + + + + + } + > + resetArgs()}> + + Reset + + + + + + + + + +
+ + + Create new story + + This will add a new story to your existing stories file. + + + + + + + + + + +
+ {errorMessage && {errorMessage}} + + + + ); +}; diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 921cd038b74c..2601b2787ec1 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,8 +1,17 @@ import React from 'react'; -import { addons, types, useArgTypes } from '@storybook/manager-api'; +import { dequal as deepEqual } from 'dequal'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; +import type { + ResponseData, + SaveStoryRequestPayload, + SaveStoryResponsePayload, +} from '@storybook/core-events'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; +import { addons, experimental_requestResponse, types, useArgTypes } from '@storybook/manager-api'; +import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; +import type { Args } from '@storybook/csf'; function Title() { const rows = useArgTypes(); @@ -21,7 +30,96 @@ function Title() { ); } +const stringifyArgs = (args: Record) => + JSON.stringify(args, (_, value) => { + if (typeof value === 'function') return '__sb_empty_function_arg__'; + return value; + }); + addons.register(ADDON_ID, (api) => { + const channel = addons.getChannel(); + + const saveStory = async () => { + const data = api.getCurrentStoryData(); + if (data.type !== 'story') throw new Error('Not a story'); + + try { + const response = await experimental_requestResponse< + SaveStoryRequestPayload, + SaveStoryResponsePayload + >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + // Only send updated args + args: stringifyArgs( + Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; + return acc; + }, {}) + ), + csfId: data.id, + importPath: data.importPath, + }); + + api.addNotification({ + id: 'save-story-success', + icon: { name: 'passed', color: color.positive }, + content: { + headline: 'Story saved', + subHeadline: ( + <> + Updated story {response.sourceStoryName}. + + ), + }, + duration: 8_000, + }); + } catch (error: any) { + api.addNotification({ + id: 'save-story-error', + icon: { name: 'failed', color: color.negative }, + content: { + headline: 'Failed to save story', + subHeadline: + error?.message || 'Check the Storybook process on the command line for more details.', + }, + duration: 8_000, + }); + throw error; + } + }; + + const createStory = async (name: string) => { + const data = api.getCurrentStoryData(); + if (data.type !== 'story') throw new Error('Not a story'); + + const response = await experimental_requestResponse< + SaveStoryRequestPayload, + SaveStoryResponsePayload + >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + args: data.args && stringifyArgs(data.args), + csfId: data.id, + importPath: data.importPath, + name, + }); + + api.addNotification({ + id: 'save-story-success', + icon: { name: 'passed', color: color.positive }, + content: { + headline: 'Story created', + subHeadline: ( + <> + Added story {response.newStoryName} based on {response.sourceStoryName}. + + ), + }, + duration: 8_000, + onClick: ({ onDismiss }) => { + onDismiss(); + api.selectStory(response.newStoryId); + }, + }); + }; + addons.add(ADDON_ID, { title: Title, type: types.PANEL, @@ -32,9 +130,20 @@ addons.register(ADDON_ID, (api) => { } return ( - + ); }, }); + + channel.on(SAVE_STORY_RESPONSE, (data: ResponseData) => { + if (!data.success) return; + const story = api.getCurrentStoryData(); + if (story.type !== 'story') return; + + api.resetStoryArgs(story); + if (data.payload.newStoryId) { + api.selectStory(data.payload.newStoryId); + } + }); }); diff --git a/code/addons/controls/src/typings.d.ts b/code/addons/controls/src/typings.d.ts new file mode 100644 index 000000000000..c51fcc2f2f86 --- /dev/null +++ b/code/addons/controls/src/typings.d.ts @@ -0,0 +1,29 @@ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ + +declare var DOCS_OPTIONS: any; +declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; +declare var PREVIEW_URL: any; + +declare var __STORYBOOK_ADDONS_MANAGER: any; +declare var RELEASE_NOTES_DATA: any; + +declare var FEATURES: import('@storybook/types').StorybookConfigRaw['features']; + +declare var REFS: any; +declare var VERSIONCHECK: any; +declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; + +declare var __REACT__: any; +declare var __REACT_DOM__: any; +declare var __STORYBOOK_COMPONENTS__: any; +declare var __STORYBOOK_CHANNELS__: any; +declare var __STORYBOOK_CORE_EVENTS__: any; +declare var __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__: any; +declare var __STORYBOOK_ROUTER__: any; +declare var __STORYBOOK_THEMING__: any; +declare var __STORYBOOK_API__: any; +declare var __STORYBOOK_ICONS__: any; +declare var __STORYBOOK_CLIENT_LOGGER__: any; +declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOK_TYPES__: any; +declare var sendTelemetryError: (error: any) => void; diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 5e89251c2ede..603652331eb6 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -165,10 +165,10 @@ You can override this default behavior in `.storybook/preview.js` (or in any of ```js export const parameters = { docs: { - source: { - state: 'open', - }, - }, + canvas: { + sourceState: 'shown' + } + } }; ``` diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 77ccd00d086e..2f9665364ce3 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -98,7 +98,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.12.3", + "@babel/core": "^7.24.4", "@mdx-js/react": "^3.0.0", "@storybook/blocks": "workspace:*", "@storybook/client-logger": "workspace:*", diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts index a75194fa7309..2ff606215831 100644 --- a/code/addons/docs/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -32,7 +32,7 @@ export async function mdxPlugin(options: Options): Promise { mdxCompileOptions: { providerImportSource: join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ), ...mdxPluginOptions?.mdxCompileOptions, rehypePlugins: [ diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 4b8811935ec9..977c2228fa85 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -45,7 +45,7 @@ async function webpack( mdxCompileOptions: { providerImportSource: join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ), ...mdxPluginOptions.mdxCompileOptions, rehypePlugins: [ diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts index 91f12041962b..20095ec6164b 100644 --- a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts +++ b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts @@ -44,6 +44,8 @@ export default { docs: { name: 'ResolvedReact', }, + // the version string changes with every release of React/Next.js/Preact, not worth snapshotting + chromatic: { disable: true }, }, }; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 33112d9708df..5c4959f56dbd 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts index ffb6047facab..5c7409f65b14 100644 --- a/code/addons/essentials/src/docs/preset.ts +++ b/code/addons/essentials/src/docs/preset.ts @@ -5,7 +5,7 @@ export * from '@storybook/addon-docs/dist/preset'; export const mdxLoaderOptions = async (config: any) => { config.mdxCompileOptions.providerImportSource = join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ); return config; }; diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 5d2b909e149a..ff98739e58a3 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/src/index.ts b/code/addons/gfm/src/index.ts index c23a1036d5d3..0cadb00aeb4f 100644 --- a/code/addons/gfm/src/index.ts +++ b/code/addons/gfm/src/index.ts @@ -12,7 +12,7 @@ export const mdxLoaderOptions = async (config: any) => { deprecate(dedent` The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version. It's recommended you read this document: - https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. `); diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 261aaaf561fa..81bdae41e6b1 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 467cac882d2b..039a2c55e002 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index fcaf0144ccd4..336c44b72f3a 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -11,6 +11,7 @@ export default { }, parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, + chromatic: { disable: true }, }, }; diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 02d3455461a0..e423663b2df7 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index cbe50306d3f7..9bcb2fa900c5 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.7", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, @@ -82,7 +82,7 @@ "typescript": "^5.3.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta" }, "peerDependenciesMeta": { "react": { diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts index 218833a75800..53a05f380e74 100644 --- a/code/addons/links/template/stories/decorator.stories.ts +++ b/code/addons/links/template/stories/decorator.stories.ts @@ -9,29 +9,44 @@ export default { decorators: [withLinks], }; -export const Basic = { +export const Target = { args: { content: `
- go to other + This is just a story to target with the links
`, }, + parameters: { + chromatic: { disable: true }, + }, }; -export const Other = { + +export const KindAndStory = { args: { content: ` `, }, }; -export const Third = { + +export const StoryOnly = { + args: { + content: ` + + `, + }, +}; + +export const KindOnly = { args: { content: ` `, }, diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts new file mode 100644 index 000000000000..d58844b305bd --- /dev/null +++ b/code/addons/links/template/stories/hrefto.stories.ts @@ -0,0 +1,22 @@ +import { hrefTo } from '@storybook/addon-links'; + +export default { + component: globalThis.Components.Html, + title: 'hrefTo', + parameters: { + chromatic: { disable: true }, + }, + args: { + content: '
Waiting for hrefTo to resolve...
', + }, +}; + +export const Default = { + play: async () => { + const href = await hrefTo('addons-links-hrefto', 'target'); + const content = document.querySelector('#content'); + if (content) { + content.textContent = href; + } + }, +}; diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts index bdc752c2ae17..502509a8d5aa 100644 --- a/code/addons/links/template/stories/linkto.stories.ts +++ b/code/addons/links/template/stories/linkto.stories.ts @@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links'; export default { component: globalThis.Components.Button, + title: 'linkTo', args: { label: 'Click Me!', }, @@ -11,34 +12,69 @@ export default { }, }; -export const ID = { +export const Target = { args: { - onClick: linkTo('addons-links-parameters--basic'), + label: 'This is just a story to target with the links', + }, + parameters: { + chromatic: { disable: true }, }, }; -export const Title = { + +export const Id = { args: { - onClick: linkTo('addons-links-parameters'), + onClick: linkTo('addons-links-linkto--target'), + label: 'addons-links-linkto--target', }, }; -export const Basic = { + +export const TitleOnly = { args: { - onClick: linkTo('addons-links-parameters', 'basic'), + onClick: linkTo('addons/links/linkTo'), + label: 'addons/links/linkTo', }, }; -export const Other = { + +export const NormalizedTitleOnly = { args: { - onClick: linkTo('addons-links-parameters', 'basic'), + onClick: linkTo('addons-links-linkto'), + label: 'addons-links-linkto', }, }; -export const Third = { + +export const TitleAndName = { args: { - onClick: linkTo('addons-links-parameters', 'other'), + onClick: linkTo('addons/links/linkTo', 'Target'), + label: 'addons/links/linkTo, Target', + }, +}; + +export const NormalizedTitleAndName = { + args: { + onClick: linkTo('addons-links-linkto', 'target'), + label: 'addons-links-linkto, target', }, }; export const Callback = { args: { - onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'), + onClick: linkTo( + (event: Event) => 'addons-links-linkto', + (event: Event) => 'target' + ), + }, +}; + +export const ToMDXDocs = { + args: { + onClick: linkTo('Configure Your Project'), + label: 'Configure Your Project', + }, +}; + +export const ToAutodocs = { + args: { + onClick: linkTo('Example Button', 'Docs'), + label: 'Example Button, Docs', }, }; diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts deleted file mode 100644 index a7d6a3937763..000000000000 --- a/code/addons/links/template/stories/scroll.stories.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { global as globalThis } from '@storybook/global'; -import { withLinks } from '@storybook/addon-links'; - -export default { - component: globalThis.Components.Html, - parameters: { - chromatic: { disable: true }, - }, - decorators: [withLinks], -}; - -export const Basic = { - args: { - content: ` -
-
- go to basic -
- `, - }, -}; -export const Other = { - args: { - content: ` -
-
- to to basic -
- `, - }, -}; -export const Third = { - args: { - content: ` -
-
- go to other -
- `, - }, -}; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index f5146ede8621..13bd06295895 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 8919cabdb5b6..3ad4cf6eb247 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", @@ -45,6 +45,9 @@ "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, + "dependencies": { + "react-confetti": "^6.1.0" + }, "devDependencies": { "@radix-ui/react-dialog": "^1.0.5", "@storybook/channels": "workspace:*", @@ -59,7 +62,6 @@ "@storybook/types": "workspace:*", "framer-motion": "^11.0.3", "react": "^18.2.0", - "react-confetti": "^6.1.0", "react-dom": "^18.2.0", "react-joyride": "^2.7.2", "react-use-measure": "^2.1.1", diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx index 5f0658dc462b..763a835e88a8 100644 --- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx +++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx @@ -1,4 +1,4 @@ -import { ReactConfetti } from 'react-confetti/src/ReactConfetti'; +import ReactConfetti from 'react-confetti'; import React, { useEffect } from 'react'; import { styled } from '@storybook/theming'; import { createPortal } from 'react-dom'; diff --git a/code/addons/onboarding/src/components/Modal/Modal.styled.tsx b/code/addons/onboarding/src/components/Modal/Modal.styled.tsx deleted file mode 100644 index 42cf6537dd36..000000000000 --- a/code/addons/onboarding/src/components/Modal/Modal.styled.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { css, styled } from '@storybook/theming'; -import * as Dialog from '@radix-ui/react-dialog'; -import React from 'react'; - -export const StyledOverlay = styled.div` - background-color: rgba(27, 28, 29, 0.48); - position: fixed; - inset: 0px; - width: 100%; - height: 100%; - z-index: 10; -`; - -export const StyledContent = styled.div<{ - width: number; - height: number; -}>( - ({ width, height }) => css` - background-color: white; - border-radius: 6px; - box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: ${width ?? 740}px; - height: ${height ? `${height}px` : 'auto'}; - max-width: calc(100% - 40px); - max-height: 85vh; - overflow: hidden; - z-index: 11; - - &:focus-visible { - outline: none; - } - ` -); - -export const ContentWrapper = React.forwardRef< - HTMLDivElement, - React.ComponentProps & React.ComponentProps ->(function ContentWrapper({ width, height, children, ...contentProps }, ref) { - return ( - - - {children} - - - ); -}); diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx index ecf153295ee6..791698211dfe 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx @@ -1,11 +1,38 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { WelcomeModal } from './WelcomeModal'; const meta: Meta = { component: WelcomeModal, - decorators: [(storyFn) =>
{storyFn()}
], + // This decorator is used to show the modal in the side by side view + decorators: [ + (Story, context) => { + const [container, setContainer] = useState(undefined); + + if (context.globals.theme === 'side-by-side') { + return ( +
{ + if (element) { + setContainer(element); + } + }} + style={{ + width: '100%', + height: '100%', + minHeight: '600px', + transform: 'translateZ(0)', + }} + > + {Story({ args: { ...context.args, container } })} +
+ ); + } + + return Story(); + }, + ], }; export default meta; diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx index 503c97e102ef..8728edfa6045 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx @@ -1,5 +1,10 @@ import { ArrowRightIcon } from '@storybook/icons'; import { keyframes, styled } from '@storybook/theming'; +import { Modal } from '@storybook/components'; + +export const ModalWrapper = styled(Modal)` + background: white; +`; export const ModalContentWrapper = styled.div` border-radius: 5px; diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx index 9459529970e9..a8000fd6ea63 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx @@ -2,7 +2,6 @@ import type { FC } from 'react'; import React from 'react'; import { Button } from '../../components/Button/Button'; -import { Modal } from '../../components/Modal/Modal'; import { StorybookLogo } from './StorybookLogo'; import { ModalContentWrapper, @@ -15,42 +14,42 @@ import { Circle2, Circle3, TopContent, + ModalWrapper, } from './WelcomeModal.styled'; interface WelcomeModalProps { onProceed: () => void; skipOnboarding: () => void; + container?: HTMLElement; } -export const WelcomeModal: FC = ({ onProceed, skipOnboarding }) => { +export const WelcomeModal: FC = ({ onProceed, skipOnboarding, container }) => { return (
- - {({ Close }) => ( - - - - Welcome to Storybook - - Storybook helps you develop UI components faster. Learn the basics in a few simple - steps. - - - - - Skip tour - - - - - - - - - )} - + + + + + Welcome to Storybook + + Storybook helps you develop UI components faster. Learn the basics in a few simple + steps. + + + + + Skip tour + + + + + + + + +
); }; diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx index d2fe6ba470b4..6902466a8e15 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { waitFor, within, expect, fn } from '@storybook/test'; @@ -33,6 +33,7 @@ const meta: Meta = { }), }, }, + decorators: [ (storyFn, context) => { (context.args.api.getData as typeof getData) @@ -42,6 +43,31 @@ const meta: Meta = { .mockReturnValueOnce({ some: 'data' }); return
{storyFn()}
; }, + (Story, context) => { + const [container, setContainer] = useState(undefined); + + if (context.globals.theme === 'side-by-side') { + return ( +
{ + if (element) { + setContainer(element); + } + }} + style={{ + width: '100%', + height: '100%', + minHeight: '600px', + transform: 'translateZ(0)', + }} + > + {Story({ args: { ...context.args, container } })} +
+ ); + } + + return Story(); + }, ], }; diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx index b47dba7c7c39..eea2675c814d 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx @@ -1,4 +1,7 @@ import { keyframes, styled } from '@storybook/theming'; +import { Modal } from '@storybook/components'; + +export const ModalWrapper = styled(Modal)``; export const ModalContent = styled.div` display: flex; @@ -16,10 +19,13 @@ export const Main = styled.div` flex: 1; display: flex; flex-direction: column; + background: white; font-family: ${({ theme }) => theme.typography.fonts.base}; `; export const Header = styled.div` + position: relative; + z-index: 1; box-sizing: border-box; display: flex; justify-content: space-between; @@ -59,20 +65,20 @@ export const Content = styled.div` } `; -export const SpanHighlight = styled.span` - display: inline-flex; - border-radius: 3px; - padding: 0 5px; - margin-bottom: -2px; - opacity: 0.8; - font-family: ${({ theme }) => theme.typography.fonts.mono}; - font-size: 11px; - border: 1px solid #ecf4f9; - color: ${({ theme }) => theme.color.darkest}; - background-color: #f7fafc; - box-sizing: border-box; - line-height: 17px; -`; +export const SpanHighlight = styled.span(({ theme }) => ({ + display: 'inline-flex', + borderRadius: 3, + padding: '0 5px', + marginBottom: -2, + opacity: 0.8, + fontFamily: theme.typography.fonts.mono, + fontSize: 11, + border: theme.base === 'dark' ? theme.color.darkest : theme.color.lightest, + color: theme.base === 'dark' ? theme.color.lightest : theme.color.darkest, + backgroundColor: theme.base === 'dark' ? 'black' : theme.color.light, + boxSizing: 'border-box', + lineHeight: '17px', +})); export const Image = styled.img` max-width: 100%; @@ -85,8 +91,10 @@ export const Background = styled.div` left: 0; width: 100%; height: 100%; - z-index: -1; + z-index: 0; overflow: hidden; + z-index: 0; + pointer-events: none; `; export const circle1Anim = keyframes` diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx index b456b02240c9..38b44f00a037 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx @@ -1,6 +1,4 @@ import React, { useCallback, useState, type FC } from 'react'; -import { Button } from '../../components/Button/Button'; -import { Modal } from '../../components/Modal/Modal'; import useMeasure from 'react-use-measure'; import { Background, @@ -14,9 +12,11 @@ import { Main, ModalContent, ModalTitle, + ModalWrapper, SpanHighlight, Step2Text, } from './WriteStoriesModal.styled'; +import { Button } from '../../components/Button/Button'; import { SyntaxHighlighter } from '../../components/SyntaxHighlighter/SyntaxHighlighter'; import { List } from '../../components/List/List'; import { ListItem } from '../../components/List/ListItem/ListItem'; @@ -31,6 +31,7 @@ import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from '../../constants'; import { useTheme } from '@storybook/theming'; import type { CodeSnippets } from './code/types'; import { BookmarkHollowIcon, CrossIcon } from '@storybook/icons'; +import { Modal } from '@storybook/components'; // TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true. // backdropBoundary && !warningButtonStatus?.data @@ -41,6 +42,7 @@ interface WriteStoriesModalProps { addonsStore: AddonStore; codeSnippets: CodeSnippets; skipOnboarding: () => void; + container?: HTMLElement; } export const WriteStoriesModal: FC = ({ @@ -49,6 +51,7 @@ export const WriteStoriesModal: FC = ({ addonsStore, skipOnboarding, codeSnippets, + container, }) => { const [step, setStep] = useState<'imports' | 'meta' | 'story' | 'args' | 'customStory'>( 'imports' @@ -91,201 +94,200 @@ export const WriteStoriesModal: FC = ({ }, [api, step]); return ( - - {({ Title, Description, Close }) => ( - - {codeSnippets ? ( - - ) : null} - {step === 'customStory' && backdropBoundary && !warningButtonStatus?.data && ( - - )} -
-
- - <ModalTitle> - <BookmarkHollowIcon width={13} /> - <span>How to write a story</span> - </ModalTitle> - - - - -
- - - {step === 'imports' && ( - <> -
-

Imports

- {isJavascript ? ( -

Import a component. In this case, the Button component.

- ) : ( - <> -

- First, import Meta and{' '} - StoryObj for type safety and - autocompletion in TypeScript stories. -

-

Next, import a component. In this case, the Button component.

- - )} -
- + )} +
+ + + + + + +
+ + + + How to write a story + + + + + +
+ + + {step === 'imports' && ( + <> +
+

Imports

+ {isJavascript ? ( +

Import a component. In this case, the Button component.

+ ) : ( + <> +

+ First, import Meta and{' '} + StoryObj for type safety and autocompletion + in TypeScript stories. +

+

Next, import a component. In this case, the Button component.

+ + )} +
+ + + )} + {step === 'meta' && ( + <> +
+

Meta

+

+ The default export, Meta, contains metadata about this component's stories. + The title field (optional) controls where stories appear in the sidebar. +

+ Title property pointing to Storybook's sidebar +
+ + - - )} - {step === 'meta' && ( - <> -
-

Meta

-

- The default export, Meta, contains metadata about this component's stories. - The title field (optional) controls where stories appear in the sidebar. -

- Title property pointing to Storybook's sidebar -
- - - - - - )} - {step === 'story' && ( - <> -
-

Story

-

- Each named export is a story. Its contents specify how the story is rendered - in addition to other configuration options. -

- Story export pointing to the sidebar entry of the story -
- - - - - - )} - {step === 'args' && ( + + + + )} + {step === 'story' && ( + <> +
+

Story

+

+ Each named export is a story. Its contents specify how the story is rendered + in addition to other configuration options. +

+ Story export pointing to the sidebar entry of the story +
+ + + + + + )} + {step === 'args' && ( + <> +
+

Args

+

+ Args are inputs that are passed to the component, which Storybook uses to + render the component in different states. In React, args = props. They also + specify the initial control values for the story. +

+ Args mapped to their controls in Storybook +
+ + + + + + )} + {step === 'customStory' && + (!warningButtonStatus?.error ? ( <>
-

Args

+

Create your first story

- Args are inputs that are passed to the component, which Storybook uses to - render the component in different states. In React, args = props. They also - specify the initial control values for the story. + Now it's your turn. See how easy it is to create your first story by + following these steps below.

- Args mapped to their controls in Storybook + + + Copy the Warning story. + + + + Open the Button story in your current working directory. + + {buttonPath?.data && ( + // Replace '/' by '/' to properly break line + + {buttonPath.data.replaceAll('/', '/​').replaceAll('\\', '\\​')} + + )} + + + Paste it at the bottom of the file and save. + +
- - + {warningButtonStatus?.data ? ( + + ) : null} - )} - {step === 'customStory' && - (!warningButtonStatus?.error ? ( - <> -
-

Create your first story

-

- Now it's your turn. See how easy it is to create your first story by - following these steps below. -

- - - Copy the Warning story. - - - - Open the Button story in your current working directory. - - {buttonPath?.data && ( - // Replace '/' by '/' to properly break line - - {buttonPath.data.replaceAll('/', '/​').replaceAll('\\', '\\​')} - - )} - - - Paste it at the bottom of the file and save. - - -
- - - {warningButtonStatus?.data ? ( - - ) : null} - - - ) : null)} - - - - - - - -
- - )} - + ) : null)} + + +
+ + ); }; diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 1a40a4d6c6c8..556fdd23ba3f 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index e116bf93a52c..e8f8305f49ba 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 1203272b30db..8d26c0a0abd3 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 003fe05a7602..4d57446a548d 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index b1478832b2e7..99f1cf744114 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 432ee9cf3358..e0cee473adc3 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook manager builder", "keywords": [ "storybook" @@ -51,7 +51,7 @@ "@types/ejs": "^3.1.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", "browser-assert": "^1.2.1", - "ejs": "^3.1.8", + "ejs": "^3.1.10", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0", "esbuild-plugin-alias": "^0.2.1", "express": "^4.17.3", diff --git a/code/builders/builder-manager/src/utils/framework.ts b/code/builders/builder-manager/src/utils/framework.ts index 165b018ddf8f..bf3588290511 100644 --- a/code/builders/builder-manager/src/utils/framework.ts +++ b/code/builders/builder-manager/src/utils/framework.ts @@ -1,5 +1,6 @@ import path from 'path'; import type { Options } from '@storybook/types'; +import { extractProperRendererNameFromFramework, getFrameworkName } from '@storybook/core-common'; interface PropertyObject { name: string; @@ -28,12 +29,14 @@ export const pluckThirdPartyPackageFromPath = (packagePath: string) => export const buildFrameworkGlobalsFromOptions = async (options: Options) => { const globals: Record = {}; - const { renderer, builder } = await options.presets.apply('core'); + const { builder } = await options.presets.apply('core'); + + const frameworkName = await getFrameworkName(options); + const rendererName = await extractProperRendererNameFromFramework(frameworkName); - const rendererName = pluckNameFromConfigProperty(renderer); if (rendererName) { globals.STORYBOOK_RENDERER = - pluckStorybookPackageFromPath(rendererName) ?? pluckThirdPartyPackageFromPath(rendererName); + (await extractProperRendererNameFromFramework(frameworkName)) ?? undefined; } const builderName = pluckNameFromConfigProperty(builder); diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6422f5c72791..d092a6f84483 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-vite/src/assetsInclude.ts b/code/builders/builder-vite/src/assetsInclude.ts new file mode 100644 index 000000000000..b71388ea2d17 --- /dev/null +++ b/code/builders/builder-vite/src/assetsInclude.ts @@ -0,0 +1,15 @@ +import type { InlineConfig as ViteInlineConfig } from 'vite'; + +export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] { + const { assetsInclude } = config; + + if (!assetsInclude) { + return newPath; + } + + if (Array.isArray(assetsInclude)) { + return [...assetsInclude, ...newPath]; + } else { + return [assetsInclude, ...newPath]; + } +} diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 4a1c2fb3ee44..95d68543a22e 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -65,6 +65,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { + conditions: ['storybook', 'stories', 'test'], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 0b1e80435027..cfd3c4051a3e 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -3,6 +3,7 @@ import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { getOptimizeDeps } from './optimizeDeps'; import { sanitizeEnvVars } from './envs'; +import { getAssetsInclude } from './assetsInclude'; export async function createViteServer(options: Options, devServer: Server) { const { presets } = options; @@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) { const config = { ...commonCfg, // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256 - assetsInclude: ['/sb-preview/**'], + assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']), // Set up dev server server: { middlewareMode: true, diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 4e0d3caf9cfc..b4ffe65963d7 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -96,13 +96,12 @@ "webpack": "5", "webpack-dev-middleware": "^6.1.2", "webpack-hot-middleware": "^2.25.1", - "webpack-virtual-modules": "^0.5.0" + "webpack-virtual-modules": "^0.6.0" }, "devDependencies": { "@types/pretty-hrtime": "^1.0.0", "@types/terser-webpack-plugin": "^5.2.0", "@types/webpack-hot-middleware": "^2.25.6", - "@types/webpack-virtual-modules": "^0.1.1", "pretty-hrtime": "^1.0.3", "slash": "^5.0.0", "typescript": "^5.3.2" diff --git a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts index 8a2d60743661..38961e89085d 100644 --- a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts @@ -85,6 +85,14 @@ export async function createDefaultWebpackConfig( }, resolve: { ...storybookBaseConfig.resolve, + // see https://github.com/webpack/webpack/issues/17692#issuecomment-1866272674 for the docs + conditionNames: [ + ...(storybookBaseConfig.resolve?.conditionNames ?? []), + 'storybook', + 'stories', + 'test', + '...', + ], fallback: { crypto: false, assert: false, diff --git a/code/chromatic.config.json b/code/chromatic.config.json index 77130b818b6d..a2ed8ccde24c 100644 --- a/code/chromatic.config.json +++ b/code/chromatic.config.json @@ -2,7 +2,7 @@ "projectId": "Project:635781f3500dd2c49e189caf", "projectToken": "80b312430ec4", "buildScriptName": "storybook:ui:build", - "onlyChanged": true, + "onlyChanged": false, "storybookConfigDir": "ui/.storybook", "storybookBaseDir": "./code", "zip": true diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index db7b7b7d5e05..b5a50a302281 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -67,7 +67,7 @@ test.describe('addon-docs', () => { await new Promise(resolve => resolve('Play function')); } }`; - await expect(sourceCode.textContent()).resolves.toContain(expectedSource); + await expect(sourceCode).toHaveText(expectedSource); }); test('should render errors', async ({ page }) => { @@ -200,6 +200,12 @@ test.describe('addon-docs', () => { expectedReactVersionRange = /^17/; } else if (templateName.includes('react16')) { expectedReactVersionRange = /^16/; + } else if ( + templateName.includes('nextjs/prerelease') || + templateName.includes('react-vite/prerelease') || + templateName.includes('react-webpack/prerelease') + ) { + expectedReactVersionRange = /^19/; } // Arrange - Get the actual versions diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 61233dd5ac25..0b98e5428853 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -10,7 +10,7 @@ test.describe('Next.js', () => { // TODO: improve these E2E tests given that we have more version of Next.js to test // and this only tests nextjs/default-js test.skip( - !templateName?.includes('nextjs/default-js'), + !templateName?.includes('nextjs/default-ts'), 'Only run this test for the Frameworks that support next/navigation' ); @@ -56,7 +56,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextNavigation.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); @@ -66,7 +66,7 @@ test.describe('Next.js', () => { sbPage = new SbPage(page); await sbPage.navigateToStory( - 'stories/frameworks/nextjs-nextjs-default-js/Navigation', + 'stories/frameworks/nextjs-nextjs-default-ts/Navigation', 'default' ); root = sbPage.previewRoot(); @@ -91,7 +91,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextRouter.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); @@ -100,7 +100,7 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page); - await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-js/Router', 'default'); + await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default'); root = sbPage.previewRoot(); }); diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 7d2efe7db6f3..ba42745c6172 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -41,7 +41,7 @@ test.describe('Svelte', () => { await showCodeButton.click(); const sourceCode = root.locator('pre.prismjs'); const expectedSource = ''; - await expect(sourceCode.textContent()).resolves.toContain(expectedSource); + await expect(sourceCode).toHaveText(expectedSource); }); test('Decorators runs only once', async ({ page }) => { diff --git a/code/e2e-tests/module-mocking.spec.ts b/code/e2e-tests/module-mocking.spec.ts new file mode 100644 index 000000000000..8b6b43713b61 --- /dev/null +++ b/code/e2e-tests/module-mocking.spec.ts @@ -0,0 +1,49 @@ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; + +test.describe('module-mocking', () => { + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + + await new SbPage(page).waitUntilLoaded(); + }); + + test('should assert story lifecycle order', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('lib/test/before-each', 'before-each-order'); + + await sbPage.viewAddonPanel('Actions'); + const logItem = await page.locator('#storybook-panel-root #panel-tab-content'); + await expect(logItem).toBeVisible(); + + const expectedTexts = [ + '1 - [from loaders]', + '2 - [from meta beforeEach]', + '3 - [from story beforeEach]', + '4 - [from decorator]', + '5 - [from onClick]', + ]; + + // Assert that each LI text content contains the expected text in order + for (let i = 0; i < expectedTexts.length; i++) { + const nthText = await logItem.locator(`li >> nth=${i}`).innerText(); + expect(nthText).toMatch(expectedTexts[i]); + } + }); + + test('should assert that utils import is mocked', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('lib/test/module-mocking', 'basic'); + + await sbPage.viewAddonPanel('Actions'); + const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { + hasText: 'foo: []', + }); + await expect(logItem).toBeVisible(); + }); +}); diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-api.spec.ts similarity index 57% rename from code/e2e-tests/preview-web.spec.ts rename to code/e2e-tests/preview-api.spec.ts index b4a96c4b6001..662a638bc84c 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-api.spec.ts @@ -5,7 +5,9 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; -test.describe('preview-web', () => { +const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +test.describe('preview-api', () => { test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); @@ -50,4 +52,40 @@ test.describe('preview-web', () => { await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); + + // if rerenders were interleaved the button would have rendered "Error: Interleaved loaders. Changed arg" + test('should only render once at a time when rapidly changing args', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + const labelControl = await sbPage.page.locator('#control-label'); + + await expect(root.getByText('Loaded. Click me')).toBeVisible(); + await expect(labelControl).toBeVisible(); + + await labelControl.fill(''); + await labelControl.type('Changed arg', { delay: 50 }); + await labelControl.blur(); + + await expect(root.getByText('Loaded. Changed arg')).toBeVisible(); + }); + + test('should reload plage when remounting while loading', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + await expect(root.getByText('Loaded. Click me')).toBeVisible(); + + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + await wait(200); + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + + // the loading spinner indicates the iframe is being fully reloaded + await expect(sbPage.previewIframe().locator('.sb-preparing-story > .sb-loader')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); + }); }); diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts new file mode 100644 index 000000000000..b70a1607595c --- /dev/null +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -0,0 +1,71 @@ +import { test } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; +const type = process.env.STORYBOOK_TYPE || 'dev'; + +test.describe('save-from-controls', () => { + test.describe.configure({ mode: 'serial' }); + test.skip(type === 'build', `Skipping save-from-controls tests for production Storybooks`); + + test('Should be able to update a story', async ({ page, browserName }) => { + // this is needed because the e2e test will generate a new file in the system + // which we don't know of its location (it runs in different sandboxes) + // so we just create a random id to make it easier to run tests + const id = Math.random().toString(36).substring(7); + + test.skip(browserName !== 'chromium', `Skipping save-from-controls tests for ${browserName}`); + + await page.goto(storybookUrl); + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + + await sbPage.navigateToStory('example/button', 'primary'); + await sbPage.viewAddonPanel('Controls'); + + // Update an arg + const label = sbPage.panelContent().locator('textarea[name=label]'); + const value = await label.inputValue(); + await label.fill(value + ' Updated ' + id); + await label.blur(); + + // Assert the footer is shown + await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); + + // update the story + await sbPage.panelContent().locator('button').getByText('Update story').click({ force: true }); + + // Assert the file is saved + const notification1 = await sbPage.page.waitForSelector('[title="Story saved"]'); + await notification1.isVisible(); + + // dismiss + await notification1.click(); + await notification1.isHidden(); + + // Update an arg + await label.fill(value + ' Copied'); + await label.blur(); + + // Assert the footer is shown + await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); + + const buttons = await sbPage + .panelContent() + .locator('[aria-label="Create new story with these settings"]'); + + // clone the story + await buttons.click({ force: true }); + + const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); + await input.fill('ClonedStory' + id); + const submit = await sbPage.page.waitForSelector('[type="submit"]'); + await submit.click(); + + // Assert the file is saved + const notification2 = await sbPage.page.waitForSelector('[title="Story created"]'); + await notification2.isVisible(); + await notification2.click(); + }); +}); diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts index 8302a9a6a338..da3637deb7e9 100644 --- a/code/e2e-tests/tags.spec.ts +++ b/code/e2e-tests/tags.spec.ts @@ -9,56 +9,96 @@ test.describe('tags', () => { await new SbPage(page).waitUntilLoaded(); }); - test('@flaky: should correctly filter dev-only, docs-only, test-only stories', async ({ - page, - }) => { + test('should correctly filter dev-only, docs-only, test-only stories', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('lib/preview-api/tags', 'docs'); + await sbPage.navigateToStory('lib/preview-api/tags-config', 'docs'); // Sidebar should include dev-only and exclude docs-only and test-only - const devOnlyEntry = await page.locator('#lib-preview-api-tags--dev-only').all(); + const devOnlyEntry = await page.locator('#lib-preview-api-tags-config--dev-only').all(); expect(devOnlyEntry.length).toBe(1); - const docsOnlyEntry = await page.locator('#lib-preview-api-tags--docs-only').all(); + const docsOnlyEntry = await page.locator('#lib-preview-api-tags-config--docs-only').all(); expect(docsOnlyEntry.length).toBe(0); - const testOnlyEntry = await page.locator('#lib-preview-api-tags--test-only').all(); + const testOnlyEntry = await page.locator('#lib-preview-api-tags-config--test-only').all(); expect(testOnlyEntry.length).toBe(0); // Autodocs should include docs-only and exclude dev-only and test-only const root = sbPage.previewRoot(); - const devOnlyAnchor = await root.locator('#anchor--lib-preview-api-tags--dev-only').all(); + const devOnlyAnchor = await root + .locator('#anchor--lib-preview-api-tags-config--dev-only') + .all(); expect(devOnlyAnchor.length).toBe(0); - const docsOnlyAnchor = await root.locator('#anchor--lib-preview-api-tags--docs-only').all(); + const docsOnlyAnchor = await root + .locator('#anchor--lib-preview-api-tags-config--docs-only') + .all(); expect(docsOnlyAnchor.length).toBe(1); - const testOnlyAnchor = await root.locator('#anchor--lib-preview-api-tags--test-only').all(); + const testOnlyAnchor = await root + .locator('#anchor--lib-preview-api-tags-config--test-only') + .all(); expect(testOnlyAnchor.length).toBe(0); }); - test('should correctly filter out test-only autodocs pages', async ({ page }) => { + test('should correctly add dev, autodocs, test stories', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.selectToolbar('#lib-preview-api'); + await sbPage.navigateToStory('lib/preview-api/tags-add', 'docs'); - // Sidebar should exclude test-only stories and their docs - const componentEntry = await page.locator('#lib-preview-api-test-only-tag').all(); - expect(componentEntry.length).toBe(0); + // Sidebar should include dev and exclude inheritance, autodocs, test + const devEntry = await page.locator('#lib-preview-api-tags-add--dev').all(); + expect(devEntry.length).toBe(1); - // Even though test-only autodocs not sidebar, it is still in the preview - // Even though the test-only story is filtered out of the stories, it is still the primary story (should it be?) - await sbPage.deepLinkToStory(storybookUrl, 'lib/preview-api/test-only-tag', 'docs'); - await sbPage.waitUntilLoaded(); - const docsButton = await sbPage.previewRoot().locator('button', { hasText: 'Button' }); - await expect(docsButton).toBeVisible(); + const autodocsEntry = await page.locator('#lib-preview-api-tags-add--autodocs').all(); + expect(autodocsEntry.length).toBe(0); - // Even though test-only story not sidebar, it is still in the preview - await sbPage.deepLinkToStory(storybookUrl, 'lib/preview-api/test-only-tag', 'default'); - await sbPage.waitUntilLoaded(); - const storyButton = await sbPage.previewRoot().locator('button', { hasText: 'Button' }); - await expect(storyButton).toBeVisible(); + const testOnlyEntry = await page.locator('#lib-preview-api-tags-add--test').all(); + expect(testOnlyEntry.length).toBe(0); + + // Autodocs should include autodocs and exclude dev, test + const root = sbPage.previewRoot(); + + const devAnchor = await root.locator('#anchor--lib-preview-api-tags-add--dev').all(); + expect(devAnchor.length).toBe(0); + + // FIXME: shows as primary story and also in stories, inconsistent btw dev/CI? + const autodocsAnchor = await root.locator('#anchor--lib-preview-api-tags-add--autodocs').all(); + expect(autodocsAnchor.length).not.toBe(0); + + const testAnchor = await root.locator('#anchor--lib-preview-api-tags-add--test').all(); + expect(testAnchor.length).toBe(0); + }); + + test('should correctly remove dev, autodocs, test stories', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('lib/preview-api/tags-remove', 'docs'); + + // Sidebar should include inheritance, no-autodocs, no-test. and exclude no-dev + const noDevEntry = await page.locator('#lib-preview-api-tags-remove--no-dev').all(); + expect(noDevEntry.length).toBe(0); + + const noAutodocsEntry = await page.locator('#lib-preview-api-tags-remove--no-autodocs').all(); + expect(noAutodocsEntry.length).toBe(1); + + const noTestEntry = await page.locator('#lib-preview-api-tags-remove--no-test').all(); + expect(noTestEntry.length).toBe(1); + + // Autodocs should include inheritance, no-dev, no-test. and exclude no-autodocs + const root = sbPage.previewRoot(); + + const noDevAnchor = await root.locator('#anchor--lib-preview-api-tags-remove--no-dev').all(); + expect(noDevAnchor.length).toBe(1); + + const noAutodocsAnchor = await root + .locator('#anchor--lib-preview-api-tags-remove--no-autodocs') + .all(); + expect(noAutodocsAnchor.length).toBe(0); + + const noTestAnchor = await root.locator('#anchor--lib-preview-api-tags-remove--no-test').all(); + expect(noTestAnchor.length).toBe(1); }); }); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 6e6317037950..0cb259d43366 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/angular/src/types.ts b/code/frameworks/angular/src/types.ts index 926213e222b6..a965368eaf94 100644 --- a/code/frameworks/angular/src/types.ts +++ b/code/frameworks/angular/src/types.ts @@ -7,9 +7,10 @@ import { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/angular'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/angular'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = AngularOptions & { builder?: BuilderOptions; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index d1f6b92bfa41..f0eb0a5df382 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/ember/src/types.ts b/code/frameworks/ember/src/types.ts index 2c2605f286af..6106e1391199 100644 --- a/code/frameworks/ember/src/types.ts +++ b/code/frameworks/ember/src/types.ts @@ -7,9 +7,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/ember-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 6fd46099d127..5bcb0d821e7d 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,6 +51,7 @@ "@storybook/core-server": "workspace:*", "@storybook/html": "workspace:*", "@storybook/node-logger": "workspace:*", + "@storybook/types": "workspace:*", "magic-string": "^0.30.0" }, "devDependencies": { diff --git a/code/frameworks/html-vite/src/types.ts b/code/frameworks/html-vite/src/types.ts index db508a143b53..d25f61997d14 100644 --- a/code/frameworks/html-vite/src/types.ts +++ b/code/frameworks/html-vite/src/types.ts @@ -1,8 +1,8 @@ -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfig as StorybookConfigBase, CompatibleString } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; -type FrameworkName = '@storybook/html-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/html-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 6582c99aac3a..faaf20b91aa1 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -52,6 +52,7 @@ "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/preset-html-webpack": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0" }, "devDependencies": { diff --git a/code/frameworks/html-webpack5/src/types.ts b/code/frameworks/html-webpack5/src/types.ts index 2360ef4ac9e6..eb0fa25b9ebd 100644 --- a/code/frameworks/html-webpack5/src/types.ts +++ b/code/frameworks/html-webpack5/src/types.ts @@ -7,9 +7,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/html-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/html-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/nextjs/.eslintrc.json b/code/frameworks/nextjs/.eslintrc.json index 7b43755b37ac..d76f64f6803d 100644 --- a/code/frameworks/nextjs/.eslintrc.json +++ b/code/frameworks/nextjs/.eslintrc.json @@ -12,6 +12,12 @@ "react/no-unknown-property": "off", "jsx-a11y/anchor-is-valid": "off" } + }, + { + "files": ["**/*.compat.@(tsx|ts)"], + "rules": { + "local-rules/no-uncategorized-errors": "off" + } } ] } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 65aebaa66c60..ebae1de05623 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -47,6 +47,41 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, + "./dist/compatibility/segment.compat": { + "types": "./dist/compatibility/segment.compat.d.ts", + "require": "./dist/compatibility/segment.compat.js", + "import": "./dist/compatibility/segment.compat.mjs" + }, + "./dist/compatibility/redirect-status-code.compat": { + "types": "./dist/compatibility/redirect-status-code.compat.d.ts", + "require": "./dist/compatibility/redirect-status-code.compat.js", + "import": "./dist/compatibility/redirect-status-code.compat.mjs" + }, + "./export-mocks": { + "types": "./dist/export-mocks/index.d.ts", + "require": "./dist/export-mocks/index.js", + "import": "./dist/export-mocks/index.mjs" + }, + "./cache.mock": { + "types": "./dist/export-mocks/cache/index.d.ts", + "require": "./dist/export-mocks/cache/index.js", + "import": "./dist/export-mocks/cache/index.mjs" + }, + "./headers.mock": { + "types": "./dist/export-mocks/headers/index.d.ts", + "require": "./dist/export-mocks/headers/index.js", + "import": "./dist/export-mocks/headers/index.mjs" + }, + "./navigation.mock": { + "types": "./dist/export-mocks/navigation/index.d.ts", + "require": "./dist/export-mocks/navigation/index.js", + "import": "./dist/export-mocks/navigation/index.mjs" + }, + "./router.mock": { + "types": "./dist/export-mocks/router/index.d.ts", + "require": "./dist/export-mocks/router/index.js", + "import": "./dist/export-mocks/router/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", @@ -59,6 +94,21 @@ ], "dist/image-context": [ "dist/image-context.d.ts" + ], + "export-mocks": [ + "dist/export-mocks/index.d.ts" + ], + "cache.mock": [ + "dist/export-mocks/cache/index.d.ts" + ], + "headers.mock": [ + "dist/export-mocks/headers/index.d.ts" + ], + "router.mock": [ + "dist/export-mocks/router/index.d.ts" + ], + "navigation.mock": [ + "dist/export-mocks/navigation/index.d.ts" ] } }, @@ -75,21 +125,20 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", + "@babel/core": "^7.24.4", "@babel/plugin-syntax-bigint": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-assertions": "^7.22.5", - "@babel/plugin-transform-class-properties": "^7.22.5", - "@babel/plugin-transform-export-namespace-from": "^7.22.11", - "@babel/plugin-transform-numeric-separator": "^7.22.11", - "@babel/plugin-transform-object-rest-spread": "^7.22.15", - "@babel/plugin-transform-runtime": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", - "@babel/runtime": "^7.23.2", + "@babel/plugin-syntax-import-assertions": "^7.24.1", + "@babel/plugin-transform-class-properties": "^7.24.1", + "@babel/plugin-transform-export-namespace-from": "^7.24.1", + "@babel/plugin-transform-numeric-separator": "^7.24.1", + "@babel/plugin-transform-object-rest-spread": "^7.24.1", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@babel/runtime": "^7.24.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", - "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", @@ -97,6 +146,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", @@ -121,7 +171,7 @@ "tsconfig-paths-webpack-plugin": "^4.0.1" }, "devDependencies": { - "@babel/types": "^7.23.0", + "@babel/types": "^7.24.0", "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", @@ -133,8 +183,8 @@ }, "peerDependencies": { "next": "^13.5.0 || ^14.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "webpack": "^5.0.0" }, "peerDependenciesMeta": { @@ -160,6 +210,13 @@ "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", + "./src/export-mocks/index.ts", + "./src/export-mocks/cache/index.ts", + "./src/export-mocks/headers/index.ts", + "./src/export-mocks/router/index.ts", + "./src/export-mocks/navigation/index.ts", + "./src/compatibility/segment.compat.ts", + "./src/compatibility/redirect-status-code.compat.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts new file mode 100644 index 000000000000..f423ee1db0fc --- /dev/null +++ b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts @@ -0,0 +1,36 @@ +import type { Configuration as WebpackConfig } from 'webpack'; +import semver from 'semver'; +import { getNextjsVersion, addScopedAlias } from '../utils'; + +const mapping: Record> = { + '<14.1.0': { + // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts + 'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat', + }, + '<14.0.4': { + // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts + 'next/dist/client/components/redirect-status-code': + '@storybook/nextjs/dist/compatibility/redirect-status-code.compat', + }, +}; + +export const getCompatibilityAliases = () => { + const version = getNextjsVersion(); + const result: Record = {}; + + Object.keys(mapping).forEach((key) => { + if (semver.intersects(version, key)) { + Object.assign(result, mapping[key]); + } + }); + + return result; +}; + +export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void => { + const aliases = getCompatibilityAliases(); + + Object.entries(aliases).forEach(([name, alias]) => { + addScopedAlias(baseConfig, name, alias); + }); +}; diff --git a/code/frameworks/nextjs/src/compatibility/redirect-status-code.compat.ts b/code/frameworks/nextjs/src/compatibility/redirect-status-code.compat.ts new file mode 100644 index 000000000000..cf2adb9e284c --- /dev/null +++ b/code/frameworks/nextjs/src/compatibility/redirect-status-code.compat.ts @@ -0,0 +1,6 @@ +// Compatibility for Next 13 +export enum RedirectStatusCode { + SeeOther = 303, + TemporaryRedirect = 307, + PermanentRedirect = 308, +} diff --git a/code/frameworks/nextjs/src/compatibility/segment.compat.ts b/code/frameworks/nextjs/src/compatibility/segment.compat.ts new file mode 100644 index 000000000000..98c195030f5c --- /dev/null +++ b/code/frameworks/nextjs/src/compatibility/segment.compat.ts @@ -0,0 +1,8 @@ +// Compatibility for Next 13 +// from https://github.com/vercel/next.js/blob/606f9ff7903b58da51aa043bfe71cd7b6ea306fd/packages/next/src/shared/lib/segment.ts#L4 +export function isGroupSegment(segment: string) { + return segment[0] === '(' && segment.endsWith(')'); +} + +export const PAGE_SEGMENT_KEY = '__PAGE__'; +export const DEFAULT_SEGMENT_KEY = '__DEFAULT__'; diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts new file mode 100644 index 000000000000..b9f2fa8dd431 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -0,0 +1,17 @@ +import { fn } from '@storybook/test'; +import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache'; +import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'; + +// mock utilities/overrides (as of Next v14.2.0) +const revalidatePath = fn().mockName('next/cache::revalidatePath'); +const revalidateTag = fn().mockName('next/cache::revalidateTag'); + +const cacheExports = { + unstable_cache, + revalidateTag, + revalidatePath, + unstable_noStore, +}; + +export default cacheExports; +export { unstable_cache, revalidateTag, revalidatePath, unstable_noStore }; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts new file mode 100644 index 000000000000..3d84ecba3885 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -0,0 +1,38 @@ +import { fn } from '@storybook/test'; +import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { headers } from '@storybook/nextjs/headers.mock'; + +class RequestCookiesMock extends RequestCookies { + get = fn(super.get.bind(this)).mockName('next/headers::cookies().get'); + + getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll'); + + has = fn(super.has.bind(this)).mockName('next/headers::cookies().has'); + + set = fn(super.set.bind(this)).mockName('next/headers::cookies().set'); + + delete = fn(super.delete.bind(this)).mockName('next/headers::cookies().delete'); +} + +let requestCookiesMock: RequestCookiesMock; + +export const cookies = fn(() => { + if (!requestCookiesMock) { + requestCookiesMock = new RequestCookiesMock(headers()); + } + return requestCookiesMock; +}).mockName('next/headers::cookies()'); + +const originalRestore = cookies.mockRestore.bind(null); + +// will be called automatically by the test loader +cookies.mockRestore = () => { + originalRestore(); + headers.mockRestore(); + requestCookiesMock = new RequestCookiesMock(headers()); +}; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts new file mode 100644 index 000000000000..d9eb5177b447 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -0,0 +1,39 @@ +import { fn } from '@storybook/test'; + +import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; + +class HeadersAdapterMock extends HeadersAdapter { + constructor() { + super({}); + } + + append = fn(super.append.bind(this)).mockName('next/headers::headers().append'); + + delete = fn(super.delete.bind(this)).mockName('next/headers::headers().delete'); + + get = fn(super.get.bind(this)).mockName('next/headers::headers().get'); + + has = fn(super.has.bind(this)).mockName('next/headers::headers().has'); + + set = fn(super.set.bind(this)).mockName('next/headers::headers().set'); + + forEach = fn(super.forEach.bind(this)).mockName('next/headers::headers().forEach'); + + entries = fn(super.entries.bind(this)).mockName('next/headers::headers().entries'); + + keys = fn(super.keys.bind(this)).mockName('next/headers::headers().keys'); + + values = fn(super.values.bind(this)).mockName('next/headers::headers().values'); +} + +let headersAdapterMock: HeadersAdapterMock; + +export const headers = () => { + if (!headersAdapterMock) headersAdapterMock = new HeadersAdapterMock(); + return headersAdapterMock; +}; + +// This fn is called by ./cookies to restore the headers in the right order +headers.mockRestore = () => { + headersAdapterMock = new HeadersAdapterMock(); +}; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts new file mode 100644 index 000000000000..1ec2cbd2915f --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -0,0 +1,13 @@ +import { fn } from '@storybook/test'; +import * as originalHeaders from 'next/dist/client/components/headers'; + +// re-exports of the actual module +export * from 'next/dist/client/components/headers'; + +// mock utilities/overrides (as of Next v14.2.0) +export { headers } from './headers'; +export { cookies } from './cookies'; + +// passthrough mocks - keep original implementation but allow for spying +const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); +export { draftMode }; diff --git a/code/frameworks/nextjs/src/export-mocks/index.ts b/code/frameworks/nextjs/src/export-mocks/index.ts new file mode 100644 index 000000000000..111ad162ec3f --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/index.ts @@ -0,0 +1 @@ +export { getPackageAliases } from './webpack'; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts new file mode 100644 index 000000000000..f55ee86c36ca --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -0,0 +1,94 @@ +import type { Mock } from '@storybook/test'; +import { fn } from '@storybook/test'; +import * as actual from 'next/dist/client/components/navigation'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; +import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code'; +import { getRedirectError } from 'next/dist/client/components/redirect'; + +let navigationAPI: { + push: Mock; + replace: Mock; + forward: Mock; + back: Mock; + prefetch: Mock; + refresh: Mock; +}; + +/** + * Creates a next/navigation router API mock. Used internally. + * @ignore + * @internal + * */ +export const createNavigation = (overrides: any) => { + const navigationActions = { + push: fn().mockName('next/navigation::useRouter().push'), + replace: fn().mockName('next/navigation::useRouter().replace'), + forward: fn().mockName('next/navigation::useRouter().forward'), + back: fn().mockName('next/navigation::useRouter().back'), + prefetch: fn().mockName('next/navigation::useRouter().prefetch'), + refresh: fn().mockName('next/navigation::useRouter().refresh'), + }; + + if (overrides) { + Object.keys(navigationActions).forEach((key) => { + if (key in overrides) { + (navigationActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`useRouter().${key}`); + } + }); + } + + navigationAPI = navigationActions; + + return navigationAPI; +}; + +export const getRouter = () => { + if (!navigationAPI) { + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/navigation', + }); + } + + return navigationAPI; +}; + +// re-exports of the actual module +export * from 'next/dist/client/components/navigation'; + +// mock utilities/overrides (as of Next v14.2.0) +export const redirect = fn( + (url: string, type: actual.RedirectType = actual.RedirectType.push): never => { + throw getRedirectError(url, type, RedirectStatusCode.SeeOther); + } +).mockName('next/navigation::redirect'); + +export const permanentRedirect = fn( + (url: string, type: actual.RedirectType = actual.RedirectType.push): never => { + throw getRedirectError(url, type, RedirectStatusCode.SeeOther); + } +).mockName('next/navigation::permanentRedirect'); + +// passthrough mocks - keep original implementation but allow for spying +export const useSearchParams = fn(actual.useSearchParams).mockName( + 'next/navigation::useSearchParams' +); +export const usePathname = fn(actual.usePathname).mockName('next/navigation::usePathname'); +export const useSelectedLayoutSegment = fn(actual.useSelectedLayoutSegment).mockName( + 'next/navigation::useSelectedLayoutSegment' +); +export const useSelectedLayoutSegments = fn(actual.useSelectedLayoutSegments).mockName( + 'next/navigation::useSelectedLayoutSegments' +); +export const useRouter = fn(actual.useRouter).mockName('next/navigation::useRouter'); +export const useServerInsertedHTML = fn(actual.useServerInsertedHTML).mockName( + 'next/navigation::useServerInsertedHTML' +); +export const notFound = fn(actual.notFound).mockName('next/navigation::notFound'); + +// Params, not exported by Next.js, is manually declared to avoid inference issues. +interface Params { + [key: string]: string | string[]; +} +export const useParams = fn<[], Params>(actual.useParams).mockName('next/navigation::useParams'); diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts new file mode 100644 index 000000000000..b3c5e37faa43 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -0,0 +1,115 @@ +import type { Mock } from '@storybook/test'; +import { fn } from '@storybook/test'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; +import type { NextRouter, SingletonRouter } from 'next/router'; +import singletonRouter, * as originalRouter from 'next/dist/client/router'; + +const defaultRouterState = { + route: '/', + asPath: '/', + basePath: '/', + pathname: '/', + query: {}, + isFallback: false, + isLocaleDomain: false, + isReady: true, + isPreview: false, +}; + +let routerAPI: { + push: Mock; + replace: Mock; + reload: Mock; + back: Mock; + forward: Mock; + prefetch: Mock; + beforePopState: Mock; + events: { + on: Mock; + off: Mock; + emit: Mock; + }; +} & typeof defaultRouterState; + +/** + * Creates a next/router router API mock. Used internally. + * @ignore + * @internal + * */ +export const createRouter = (overrides: Partial) => { + const routerActions: Partial = { + push: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('next/router::useRouter().push'), + replace: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('next/router::useRouter().replace'), + reload: fn((..._args: any[]) => {}).mockName('next/router::useRouter().reload'), + back: fn((..._args: any[]) => {}).mockName('next/router::useRouter().back'), + forward: fn(() => {}).mockName('next/router::useRouter().forward'), + prefetch: fn((..._args: any[]) => { + return Promise.resolve(); + }).mockName('next/router::useRouter().prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('next/router::useRouter().beforePopState'), + }; + + const routerEvents: NextRouter['events'] = { + on: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.on'), + off: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.off'), + emit: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.emit'), + }; + + if (overrides) { + Object.keys(routerActions).forEach((key) => { + if (key in overrides) { + (routerActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`useRouter().${key}`); + } + }); + } + + if (overrides?.events) { + Object.keys(routerEvents).forEach((key) => { + if (key in routerEvents) { + (routerEvents as any)[key] = fn((...args: any[]) => { + return (overrides.events as any)[key](...args); + }).mockName(`useRouter().events.${key}`); + } + }); + } + + routerAPI = { + ...defaultRouterState, + ...overrides, + ...routerActions, + // @ts-expect-error TODO improve typings + events: routerEvents, + }; + + // overwrite the singleton router from next/router + (singletonRouter as unknown as SingletonRouter).router = routerAPI as any; + (singletonRouter as unknown as SingletonRouter).readyCallbacks.forEach((cb) => cb()); + (singletonRouter as unknown as SingletonRouter).readyCallbacks = []; + + return routerAPI as unknown as NextRouter; +}; + +export const getRouter = () => { + if (!routerAPI) { + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/router', + }); + } + + return routerAPI; +}; + +// re-exports of the actual module +export * from 'next/dist/client/router'; +export default singletonRouter; + +// mock utilities/overrides (as of Next v14.2.0) +// passthrough mocks - keep original implementation but allow for spying +export const useRouter = fn(originalRouter.useRouter).mockName('next/router::useRouter'); +export const withRouter = fn(originalRouter.withRouter).mockName('next/router::withRouter'); diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts new file mode 100644 index 000000000000..8f43c41a9e53 --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -0,0 +1,45 @@ +import { dirname, join } from 'path'; +import type { Configuration as WebpackConfig } from 'webpack'; +import { getCompatibilityAliases } from '../compatibility/compatibility-map'; + +const mapping = { + 'next/headers': '/dist/export-mocks/headers/index', + '@storybook/nextjs/headers.mock': '/dist/export-mocks/headers/index', + 'next/navigation': '/dist/export-mocks/navigation/index', + '@storybook/nextjs/navigation.mock': '/dist/export-mocks/navigation/index', + 'next/router': '/dist/export-mocks/router/index', + '@storybook/nextjs/router.mock': '/dist/export-mocks/router/index', + 'next/cache': '/dist/export-mocks/cache/index', + '@storybook/nextjs/cache.mock': '/dist/export-mocks/cache/index', + ...getCompatibilityAliases(), +}; + +// Utility that assists in adding aliases to the Webpack configuration +// and also doubles as alias solution for portable stories in Jest/Vitest/etc. +export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) => { + const extension = useESM ? 'mjs' : 'js'; + const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); + + const getFullPath = (path: string) => + join(packageLocation, path.replace('@storybook/nextjs', '')); + + const aliases = Object.fromEntries( + Object.entries(mapping).map(([originalPath, aliasedPath]) => [ + originalPath, + // Use paths for both next/xyz and @storybook/nextjs/xyz imports + // to make sure they all serve the MJS/CJS version of the file + getFullPath(`${aliasedPath}.${extension}`), + ]) + ); + + return aliases; +}; + +export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + + resolve.alias = { + ...resolve.alias, + ...getPackageAliases({ useESM: true }), + }; +}; diff --git a/code/frameworks/nextjs/src/fastRefresh/webpack.ts b/code/frameworks/nextjs/src/fastRefresh/webpack.ts index 83e91518383d..f9bb9d6c51e7 100644 --- a/code/frameworks/nextjs/src/fastRefresh/webpack.ts +++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts @@ -4,10 +4,9 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; export const configureFastRefresh = (baseConfig: WebpackConfig): void => { baseConfig.plugins = [ ...(baseConfig.plugins ?? []), - new ReactRefreshWebpackPlugin({ - overlay: { - sockIntegration: 'whm', - }, - }), + // overlay is disabled as it is shown with caught errors in error boundaries + // and the next app router is using error boundaries to redirect + // TODO use the Next error overlay + new ReactRefreshWebpackPlugin({ overlay: false }), ]; }; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e76db8104d1b..44398fabf3d6 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,6 +23,8 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; +import { configureNextExportMocks } from './export-mocks/webpack'; +import { configureCompatibilityAliases } from './compatibility/compatibility-map'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -134,6 +136,8 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); + configureCompatibilityAliases(baseConfig); + configureNextExportMocks(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 9f30af9d787d..9a46a56c6918 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -1,10 +1,24 @@ -import type { Addon_DecoratorFunction } from '@storybook/types'; +import type { Addon_DecoratorFunction, Addon_LoaderFunction } from '@storybook/types'; import './config/preview'; import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { cookies, headers } from '@storybook/nextjs/headers.mock'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { createRouter } from '@storybook/nextjs/router.mock'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { createNavigation } from '@storybook/nextjs/navigation.mock'; +import { isNextRouterError } from 'next/dist/client/components/is-next-router-error'; + function addNextHeadCount() { const meta = document.createElement('meta'); meta.name = 'next-head-count'; @@ -12,8 +26,33 @@ function addNextHeadCount() { document.head.appendChild(meta); } +function isAsyncClientComponentError(error: unknown) { + return ( + typeof error === 'string' && + (error.includes('A component was suspended by an uncached promise.') || + error.includes('async/await is not yet supported in Client Components')) + ); +} addNextHeadCount(); +// Copying Next patch of console.error: +// https://github.com/vercel/next.js/blob/a74deb63e310df473583ab6f7c1783bc609ca236/packages/next/src/client/app-index.tsx#L15 +const origConsoleError = globalThis.console.error; +globalThis.console.error = (...args: unknown[]) => { + const error = args[0]; + if (isNextRouterError(error) || isAsyncClientComponentError(error)) { + return; + } + origConsoleError.apply(globalThis.console, args); +}; + +globalThis.addEventListener('error', (ev: WindowEventMap['error']): void => { + if (isNextRouterError(ev.error) || isAsyncClientComponentError(ev.error)) { + ev.preventDefault(); + return; + } +}); + export const decorators: Addon_DecoratorFunction[] = [ StyledJsxDecorator, ImageDecorator, @@ -21,10 +60,30 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; +export const loaders: Addon_LoaderFunction = async ({ globals, parameters }) => { + const { router, appDirectory } = parameters.nextjs ?? {}; + if (appDirectory) { + createNavigation(router); + } else { + createRouter({ + locale: globals.locale, + ...router, + }); + } +}; + export const parameters = { docs: { source: { excludeDecorators: true, }, }, + react: { + rootOptions: { + onCaughtError(error: unknown) { + if (isNextRouterError(error)) return; + console.error(error); + }, + }, + }, }; diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index f81c29a5fe59..27041c896f8e 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -13,9 +13,14 @@ import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { getRouter } from '@storybook/nextjs/navigation.mock'; type AppRouterProviderProps = { - action: (name: string) => (...args: any[]) => void; routeParams: RouteParams; }; @@ -57,10 +62,9 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { export const AppRouterProvider: React.FC> = ({ children, - action, routeParams, }) => { - const { pathname, query, segments = [], ...restRouteParams } = routeParams; + const { pathname, query, segments = [] } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; const pathParams = useMemo(() => { @@ -88,29 +92,7 @@ export const AppRouterProvider: React.FC - { - action('nextNavigation.refresh')(); - }, - ...restRouteParams, - }} - > + { const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; @@ -23,26 +23,25 @@ export const RouterDecorator = ( } return ( - + {/* + The next.js RedirectBoundary causes flashing UI when used client side. + Possible use the implementation of the PR: https://github.com/vercel/next.js/pull/49439 + Or wait for next to solve this on their side. + */} + + + ); } return ( - + ); diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx index 066e7f32b3fd..e536a16db547 100644 --- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/page-router-provider.tsx @@ -1,69 +1,13 @@ -import type { Globals } from '@storybook/csf'; import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import type { RouteParams } from './types'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { getRouter } from '@storybook/nextjs/router.mock'; -type PageRouterProviderProps = { - action: (name: string) => (...args: any[]) => void; - routeParams: RouteParams; - globals: Globals; -}; - -export const PageRouterProvider: React.FC> = ({ - children, - action, - routeParams, - globals, -}) => ( - - {children} - +export const PageRouterProvider: React.FC = ({ children }) => ( + {children} ); diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index d1b5c6e7ab98..c9ca896d533b 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -4,9 +4,10 @@ import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; import loadJsConfig from 'next/dist/build/load-jsconfig'; +import type { Configuration as WebpackConfig } from 'webpack'; export const configureSWCLoader = async ( - baseConfig: any, + baseConfig: WebpackConfig, options: Options, nextConfig: NextConfig ) => { @@ -18,33 +19,38 @@ export const configureSWCLoader = async ( const { jsConfig } = await loadJsConfig(dir, nextConfig as any); - baseConfig.module.rules = [ - ...baseConfig.module.rules, - { - test: /\.((c|m)?(j|t)sx?)$/, - include: [getProjectRoot()], - exclude: [/(node_modules)/, ...Object.keys(virtualModules)], - enforce: 'post', - use: { - // we use our own patch because we need to remove tracing from the original code - // which is not possible otherwise - loader: require.resolve('./swc/next-swc-loader-patch.js'), - options: { - isServer: false, - rootDir: dir, - pagesDir: `${dir}/pages`, - appDir: `${dir}/apps`, - hasReactRefresh: isDevelopment, - jsConfig, - nextConfig, - supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( - dir, - isDevelopment - ), - swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'), - bundleTarget: 'default', - }, + const rawRule = baseConfig.module?.rules?.find( + (rule) => typeof rule === 'object' && rule?.resourceQuery?.toString() === '/raw/' + ); + + if (rawRule && typeof rawRule === 'object') { + rawRule.test = /^(?!__barrel_optimize__)/; + } + + baseConfig.module?.rules?.push({ + test: /\.((c|m)?(j|t)sx?)$/, + include: [getProjectRoot()], + exclude: [/(node_modules)/, ...Object.keys(virtualModules)], + enforce: 'post', + use: { + // we use our own patch because we need to remove tracing from the original code + // which is not possible otherwise + loader: require.resolve('./swc/next-swc-loader-patch.js'), + options: { + isServer: false, + rootDir: dir, + pagesDir: `${dir}/pages`, + appDir: `${dir}/apps`, + hasReactRefresh: isDevelopment, + jsConfig, + nextConfig, + supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( + dir, + isDevelopment + ), + swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'), + bundleTarget: 'default', }, }, - ]; + }); }; diff --git a/code/frameworks/nextjs/src/types.ts b/code/frameworks/nextjs/src/types.ts index 4707d03d27e8..9c7fcd9efd7d 100644 --- a/code/frameworks/nextjs/src/types.ts +++ b/code/frameworks/nextjs/src/types.ts @@ -8,13 +8,15 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; +import type * as NextImage from 'next/image'; -type FrameworkName = '@storybook/nextjs'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/nextjs'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = ReactOptions & { nextConfigPath?: string; - + image?: Partial; builder?: BuilderOptions; }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index f675ad7181ef..8a120eb80e2a 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -8,6 +8,8 @@ import { } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { getRouter } from '@storybook/nextjs/navigation.mock'; function Component() { const router = useRouter(); @@ -96,12 +98,32 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, } as Meta; -export const Default: Story = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const routerMock = getRouter(); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(routerMock.forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; export const WithSegmentDefined: Story = { parameters: { diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx new file mode 100644 index 000000000000..d8abfe11bdd1 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -0,0 +1,46 @@ +import NextHeader from './NextHeader'; +import type { Meta } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; + +export default { + component: NextHeader, +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + loaders: async () => { + cookies().set('firstName', 'Jane'); + cookies().set({ + name: 'lastName', + value: 'Doe', + }); + headers().set('timezone', 'Central European Summer Time'); + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const headersMock = headers(); + const cookiesMock = cookies(); + await step('Cookie and header store apis are called upon rendering', async () => { + await expect(cookiesMock.getAll).toHaveBeenCalled(); + await expect(headersMock.entries).toHaveBeenCalled(); + }); + + await step('Upon clicking on submit, the user-id cookie is set', async () => { + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + + await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id'); + }); + + await step('The user-id cookie is available in cookie and header stores', async () => { + await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id'); + await expect(cookiesMock.get('user-id')).toEqual({ + name: 'user-id', + value: 'encrypted-id', + }); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx new file mode 100644 index 000000000000..b93c9611c774 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { cookies, headers } from 'next/headers'; + +export default async function Component() { + async function handleClick() { + 'use server'; + cookies().set('user-id', 'encrypted-id'); + } + + return ( + <> +

Cookies:

+ {cookies() + .getAll() + .map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + +

Headers:

+ {Array.from(headers().entries()).map(([name, value]: [string, string]) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + +
+ +
+ + ); +} diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx new file mode 100644 index 000000000000..f76d8a7f5a90 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/test'; +import { redirect } from 'next/navigation'; + +let state = 'Bug! Not invalidated'; + +export default { + render() { + return ( +
+
{state}
+
{ + state = 'State is invalidated successfully.'; + redirect('/'); + }} + > + +
+
+ ); + }, + parameters: { + test: { + // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058 + // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown. + // We will also suspress console.error logs for re the console.error logs for redirect in the next framework. + // Using the onCaughtError react root option: + // react: { + // rootOptions: { + // onCaughtError(error: unknown) { + // if (isNextRouterError(error)) return; + // console.error(error); + // }, + // }, + // See: code/frameworks/nextjs/src/preview.tsx + dangerouslyIgnoreUnhandledErrors: true, + }, + nextjs: { + appDirectory: true, + navigation: { + pathname: '/', + }, + }, + }, +} as Meta; + +export const SingletonStateGetsInvalidatedAfterRedirecting: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByRole('button')); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index 20d2180a0895..f5a840241fb4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -1,5 +1,8 @@ -import { useRouter } from 'next/router'; import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { getRouter } from '@storybook/nextjs/router.mock'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -32,6 +35,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -63,9 +67,42 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, -}; +} as Meta; + +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const routerMock = getRouter(); + + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + }); -export const Default = {}; + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(routerMock.forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx new file mode 100644 index 000000000000..cb3f5bbdb2dd --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx @@ -0,0 +1,114 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent, waitFor } from '@storybook/test'; +import { cookies } from '@storybook/nextjs/headers.mock'; +import { revalidatePath } from '@storybook/nextjs/cache.mock'; +import { redirect, getRouter } from '@storybook/nextjs/navigation.mock'; + +import { accessRoute, login, logout } from './server-actions'; + +function Component() { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); +} + +export default { + component: Component, + parameters: { + nextjs: { + appDirectory: true, + navigation: { + pathname: '/', + }, + }, + test: { + // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058 + // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown. + // We will also suspress console.error logs for re the console.error logs for redirect in the next framework. + // Using the onCaughtError react root option: + // react: { + // rootOptions: { + // onCaughtError(error: unknown) { + // if (isNextRouterError(error)) return; + // console.error(error); + // }, + // }, + // See: code/frameworks/nextjs/src/preview.tsx + dangerouslyIgnoreUnhandledErrors: true, + }, + }, +} as Meta; + +export const ProtectedWhileLoggedOut: StoryObj = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByText('Access protected route')); + + await expect(cookies().get).toHaveBeenCalledWith('user'); + await expect(redirect).toHaveBeenCalledWith('/'); + + await waitFor(() => expect(getRouter().push).toHaveBeenCalled()); + }, +}; + +export const ProtectedWhileLoggedIn: StoryObj = { + beforeEach() { + cookies().set('user', 'storybookjs'); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByText('Access protected route')); + + await expect(cookies().get).toHaveBeenLastCalledWith('user'); + await expect(revalidatePath).toHaveBeenLastCalledWith('/'); + await expect(redirect).toHaveBeenLastCalledWith('/protected'); + + await waitFor(() => expect(getRouter().push).toHaveBeenCalled()); + }, +}; + +export const Logout: StoryObj = { + beforeEach() { + cookies().set('user', 'storybookjs'); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await userEvent.click(canvas.getByText('Logout')); + await expect(cookies().delete).toHaveBeenCalled(); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + + await waitFor(() => expect(getRouter().push).toHaveBeenCalled()); + }, +}; + +export const Login: StoryObj = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click(canvas.getByText('Login')); + + await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs'); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + + await waitFor(() => expect(getRouter().push).toHaveBeenCalled()); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx new file mode 100644 index 000000000000..ffeba72ab848 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx @@ -0,0 +1,28 @@ +'use server'; + +import { cookies } from 'next/headers'; +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; + +export async function accessRoute() { + const user = cookies().get('user'); + + if (!user) { + redirect('/'); + } + + revalidatePath('/'); + redirect(`/protected`); +} + +export async function logout() { + cookies().delete('user'); + revalidatePath('/'); + redirect('/'); +} + +export async function login() { + cookies().set('user', 'storybookjs'); + revalidatePath('/'); + redirect('/'); +} diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 8f9dae800337..60060e27596f 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,7 +48,8 @@ }, "dependencies": { "@storybook/builder-vite": "workspace:*", - "@storybook/preact": "workspace:*" + "@storybook/preact": "workspace:*", + "@storybook/types": "workspace:*" }, "devDependencies": { "@types/node": "^18.0.0", diff --git a/code/frameworks/preact-vite/src/types.ts b/code/frameworks/preact-vite/src/types.ts index d654f5e13bbc..36481753d4e5 100644 --- a/code/frameworks/preact-vite/src/types.ts +++ b/code/frameworks/preact-vite/src/types.ts @@ -1,8 +1,8 @@ -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; -type FrameworkName = '@storybook/preact-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/preact-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index dccfa9aa93d3..96ca84f5a119 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -51,6 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preact": "workspace:*", "@storybook/preset-preact-webpack": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0" }, "devDependencies": { diff --git a/code/frameworks/preact-webpack5/src/types.ts b/code/frameworks/preact-webpack5/src/types.ts index 2d66b8576166..cad7d38ac6c2 100644 --- a/code/frameworks/preact-webpack5/src/types.ts +++ b/code/frameworks/preact-webpack5/src/types.ts @@ -7,9 +7,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/preact-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/preact-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 02a50462eace..f9429ddc0321 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -47,11 +47,12 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/types": "workspace:*", "find-up": "^5.0.0", "magic-string": "^0.30.0", "react-docgen": "^7.0.0", @@ -64,8 +65,8 @@ "vite": "^4.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "vite": "^4.0.0 || ^5.0.0" }, "engines": { diff --git a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts index 01889ddf9dcf..7fe133be6bb9 100644 --- a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts +++ b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts @@ -15,6 +15,8 @@ import { utils } from 'react-docgen'; const { getNameOrValue, isReactForwardRefCall } = utils; const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) { + documentation.set('definedInFile', componentDefinition.hub.file.opts.filename); + if ( (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has('id') diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts index c59861e4ff43..f41191dc0024 100644 --- a/code/frameworks/react-vite/src/plugins/react-docgen.ts +++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts @@ -20,7 +20,7 @@ import { } from './docgen-resolver'; import { logger } from '@storybook/node-logger'; -type DocObj = Documentation & { actualName: string }; +type DocObj = Documentation & { actualName: string; definedInFile: string }; // TODO: None of these are able to be overridden, so `default` is aspirational here. const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler); @@ -71,8 +71,8 @@ export async function reactDocgen({ const s = new MagicString(src); docgenResults.forEach((info) => { - const { actualName, ...docgenInfo } = info; - if (actualName) { + const { actualName, definedInFile, ...docgenInfo } = info; + if (actualName && definedInFile == id) { const docNode = JSON.stringify(docgenInfo); s.append(`;${actualName}.__docgenInfo=${docNode}`); } diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts index 2499ae4bf93a..79c704f1e914 100644 --- a/code/frameworks/react-vite/src/types.ts +++ b/code/frameworks/react-vite/src/types.ts @@ -1,12 +1,13 @@ import type { + CompatibleString, StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsBase, } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript'; -type FrameworkName = '@storybook/react-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/react-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 4ef8b479e4f6..41ebf24f9131 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,11 +50,12 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "typescript": ">= 4.2.x" }, "peerDependenciesMeta": { diff --git a/code/frameworks/react-webpack5/src/types.ts b/code/frameworks/react-webpack5/src/types.ts index 7e50ef23aba4..fa5a70f8f444 100644 --- a/code/frameworks/react-webpack5/src/types.ts +++ b/code/frameworks/react-webpack5/src/types.ts @@ -8,9 +8,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/react-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/react-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = ReactOptions & { builder?: BuilderOptions; diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index c8966b299cbf..0b53881dd492 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,6 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-server-webpack": "workspace:*", "@storybook/server": "workspace:*", + "@storybook/types": "workspace:*", "@types/node": "^18.0.0" }, "devDependencies": { diff --git a/code/frameworks/server-webpack5/src/types.ts b/code/frameworks/server-webpack5/src/types.ts index 63ecb28ab897..1374b9788c61 100644 --- a/code/frameworks/server-webpack5/src/types.ts +++ b/code/frameworks/server-webpack5/src/types.ts @@ -7,9 +7,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/server-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/server-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 173162058c00..3fc0e1a55554 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,6 +50,7 @@ "@storybook/builder-vite": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/svelte": "workspace:*", + "@storybook/types": "workspace:*", "magic-string": "^0.30.0", "svelte-preprocess": "^5.1.1", "sveltedoc-parser": "^4.2.1", diff --git a/code/frameworks/svelte-vite/src/types.ts b/code/frameworks/svelte-vite/src/types.ts index 8d4ccb8cc9cb..6fe0c01de2c3 100644 --- a/code/frameworks/svelte-vite/src/types.ts +++ b/code/frameworks/svelte-vite/src/types.ts @@ -1,8 +1,8 @@ -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; -type FrameworkName = '@storybook/svelte-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/svelte-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 362fd576e7d3..6c0ff35d58bd 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,7 +50,8 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/preset-svelte-webpack": "workspace:*", - "@storybook/svelte": "workspace:*" + "@storybook/svelte": "workspace:*", + "@storybook/types": "workspace:*" }, "devDependencies": { "svelte": "^4.0.0", diff --git a/code/frameworks/svelte-webpack5/src/types.ts b/code/frameworks/svelte-webpack5/src/types.ts index d5c0578faa32..6c285d94caa9 100644 --- a/code/frameworks/svelte-webpack5/src/types.ts +++ b/code/frameworks/svelte-webpack5/src/types.ts @@ -8,9 +8,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/svelte-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/svelte-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = SvelteOptions & { builder?: BuilderOptions; diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 3a9f86ae03de..1f7e38a7b9d6 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", @@ -56,7 +56,8 @@ "@storybook/addon-actions": "workspace:*", "@storybook/builder-vite": "workspace:*", "@storybook/svelte": "workspace:*", - "@storybook/svelte-vite": "workspace:*" + "@storybook/svelte-vite": "workspace:*", + "@storybook/types": "workspace:*" }, "devDependencies": { "@types/node": "^18.0.0", diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts index c3f04a22bc82..a41c333ccc5f 100644 --- a/code/frameworks/sveltekit/src/types.ts +++ b/code/frameworks/sveltekit/src/types.ts @@ -1,10 +1,10 @@ import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { enhance } from './mocks/app/forms'; import type { goto, invalidate, invalidateAll } from './mocks/app/navigation'; -type FrameworkName = '@storybook/sveltekit'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/sveltekit'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index a6d9e80ce048..b4ba975d11fe 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -49,11 +49,12 @@ "dependencies": { "@storybook/builder-vite": "workspace:*", "@storybook/core-server": "workspace:*", + "@storybook/types": "workspace:*", "@storybook/vue3": "workspace:*", "find-package-json": "^1.2.0", "magic-string": "^0.30.0", "typescript": "^5.0.0", - "vue-component-meta": "^1.8.27", + "vue-component-meta": "^2.0.0", "vue-docgen-api": "^4.75.1" }, "devDependencies": { diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts index 7ec671bddf62..54ac30cbb9dd 100644 --- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts +++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts @@ -5,8 +5,8 @@ import path from 'path'; import type { PluginOption } from 'vite'; import { TypeMeta, - createComponentMetaChecker, - createComponentMetaCheckerByJsonConfig, + createChecker, + createCheckerByJson, type ComponentMeta, type MetaCheckerOptions, } from 'vue-component-meta'; @@ -19,7 +19,7 @@ type MetaSource = { } & ComponentMeta & MetaCheckerOptions['schema']; -export async function vueComponentMeta(): Promise { +export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise { const { createFilter } = await import('vite'); // exclude stories, virtual modules and storybook internals @@ -28,7 +28,7 @@ export async function vueComponentMeta(): Promise { const include = /\.(vue|ts|js|tsx|jsx)$/; const filter = createFilter(include, exclude); - const checker = await createChecker(); + const checker = await createVueComponentMetaChecker(tsconfigPath); return { name: 'storybook:vue-component-meta-plugin', @@ -126,9 +126,10 @@ export async function vueComponentMeta(): Promise { } /** - * Creates the vue-component-meta checker to use for extracting component meta/docs. + * Creates the `vue-component-meta` checker to use for extracting component meta/docs. + * Considers the given tsconfig file (will use a fallback checker if it does not exist or is not supported). */ -async function createChecker() { +async function createVueComponentMetaChecker(tsconfigPath = 'tsconfig.json') { const checkerOptions: MetaCheckerOptions = { forceUseTs: true, noDeclarations: true, @@ -136,26 +137,18 @@ async function createChecker() { }; const projectRoot = getProjectRoot(); - const projectTsConfigPath = path.join(projectRoot, 'tsconfig.json'); + const projectTsConfigPath = path.join(projectRoot, tsconfigPath); - const defaultChecker = createComponentMetaCheckerByJsonConfig( - projectRoot, - { include: ['**/*'] }, - checkerOptions - ); + const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions); // prefer the tsconfig.json file of the project to support alias resolution etc. if (await fileExists(projectTsConfigPath)) { - // tsconfig that uses references is currently not supported by vue-component-meta - // see: https://github.com/vuejs/language-tools/issues/3896 - // so we return the no-tsconfig defaultChecker if tsconfig references are found - // remove this workaround once the above issue is fixed + // vue-component-meta does currently not resolve tsconfig references (see https://github.com/vuejs/language-tools/issues/3896) + // so we will return the defaultChecker if references are used. + // Otherwise vue-component-meta might not work at all for the Storybook docgen. const references = await getTsConfigReferences(projectTsConfigPath); - if (references.length > 0) { - // TODO: paths/aliases are not resolvable, find workaround for this - return defaultChecker; - } - return createComponentMetaChecker(projectTsConfigPath, checkerOptions); + if (references.length > 0) return defaultChecker; + return createChecker(projectTsConfigPath, checkerOptions); } return defaultChecker; diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index 69173e6e767c..01b1d5f1de8d 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -3,7 +3,7 @@ import { dirname, join } from 'path'; import type { PluginOption } from 'vite'; import { vueComponentMeta } from './plugins/vue-component-meta'; import { vueDocgen } from './plugins/vue-docgen'; -import type { FrameworkOptions, StorybookConfig } from './types'; +import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types'; const getAbsolutePath = (input: I): I => dirname(require.resolve(join(input, 'package.json'))) as any; @@ -20,11 +20,11 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = const frameworkOptions: FrameworkOptions = typeof framework === 'string' ? {} : framework.options ?? {}; - const docgenPlugin = frameworkOptions.docgen ?? 'vue-docgen-api'; + const docgen = resolveDocgenOptions(frameworkOptions.docgen); // add docgen plugin depending on framework option - if (docgenPlugin === 'vue-component-meta') { - plugins.push(await vueComponentMeta()); + if (docgen.plugin === 'vue-component-meta') { + plugins.push(await vueComponentMeta(docgen.tsconfig)); } else { plugins.push(await vueDocgen()); } @@ -39,3 +39,14 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = }, }); }; + +/** + * Resolves the docgen framework option. + */ +const resolveDocgenOptions = ( + docgen?: FrameworkOptions['docgen'] +): { plugin: VueDocgenPlugin; tsconfig?: string } => { + if (!docgen) return { plugin: 'vue-docgen-api' }; + if (typeof docgen === 'string') return { plugin: docgen }; + return docgen; +}; diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts index 4b77d28e7a94..09806828a421 100644 --- a/code/frameworks/vue3-vite/src/types.ts +++ b/code/frameworks/vue3-vite/src/types.ts @@ -1,10 +1,10 @@ import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { ComponentMeta } from 'vue-component-meta'; import type { ComponentDoc } from 'vue-docgen-api'; -type FrameworkName = '@storybook/vue3-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/vue3-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; /** * Available docgen plugins for vue. @@ -21,7 +21,21 @@ export type FrameworkOptions = { * "vue-component-meta" will become the new default in the future and "vue-docgen-api" will be removed. * @default "vue-docgen-api" */ - docgen?: VueDocgenPlugin; + docgen?: + | VueDocgenPlugin + | { + plugin: 'vue-component-meta'; + /** + * Tsconfig filename to use. Should be set if your main `tsconfig.json` includes references to other tsconfig files + * like `tsconfig.app.json`. + * Otherwise docgen might not be generated correctly (e.g. import aliases are not resolved). + * + * For further information, see our [docs](https://storybook.js.org/docs/get-started/vue3-vite#override-the-default-configuration). + * + * @default "tsconfig.json" + */ + tsconfig: `tsconfig${string}.json`; + }; }; type StorybookConfigFramework = { diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 6df4545ccb84..75594767f9c9 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,6 +50,7 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", + "@storybook/types": "workspace:*", "@storybook/vue3": "workspace:*", "@types/node": "^18.0.0" }, diff --git a/code/frameworks/vue3-webpack5/src/types.ts b/code/frameworks/vue3-webpack5/src/types.ts index bdae08526600..9c9352eabfda 100644 --- a/code/frameworks/vue3-webpack5/src/types.ts +++ b/code/frameworks/vue3-webpack5/src/types.ts @@ -7,9 +7,10 @@ import type { BuilderOptions, TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; +import type { CompatibleString } from '@storybook/types'; -type FrameworkName = '@storybook/vue3-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/vue3-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index bca9dda246e9..1bf2215b1344 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": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,6 +50,7 @@ "@storybook/builder-vite": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/node-logger": "workspace:*", + "@storybook/types": "workspace:*", "@storybook/web-components": "workspace:*", "magic-string": "^0.30.0" }, diff --git a/code/frameworks/web-components-vite/src/types.ts b/code/frameworks/web-components-vite/src/types.ts index 25fd697cb4b3..a43eaabd3161 100644 --- a/code/frameworks/web-components-vite/src/types.ts +++ b/code/frameworks/web-components-vite/src/types.ts @@ -1,8 +1,8 @@ -import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; -type FrameworkName = '@storybook/web-components-vite'; -type BuilderName = '@storybook/builder-vite'; +type FrameworkName = CompatibleString<'@storybook/web-components-vite'>; +type BuilderName = CompatibleString<'@storybook/builder-vite'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 2d0642ecbdd4..ce94467ca320 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": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -52,6 +52,7 @@ "dependencies": { "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", + "@storybook/types": "workspace:*", "@storybook/web-components": "workspace:*", "@types/node": "^18.0.0" }, diff --git a/code/frameworks/web-components-webpack5/src/types.ts b/code/frameworks/web-components-webpack5/src/types.ts index 01442d08f08a..265b605772c8 100644 --- a/code/frameworks/web-components-webpack5/src/types.ts +++ b/code/frameworks/web-components-webpack5/src/types.ts @@ -1,4 +1,5 @@ import type { + CompatibleString, StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsWebComponents, } from '@storybook/types'; @@ -8,8 +9,8 @@ import type { TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; -type FrameworkName = '@storybook/web-components-webpack5'; -type BuilderName = '@storybook/builder-webpack5'; +type FrameworkName = CompatibleString<'@storybook/web-components-webpack5'>; +type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; export type FrameworkOptions = { builder?: BuilderOptions; diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 57a8c53ab2e1..60bb5bbaa095 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 9b6527789309..c72c5339e26c 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 363550761022..f4199f69b4b0 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 200eae0d10e8..ae1a74814db9 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", @@ -56,8 +56,8 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.0", - "@babel/types": "^7.23.0", + "@babel/core": "^7.24.4", + "@babel/types": "^7.24.0", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "workspace:*", "@storybook/core-common": "workspace:*", diff --git a/code/lib/cli/rendererAssets/common/assets/accessibility.svg b/code/lib/cli/rendererAssets/common/assets/accessibility.svg index a3288830e348..107e93f83840 100644 --- a/code/lib/cli/rendererAssets/common/assets/accessibility.svg +++ b/code/lib/cli/rendererAssets/common/assets/accessibility.svg @@ -1,5 +1 @@ - - Accessibility - - - \ No newline at end of file +Accessibility \ No newline at end of file diff --git a/code/lib/cli/rendererAssets/common/assets/discord.svg b/code/lib/cli/rendererAssets/common/assets/discord.svg index 1204df998d0e..d638958b66de 100644 --- a/code/lib/cli/rendererAssets/common/assets/discord.svg +++ b/code/lib/cli/rendererAssets/common/assets/discord.svg @@ -1,15 +1 @@ - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/code/lib/cli/rendererAssets/common/assets/github.svg b/code/lib/cli/rendererAssets/common/assets/github.svg index 158e0268a343..dc513528ca89 100644 --- a/code/lib/cli/rendererAssets/common/assets/github.svg +++ b/code/lib/cli/rendererAssets/common/assets/github.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/code/lib/cli/rendererAssets/common/assets/tutorials.svg b/code/lib/cli/rendererAssets/common/assets/tutorials.svg index 4b2fc7c44b80..b492a9c66f7f 100644 --- a/code/lib/cli/rendererAssets/common/assets/tutorials.svg +++ b/code/lib/cli/rendererAssets/common/assets/tutorials.svg @@ -1,12 +1 @@ - - - - - - - - - - - - + \ No newline at end of file diff --git a/code/lib/cli/rendererAssets/common/assets/youtube.svg b/code/lib/cli/rendererAssets/common/assets/youtube.svg index 33a3a61f611e..a7515d7e9b37 100644 --- a/code/lib/cli/rendererAssets/common/assets/youtube.svg +++ b/code/lib/cli/rendererAssets/common/assets/youtube.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts b/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts new file mode 100644 index 000000000000..3c96d7b7bc1d --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts @@ -0,0 +1,74 @@ +import { describe, expect, it } from 'vitest'; +import type { StorybookConfig } from '@storybook/types'; +import { autodocsTags } from './autodocs-tags'; + +const check = async ({ + main: mainConfig, + storybookVersion = '7.0.0', + previewConfigPath, +}: { + main: Partial & Record; + storybookVersion?: string; + previewConfigPath?: string; +}) => { + return autodocsTags.check({ + packageManager: {} as any, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + previewConfigPath, + }); +}; + +it('with no docs setting', async () => { + await expect( + check({ + main: {}, + }) + ).resolves.toBeFalsy(); +}); + +describe('docs.autodocs = true', () => { + it('errors with no preview.js', async () => { + await expect( + check({ + main: { + docs: { autodocs: true }, + }, + }) + ).rejects.toThrowError(); + }); + + it('continues with preview.js', async () => { + await expect( + check({ + main: { + docs: { autodocs: true }, + }, + previewConfigPath: '.storybook/preview.js', + }) + ).resolves.toBeTruthy(); + }); +}); + +describe('docs.autodocs != true', () => { + it('docs.autodocs = false', async () => { + await expect( + check({ + main: { + docs: { autodocs: false }, + }, + }) + ).resolves.toBeTruthy(); + }); + + it('docs.autodocs = "tag"', async () => { + await expect( + check({ + main: { + docs: { autodocs: 'tag' }, + }, + }) + ).resolves.toBeTruthy(); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts b/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts new file mode 100644 index 000000000000..531bcc0ec69d --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts @@ -0,0 +1,90 @@ +import { dedent } from 'ts-dedent'; +import chalk from 'chalk'; +import type { DocsOptions } from '@storybook/types'; +import { readConfig, writeConfig } from '@storybook/csf-tools'; +import { updateMainConfig } from '../helpers/mainConfigFile'; +import type { Fix } from '../types'; + +const logger = console; + +const MIGRATION = + 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated'; + +interface Options { + autodocs: DocsOptions['autodocs']; + mainConfigPath?: string; + previewConfigPath?: string; +} + +/** + */ +export const autodocsTags: Fix = { + id: 'autodocs-tags', + versionRange: ['*.*.*', '>=8.0.*'], + async check({ mainConfig, mainConfigPath, previewConfigPath }) { + const autodocs = mainConfig?.docs?.autodocs; + if (autodocs === undefined) return null; + + if (autodocs === true && !previewConfigPath) { + throw Error(dedent` + ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan( + mainConfigPath + )}. + + There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag. + + Please perform the migration by hand: ${chalk.yellow(MIGRATION)} + `); + return null; + } + + return { autodocs, mainConfigPath, previewConfigPath }; + }, + + prompt({ autodocs, mainConfigPath, previewConfigPath }) { + let falseMessage = '', + trueMessage = ''; + + if (autodocs === false) { + falseMessage = dedent` + + + There is no ${chalk.cyan('docs.autodocs = false')} equivalent. + You'll need to check your stories to ensure none are tagged with ${chalk.cyan('autodocs')}. + `; + } else if (autodocs === true) { + trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`; + } + + return dedent` + The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan( + mainConfigPath + )} is deprecated.${falseMessage} + + Learn more: ${chalk.yellow(MIGRATION)} + + Remove ${chalk.cyan('docs.autodocs')}${trueMessage}? + `; + }, + + async run({ dryRun, mainConfigPath, result }) { + if (!dryRun) { + if (result.autodocs === true) { + logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`); + const previewConfig = await readConfig(result.previewConfigPath!); + const tags = previewConfig.getFieldNode(['tags']); + if (tags) { + previewConfig.appendValueToArray(['tags'], 'autodocs'); + } else { + previewConfig.setFieldValue(['tags'], ['autodocs']); + } + await writeConfig(previewConfig); + } + + await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { + logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`); + main.removeField(['docs', 'autodocs']); + }); + } + }, +}; diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 72f3eb9a605d..1c12a596fb24 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -28,6 +28,7 @@ import { mdx1to3 } from './mdx-1-to-3'; import { addonPostCSS } from './addon-postcss'; import { vta } from './vta'; import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies'; +import { autodocsTags } from './autodocs-tags'; export * from '../types'; @@ -60,6 +61,7 @@ export const allFixes: Fix[] = [ mdx1to3, upgradeStorybookRelatedDependencies, vta, + autodocsTags, ]; export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts index 605b66a824f5..706a22086386 100644 --- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts +++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts @@ -84,7 +84,7 @@ export const mdxgfm: Fix = { Storybook >= 8.0 uses MDX3 for compiling MDX, and thus no longer supports GFM out of the box. Because of this you need to explicitly add the GFM plugin in the addon-docs options: - https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly We recommend that you follow the guide in the link above; however, we can add a temporary Storybook addon to help make this migration easier. We'll install the addon and add it to your storybook config. diff --git a/code/lib/cli/src/automigrate/fixes/react-docgen.ts b/code/lib/cli/src/automigrate/fixes/react-docgen.ts index f791be0ab068..41e0875f475d 100644 --- a/code/lib/cli/src/automigrate/fixes/react-docgen.ts +++ b/code/lib/cli/src/automigrate/fixes/react-docgen.ts @@ -62,7 +62,9 @@ export const reactDocgen: Fix = { For known "react-docgen" limitations, see: ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')} - Would you like to switch back to ${chalk.cyan('react-docgen-typescript')} in your Storybook? + Press Y to revert to ${chalk.cyan('react-docgen-typesript')}, press N to use ${chalk.cyan( + 'react-docgen' + )} `; } }, diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts b/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts new file mode 100644 index 000000000000..cb428df7d27b --- /dev/null +++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts @@ -0,0 +1,21 @@ +import { describe, it, expect } from 'vitest'; +import { normalizeExtends } from './eslintPlugin'; + +describe('normalizeExtends', () => { + it('returns empty array when existingExtends is falsy', () => { + expect(normalizeExtends(null)).toEqual([]); + expect(normalizeExtends(undefined)).toEqual([]); + }); + + it('returns existingExtends when it is a string', () => { + expect(normalizeExtends('foo')).toEqual(['foo']); + }); + + it('returns existingExtends when it is an array', () => { + expect(normalizeExtends(['foo'])).toEqual(['foo']); + }); + + it('throws when existingExtends is not a string or array', () => { + expect(() => normalizeExtends(true)).toThrowError('Invalid eslint extends true'); + }); +}); diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts index 3090de3ef89c..7f238a4f5dbd 100644 --- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts +++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts @@ -47,6 +47,13 @@ export async function extractEslintInfo(packageManager: JsPackageManager): Promi return { hasEslint, isStorybookPluginInstalled, eslintConfigFile }; } +export const normalizeExtends = (existingExtends: any): string[] => { + if (!existingExtends) return []; + if (typeof existingExtends === 'string') return [existingExtends]; + if (Array.isArray(existingExtends)) return existingExtends; + throw new Error(`Invalid eslint extends ${existingExtends}`); +}; + export async function configureEslintPlugin( eslintFile: string | undefined, packageManager: JsPackageManager @@ -55,38 +62,29 @@ export async function configureEslintPlugin( paddedLog(`Configuring Storybook ESLint plugin at ${eslintFile}`); if (eslintFile.endsWith('json')) { const eslintConfig = (await readJson(eslintFile)) as { extends?: string[] }; - const existingConfigValue = Array.isArray(eslintConfig.extends) - ? eslintConfig.extends - : [eslintConfig.extends].filter(Boolean); - eslintConfig.extends = [ - ...(existingConfigValue || []), - 'plugin:storybook/recommended', - ] as string[]; + const existingExtends = normalizeExtends(eslintConfig.extends).filter(Boolean); + eslintConfig.extends = [...existingExtends, 'plugin:storybook/recommended'] as string[]; const eslintFileContents = await readFile(eslintFile, 'utf8'); const spaces = detectIndent(eslintFileContents).amount || 2; await writeJson(eslintFile, eslintConfig, { spaces }); } else { const eslint = await readConfig(eslintFile); - const extendsConfig = eslint.getFieldValue(['extends']) || []; - const existingConfigValue = Array.isArray(extendsConfig) - ? extendsConfig - : [extendsConfig].filter(Boolean); - eslint.setFieldValue( - ['extends'], - [...(existingConfigValue || []), 'plugin:storybook/recommended'] - ); + const existingExtends = normalizeExtends(eslint.getFieldValue(['extends'])).filter(Boolean); + eslint.setFieldValue(['extends'], [...existingExtends, 'plugin:storybook/recommended']); await writeConfig(eslint); } } else { paddedLog(`Configuring eslint-plugin-storybook in your package.json`); const packageJson = await packageManager.retrievePackageJson(); + const existingExtends = normalizeExtends(packageJson.eslintConfig?.extends).filter(Boolean); + await packageManager.writePackageJson({ ...packageJson, eslintConfig: { ...packageJson.eslintConfig, - extends: [...(packageJson.eslintConfig?.extends || []), 'plugin:storybook/recommended'], + extends: [...existingExtends, 'plugin:storybook/recommended'], }, }); } diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index b5aa64f7f77d..a1a3d83ddfbb 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -58,6 +58,17 @@ command('init') .option('-y --yes', 'Answer yes to all prompts') .option('-b --builder ', 'Builder library') .option('-l --linkable', 'Prepare installation for link (contributor helper)') + // due to how Commander handles default values and negated options, we have to elevate the default into Commander, and we have to specify `--dev` + // alongside `--no-dev` even if we are unlikely to directly use `--dev`. https://github.com/tj/commander.js/issues/2068#issuecomment-1804524585 + .option( + '--dev', + 'Launch the development server after completing initialization. Enabled by default', + process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true' + ) + .option( + '--no-dev', + 'Complete the initialization of Storybook without launching the Storybook development server' + ) .action((options: CommandOptions) => { initiate(options).catch(() => process.exit(1)); }); diff --git a/code/lib/cli/src/generators/SVELTE/index.ts b/code/lib/cli/src/generators/SVELTE/index.ts index 136dedfb9c08..d3b4a89a7351 100644 --- a/code/lib/cli/src/generators/SVELTE/index.ts +++ b/code/lib/cli/src/generators/SVELTE/index.ts @@ -3,7 +3,8 @@ import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'svelte', { - extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'], + extensions: ['js', 'ts', 'svelte'], + extraAddons: ['@storybook/addon-svelte-csf'], }); }; diff --git a/code/lib/cli/src/generators/SVELTEKIT/index.ts b/code/lib/cli/src/generators/SVELTEKIT/index.ts index 856d1d04c76b..50c440a7922d 100644 --- a/code/lib/cli/src/generators/SVELTEKIT/index.ts +++ b/code/lib/cli/src/generators/SVELTEKIT/index.ts @@ -8,7 +8,10 @@ const generator: Generator = async (packageManager, npmOptions, options) => { npmOptions, { ...options, builder: CoreBuilder.Vite }, 'svelte', - undefined, + { + extensions: ['js', 'ts', 'svelte'], + extraAddons: ['@storybook/addon-svelte-csf'], + }, 'sveltekit' ); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 2f85d0af4549..44f1214c0aa6 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -354,7 +354,6 @@ export async function baseGenerator( }, prefixes, storybookConfigFolder, - docs: { autodocs: 'tag' }, addons: shouldApplyRequireWrapperOnPackageNames ? addons.map((addon) => applyRequireWrapper(addon)) : addons, diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 763df2c4d1a6..5a8f7350f9bf 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -53,4 +53,5 @@ export type CommandOptions = { disableTelemetry?: boolean; enableCrashReports?: boolean; debug?: boolean; + dev?: boolean; }; diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 4d83666780b2..9d54c099f19b 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -405,7 +405,7 @@ export async function doInitiate(options: CommandOptions): Promise< ); return { - shouldRunDev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true', + shouldRunDev: !!options.dev, projectType, packageManager, storybookCommand, diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 9d8a839bfcce..14d5fe69d675 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -201,6 +201,28 @@ const baseTemplates = { }, skipTasks: ['bench'], }, + 'react-vite/prerelease-ts': { + name: 'React Prerelease (Vite | TypeScript)', + /** + * 1. Create a Vite project with the React template + * 2. Add React beta versions + * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing + * 4. Add @types/react and @types/react-dom pointing to the beta packages + */ + script: ` + npm create vite --yes {{beforeDir}} -- --template react-ts && \ + cd {{beforeDir}} && \ + yarn add react@beta react-dom@beta && \ + jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \ + yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta + `, + expected: { + framework: '@storybook/react-vite', + renderer: '@storybook/react', + builder: '@storybook/builder-vite', + }, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'react-webpack/18-ts': { name: 'React Latest (Webpack | TypeScript)', script: 'yarn create webpack5-react {{beforeDir}}', @@ -222,6 +244,26 @@ const baseTemplates = { }, skipTasks: ['e2e-tests-dev', 'bench'], }, + 'react-webpack/prerelease-ts': { + name: 'React Prerelease (Webpack | TypeScript)', + /** + * 1. Create a Webpack project with React beta versions + * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing + * 4. Add @types/react and @types/react-dom pointing to the beta packages + */ + script: ` + yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && \ + cd {{beforeDir}} && \ + jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \ + yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta + `, + expected: { + framework: '@storybook/react-webpack5', + renderer: '@storybook/react', + builder: '@storybook/builder-webpack5', + }, + skipTasks: ['e2e-tests-dev', 'bench'], + }, 'solid-vite/default-js': { name: 'SolidJS Latest (Vite | JavaScript)', script: 'npx degit solidjs/templates/js {{beforeDir}}', @@ -628,6 +670,8 @@ export const daily: TemplateKey[] = [ 'angular-cli/prerelease', 'cra/default-js', 'react-vite/default-js', + 'react-vite/prerelease-ts', + 'react-webpack/prerelease-ts', 'vue3-vite/default-js', 'vue-cli/default-js', 'lit-vite/default-js', diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli/src/sandbox.ts index d06c633c1a4d..621d62976c10 100644 --- a/code/lib/cli/src/sandbox.ts +++ b/code/lib/cli/src/sandbox.ts @@ -225,6 +225,7 @@ export const sandbox = async ({ process.chdir(templateDestination); // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project await doInitiate({ + dev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANBOX !== 'true', ...options, }); process.chdir(before); diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 80545b22643b..9cd28e708dcc 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 46f9ad028a5e..7444f0bdb919 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -54,10 +54,10 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@babel/core": "^7.24.4", + "@babel/preset-env": "^7.24.4", + "@babel/types": "^7.24.0", + "@storybook/csf": "^0.1.7", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 2cef151d5e0e..675221b38e84 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.1.0-alpha.7", + "version": "8.2.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts index 8ed0de57e826..db4bb886c461 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts @@ -36,7 +36,8 @@ const CRITICAL_YARN2_ERROR_CODES = { YN0083: 'AUTOMERGE_GIT_ERROR', }; -// @ts-expect-error The error codes might be helpful in the future +// @ts-expect-error If we want a code to be parsed, we move from the list below to the list above +// Keep the codes here, they might be helpful in the future const YARN2_ERROR_CODES = { ...CRITICAL_YARN2_ERROR_CODES, YN0000: 'UNNAMED', @@ -80,7 +81,7 @@ const YARN2_ERROR_CODES = { YN0090: 'OFFLINE_MODE_ENABLED', }; -// This encompasses both yarn 2 and yarn 3 +// This encompasses Yarn Berry (v2+) export class Yarn2Proxy extends JsPackageManager { readonly type = 'yarn2'; diff --git a/code/lib/core-common/src/utils/get-renderer-name.test.ts b/code/lib/core-common/src/utils/get-renderer-name.test.ts index f5d10959405c..09c31f36b4f1 100644 --- a/code/lib/core-common/src/utils/get-renderer-name.test.ts +++ b/code/lib/core-common/src/utils/get-renderer-name.test.ts @@ -1,15 +1,14 @@ -import { it } from 'node:test'; -import { describe, expect } from 'vitest'; +import { describe, expect, test } from 'vitest'; import { extractProperRendererNameFromFramework } from './get-renderer-name'; describe('get-renderer-name', () => { describe('extractProperRendererNameFromFramework', () => { - it('should return the renderer name for a known framework', async () => { - const renderer = await extractProperRendererNameFromFramework('@storybook/react'); + test('should return the renderer name for a known framework', async () => { + const renderer = await extractProperRendererNameFromFramework('@storybook/react-vite'); expect(renderer).toEqual('react'); }); - it('should return null for an unknown framework', async () => { + test('should return null for an unknown framework', async () => { const renderer = await extractProperRendererNameFromFramework('@third-party/framework'); expect(renderer).toBeNull(); }); diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index 2c90d90fd674..726bad06c0b9 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -96,7 +96,7 @@ export const findConfigFile = (prefix: string, configDir: string) => { export const getConfigInfo = (packageJson: PackageJson, configDir?: string) => { let storybookConfigDir = configDir ?? '.storybook'; - const storybookScript = packageJson.scripts?.['storybook']; + const storybookScript = packageJson.scripts?.storybook; if (storybookScript && !configDir) { const configParam = getStorybookConfiguration(storybookScript, '-c', '--config-dir'); if (configParam) storybookConfigDir = configParam; diff --git a/code/lib/core-common/src/utils/paths.ts b/code/lib/core-common/src/utils/paths.ts index 3895a69dd2b1..bb5896cc4f67 100644 --- a/code/lib/core-common/src/utils/paths.ts +++ b/code/lib/core-common/src/utils/paths.ts @@ -32,16 +32,19 @@ export const getProjectRoot = () => { } catch (e) { // } + try { - const found = findUp.sync('.yarn', { type: 'directory' }); - if (found) { - result = result || path.join(found, '..'); - } + const splitDirname = __dirname.split('node_modules'); + result = result || (splitDirname.length >= 2 ? splitDirname[0] : undefined); } catch (e) { // } + try { - result = result || __dirname.split('node_modules')[0]; + const found = findUp.sync('.yarn', { type: 'directory' }); + if (found) { + result = result || path.join(found, '..'); + } } catch (e) { // } diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 3748c421b117..25c8807e5dd9 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.1.0-alpha.7', - '@storybook/addon-actions': '8.1.0-alpha.7', - '@storybook/addon-backgrounds': '8.1.0-alpha.7', - '@storybook/addon-controls': '8.1.0-alpha.7', - '@storybook/addon-docs': '8.1.0-alpha.7', - '@storybook/addon-essentials': '8.1.0-alpha.7', - '@storybook/addon-highlight': '8.1.0-alpha.7', - '@storybook/addon-interactions': '8.1.0-alpha.7', - '@storybook/addon-jest': '8.1.0-alpha.7', - '@storybook/addon-links': '8.1.0-alpha.7', - '@storybook/addon-mdx-gfm': '8.1.0-alpha.7', - '@storybook/addon-measure': '8.1.0-alpha.7', - '@storybook/addon-onboarding': '8.1.0-alpha.7', - '@storybook/addon-outline': '8.1.0-alpha.7', - '@storybook/addon-storysource': '8.1.0-alpha.7', - '@storybook/addon-themes': '8.1.0-alpha.7', - '@storybook/addon-toolbars': '8.1.0-alpha.7', - '@storybook/addon-viewport': '8.1.0-alpha.7', - '@storybook/angular': '8.1.0-alpha.7', - '@storybook/blocks': '8.1.0-alpha.7', - '@storybook/builder-manager': '8.1.0-alpha.7', - '@storybook/builder-vite': '8.1.0-alpha.7', - '@storybook/builder-webpack5': '8.1.0-alpha.7', - '@storybook/channels': '8.1.0-alpha.7', - '@storybook/cli': '8.1.0-alpha.7', - '@storybook/client-logger': '8.1.0-alpha.7', - '@storybook/codemod': '8.1.0-alpha.7', - '@storybook/components': '8.1.0-alpha.7', - '@storybook/core-common': '8.1.0-alpha.7', - '@storybook/core-events': '8.1.0-alpha.7', - '@storybook/core-server': '8.1.0-alpha.7', - '@storybook/core-webpack': '8.1.0-alpha.7', - '@storybook/csf-plugin': '8.1.0-alpha.7', - '@storybook/csf-tools': '8.1.0-alpha.7', - '@storybook/docs-tools': '8.1.0-alpha.7', - '@storybook/ember': '8.1.0-alpha.7', - '@storybook/html': '8.1.0-alpha.7', - '@storybook/html-vite': '8.1.0-alpha.7', - '@storybook/html-webpack5': '8.1.0-alpha.7', - '@storybook/instrumenter': '8.1.0-alpha.7', - '@storybook/manager': '8.1.0-alpha.7', - '@storybook/manager-api': '8.1.0-alpha.7', - '@storybook/nextjs': '8.1.0-alpha.7', - '@storybook/node-logger': '8.1.0-alpha.7', - '@storybook/preact': '8.1.0-alpha.7', - '@storybook/preact-vite': '8.1.0-alpha.7', - '@storybook/preact-webpack5': '8.1.0-alpha.7', - '@storybook/preset-create-react-app': '8.1.0-alpha.7', - '@storybook/preset-html-webpack': '8.1.0-alpha.7', - '@storybook/preset-preact-webpack': '8.1.0-alpha.7', - '@storybook/preset-react-webpack': '8.1.0-alpha.7', - '@storybook/preset-server-webpack': '8.1.0-alpha.7', - '@storybook/preset-svelte-webpack': '8.1.0-alpha.7', - '@storybook/preset-vue3-webpack': '8.1.0-alpha.7', - '@storybook/preview': '8.1.0-alpha.7', - '@storybook/preview-api': '8.1.0-alpha.7', - '@storybook/react': '8.1.0-alpha.7', - '@storybook/react-dom-shim': '8.1.0-alpha.7', - '@storybook/react-vite': '8.1.0-alpha.7', - '@storybook/react-webpack5': '8.1.0-alpha.7', - '@storybook/router': '8.1.0-alpha.7', - '@storybook/server': '8.1.0-alpha.7', - '@storybook/server-webpack5': '8.1.0-alpha.7', - '@storybook/source-loader': '8.1.0-alpha.7', - '@storybook/svelte': '8.1.0-alpha.7', - '@storybook/svelte-vite': '8.1.0-alpha.7', - '@storybook/svelte-webpack5': '8.1.0-alpha.7', - '@storybook/sveltekit': '8.1.0-alpha.7', - '@storybook/telemetry': '8.1.0-alpha.7', - '@storybook/test': '8.1.0-alpha.7', - '@storybook/theming': '8.1.0-alpha.7', - '@storybook/types': '8.1.0-alpha.7', - '@storybook/vue3': '8.1.0-alpha.7', - '@storybook/vue3-vite': '8.1.0-alpha.7', - '@storybook/vue3-webpack5': '8.1.0-alpha.7', - '@storybook/web-components': '8.1.0-alpha.7', - '@storybook/web-components-vite': '8.1.0-alpha.7', - '@storybook/web-components-webpack5': '8.1.0-alpha.7', - sb: '8.1.0-alpha.7', - storybook: '8.1.0-alpha.7', + '@storybook/addon-a11y': '8.2.0-alpha.1', + '@storybook/addon-actions': '8.2.0-alpha.1', + '@storybook/addon-backgrounds': '8.2.0-alpha.1', + '@storybook/addon-controls': '8.2.0-alpha.1', + '@storybook/addon-docs': '8.2.0-alpha.1', + '@storybook/addon-essentials': '8.2.0-alpha.1', + '@storybook/addon-highlight': '8.2.0-alpha.1', + '@storybook/addon-interactions': '8.2.0-alpha.1', + '@storybook/addon-jest': '8.2.0-alpha.1', + '@storybook/addon-links': '8.2.0-alpha.1', + '@storybook/addon-mdx-gfm': '8.2.0-alpha.1', + '@storybook/addon-measure': '8.2.0-alpha.1', + '@storybook/addon-onboarding': '8.2.0-alpha.1', + '@storybook/addon-outline': '8.2.0-alpha.1', + '@storybook/addon-storysource': '8.2.0-alpha.1', + '@storybook/addon-themes': '8.2.0-alpha.1', + '@storybook/addon-toolbars': '8.2.0-alpha.1', + '@storybook/addon-viewport': '8.2.0-alpha.1', + '@storybook/angular': '8.2.0-alpha.1', + '@storybook/blocks': '8.2.0-alpha.1', + '@storybook/builder-manager': '8.2.0-alpha.1', + '@storybook/builder-vite': '8.2.0-alpha.1', + '@storybook/builder-webpack5': '8.2.0-alpha.1', + '@storybook/channels': '8.2.0-alpha.1', + '@storybook/cli': '8.2.0-alpha.1', + '@storybook/client-logger': '8.2.0-alpha.1', + '@storybook/codemod': '8.2.0-alpha.1', + '@storybook/components': '8.2.0-alpha.1', + '@storybook/core-common': '8.2.0-alpha.1', + '@storybook/core-events': '8.2.0-alpha.1', + '@storybook/core-server': '8.2.0-alpha.1', + '@storybook/core-webpack': '8.2.0-alpha.1', + '@storybook/csf-plugin': '8.2.0-alpha.1', + '@storybook/csf-tools': '8.2.0-alpha.1', + '@storybook/docs-tools': '8.2.0-alpha.1', + '@storybook/ember': '8.2.0-alpha.1', + '@storybook/html': '8.2.0-alpha.1', + '@storybook/html-vite': '8.2.0-alpha.1', + '@storybook/html-webpack5': '8.2.0-alpha.1', + '@storybook/instrumenter': '8.2.0-alpha.1', + '@storybook/manager': '8.2.0-alpha.1', + '@storybook/manager-api': '8.2.0-alpha.1', + '@storybook/nextjs': '8.2.0-alpha.1', + '@storybook/node-logger': '8.2.0-alpha.1', + '@storybook/preact': '8.2.0-alpha.1', + '@storybook/preact-vite': '8.2.0-alpha.1', + '@storybook/preact-webpack5': '8.2.0-alpha.1', + '@storybook/preset-create-react-app': '8.2.0-alpha.1', + '@storybook/preset-html-webpack': '8.2.0-alpha.1', + '@storybook/preset-preact-webpack': '8.2.0-alpha.1', + '@storybook/preset-react-webpack': '8.2.0-alpha.1', + '@storybook/preset-server-webpack': '8.2.0-alpha.1', + '@storybook/preset-svelte-webpack': '8.2.0-alpha.1', + '@storybook/preset-vue3-webpack': '8.2.0-alpha.1', + '@storybook/preview': '8.2.0-alpha.1', + '@storybook/preview-api': '8.2.0-alpha.1', + '@storybook/react': '8.2.0-alpha.1', + '@storybook/react-dom-shim': '8.2.0-alpha.1', + '@storybook/react-vite': '8.2.0-alpha.1', + '@storybook/react-webpack5': '8.2.0-alpha.1', + '@storybook/router': '8.2.0-alpha.1', + '@storybook/server': '8.2.0-alpha.1', + '@storybook/server-webpack5': '8.2.0-alpha.1', + '@storybook/source-loader': '8.2.0-alpha.1', + '@storybook/svelte': '8.2.0-alpha.1', + '@storybook/svelte-vite': '8.2.0-alpha.1', + '@storybook/svelte-webpack5': '8.2.0-alpha.1', + '@storybook/sveltekit': '8.2.0-alpha.1', + '@storybook/telemetry': '8.2.0-alpha.1', + '@storybook/test': '8.2.0-alpha.1', + '@storybook/theming': '8.2.0-alpha.1', + '@storybook/types': '8.2.0-alpha.1', + '@storybook/vue3': '8.2.0-alpha.1', + '@storybook/vue3-vite': '8.2.0-alpha.1', + '@storybook/vue3-webpack5': '8.2.0-alpha.1', + '@storybook/web-components': '8.2.0-alpha.1', + '@storybook/web-components-vite': '8.2.0-alpha.1', + '@storybook/web-components-webpack5': '8.2.0-alpha.1', + sb: '8.2.0-alpha.1', + storybook: '8.2.0-alpha.1', }; diff --git a/code/lib/core-common/templates/base-preview-body.html b/code/lib/core-common/templates/base-preview-body.html index 094286c31b41..b6314fd75900 100644 --- a/code/lib/core-common/templates/base-preview-body.html +++ b/code/lib/core-common/templates/base-preview-body.html @@ -82,6 +82,38 @@

No Preview

- 

-  

+  

+    

+    

+      The component failed to render properly, likely due to a configuration issue in Storybook.
+      Here are some common causes and how you can address them:
+    

+    
    
+      
  1. 
+        Missing Context/Providers: You can use decorators to supply specific
+        contexts or providers, which are sometimes necessary for components to render correctly. For
+        detailed instructions on using decorators, please visit the
+        Decorators documentation.
+      
    2. 
+      
  2. 
+        Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary
+        settings for loaders, plugins, and other relevant parameters. You can find step-by-step
+        guides for configuring
+        Webpack or
+        Vite
+        with Storybook.
+      
    3. 
+      
  3. 
+        Missing Environment Variables: Your Storybook may require specific
+        environment variables to function as intended. You can set up custom environment variables
+        as outlined in the
+        Environment Variables documentation.
+      
    4. 
+    

+    

+  

 

diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html
index c4732d25281c..d76e3a5004d4 100644
--- a/code/lib/core-common/templates/base-preview-head.html
+++ b/code/lib/core-common/templates/base-preview-head.html
@@ -30,7 +30,8 @@
     box-sizing: border-box;
     margin: auto;
     padding: 1rem;
-    max-height: 100%; /* Hack for centering correctly in IE11 */
+    max-height: 100%;
+    /* Hack for centering correctly in IE11 */
   }
 
   /* Vertical centering fix for IE11 */
@@ -61,7 +62,9 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px;
+    box-sizing: border-box;
+
+    padding: 40px;
     font-family:
       'Nunito Sans',
       -apple-system,
@@ -77,6 +80,18 @@
     overflow: auto;
   }
 
+  @media (max-width: 700px) {
+    .sb-wrapper {
+      padding: 20px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .sb-wrapper {
+      padding: 10px;
+    }
+  }
+
   .sb-heading {
     font-size: 14px;
     font-weight: 600;
@@ -89,6 +104,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
+    box-sizing: border-box;
   }
 
   .sb-nopreview_main {
@@ -103,54 +119,133 @@
   }
 
   .sb-errordisplay {
-    border: 20px solid rgb(187, 49, 49);
-    background: #222;
-    color: #fff;
+    background: #f6f9fc;
+    color: black;
     z-index: 999999;
+    width: 100vw;
+    min-height: 100vh;
+    box-sizing: border-box;
+
+    & ol {
+      padding-left: 18px;
+      margin: 0;
+    }
+
+    & h1 {
+      font-family: Nunito Sans;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 30px;
+      font-weight: normal;
+      margin: 0;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: #ff4400;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    & p,
+    & ol {
+      font-family: Nunito Sans;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      margin: 0;
+    }
+
+    & li + li {
+      margin: 0;
+      padding: 0;
+      padding-top: 12px;
+    }
+
+    & a {
+      color: currentColor;
+    }
+  }
+
+  .sb-errordisplay_main {
+    margin: auto;
+    padding: 24px;
+    display: flex;
+    box-sizing: border-box;
+
+    flex-direction: column;
+    min-height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    background: white;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
+    gap: 24px;
   }
 
   .sb-errordisplay_code {
     padding: 10px;
-    background: #000;
-    color: #eee;
+    flex: 1;
+    background: #242424;
+    color: #c6c6c6;
+    box-sizing: border-box;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    border-radius: 4px;
+
     font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
       'Lucida Console', Consolas, Monaco, monospace;
+    margin: 0;
+    overflow: auto;
   }
 
   .sb-errordisplay pre {
     white-space: pre-wrap;
+    white-space: revert;
   }
 
   @-webkit-keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @-webkit-keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
   }
+
   @keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
@@ -213,6 +308,7 @@
     height: 14px;
     width: 14px;
   }
+
   .sb-previewBlock_icon:last-child {
     margin-left: auto;
   }
@@ -234,23 +330,28 @@
     text-align: left;
     width: 100%;
   }
+
   .sb-argstableBlock th:first-of-type,
   .sb-argstableBlock td:first-of-type {
     padding-left: 20px;
   }
+
   .sb-argstableBlock th:nth-of-type(2),
   .sb-argstableBlock td:nth-of-type(2) {
     width: 35%;
   }
+
   .sb-argstableBlock th:nth-of-type(3),
   .sb-argstableBlock td:nth-of-type(3) {
     width: 15%;
   }
+
   .sb-argstableBlock th:last-of-type,
   .sb-argstableBlock td:last-of-type {
     width: 25%;
     padding-right: 20px;
   }
+
   .sb-argstableBlock th span,
   .sb-argstableBlock td span {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
@@ -260,6 +361,7 @@
     box-shadow: none;
     color: transparent;
   }
+
   .sb-argstableBlock th {
     padding: 10px 15px;
   }
@@ -270,35 +372,44 @@
       rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
       rgba(0, 0, 0, 0.065) 0 0 0 1px;
   }
+
   .sb-argstableBlock-body tr {
     background: transparent;
     overflow: hidden;
   }
+
   .sb-argstableBlock-body tr:not(:first-child) {
     border-top: 1px solid #e6e6e6;
   }
+
   .sb-argstableBlock-body tr:first-child td:first-child {
     border-top-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:first-child td:last-child {
     border-top-right-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:first-child {
     border-bottom-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:last-child {
     border-bottom-right-radius: 4px;
   }
+
   .sb-argstableBlock-body td {
     background: #fff;
     padding-bottom: 10px;
     padding-top: 10px;
     vertical-align: top;
   }
+
   .sb-argstableBlock-body td:not(:first-of-type) {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .sb-argstableBlock-body button {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
     animation: sb-glow 1.5s ease-in-out infinite;
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 699640debd0d..99b8350fd8cf 100644
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -78,6 +78,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@storybook/csf": "^0.1.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts
new file mode 100644
index 000000000000..c993c684768c
--- /dev/null
+++ b/code/lib/core-events/src/data/argtypes-info.ts
@@ -0,0 +1,9 @@
+import type { ArgTypes } from '@storybook/csf';
+
+export interface ArgTypesRequestPayload {
+  storyId: string;
+}
+
+export interface ArgTypesResponsePayload {
+  argTypes: ArgTypes;
+}
diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts
new file mode 100644
index 000000000000..8727d99f0c12
--- /dev/null
+++ b/code/lib/core-events/src/data/create-new-story.ts
@@ -0,0 +1,24 @@
+export interface CreateNewStoryRequestPayload {
+  // The filepath of the component for which the Story should be generated for (relative to the project root)
+  componentFilePath: string;
+  // The name of the exported component
+  componentExportName: string;
+  // is default export
+  componentIsDefaultExport: boolean;
+  // The amount of exports in the file
+  componentExportCount: number;
+}
+
+export interface CreateNewStoryResponsePayload {
+  // The story id
+  storyId: string;
+  // The story file path relative to the cwd
+  storyFilePath: string;
+  // The name of the story export in the file
+  exportedStoryName: string;
+}
+
+export type CreateNewStoryErrorPayload = {
+  type: 'STORY_FILE_EXISTS';
+  kind: string;
+};
diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts
new file mode 100644
index 000000000000..000ae3e3d4c9
--- /dev/null
+++ b/code/lib/core-events/src/data/file-component-search.ts
@@ -0,0 +1,17 @@
+export interface FileComponentSearchRequestPayload {}
+
+export interface FileComponentSearchResponsePayload {
+  files: Array<{
+    // The filepath relative to the project root
+    filepath: string;
+    // Whether a corresponding story file exists
+    storyFileExists: boolean;
+    // A list of exported components
+    exportedComponents: Array<{
+      // the name of the exported component
+      name: string;
+      // True, if the exported component is a default export
+      default: boolean;
+    }> | null;
+  }> | null;
+}
diff --git a/code/lib/core-events/src/data/request-response.ts b/code/lib/core-events/src/data/request-response.ts
new file mode 100644
index 000000000000..d2bd4b5510b8
--- /dev/null
+++ b/code/lib/core-events/src/data/request-response.ts
@@ -0,0 +1,8 @@
+export type RequestData = {
+  id: string;
+  payload: Payload;
+};
+
+export type ResponseData | void = void> =
+  | { id: string; success: true; error: null; payload: Payload }
+  | { id: string; success: false; error: string; payload?: ErrorPayload };
diff --git a/code/lib/core-events/src/data/save-story.ts b/code/lib/core-events/src/data/save-story.ts
new file mode 100644
index 000000000000..8dd4c009f044
--- /dev/null
+++ b/code/lib/core-events/src/data/save-story.ts
@@ -0,0 +1,14 @@
+export interface SaveStoryRequestPayload {
+  args: string | undefined;
+  csfId: string;
+  importPath: string;
+  name?: string;
+}
+
+export interface SaveStoryResponsePayload {
+  csfId: string;
+  newStoryId?: string;
+  newStoryName?: string;
+  sourceFileName?: string;
+  sourceStoryName?: string;
+}
diff --git a/code/lib/core-events/src/errors/message-reference.png b/code/lib/core-events/src/errors/message-reference.png
index b829f93689ea..67590fb408e2 100644
Binary files a/code/lib/core-events/src/errors/message-reference.png and b/code/lib/core-events/src/errors/message-reference.png differ
diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts
index 1f30378a3bca..ca3cdc656901 100644
--- a/code/lib/core-events/src/errors/preview-errors.ts
+++ b/code/lib/core-events/src/errors/preview-errors.ts
@@ -254,6 +254,22 @@ export class NextJsSharpError extends StorybookError {
   }
 }
 
+export class NextjsRouterMocksNotAvailable extends StorybookError {
+  readonly category = Category.FRAMEWORK_NEXTJS;
+
+  readonly code = 2;
+
+  constructor(public data: { importType: string }) {
+    super();
+  }
+
+  template() {
+    return dedent`
+      Tried to access router mocks from "${this.data.importType}" but they were not created yet. You might be running code in an unsupported environment.
+    `;
+  }
+}
+
 export class UnknownArgTypesError extends StorybookError {
   readonly category = Category.DOCS_TOOLS;
 
diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index ec6bd134be33..8ce72f12a8dd 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -73,10 +73,15 @@ enum events {
   SET_WHATS_NEW_CACHE = 'setWhatsNewCache',
   TOGGLE_WHATS_NEW_NOTIFICATIONS = 'toggleWhatsNewNotifications',
   TELEMETRY_ERROR = 'telemetryError',
-  FILE_COMPONENT_SEARCH = 'fileComponentSearch',
-  FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult',
-  CREATE_NEW_STORYFILE = 'createNewStoryfile',
-  CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult',
+
+  FILE_COMPONENT_SEARCH_REQUEST = 'fileComponentSearchRequest',
+  FILE_COMPONENT_SEARCH_RESPONSE = 'fileComponentSearchResponse',
+  SAVE_STORY_REQUEST = 'saveStoryRequest',
+  SAVE_STORY_RESPONSE = 'saveStoryResponse',
+  ARGTYPES_INFO_REQUEST = 'argtypesInfoRequest',
+  ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse',
+  CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest',
+  CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse',
 }
 
 // Enables: `import Events from ...`
@@ -88,13 +93,13 @@ export const {
   CHANNEL_WS_DISCONNECT,
   CHANNEL_CREATED,
   CONFIG_ERROR,
-  CREATE_NEW_STORYFILE,
-  CREATE_NEW_STORYFILE_RESULT,
+  CREATE_NEW_STORYFILE_REQUEST,
+  CREATE_NEW_STORYFILE_RESPONSE,
   CURRENT_STORY_WAS_SET,
   DOCS_PREPARED,
   DOCS_RENDERED,
-  FILE_COMPONENT_SEARCH,
-  FILE_COMPONENT_SEARCH_RESULT,
+  FILE_COMPONENT_SEARCH_REQUEST,
+  FILE_COMPONENT_SEARCH_RESPONSE,
   FORCE_RE_RENDER,
   FORCE_REMOUNT,
   GLOBALS_UPDATED,
@@ -135,8 +140,18 @@ export const {
   SET_WHATS_NEW_CACHE,
   TOGGLE_WHATS_NEW_NOTIFICATIONS,
   TELEMETRY_ERROR,
+  SAVE_STORY_REQUEST,
+  SAVE_STORY_RESPONSE,
+  ARGTYPES_INFO_REQUEST,
+  ARGTYPES_INFO_RESPONSE,
 } = events;
 
+export * from './data/create-new-story';
+export * from './data/file-component-search';
+export * from './data/argtypes-info';
+export * from './data/request-response';
+export * from './data/save-story';
+
 export interface WhatsNewCache {
   lastDismissedPost?: string;
   lastReadPost?: string;
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 4116c6f9daa5..7e8410113348 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -56,15 +56,16 @@
   },
   "dependencies": {
     "@aw-web-design/x-default-browser": "1.4.126",
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.4",
+    "@babel/parser": "^7.24.4",
     "@discoveryjs/json-ext": "^0.5.3",
     "@storybook/builder-manager": "workspace:*",
     "@storybook/channels": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/csf-tools": "workspace:*",
-    "@storybook/docs-mdx": "3.0.0",
+    "@storybook/docs-mdx": "3.1.0-next.0",
     "@storybook/global": "^5.0.0",
     "@storybook/manager": "workspace:*",
     "@storybook/manager-api": "workspace:*",
@@ -73,16 +74,16 @@
     "@storybook/telemetry": "workspace:*",
     "@storybook/types": "workspace:*",
     "@types/detect-port": "^1.3.0",
+    "@types/diff": "^5.0.9",
     "@types/node": "^18.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",
     "better-opn": "^3.0.2",
     "chalk": "^4.1.0",
-    "cjs-module-lexer": "^1.2.3",
     "cli-table3": "^0.6.1",
     "compression": "^1.7.4",
     "detect-port": "^1.3.0",
-    "es-module-lexer": "^1.5.0",
+    "diff": "^5.2.0",
     "express": "^4.17.3",
     "fs-extra": "^11.1.0",
     "globby": "^14.0.1",
diff --git a/code/lib/core-server/public/favicon.svg b/code/lib/core-server/public/favicon.svg
index 684ddb274574..571f90fe99aa 100644
--- a/code/lib/core-server/public/favicon.svg
+++ b/code/lib/core-server/public/favicon.svg
@@ -1,7 +1 @@
-
-  
-    
-    
-  
-  
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/code/lib/core-server/src/presets/common-manager.ts b/code/lib/core-server/src/presets/common-manager.ts
index 0564f8e00b92..bbc5432eeb31 100644
--- a/code/lib/core-server/src/presets/common-manager.ts
+++ b/code/lib/core-server/src/presets/common-manager.ts
@@ -18,7 +18,11 @@ addons.register(STATIC_FILTER, (api) => {
   );
 
   api.experimental_setFilter(STATIC_FILTER, (item) => {
-    const tags = item.tags || [];
-    return tags.filter((tag) => excludeTags[tag]).length === 0;
+    const tags = item.tags ?? [];
+    return (
+      // we can filter out the primary story, but we still want to show autodocs
+      (tags.includes('dev') || item.type === 'docs') &&
+      tags.filter((tag) => excludeTags[tag]).length === 0
+    );
   });
 });
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index f06e050f958d..0089a4a74fa7 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -1,8 +1,7 @@
-import fs, { pathExists, readFile } from 'fs-extra';
+import { pathExists, readFile } from 'fs-extra';
 import { logger } from '@storybook/node-logger';
 import { telemetry } from '@storybook/telemetry';
 import {
-  findConfigFile,
   getDirectoryFromWorkingDir,
   getPreviewBodyTemplate,
   getPreviewHeadTemplate,
@@ -17,23 +16,14 @@ import type {
   PresetPropertyFn,
   PresetProperty,
 } from '@storybook/types';
-import { printConfig, readConfig, readCsf } from '@storybook/csf-tools';
+import { readCsf } from '@storybook/csf-tools';
 import { join, dirname, isAbsolute } from 'path';
 import { dedent } from 'ts-dedent';
-import fetch from 'node-fetch';
 import type { Channel } from '@storybook/channels';
-import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
-import {
-  REQUEST_WHATS_NEW_DATA,
-  RESULT_WHATS_NEW_DATA,
-  TELEMETRY_ERROR,
-  SET_WHATS_NEW_CACHE,
-  TOGGLE_WHATS_NEW_NOTIFICATIONS,
-} from '@storybook/core-events';
-import invariant from 'tiny-invariant';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
-import { sendTelemetryError } from '../withTelemetry';
+import { initializeWhatsNew, type OptionsWithRequiredCache } from '../utils/whats-new';
+import { initializeSaveStory } from '../utils/save-story/save-story';
 import { initFileSearchChannel } from '../server-channel/file-search-channel';
 import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel';
 
@@ -98,7 +88,7 @@ export const favicon = async (
     if (flatlist.length > 1) {
       logger.warn(dedent`
         Looks like multiple favicons were detected. Using the first one.
-        
+
         ${flatlist.join(', ')}
         `);
     }
@@ -241,20 +231,6 @@ export const managerHead = async (_: any, options: Options) => {
   return '';
 };
 
-const WHATS_NEW_CACHE = 'whats-new-cache';
-const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
-
-// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
-type WhatsNewResponse = {
-  title: string;
-  url: string;
-  blogUrl?: string;
-  publishedAt: string;
-  excerpt: string;
-};
-
-type OptionsWithRequiredCache = Exclude & Required>;
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const experimental_serverChannel = async (
   channel: Channel,
@@ -262,88 +238,11 @@ export const experimental_serverChannel = async (
 ) => {
   const coreOptions = await options.presets.apply('core');
 
-  channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
-    const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
-      logger.verbose(e);
-      return {};
-    });
-    await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data });
-  });
-
-  channel.on(REQUEST_WHATS_NEW_DATA, async () => {
-    try {
-      const post = (await fetch(WHATS_NEW_URL).then(async (response) => {
-        if (response.ok) return response.json();
-        // eslint-disable-next-line @typescript-eslint/no-throw-literal
-        throw response;
-      })) as WhatsNewResponse;
-
-      const configFileName = findConfigFile('main', options.configDir);
-      if (!configFileName)
-        throw new Error(`unable to find storybook main file in ${options.configDir}`);
-      const main = await readConfig(configFileName);
-      const disableWhatsNewNotifications = main.getFieldValue([
-        'core',
-        'disableWhatsNewNotifications',
-      ]);
-
-      const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
-      const data = {
-        ...post,
-        status: 'SUCCESS',
-        postIsRead: post.url === cache.lastReadPost,
-        showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
-        disableWhatsNewNotifications,
-      } satisfies WhatsNewData;
-      channel.emit(RESULT_WHATS_NEW_DATA, { data });
-    } catch (e) {
-      logger.verbose(e instanceof Error ? e.message : String(e));
-      channel.emit(RESULT_WHATS_NEW_DATA, {
-        data: { status: 'ERROR' } satisfies WhatsNewData,
-      });
-    }
-  });
-
-  channel.on(
-    TOGGLE_WHATS_NEW_NOTIFICATIONS,
-    async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
-      const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
-      try {
-        const mainPath = findConfigFile('main', options.configDir);
-        invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
-        const main = await readConfig(mainPath);
-        main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
-        await fs.writeFile(mainPath, printConfig(main).code);
-        if (isTelemetryEnabled) {
-          await telemetry('core-config', { disableWhatsNewNotifications });
-        }
-      } catch (error) {
-        invariant(error instanceof Error);
-        if (isTelemetryEnabled) {
-          await sendTelemetryError(error, 'core-config', {
-            cliOptions: options,
-            presetOptions: { ...options, corePresets: [], overridePresets: [] },
-            skipPrompt: true,
-          });
-        }
-      }
-    }
-  );
-
-  channel.on(TELEMETRY_ERROR, async (error) => {
-    const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
-
-    if (isTelemetryEnabled) {
-      await sendTelemetryError(error, 'browser', {
-        cliOptions: options,
-        presetOptions: { ...options, corePresets: [], overridePresets: [] },
-        skipPrompt: true,
-      });
-    }
-  });
+  initializeWhatsNew(channel, options, coreOptions);
+  initializeSaveStory(channel, options, coreOptions);
 
-  initFileSearchChannel(channel, options);
-  initCreateNewStoryChannel(channel, options);
+  initFileSearchChannel(channel, options, coreOptions);
+  initCreateNewStoryChannel(channel, options, coreOptions);
 
   return channel;
 };
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
index 289756ea540b..dc3763cb2d6b 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
@@ -3,7 +3,11 @@ import { initCreateNewStoryChannel } from './create-new-story-channel';
 import path from 'path';
 import type { ChannelTransport } from '@storybook/channels';
 import { Channel } from '@storybook/channels';
-import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events';
+import type { CreateNewStoryRequestPayload, RequestData } from '@storybook/core-events';
+import {
+  CREATE_NEW_STORYFILE_REQUEST,
+  CREATE_NEW_STORYFILE_RESPONSE,
+} from '@storybook/core-events';
 
 vi.mock('@storybook/core-common', async (importOriginal) => {
   const actual = await importOriginal();
@@ -42,27 +46,34 @@ describe('createNewStoryChannel', () => {
 
   describe('initCreateNewStoryChannel', () => {
     it('should emit an event with a story id', async () => {
-      mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener);
+      mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener);
       const cwd = process.cwd();
 
-      initCreateNewStoryChannel(mockChannel, {
-        configDir: path.join(cwd, '.storybook'),
-        presets: {
-          apply: (val: string) => {
-            if (val === 'framework') {
-              return Promise.resolve('@storybook/nextjs');
-            }
-            if (val === 'stories') {
-              return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
-            }
+      initCreateNewStoryChannel(
+        mockChannel,
+        {
+          configDir: path.join(cwd, '.storybook'),
+          presets: {
+            apply: (val: string) => {
+              if (val === 'framework') {
+                return Promise.resolve('@storybook/nextjs');
+              }
+              if (val === 'stories') {
+                return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+              }
+            },
           },
+        } as any,
+        { disableTelemetry: true }
+      );
+
+      mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
+        id: 'components-page--default',
+        payload: {
+          componentFilePath: 'src/components/Page.jsx',
+          componentExportName: 'Page',
+          componentIsDefaultExport: true,
         },
-      } as any);
-
-      mockChannel.emit(CREATE_NEW_STORYFILE, {
-        componentFilePath: 'src/components/Page.jsx',
-        componentExportName: 'Page',
-        componentIsDefaultExport: true,
       });
 
       await vi.waitFor(() => {
@@ -71,48 +82,59 @@ describe('createNewStoryChannel', () => {
 
       expect(createNewStoryFileEventListener).toHaveBeenCalledWith({
         error: null,
-        result: {
+        id: 'components-page--default',
+        payload: {
           storyId: 'components-page--default',
+          storyFilePath: path.join('src', 'components', 'Page.stories.jsx'),
+          exportedStoryName: 'Default',
         },
         success: true,
       });
     });
 
     it('should emit an error event if an error occurs', async () => {
-      mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener);
+      mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener);
       const cwd = process.cwd();
 
       mockFs.writeFile.mockImplementation(() => {
         throw new Error('Failed to write file');
       });
 
-      initCreateNewStoryChannel(mockChannel, {
-        configDir: path.join(cwd, '.storybook'),
-        presets: {
-          apply: (val: string) => {
-            if (val === 'framework') {
-              return Promise.resolve('@storybook/nextjs');
-            }
-            if (val === 'stories') {
-              return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
-            }
+      initCreateNewStoryChannel(
+        mockChannel,
+        {
+          configDir: path.join(cwd, '.storybook'),
+          presets: {
+            apply: (val: string) => {
+              if (val === 'framework') {
+                return Promise.resolve('@storybook/nextjs');
+              }
+              if (val === 'stories') {
+                return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+              }
+            },
           },
+        } as any,
+        { disableTelemetry: true }
+      );
+
+      mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
+        id: 'components-page--default',
+        payload: {
+          componentFilePath: 'src/components/Page.jsx',
+          componentExportName: 'Page',
+          componentIsDefaultExport: true,
+          componentExportCount: 1,
         },
-      } as any);
-
-      mockChannel.emit(CREATE_NEW_STORYFILE, {
-        componentFilePath: 'src/components/Page.jsx',
-        componentExportName: 'Page',
-        componentIsDefaultExport: true,
-      });
+      } satisfies RequestData);
 
       await vi.waitFor(() => {
         expect(createNewStoryFileEventListener).toHaveBeenCalled();
       });
 
       expect(createNewStoryFileEventListener).toHaveBeenCalledWith({
-        error: 'An error occurred while creating a new story:\nFailed to write file',
-        result: null,
+        error: 'Failed to write file',
+        id: 'components-page--default',
         success: false,
       });
     });
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
index 7546c5910a70..18d755afbd44 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
@@ -1,51 +1,99 @@
-import type { Options } from '@storybook/types';
+import type { CoreConfig, Options } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
-import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events';
+import { telemetry } from '@storybook/telemetry';
+import type {
+  CreateNewStoryErrorPayload,
+  CreateNewStoryRequestPayload,
+  CreateNewStoryResponsePayload,
+  RequestData,
+  ResponseData,
+} from '@storybook/core-events';
+import {
+  CREATE_NEW_STORYFILE_REQUEST,
+  CREATE_NEW_STORYFILE_RESPONSE,
+} from '@storybook/core-events';
 import fs from 'node:fs/promises';
-import type { NewStoryData } from '../utils/get-new-story-file';
+import { existsSync } from 'node:fs';
 import { getNewStoryFile } from '../utils/get-new-story-file';
 import { getStoryId } from '../utils/get-story-id';
+import path from 'node:path';
 
-interface CreateNewStoryPayload extends NewStoryData {}
-
-interface Result {
-  success: true | false;
-  result: null | {
-    storyId: string;
-  };
-  error: null | string;
-}
-
-export function initCreateNewStoryChannel(channel: Channel, options: Options) {
+export function initCreateNewStoryChannel(
+  channel: Channel,
+  options: Options,
+  coreOptions: CoreConfig
+) {
   /**
    * Listens for events to create a new storyfile
    */
-  channel.on(CREATE_NEW_STORYFILE, async (data: CreateNewStoryPayload) => {
-    try {
-      const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile(
-        data,
-        options
-      );
-
-      await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
-
-      const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
-
-      channel.emit(CREATE_NEW_STORYFILE_RESULT, {
-        success: true,
-        result: {
-          storyId,
-        },
-        error: null,
-      } satisfies Result);
-    } catch (e: any) {
-      channel.emit(CREATE_NEW_STORYFILE_RESULT, {
-        success: false,
-        result: null,
-        error: `An error occurred while creating a new story:\n${e?.message}`,
-      } satisfies Result);
+  channel.on(
+    CREATE_NEW_STORYFILE_REQUEST,
+    async (data: RequestData) => {
+      try {
+        const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile(
+          data.payload,
+          options
+        );
+
+        const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath);
+
+        const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
+
+        if (existsSync(storyFilePath)) {
+          channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+            success: false,
+            id: data.id,
+            payload: {
+              type: 'STORY_FILE_EXISTS',
+              kind,
+            },
+            error: `A story file already exists at ${relativeStoryFilePath}`,
+          } satisfies ResponseData);
+
+          if (!coreOptions.disableTelemetry) {
+            telemetry('create-new-story-file', {
+              success: false,
+              error: 'STORY_FILE_EXISTS',
+            });
+          }
+
+          return;
+        }
+
+        await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
+
+        channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+          success: true,
+          id: data.id,
+          payload: {
+            storyId,
+            storyFilePath: path.relative(process.cwd(), storyFilePath),
+            exportedStoryName,
+          },
+          error: null,
+        } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file', {
+            success: true,
+          });
+        }
+      } catch (e: any) {
+        channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+          success: false,
+          id: data.id,
+          error: e?.message,
+        } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          await telemetry('create-new-story-file', {
+            success: false,
+            error: e,
+          });
+        }
+      }
     }
-  });
+  );
 
   return channel;
 }
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
index e967910dd6c7..d12af10ca261 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
@@ -1,6 +1,10 @@
 import type { ChannelTransport } from '@storybook/channels';
 import { Channel } from '@storybook/channels';
-import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events';
+import type { RequestData, FileComponentSearchRequestPayload } from '@storybook/core-events';
+import {
+  FILE_COMPONENT_SEARCH_RESPONSE,
+  FILE_COMPONENT_SEARCH_REQUEST,
+} from '@storybook/core-events';
 import { beforeEach, describe, expect, vi, it } from 'vitest';
 
 import { initFileSearchChannel } from './file-search-channel';
@@ -43,12 +47,15 @@ describe('file-search-channel', () => {
   describe('initFileSearchChannel', async () => {
     it('should emit search result event with the search result', async () => {
       const mockOptions = {};
-      const data = { searchQuery: 'commonjs' };
+      const data = { searchQuery: 'es-module' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
-      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
-      mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
+      mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+        id: data.searchQuery,
+        payload: {},
+      } satisfies RequestData);
 
       mocks.searchFiles.mockImplementation(async (...args) => {
         // @ts-expect-error Ignore type issue
@@ -63,45 +70,41 @@ describe('file-search-channel', () => {
       );
 
       expect(searchResultChannelListener).toHaveBeenCalledWith({
+        id: data.searchQuery,
         error: null,
-        result: {
+        payload: {
           files: [
             {
               exportedComponents: [
                 {
                   default: false,
-                  name: './commonjs',
+                  name: 'p',
                 },
-              ],
-              filepath: 'src/commonjs-module-default.js',
-            },
-            {
-              exportedComponents: [
                 {
                   default: false,
-                  name: 'a',
+                  name: 'q',
                 },
                 {
                   default: false,
-                  name: 'b',
+                  name: 'C',
                 },
                 {
                   default: false,
-                  name: 'c',
+                  name: 'externalName',
                 },
                 {
                   default: false,
-                  name: 'd',
+                  name: 'ns',
                 },
                 {
-                  default: false,
-                  name: 'e',
+                  default: true,
+                  name: 'default',
                 },
               ],
-              filepath: 'src/commonjs-module.js',
+              filepath: 'src/es-module.js',
+              storyFileExists: true,
             },
           ],
-          searchQuery: 'commonjs',
         },
         success: true,
       });
@@ -111,10 +114,13 @@ describe('file-search-channel', () => {
       const mockOptions = {};
       const data = { searchQuery: 'no-file-for-search-query' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
-      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
-      mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
+      mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+        id: data.searchQuery,
+        payload: {},
+      } satisfies RequestData);
 
       mocks.searchFiles.mockImplementation(async (...args) => {
         // @ts-expect-error Ignore type issue
@@ -129,10 +135,10 @@ describe('file-search-channel', () => {
       );
 
       expect(searchResultChannelListener).toHaveBeenCalledWith({
+        id: data.searchQuery,
         error: null,
-        result: {
+        payload: {
           files: [],
-          searchQuery: 'no-file-for-search-query',
         },
         success: true,
       });
@@ -142,11 +148,14 @@ describe('file-search-channel', () => {
       const mockOptions = {};
       const data = { searchQuery: 'commonjs' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
-      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener);
+      mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
 
-      mockChannel.emit(FILE_COMPONENT_SEARCH, data);
+      mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+        id: data.searchQuery,
+        payload: {},
+      } satisfies RequestData);
 
       mocks.searchFiles.mockRejectedValue(new Error('ENOENT: no such file or directory'));
 
@@ -155,9 +164,9 @@ describe('file-search-channel', () => {
       });
 
       expect(searchResultChannelListener).toHaveBeenCalledWith({
+        id: data.searchQuery,
         error:
           'An error occurred while searching for components in the project.\nENOENT: no such file or directory',
-        result: null,
         success: false,
       });
     });
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts
index 3f2884867447..58e94fdfcc77 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.ts
@@ -1,4 +1,4 @@
-import type { Options, SupportedRenderers } from '@storybook/types';
+import type { CoreConfig, Options, SupportedRenderers } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
 import {
   extractProperRendererNameFromFramework,
@@ -10,97 +10,121 @@ import fs from 'fs/promises';
 
 import { getParser } from '../utils/parser';
 import { searchFiles } from '../utils/search-files';
-import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events';
-
-interface Data {
-  // A regular string or a glob pattern
-  searchQuery?: string;
-}
-
-interface SearchResult {
-  success: true | false;
-  result: null | {
-    searchQuery: string;
-    files: Array<{
-      // The filepath relative to the project root
-      filepath: string;
-      // The search query - Helps to identify the event on the frontend
-      searchQuery: string;
-      // A list of exported components
-      exportedComponents: Array<{
-        // the name of the exported component
-        name: string;
-        // True, if the exported component is a default export
-        default: boolean;
-      }>;
-    }> | null;
-  };
-  error: null | string;
-}
+import type {
+  FileComponentSearchRequestPayload,
+  FileComponentSearchResponsePayload,
+  RequestData,
+  ResponseData,
+} from '@storybook/core-events';
+import {
+  FILE_COMPONENT_SEARCH_REQUEST,
+  FILE_COMPONENT_SEARCH_RESPONSE,
+} from '@storybook/core-events';
+import { doesStoryFileExist, getStoryMetadata } from '../utils/get-new-story-file';
+import { telemetry } from '@storybook/telemetry';
 
-export function initFileSearchChannel(channel: Channel, options: Options) {
+export async function initFileSearchChannel(
+  channel: Channel,
+  options: Options,
+  coreOptions: CoreConfig
+) {
   /**
    * Listens for a search query event and searches for files in the project
    */
-  channel.on(FILE_COMPONENT_SEARCH, async (data: Data) => {
-    try {
-      const searchQuery = data?.searchQuery;
+  channel.on(
+    FILE_COMPONENT_SEARCH_REQUEST,
+    async (data: RequestData) => {
+      const searchQuery = data.id;
+      try {
+        if (!searchQuery) {
+          return;
+        }
 
-      if (!searchQuery) {
-        return;
-      }
+        const frameworkName = await getFrameworkName(options);
 
-      const frameworkName = await getFrameworkName(options);
+        const rendererName = (await extractProperRendererNameFromFramework(
+          frameworkName
+        )) as SupportedRenderers;
 
-      const rendererName = (await extractProperRendererNameFromFramework(
-        frameworkName
-      )) as SupportedRenderers;
+        const projectRoot = getProjectRoot();
 
-      const projectRoot = getProjectRoot();
+        const files = await searchFiles({
+          searchQuery,
+          cwd: projectRoot,
+        });
 
-      const files = await searchFiles({
-        searchQuery,
-        cwd: projectRoot,
-      });
+        const entries = files.map(async (file) => {
+          const parser = getParser(rendererName);
 
-      const entries = files.map(async (file) => {
-        const parser = getParser(rendererName);
+          try {
+            const content = await fs.readFile(path.join(projectRoot, file), 'utf-8');
+            const { storyFileName } = getStoryMetadata(path.join(projectRoot, file));
+            const dirname = path.dirname(file);
 
-        try {
-          const content = await fs.readFile(path.join(projectRoot, file), 'utf-8');
-          const info = await parser.parse(content);
+            const storyFileExists = doesStoryFileExist(
+              path.join(projectRoot, dirname),
+              storyFileName
+            );
 
-          return {
-            filepath: file,
-            exportedComponents: info.exports,
-          };
-        } catch (e) {
-          return {
-            filepath: file,
-            exportedComponents: null,
-          };
+            const info = await parser.parse(content);
+
+            return {
+              filepath: file,
+              exportedComponents: info.exports,
+              storyFileExists,
+            };
+          } catch (e) {
+            if (!coreOptions.disableTelemetry) {
+              telemetry('create-new-story-file-search', {
+                success: false,
+                error: `Could not parse file: ${e}`,
+              });
+            }
+
+            return {
+              filepath: file,
+              storyFileExists: false,
+              exportedComponents: null,
+            };
+          }
+        });
+
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file-search', {
+            success: true,
+            payload: {
+              fileCount: entries.length,
+            },
+          });
         }
-      });
 
-      channel.emit(FILE_COMPONENT_SEARCH_RESULT, {
-        success: true,
-        result: {
-          searchQuery,
-          files: await Promise.all(entries),
-        },
-        error: null,
-      } as SearchResult);
-    } catch (e: any) {
-      /**
-       * Emits the search result event with an error message
-       */
-      channel.emit(FILE_COMPONENT_SEARCH_RESULT, {
-        success: false,
-        result: null,
-        error: `An error occurred while searching for components in the project.\n${e?.message}`,
-      } as SearchResult);
+        channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
+          success: true,
+          id: searchQuery,
+          payload: {
+            files: await Promise.all(entries),
+          },
+          error: null,
+        } satisfies ResponseData);
+      } catch (e: any) {
+        /**
+         * Emits the search result event with an error message
+         */
+        channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
+          success: false,
+          id: searchQuery ?? '',
+          error: `An error occurred while searching for components in the project.\n${e?.message}`,
+        } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file-search', {
+            success: false,
+            error: `An error occured while searching for components: ${e}`,
+          });
+        }
+      }
     }
-  });
+  );
 
   return channel;
 }
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index ad4aafd4a26e..0e51a725470a 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -79,9 +79,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -110,8 +111,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/F.story.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "F",
                 "type": "story",
@@ -140,8 +142,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "stories",
                 "type": "story",
@@ -170,8 +173,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
-                  "story",
                 ],
                 "title": "nested/Button",
                 "type": "story",
@@ -181,7 +185,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "second-nested/G",
                 "type": "story",
@@ -210,9 +215,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -222,8 +228,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "B",
                 "type": "story",
@@ -233,8 +240,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "D",
                 "type": "story",
@@ -244,7 +252,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/first-nested/deeply/F.stories.js",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "first-nested/deeply/F",
                 "type": "story",
@@ -254,8 +263,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/H.stories.mjs",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "H",
                 "type": "story",
@@ -265,8 +275,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
-                  "story",
                 ],
                 "title": "nested/Button",
                 "type": "story",
@@ -276,7 +287,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "second-nested/G",
                 "type": "story",
@@ -310,9 +322,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -323,8 +336,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -334,8 +348,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "B",
                 "type": "story",
@@ -346,8 +361,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "D",
                 "type": "docs",
@@ -357,8 +373,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/D.stories.jsx",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "D",
                 "type": "story",
@@ -368,7 +385,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/first-nested/deeply/F.stories.js",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "first-nested/deeply/F",
                 "type": "story",
@@ -379,8 +397,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "H",
                 "type": "docs",
@@ -390,8 +409,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/H.stories.mjs",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "H",
                 "type": "story",
@@ -401,8 +421,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/nested/Button.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
-                  "story",
                 ],
                 "title": "nested/Button",
                 "type": "story",
@@ -412,7 +433,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/second-nested/G.stories.ts",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "second-nested/G",
                 "type": "story",
@@ -535,8 +557,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -549,8 +572,10 @@ describe('StoryIndexGenerator', () => {
                   "./src/B.stories.ts",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -560,8 +585,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "B",
                 "type": "story",
@@ -594,8 +620,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -608,8 +635,10 @@ describe('StoryIndexGenerator', () => {
                   "./src/B.stories.ts",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -619,8 +648,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "B",
                 "type": "story",
@@ -659,8 +689,12 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                  "component-tag",
+                  "story-tag",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -670,9 +704,11 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -703,8 +739,9 @@ describe('StoryIndexGenerator', () => {
                   "./duplicate/SecondA.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "duplicate/A",
                 "type": "docs",
@@ -714,8 +751,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./duplicate/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "duplicate/A",
                 "type": "story",
@@ -725,8 +763,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./duplicate/SecondA.stories.js",
                 "name": "Story Two",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "duplicate/A",
                 "type": "story",
@@ -773,8 +812,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -784,8 +824,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./docs-id-generation/A.stories.jsx",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -813,8 +854,11 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "component-tag",
+                  "story-tag",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -827,8 +871,11 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "component-tag",
+                  "story-tag",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -838,9 +885,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -851,8 +899,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "ComponentReference",
                 "type": "docs",
@@ -863,8 +912,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
                 "type": "docs",
@@ -875,8 +925,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "NoTitle",
                 "type": "docs",
@@ -936,8 +987,11 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "component-tag",
+                  "story-tag",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -950,8 +1004,11 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "component-tag",
+                  "story-tag",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "A",
                 "type": "docs",
@@ -961,9 +1018,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -974,8 +1032,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "ComponentReference",
                 "type": "docs",
@@ -986,8 +1045,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
                 "type": "docs",
@@ -998,8 +1058,9 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": [],
                 "tags": [
+                  "dev",
+                  "test",
                   "unattached-mdx",
-                  "docs",
                 ],
                 "title": "NoTitle",
                 "type": "docs",
@@ -1028,9 +1089,10 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/A.stories.js",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "component-tag",
                   "story-tag",
-                  "story",
                 ],
                 "title": "A",
                 "type": "story",
@@ -1040,8 +1102,9 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./src/B.stories.ts",
                 "name": "Story One",
                 "tags": [
+                  "dev",
+                  "test",
                   "autodocs",
-                  "story",
                 ],
                 "title": "B",
                 "type": "story",
@@ -1055,8 +1118,10 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -1092,8 +1157,9 @@ describe('StoryIndexGenerator', () => {
                   "./docs-id-generation/B.stories.jsx",
                 ],
                 "tags": [
+                  "dev",
+                  "test",
                   "attached-mdx",
-                  "docs",
                 ],
                 "title": "B",
                 "type": "docs",
@@ -1103,7 +1169,8 @@ describe('StoryIndexGenerator', () => {
                 "importPath": "./docs-id-generation/B.stories.jsx",
                 "name": "Story One",
                 "tags": [
-                  "story",
+                  "dev",
+                  "test",
                 ],
                 "title": "B",
                 "type": "story",
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 9f2c147c9a1f..34838d1e2eb7 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -8,21 +8,19 @@ import type {
   IndexEntry,
   StoryIndexEntry,
   DocsIndexEntry,
-  ComponentTitle,
   NormalizedStoriesSpecifier,
   DocsOptions,
   Path,
   Tag,
   StoryIndex,
-  StoryName,
   Indexer,
   StorybookConfigRaw,
 } from '@storybook/types';
 import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
 import { logger, once } from '@storybook/node-logger';
-import { getStorySortParameter } from '@storybook/csf-tools';
-import { storyNameFromExport, toId } from '@storybook/csf';
+import { getStorySortParameter, loadConfig } from '@storybook/csf-tools';
+import { storyNameFromExport, toId, combineTags } from '@storybook/csf';
 import { analyze } from '@storybook/docs-mdx';
 import dedent from 'ts-dedent';
 import { autoName } from './autoName';
@@ -55,11 +53,13 @@ export type StoryIndexGeneratorOptions = {
 
 export const AUTODOCS_TAG = 'autodocs';
 export const STORIES_MDX_TAG = 'stories-mdx';
+export const UNATTACHED_MDX_TAG = 'unattached-mdx';
+export const ATTACHED_MDX_TAG = 'attached-mdx';
 export const PLAY_FN_TAG = 'play-fn';
 
 /** Was this docs entry generated by a .mdx file? (see discussion below) */
 export function isMdxEntry({ tags }: DocsIndexEntry) {
-  return !tags?.includes(AUTODOCS_TAG) && !tags?.includes(STORIES_MDX_TAG);
+  return tags?.includes(UNATTACHED_MDX_TAG) || tags?.includes(ATTACHED_MDX_TAG);
 }
 
 const makeAbsolute = (otherImport: Path, normalizedPath: Path, workingDir: Path) =>
@@ -158,8 +158,11 @@ export class StoryIndexGenerator {
       this.specifierToCache.set(specifier, cache)
     );
 
+    const previewCode = await this.getPreviewCode();
+    const projectTags = this.getProjectTags(previewCode);
+
     // Extract stories for each file
-    await this.ensureExtracted();
+    await this.ensureExtracted({ projectTags });
   }
 
   /**
@@ -213,17 +216,23 @@ export class StoryIndexGenerator {
     return /(? {
+  async ensureExtracted({
+    projectTags,
+  }: {
+    projectTags?: Tag[];
+  }): Promise<(IndexEntry | ErrorEntry)[]> {
     // First process all the story files. Then, in a second pass,
     // process the docs files. The reason for this is that the docs
     // files may use the `` syntax, which requires
     // that the story file that contains the meta be processed first.
     await this.updateExtracted(async (specifier, absolutePath) =>
-      this.isDocsMdx(absolutePath) ? false : this.extractStories(specifier, absolutePath)
+      this.isDocsMdx(absolutePath)
+        ? false
+        : this.extractStories(specifier, absolutePath, projectTags)
     );
 
     await this.updateExtracted(async (specifier, absolutePath) =>
-      this.extractDocs(specifier, absolutePath)
+      this.extractDocs(specifier, absolutePath, projectTags)
     );
 
     return this.specifiers.flatMap((specifier) => {
@@ -260,7 +269,9 @@ export class StoryIndexGenerator {
           if (!cacheEntry || cacheEntry.type !== 'stories') return false;
 
           return !!absoluteImports.find((storyImport) =>
-            fileName.match(new RegExp(`^${storyImport}(\\.[^.]+)?$`))
+            fileName.match(
+              new RegExp(`^${storyImport.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(\\.[^.]+)?$`)
+            )
           );
         })
         .map(([_, cacheEntry]) => cacheEntry as StoriesCacheEntry)
@@ -269,7 +280,8 @@ export class StoryIndexGenerator {
 
   async extractStories(
     specifier: NormalizedStoriesSpecifier,
-    absolutePath: Path
+    absolutePath: Path,
+    projectTags: Tag[] = []
   ): Promise {
     const relativePath = path.relative(this.options.workingDir, absolutePath);
     const importPath = slash(normalizeStoryPath(relativePath));
@@ -294,7 +306,7 @@ export class StoryIndexGenerator {
         const title = input.title ?? defaultMakeTitle();
         // eslint-disable-next-line no-underscore-dangle
         const id = input.__id ?? toId(input.metaId ?? title, storyNameFromExport(input.exportName));
-        const tags = (input.tags || []).concat('story');
+        const tags = combineTags(...projectTags, ...(input.tags ?? []));
 
         return {
           type: 'story',
@@ -307,29 +319,27 @@ export class StoryIndexGenerator {
         };
       });
 
-    const { autodocs } = this.options.docs;
     // We need a docs entry attached to the CSF file if either:
-    //  a) autodocs is globally enabled
-    //  b) we have autodocs enabled for this file
-    //  c) it is a stories.mdx transpiled to CSF
+    //  a) we have autodocs enabled for this file
+    //  b) it is a stories.mdx transpiled to CSF
     const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
     const isStoriesMdx = entries.some((entry) => entry.tags.includes(STORIES_MDX_TAG));
-    const createDocEntry =
-      autodocs === true || (autodocs === 'tag' && hasAutodocsTag) || isStoriesMdx;
+    const createDocEntry = (hasAutodocsTag && this.options.docs.autodocs !== false) || isStoriesMdx;
 
     if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
       const name = this.options.docs.defaultName ?? 'Docs';
       const { metaId } = indexInputs[0];
       const { title } = entries[0];
-      const metaTags = indexInputs[0].metaTags || [];
       const id = toId(metaId ?? title, name);
+      const tags = combineTags(...projectTags, ...(indexInputs[0].tags ?? []));
+
       entries.unshift({
         id,
         title,
         name,
         importPath,
         type: 'docs',
-        tags: [...metaTags, 'docs', ...(!hasAutodocsTag && !isStoriesMdx ? [AUTODOCS_TAG] : [])],
+        tags,
         storiesImports: [],
       });
     }
@@ -345,7 +355,11 @@ export class StoryIndexGenerator {
     };
   }
 
-  async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
+  async extractDocs(
+    specifier: NormalizedStoriesSpecifier,
+    absolutePath: Path,
+    projectTags: Tag[] = []
+  ) {
     const relativePath = path.relative(this.options.workingDir, absolutePath);
     try {
       const normalizedPath = normalizeStoryPath(relativePath);
@@ -353,14 +367,7 @@ export class StoryIndexGenerator {
 
       const content = await fs.readFile(absolutePath, 'utf8');
 
-      const result: {
-        title?: ComponentTitle;
-        of?: Path;
-        name?: StoryName;
-        isTemplate?: boolean;
-        imports?: Path[];
-        tags?: Tag[];
-      } = analyze(content);
+      const result = analyze(content);
 
       // Templates are not indexed
       if (result.isTemplate) return false;
@@ -426,8 +433,16 @@ export class StoryIndexGenerator {
       const name =
         result.name ||
         (csfEntry ? autoName(importPath, csfEntry.importPath, defaultName) : defaultName);
+
       const id = toId(csfEntry?.metaId || title, name);
 
+      const tags = combineTags(
+        ...projectTags,
+        ...(csfEntry?.tags ?? []),
+        ...(result.metaTags ?? []),
+        csfEntry ? 'attached-mdx' : 'unattached-mdx'
+      );
+
       const docsEntry: DocsCacheEntry = {
         id,
         title,
@@ -435,8 +450,7 @@ export class StoryIndexGenerator {
         importPath,
         storiesImports: sortedDependencies.map((dep) => dep.entries[0].importPath),
         type: 'docs',
-        // FIXME: update this to use the index entry's metaTags once we update this to run on `IndexInputs`
-        tags: [...(result.tags || []), csfEntry ? 'attached-mdx' : 'unattached-mdx', 'docs'],
+        tags,
       };
       return docsEntry;
     } catch (err) {
@@ -525,10 +539,8 @@ export class StoryIndexGenerator {
     return betterEntry;
   }
 
-  async sortStories(entries: StoryIndex['entries']) {
+  async sortStories(entries: StoryIndex['entries'], storySortParameter: any) {
     const sortableStories = Object.values(entries);
-
-    const storySortParameter = await this.getStorySortParameter();
     const fileNameOrder = this.storyFileNames();
     sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
 
@@ -545,9 +557,12 @@ export class StoryIndexGenerator {
     if (this.lastIndex) return this.lastIndex;
     if (this.lastError) throw this.lastError;
 
+    const previewCode = await this.getPreviewCode();
+    const projectTags = this.getProjectTags(previewCode);
+
     // Extract any entries that are currently missing
     // Pull out each file's stories into a list of stories, to be composed and sorted
-    const storiesList = await this.ensureExtracted();
+    const storiesList = await this.ensureExtracted({ projectTags });
 
     try {
       const errorEntries = storiesList.filter((entry) => entry.type === 'error');
@@ -571,7 +586,10 @@ export class StoryIndexGenerator {
       });
       if (duplicateErrors.length) throw new MultipleIndexingError(duplicateErrors);
 
-      const sorted = await this.sortStories(indexEntries);
+      const sorted = await this.sortStories(
+        indexEntries,
+        previewCode && getStorySortParameter(previewCode)
+      );
 
       this.lastIndex = {
         v: 4,
@@ -587,6 +605,16 @@ export class StoryIndexGenerator {
     }
   }
 
+  invalidateAll() {
+    this.specifierToCache.forEach((cache) => {
+      Object.keys(cache).forEach((key) => {
+        cache[key] = false;
+      });
+    });
+    this.lastIndex = null;
+    this.lastError = null;
+  }
+
   invalidate(specifier: NormalizedStoriesSpecifier, importPath: Path, removed: boolean) {
     const absolutePath = slash(path.resolve(this.options.workingDir, importPath));
     const cache = this.specifierToCache.get(specifier);
@@ -631,17 +659,23 @@ export class StoryIndexGenerator {
     this.lastError = null;
   }
 
-  async getStorySortParameter() {
-    const previewFile = ['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs']
+  async getPreviewCode() {
+    const previewFile = ['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'mts']
       .map((ext) => path.join(this.options.configDir, `preview.${ext}`))
       .find((fname) => fs.existsSync(fname));
-    let storySortParameter;
-    if (previewFile) {
-      const previewCode = (await fs.readFile(previewFile, 'utf-8')).toString();
-      storySortParameter = await getStorySortParameter(previewCode);
-    }
 
-    return storySortParameter;
+    return previewFile && (await fs.readFile(previewFile, 'utf-8')).toString();
+  }
+
+  getProjectTags(previewCode?: string) {
+    let projectTags = [];
+    const defaultTags = ['dev', 'test'];
+    const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
+    if (previewCode) {
+      const projectAnnotations = loadConfig(previewCode).parse();
+      projectTags = projectAnnotations.getFieldValue(['tags']) ?? [];
+    }
+    return [...defaultTags, ...projectTags, ...extraTags];
   }
 
   // Get the story file names in "imported order"
diff --git a/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js b/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
index a1936c6719dd..a7bc19ae8ab9 100644
--- a/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
+++ b/code/lib/core-server/src/utils/__tests__/index-extraction.test.ts
@@ -70,7 +70,6 @@ describe('story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -82,7 +81,6 @@ describe('story extraction', () => {
             "name": "Another Story Name",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "Custom Title",
             "type": "story",
@@ -124,9 +122,7 @@ describe('story extraction', () => {
             "importPath": "./src/first-nested/deeply/F.stories.js",
             "metaId": undefined,
             "name": "Story One",
-            "tags": [
-              "story",
-            ],
+            "tags": [],
             "title": "F",
             "type": "story",
           },
@@ -173,7 +169,6 @@ describe('story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "F",
             "type": "story",
@@ -221,7 +216,6 @@ describe('story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -287,7 +281,6 @@ describe('story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -299,7 +292,6 @@ describe('story extraction', () => {
             "name": "Custom Name For Second Story",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "Custom Title",
             "type": "story",
@@ -311,7 +303,6 @@ describe('story extraction', () => {
             "name": "Story Three",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "Custom Title",
             "type": "story",
@@ -356,7 +347,6 @@ describe('story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -399,18 +389,6 @@ describe('docs entries from story extraction', () => {
       {
         "dependents": [],
         "entries": [
-          {
-            "id": "a--docs",
-            "importPath": "./src/A.stories.js",
-            "name": "docs",
-            "storiesImports": [],
-            "tags": [
-              "docs",
-              "autodocs",
-            ],
-            "title": "A",
-            "type": "docs",
-          },
           {
             "id": "a--story-one",
             "importPath": "./src/A.stories.js",
@@ -418,7 +396,6 @@ describe('docs entries from story extraction', () => {
             "name": "Story One",
             "tags": [
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -465,7 +442,8 @@ describe('docs entries from story extraction', () => {
             "name": "docs",
             "storiesImports": [],
             "tags": [
-              "docs",
+              "autodocs",
+              "story-tag-from-indexer",
             ],
             "title": "A",
             "type": "docs",
@@ -478,7 +456,6 @@ describe('docs entries from story extraction', () => {
             "tags": [
               "autodocs",
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -527,7 +504,6 @@ describe('docs entries from story extraction', () => {
             "tags": [
               "autodocs",
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
@@ -574,7 +550,8 @@ describe('docs entries from story extraction', () => {
             "name": "docs",
             "storiesImports": [],
             "tags": [
-              "docs",
+              "stories-mdx",
+              "story-tag-from-indexer",
             ],
             "title": "A",
             "type": "docs",
@@ -587,7 +564,6 @@ describe('docs entries from story extraction', () => {
             "tags": [
               "stories-mdx",
               "story-tag-from-indexer",
-              "story",
             ],
             "title": "A",
             "type": "story",
diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts
index 429801ad0186..91b06d9027b0 100644
--- a/code/lib/core-server/src/utils/get-new-story-file.test.ts
+++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts
@@ -17,6 +17,7 @@ describe('get-new-story-file', () => {
         componentFilePath: 'src/components/Page.tsx',
         componentExportName: 'Page',
         componentIsDefaultExport: false,
+        componentExportCount: 1,
       },
       {
         presets: {
@@ -31,7 +32,7 @@ describe('get-new-story-file', () => {
 
     expect(exportedStoryName).toBe('Default');
     expect(storyFileContent).toMatchInlineSnapshot(`
-      "import type { Meta, StoryObj } from '@storybook/nextjs';
+      "import type { Meta, StoryObj } from '@storybook/react';
 
       import { Page } from './Page';
 
@@ -54,6 +55,7 @@ describe('get-new-story-file', () => {
         componentFilePath: 'src/components/Page.jsx',
         componentExportName: 'Page',
         componentIsDefaultExport: true,
+        componentExportCount: 1,
       },
       {
         presets: {
diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts
index cfec1dd52152..32c50c2e5009 100644
--- a/code/lib/core-server/src/utils/get-new-story-file.ts
+++ b/code/lib/core-server/src/utils/get-new-story-file.ts
@@ -1,59 +1,86 @@
 import type { Options } from '@storybook/types';
-import { getFrameworkName, getProjectRoot } from '@storybook/core-common';
+import {
+  extractProperRendererNameFromFramework,
+  getFrameworkName,
+  getProjectRoot,
+  rendererPackages,
+} from '@storybook/core-common';
 import path from 'node:path';
 import fs from 'node:fs';
 import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript';
 import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript';
-
-export interface NewStoryData {
-  // The filepath of the component for which the Story should be generated for (relative to the project root)
-  componentFilePath: string;
-  // The name of the exported component
-  componentExportName: string;
-  // is default export
-  componentIsDefaultExport: boolean;
-}
+import type { CreateNewStoryRequestPayload } from '@storybook/core-events';
 
 export async function getNewStoryFile(
-  { componentFilePath, componentExportName, componentIsDefaultExport }: NewStoryData,
+  {
+    componentFilePath,
+    componentExportName,
+    componentIsDefaultExport,
+    componentExportCount,
+  }: CreateNewStoryRequestPayload,
   options: Options
 ) {
-  const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath);
   const cwd = getProjectRoot();
 
   const frameworkPackageName = await getFrameworkName(options);
+  const rendererName = await extractProperRendererNameFromFramework(frameworkPackageName);
+  const rendererPackage = Object.entries(rendererPackages).find(
+    ([, value]) => value === rendererName
+  )?.[0];
 
   const basename = path.basename(componentFilePath);
   const extension = path.extname(componentFilePath);
   const basenameWithoutExtension = basename.replace(extension, '');
   const dirname = path.dirname(componentFilePath);
 
-  const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
-  const storyFileName = `${basenameWithoutExtension}.stories.${storyFileExtension}`;
-  const alternativeStoryFileName = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
+  const { storyFileName, isTypescript, storyFileExtension } = getStoryMetadata(componentFilePath);
+  const storyFileNameWithExtension = `${storyFileName}.${storyFileExtension}`;
+  const alternativeStoryFileNameWithExtension = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
 
   const exportedStoryName = 'Default';
 
-  const storyFileContent = isTypescript
-    ? await getTypeScriptTemplateForNewStoryFile({
-        basenameWithoutExtension,
-        componentExportName,
-        componentIsDefaultExport,
-        frameworkPackageName,
-        exportedStoryName,
-      })
-    : await getJavaScriptTemplateForNewStoryFile({
-        basenameWithoutExtension,
-        componentExportName,
-        componentIsDefaultExport,
-        exportedStoryName,
-      });
-
-  const doesStoryFileExist = fs.existsSync(path.join(cwd, componentFilePath));
-
-  const storyFilePath = doesStoryFileExist
-    ? path.join(cwd, dirname, alternativeStoryFileName)
-    : path.join(cwd, dirname, storyFileName);
-
-  return { storyFilePath, exportedStoryName, storyFileContent };
+  const storyFileContent =
+    isTypescript && rendererPackage
+      ? await getTypeScriptTemplateForNewStoryFile({
+          basenameWithoutExtension,
+          componentExportName,
+          componentIsDefaultExport,
+          rendererPackage,
+          exportedStoryName,
+        })
+      : await getJavaScriptTemplateForNewStoryFile({
+          basenameWithoutExtension,
+          componentExportName,
+          componentIsDefaultExport,
+          exportedStoryName,
+        });
+
+  const storyFilePath =
+    doesStoryFileExist(path.join(cwd, dirname), storyFileName) && componentExportCount > 1
+      ? path.join(cwd, dirname, alternativeStoryFileNameWithExtension)
+      : path.join(cwd, dirname, storyFileNameWithExtension);
+
+  return { storyFilePath, exportedStoryName, storyFileContent, dirname };
 }
+
+export const getStoryMetadata = (componentFilePath: string) => {
+  const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath);
+  const basename = path.basename(componentFilePath);
+  const extension = path.extname(componentFilePath);
+  const basenameWithoutExtension = basename.replace(extension, '');
+  const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
+  return {
+    storyFileName: `${basenameWithoutExtension}.stories`,
+    storyFileExtension,
+    isTypescript,
+  };
+};
+
+export const doesStoryFileExist = (parentFolder: string, storyFileName: string) => {
+  return (
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.ts`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.tsx`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.js`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.jsx`))
+  );
+};
diff --git a/code/lib/core-server/src/utils/get-story-id.test.ts b/code/lib/core-server/src/utils/get-story-id.test.ts
index 4fb0230bc21e..243fbed6160f 100644
--- a/code/lib/core-server/src/utils/get-story-id.test.ts
+++ b/code/lib/core-server/src/utils/get-story-id.test.ts
@@ -18,9 +18,10 @@ describe('getStoryId', () => {
     const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts');
     const exportedStoryName = 'Default';
 
-    const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
+    const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
 
     expect(storyId).toBe('components-stories-page1--default');
+    expect(kind).toBe('components-stories-page1');
   });
 
   it('should throw an error if the storyId cannot be calculated', async () => {
diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts
index acfbce990853..eb73a52ae58a 100644
--- a/code/lib/core-server/src/utils/get-story-id.ts
+++ b/code/lib/core-server/src/utils/get-story-id.ts
@@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
 import dedent from 'ts-dedent';
 import { normalizeStories, normalizeStoryPath } from '@storybook/core-common';
 import path from 'path';
-import { storyNameFromExport, toId } from '@storybook/csf';
+import { sanitize, storyNameFromExport, toId } from '@storybook/csf';
 import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api';
 import { posix } from './posix';
 
@@ -31,14 +31,14 @@ export async function getStoryId(data: StoryIdData, options: Options) {
   if (autoTitle === undefined) {
     // eslint-disable-next-line local-rules/no-uncategorized-errors
     throw new Error(dedent`
-      The generation of your new Story file was successful but it seems that we are unable to index it.
-      Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration.
-      The location of the new Story file is: ${relativePath}
+    The new story file was successfully generated, but we are unable to index it. Please ensure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration.
     `);
   }
 
   const storyName = storyNameFromExport(data.exportedStoryName);
+
   const storyId = toId(autoTitle as string, storyName);
+  const kind = sanitize(autoTitle);
 
-  return storyId;
+  return { storyId, kind };
 }
diff --git a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
index f8c1bc97f615..9c2a32385db9 100644
--- a/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/getStoryIndexGenerator.ts
@@ -13,8 +13,9 @@ export async function getStoryIndexGenerator(
   serverChannel: ServerChannel
 ): Promise {
   const workingDir = process.cwd();
+  const configDir = options.configDir;
   const directories = {
-    configDir: options.configDir,
+    configDir,
     workingDir,
   };
   const stories = options.presets.apply('stories');
@@ -37,6 +38,7 @@ export async function getStoryIndexGenerator(
     normalizedStories,
     serverChannel,
     workingDir,
+    configDir,
   });
 
   return initializedStoryIndexGenerator;
diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
index f576a3d4ad2d..338b3209ce95 100644
--- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
+++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts
@@ -7,12 +7,12 @@ describe('typescript', () => {
       basenameWithoutExtension: 'foo',
       componentExportName: 'default',
       componentIsDefaultExport: true,
-      frameworkPackageName: '@storybook/nextjs',
+      rendererPackage: '@storybook/react',
       exportedStoryName: 'Default',
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "import type { Meta, StoryObj } from '@storybook/nextjs';
+      "import type { Meta, StoryObj } from '@storybook/react';
 
       import Foo from './foo';
 
@@ -33,12 +33,12 @@ describe('typescript', () => {
       basenameWithoutExtension: 'foo',
       componentExportName: 'Example',
       componentIsDefaultExport: false,
-      frameworkPackageName: '@storybook/nextjs',
+      rendererPackage: '@storybook/react',
       exportedStoryName: 'Default',
     });
 
     expect(result).toMatchInlineSnapshot(`
-      "import type { Meta, StoryObj } from '@storybook/nextjs';
+      "import type { Meta, StoryObj } from '@storybook/react';
 
       import { Example } from './foo';
 
diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts
index cb44dfdfc9c4..d2513673ebb5 100644
--- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts
+++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts
@@ -6,8 +6,8 @@ interface TypeScriptTemplateData {
   basenameWithoutExtension: string;
   componentExportName: string;
   componentIsDefaultExport: boolean;
-  /** The framework package name, e.g. @storybook/nextjs */
-  frameworkPackageName: string;
+  /** The renderer package name, e.g. @storybook/nextjs */
+  rendererPackage: string;
   /** The exported name of the default story */
   exportedStoryName: string;
 }
@@ -21,7 +21,7 @@ export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTempl
     : `import { ${importName} } from './${data.basenameWithoutExtension}'`;
 
   return dedent`
-  import type { Meta, StoryObj } from '${data.frameworkPackageName}';
+  import type { Meta, StoryObj } from '${data.rendererPackage}';
 
   ${importStatement};
 
diff --git a/code/lib/core-server/src/utils/parser/generic-parser.test.ts b/code/lib/core-server/src/utils/parser/generic-parser.test.ts
index 6d3ff96e15b0..61bba2739f72 100644
--- a/code/lib/core-server/src/utils/parser/generic-parser.test.ts
+++ b/code/lib/core-server/src/utils/parser/generic-parser.test.ts
@@ -8,34 +8,6 @@ const genericParser = new GenericParser();
 const TEST_DIR = path.join(__dirname, '..', '__search-files-tests__');
 
 describe('generic-parser', () => {
-  it('should correctly return exports from CommonJS files', async () => {
-    const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'commonjs-module.js'), 'utf-8');
-    const { exports } = await genericParser.parse(content);
-
-    expect(exports).toEqual([
-      {
-        default: false,
-        name: 'a',
-      },
-      {
-        default: false,
-        name: 'b',
-      },
-      {
-        default: false,
-        name: 'c',
-      },
-      {
-        default: false,
-        name: 'd',
-      },
-      {
-        default: false,
-        name: 'e',
-      },
-    ]);
-  });
-
   it('should correctly return exports from ES modules', async () => {
     const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'es-module.js'), 'utf-8');
     const { exports } = await genericParser.parse(content);
diff --git a/code/lib/core-server/src/utils/parser/generic-parser.ts b/code/lib/core-server/src/utils/parser/generic-parser.ts
index e297c1e92eed..e3c4754fab44 100644
--- a/code/lib/core-server/src/utils/parser/generic-parser.ts
+++ b/code/lib/core-server/src/utils/parser/generic-parser.ts
@@ -1,8 +1,7 @@
-import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer';
-import { parse as parseEs } from 'es-module-lexer';
-import assert from 'node:assert';
+import * as babelParser from '@babel/parser';
+import { types } from '@babel/core';
 
-import type { Parser } from './types';
+import type { Parser, ParserResult } from './types';
 
 /**
  * A generic parser that can parse both ES and CJS modules.
@@ -13,41 +12,109 @@ export class GenericParser implements Parser {
    * @param content The content of the file
    * @returns The exports of the file
    */
-  async parse(content: string) {
-    try {
-      // Do NOT remove await here. The types are wrong! It has to be awaited,
-      // otherwise it will return a Promise> when wasm isn't loaded.
-      const [, exports] = await parseEs(content);
+  async parse(content: string): Promise {
+    const ast = babelParser.parse(content, {
+      allowImportExportEverywhere: true,
+      allowAwaitOutsideFunction: true,
+      allowNewTargetOutsideFunction: true,
+      allowReturnOutsideFunction: true,
+      allowUndeclaredExports: true,
+      plugins: [
+        // Language features
+        'typescript',
+        'jsx',
+        // Latest ECMAScript features
+        'asyncGenerators',
+        'bigInt',
+        'classProperties',
+        'classPrivateProperties',
+        'classPrivateMethods',
+        'classStaticBlock',
+        'dynamicImport',
+        'exportNamespaceFrom',
+        'logicalAssignment',
+        'moduleStringNames',
+        'nullishCoalescingOperator',
+        'numericSeparator',
+        'objectRestSpread',
+        'optionalCatchBinding',
+        'optionalChaining',
+        'privateIn',
+        'regexpUnicodeSets',
+        'topLevelAwait',
+        // ECMAScript proposals
+        'asyncDoExpressions',
+        'decimal',
+        'decorators',
+        'decoratorAutoAccessors',
+        'deferredImportEvaluation',
+        'destructuringPrivate',
+        'doExpressions',
+        'explicitResourceManagement',
+        'exportDefaultFrom',
+        'functionBind',
+        'functionSent',
+        'importAttributes',
+        'importReflection',
+        'moduleBlocks',
+        'partialApplication',
+        'recordAndTuple',
+        'sourcePhaseImports',
+        'throwExpressions',
+      ],
+    });
 
-      assert(
-        exports.length > 0,
-        'No named exports found. Very likely that this is not a ES module.'
-      );
+    const exports: ParserResult['exports'] = [];
 
-      return {
-        exports: (exports ?? []).map((e) => {
-          const name = content.substring(e.s, e.e);
-          return {
-            name,
-            default: name === 'default',
-          };
-        }),
-      };
-      // Try to parse as CJS module
-    } catch {
-      await initCjsParser();
+    ast.program.body.forEach(function traverse(node) {
+      if (types.isExportNamedDeclaration(node)) {
+        // Handles function declarations: `export function a() {}`
+        if (
+          types.isFunctionDeclaration(node.declaration) &&
+          types.isIdentifier(node.declaration.id)
+        ) {
+          exports.push({
+            name: node.declaration.id.name,
+            default: false,
+          });
+        }
+        // Handles class declarations: `export class A {}`
+        if (types.isClassDeclaration(node.declaration) && types.isIdentifier(node.declaration.id)) {
+          exports.push({
+            name: node.declaration.id.name,
+            default: false,
+          });
+        }
+        // Handles export specifiers: `export { a }`
+        if (node.declaration === null && node.specifiers.length > 0) {
+          node.specifiers.forEach((specifier) => {
+            if (types.isExportSpecifier(specifier) && types.isIdentifier(specifier.exported)) {
+              exports.push({
+                name: specifier.exported.name,
+                default: false,
+              });
+            }
+          });
+        }
+        if (types.isVariableDeclaration(node.declaration)) {
+          node.declaration.declarations.forEach((declaration) => {
+            // Handle variable declarators: `export const a = 1;`
+            if (types.isVariableDeclarator(declaration) && types.isIdentifier(declaration.id)) {
+              exports.push({
+                name: declaration.id.name,
+                default: false,
+              });
+            }
+          });
+        }
+      } else if (types.isExportDefaultDeclaration(node)) {
+        exports.push({
+          name: 'default',
+          default: true,
+        });
+      }
+    });
 
-      const { exports, reexports } = parseCjs(content);
-      const filteredExports = [...exports, ...reexports].filter((e: string) => e !== '__esModule');
-
-      assert(filteredExports.length > 0, 'No named exports found');
-
-      return {
-        exports: (filteredExports ?? []).map((name) => ({
-          name,
-          default: name === 'default',
-        })),
-      };
-    }
+    return { exports };
   }
 }
diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts
new file mode 100644
index 000000000000..59250060f5d2
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts
@@ -0,0 +1,121 @@
+/* eslint-disable no-underscore-dangle */
+import { describe, test, expect } from 'vitest';
+import { readCsf, printCsf } from '@storybook/csf-tools';
+
+import { duplicateStoryWithNewName } from './duplicate-story-with-new-name';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { format } from 'prettier';
+import { getDiff } from './getDiff';
+
+const makeTitle = (userTitle: string) => userTitle;
+
+const FILES = {
+  csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'),
+  unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'),
+  typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'),
+};
+
+describe('success', () => {
+  test('CSF Variances', async () => {
+    const before = await format(await readFile(FILES.csfVariances, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.csfVariances, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+
+    names.forEach((name) => {
+      duplicateStoryWithNewName(parsed, name, name + 'Duplicated');
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+            canvasElement.style.backgroundColor = "red";
+          },
+        } satisfies Story;
+        
+      + export const EmptyDuplicated = {} satisfies Story;
+      + export const EmptyWithCommentDuplicated = {} satisfies Story;
+      + export const OnlyArgsDuplicated = {} satisfies Story;
+      + 
+      + export const RenderNoArgsDuplicated = {
+      +   render: (args) => ,
+      + } satisfies Story;
+      + 
+      + export const RenderArgsDuplicated = {
+      +   render: (args) => ,
+      + } satisfies Story;
+      + 
+      + export const RenderExistingArgsDuplicated = {
+      +   render: (args) => ,
+      + } satisfies Story;
+      + 
+      + export const OrderedArgsDuplicated = {
+      +   render: (args) => ,
+      + } satisfies Story;
+      + 
+      + export const HasPlayFunctionDuplicated = {
+      +   play: async ({ canvasElement }) => {
+      +     console.log("play");
+      + 
+      +     canvasElement.style.backgroundColor = "red";
+      +   },
+      + } satisfies Story;
+      + "
+    `);
+  });
+  test('Unsupported CSF Variances', async () => {
+    const CSF = await readCsf(FILES.unsupportedCsfVariances, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+
+    names.forEach((name) => {
+      expect(() => duplicateStoryWithNewName(parsed, name, name + 'Duplicated')).toThrow();
+    });
+  });
+  test('Typescript Constructs', async () => {
+    const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.typescriptConstructs, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+
+    names.forEach((name) => {
+      duplicateStoryWithNewName(parsed, name, name + 'Duplicated');
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+            initial: "bar",
+          },
+        };
+        
+      + export const CastDuplicated: Story = {};
+      + export const AsDuplicated = {} as Story;
+      + export const SatisfiesDuplicated = {} satisfies Story;
+      + export const NoneDuplicated = {};
+      + "
+    `);
+  });
+});
diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts
new file mode 100644
index 000000000000..3ab01043752d
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts
@@ -0,0 +1,54 @@
+/* eslint-disable no-underscore-dangle */
+import type { CsfFile } from '@storybook/csf-tools';
+import * as traverse from '@babel/traverse';
+import * as t from '@babel/types';
+import { SaveStoryError } from './utils';
+
+type In = ReturnType;
+
+export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newStoryName: string) => {
+  const node = csfFile._storyExports[storyName];
+  const cloned = t.cloneNode(node) as t.VariableDeclarator;
+
+  if (!cloned) {
+    throw new SaveStoryError(`cannot clone Node`);
+  }
+
+  let found = false;
+  traverse.default(cloned, {
+    Identifier(path) {
+      if (found) {
+        return;
+      }
+
+      if (path.node.name === storyName) {
+        found = true;
+        path.node.name = newStoryName;
+      }
+    },
+    ObjectProperty(path) {
+      const key = path.get('key');
+      if (key.isIdentifier() && key.node.name === 'args') {
+        path.remove();
+      }
+    },
+
+    noScope: true,
+  });
+
+  // detect CSF2 and throw
+  if (t.isArrowFunctionExpression(cloned.init) || t.isCallExpression(cloned.init)) {
+    throw new SaveStoryError(`Creating a new story based on a CSF2 story is not supported`);
+  }
+
+  traverse.default(csfFile._ast, {
+    Program(path) {
+      path.pushContainer(
+        'body',
+        t.exportNamedDeclaration(t.variableDeclaration('const', [cloned]))
+      );
+    },
+  });
+
+  return cloned;
+};
diff --git a/code/lib/core-server/src/utils/save-story/getDiff.ts b/code/lib/core-server/src/utils/save-story/getDiff.ts
new file mode 100644
index 000000000000..df3462c9ea08
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/getDiff.ts
@@ -0,0 +1,67 @@
+import { diffLines } from 'diff';
+
+/**
+ * Get a diff between two strings
+ * @param before The original string
+ * @param after The new string
+ * @returns The diff as a string
+ * @example
+ * ```ts
+ * const before = 'foo\nbar\nbaz';
+ * const after = 'foo\nbaz';
+ * const diff = getDiff(before, after);
+ * console.log(diff);
+ * //   foo
+ * // - bar
+ * //   baz
+ * ```
+ */
+export function getDiff(before: string, after: string): string {
+  const context = 4;
+  return diffLines(before, after, {})
+    .map((r, index, l) => {
+      const lines = r.value.split('\n');
+
+      if (r.removed) {
+        return r.value
+          .split('\n')
+          .map((v) => `- ${v}`)
+          .join('\n');
+      }
+      if (r.added) {
+        return r.value
+          .split('\n')
+          .map((v) => `+ ${v}`)
+          .join('\n');
+      }
+
+      if (index === 0) {
+        const sliced = lines.slice(0 - context);
+
+        if (sliced.length !== lines.length) {
+          sliced.unshift('...');
+        }
+        return sliced.map((v) => `  ${v}`).join('\n');
+      }
+
+      if (index === l.length - 1) {
+        const sliced = lines.slice(0, context);
+
+        if (sliced.length !== lines.length) {
+          sliced.push('...');
+        }
+        return sliced.map((v) => `  ${v}`).join('\n');
+      }
+
+      if (lines.length <= context * 2 + 1) {
+        return lines.map((v) => `  ${v}`).join('\n');
+      }
+      return [
+        //
+        ...lines.slice(0, context).map((v) => `  ${v}`),
+        '...',
+        ...lines.slice(0 - context).map((v) => `  ${v}`),
+      ].join('\n');
+    })
+    .join('\n');
+}
diff --git a/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx
new file mode 100644
index 000000000000..9fcbc4bd4df3
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'MyComponent',
+  args: {
+    initial: 'foo',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+  
{JSON.stringify(props)}

+);
+
+export const Empty = {} satisfies Story;
+
+export const EmptyWithComment = {
+  // this is a useless comment, to test that it is preserved
+} satisfies Story;
+
+export const OnlyArgs = {
+  args: {
+    absolute: true,
+  },
+} satisfies Story;
+
+export const RenderNoArgs = {
+  render: (args) => ,
+} satisfies Story;
+
+export const RenderArgs = {
+  args: {
+    absolute: true,
+  },
+  render: (args) => ,
+} satisfies Story;
+
+export const RenderExistingArgs = {
+  args: {
+    absolute: true,
+    bordered: true,
+    initial: 'test2',
+  },
+  render: (args) => ,
+} satisfies Story;
+
+// The order of both the properties of the story and the order or args should be preserved
+export const OrderedArgs = {
+  args: {
+    bordered: true,
+    initial: 'test2',
+    absolute: true,
+  },
+  render: (args) => ,
+} satisfies Story;
+
+// The order of both the properties of the story and the order or args should be preserved
+export const HasPlayFunction = {
+  args: {
+    bordered: true,
+    initial: 'test2',
+    absolute: true,
+  },
+  play: async ({ canvasElement }) => {
+    console.log('play');
+
+    canvasElement.style.backgroundColor = 'red';
+  },
+} satisfies Story;
diff --git a/code/lib/core-server/src/utils/save-story/mocks/data-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/data-variances.stories.tsx
new file mode 100644
index 000000000000..ea2f79bdcc3b
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/data-variances.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'MyComponent',
+  args: {
+    myString: 'foo',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{
+  myUndefined: undefined;
+  myNull: null;
+  myBoolean: boolean;
+  myString: string;
+  myNumber: number;
+  myArray: string[];
+  myArrayDeep: string[][];
+  myObject: object;
+  myFunction: () => void;
+}> = (props) => 
{JSON.stringify(props)}
;
+
+export const All = {
+  args: {
+    myArray: ['foo', 'bar'],
+    myArrayDeep: [['foo'], ['bar']],
+    myBoolean: true,
+    myFunction: () => {},
+    myNull: null,
+    myNumber: 42,
+    myObject: {
+      foo: 'bar',
+    },
+    myString: 'foo',
+    myUndefined: undefined,
+  },
+} satisfies Story;
+
+export const None = {
+  args: {},
+} satisfies Story;
diff --git a/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx
new file mode 100644
index 000000000000..7c853f484468
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'MyComponent',
+  args: {
+    initial: 'foo',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+  
{JSON.stringify(props)}

+);
+
+export const DirectExport: Story = {
+  args: {
+    initial: 'bar',
+  },
+};
+
+const BlockExport: Story = {
+  args: {
+    initial: 'bar',
+  },
+};
+
+const NotYetRenamedExport: Story = {
+  args: {
+    initial: 'bar',
+  },
+};
+
+export { BlockExport, NotYetRenamedExport as RenamedExport };
diff --git a/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx
new file mode 100644
index 000000000000..d44c95c446be
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'MyComponent',
+  args: {
+    initial: 'foo',
+  },
+} satisfies Meta;
+
+type Story = StoryObj;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+  
{JSON.stringify(props)}

+);
+
+export const Cast: Story = {
+  args: {
+    initial: 'bar',
+  },
+};
+
+export const As = {
+  args: {
+    initial: 'bar',
+  },
+} as Story;
+
+export const Satisfies = {
+  args: {
+    initial: 'bar',
+  },
+} satisfies Story;
+
+export const None = {
+  args: {
+    initial: 'bar',
+  },
+};
diff --git a/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
new file mode 100644
index 000000000000..b86095381faa
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { Meta } from '@storybook/react';
+
+export default {
+  title: 'MyComponent',
+  args: {
+    initial: 'foo',
+  },
+} satisfies Meta;
+
+// dummy component
+const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => (
+  
{JSON.stringify(props)}

+);
+
+export const CSF2 = () => ;
+
+export const CSF2b = CSF2.bind({});
diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts
new file mode 100644
index 000000000000..03e359e85c03
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/save-story.ts
@@ -0,0 +1,142 @@
+/* eslint-disable no-underscore-dangle */
+import fs from 'node:fs/promises';
+import type { Channel } from '@storybook/channels';
+import type {
+  RequestData,
+  ResponseData,
+  SaveStoryRequestPayload,
+  SaveStoryResponsePayload,
+} from '@storybook/core-events';
+import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events';
+import { storyNameFromExport, toId } from '@storybook/csf';
+import { printCsf, readCsf } from '@storybook/csf-tools';
+import { logger } from '@storybook/node-logger';
+import type { CoreConfig, Options } from '@storybook/types';
+import { telemetry } from '@storybook/telemetry';
+
+import { basename, join } from 'path';
+import { updateArgsInCsfFile } from './update-args-in-csf-file';
+import { duplicateStoryWithNewName } from './duplicate-story-with-new-name';
+import { formatFileContent } from '@storybook/core-common';
+import { SaveStoryError } from './utils';
+
+const parseArgs = (args: string): Record =>
+  JSON.parse(args, (_, value) => {
+    if (value === '__sb_empty_function_arg__') {
+      return () => {};
+    }
+    return value;
+  });
+
+// Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242
+// Only updates the part of the code for the story with the given name.
+const removeExtraNewlines = (code: string, name: string) => {
+  const anything = '(.|\r\n|\r|\n)'; // Multiline match for any character.
+  const newline = '(\r\n|\r|\n)'; // Either newlines or carriage returns may be used in the file.
+  const closing = newline + '};' + newline; // Marks the end of the story definition.
+  const regex = new RegExp(
+    // Looks for an export by the given name, considers the first closing brace on its own line
+    // to be the end of the story definition.
+    `^(?${anything}*)(?export const ${name} =${anything}+?${closing})(?${anything}*)$`
+  );
+  const { before, story, after } = code.match(regex)?.groups || {};
+  return story
+    ? before + story.replaceAll(/(\r\n|\r|\n)(\r\n|\r|\n)([ \t]*[a-z0-9_]+): /gi, '$2$3:') + after
+    : code;
+};
+
+export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) {
+  channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData) => {
+    const { csfId, importPath, args, name } = payload;
+
+    let newStoryId: string | undefined;
+    let newStoryName: string | undefined;
+    let sourceFileName: string | undefined;
+    let sourceFilePath: string | undefined;
+    let sourceStoryName: string | undefined;
+
+    try {
+      sourceFileName = basename(importPath);
+      sourceFilePath = join(process.cwd(), importPath);
+
+      const csf = await readCsf(sourceFilePath, {
+        makeTitle: (userTitle: string) => userTitle || 'myTitle',
+      });
+
+      const parsed = csf.parse();
+      const stories = Object.entries(parsed._stories);
+
+      const [componentId, storyId] = csfId.split('--');
+      newStoryName = name && storyNameFromExport(name);
+      newStoryId = newStoryName && toId(componentId, newStoryName);
+
+      const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || [];
+      if (!storyName) {
+        throw new SaveStoryError(`Source story not found.`);
+      }
+      if (name && csf.getStoryExport(name)) {
+        throw new SaveStoryError(`Story already exists.`);
+      }
+
+      sourceStoryName = storyNameFromExport(storyName);
+
+      await updateArgsInCsfFile(
+        name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName),
+        args ? parseArgs(args) : {}
+      );
+
+      const code = await formatFileContent(
+        sourceFilePath,
+        removeExtraNewlines(printCsf(csf).code, name || storyName)
+      );
+
+      // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the
+      // response until that happens, but don't wait too long.
+      await Promise.all([
+        new Promise((resolve) => {
+          channel.on(STORY_RENDERED, resolve);
+          setTimeout(() => resolve(channel.off(STORY_RENDERED, resolve)), 3000);
+        }),
+        fs.writeFile(sourceFilePath, code),
+      ]);
+
+      channel.emit(SAVE_STORY_RESPONSE, {
+        id,
+        success: true,
+        payload: {
+          csfId,
+          newStoryId,
+          newStoryName,
+          sourceFileName,
+          sourceStoryName,
+        },
+        error: null,
+      } satisfies ResponseData);
+
+      if (!coreConfig.disableTelemetry) {
+        await telemetry('save-story', {
+          action: name ? 'createStory' : 'updateStory',
+          success: true,
+        });
+      }
+    } catch (error: any) {
+      channel.emit(SAVE_STORY_RESPONSE, {
+        id,
+        success: false,
+        error: error instanceof SaveStoryError ? error.message : 'Unknown error',
+      } satisfies ResponseData);
+
+      logger.error(
+        `Error writing to ${sourceFilePath}:\n${error.stack || error.message || error.toString()}`
+      );
+
+      if (!coreConfig.disableTelemetry && !(error instanceof SaveStoryError)) {
+        await telemetry('save-story', {
+          action: name ? 'createStory' : 'updateStory',
+          success: false,
+          error,
+        });
+      }
+    }
+  });
+}
diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts
new file mode 100644
index 000000000000..8f0f2fb6b737
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts
@@ -0,0 +1,378 @@
+/* eslint-disable no-underscore-dangle */
+import { describe, test, expect } from 'vitest';
+import { readCsf, printCsf } from '@storybook/csf-tools';
+
+import { updateArgsInCsfFile } from './update-args-in-csf-file';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { format } from 'prettier';
+import { getDiff } from './getDiff';
+
+const makeTitle = (userTitle: string) => userTitle;
+
+const FILES = {
+  typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'),
+  csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'),
+  unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'),
+  exportVariances: join(__dirname, 'mocks/export-variances.stories.tsx'),
+  dataVariances: join(__dirname, 'mocks/data-variances.stories.tsx'),
+};
+
+describe('success', () => {
+  test('Typescript Constructs', async () => {
+    const newArgs = { bordered: true, initial: 'test1' };
+
+    const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.typescriptConstructs, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+    const nodes = names.map((name) => CSF.getStoryExport(name));
+
+    nodes.forEach((node) => {
+      updateArgsInCsfFile(node, newArgs);
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+        
+        export const Cast: Story = {
+          args: {
+        
+      -     initial: "bar",
+      - 
+      +     initial: "test1",
+      +     bordered: true,
+      + 
+          },
+        };
+        
+        export const As = {
+          args: {
+        
+      -     initial: "bar",
+      - 
+      +     initial: "test1",
+      +     bordered: true,
+      + 
+          },
+        } as Story;
+        
+        export const Satisfies = {
+          args: {
+        
+      -     initial: "bar",
+      - 
+      +     initial: "test1",
+      +     bordered: true,
+      + 
+          },
+        } satisfies Story;
+        
+        export const None = {
+          args: {
+        
+      -     initial: "bar",
+      - 
+      +     initial: "test1",
+      +     bordered: true,
+      + 
+          },
+        };
+        "
+    `);
+  });
+  test('Unsupported CSF Variances', async () => {
+    const newArgs = { bordered: true, initial: 'test1' };
+
+    const CSF = await readCsf(FILES.unsupportedCsfVariances, { makeTitle });
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+    const nodes = names.map((name) => CSF.getStoryExport(name));
+
+    nodes.forEach((node) => {
+      expect(() => updateArgsInCsfFile(node, newArgs)).rejects.toThrowError();
+    });
+  });
+  test('CSF Variances', async () => {
+    const newArgs = { bordered: true, initial: 'test1' };
+
+    const before = await format(await readFile(FILES.csfVariances, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.csfVariances, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+    const nodes = names.map((name) => CSF.getStoryExport(name));
+
+    nodes.forEach((node) => {
+      updateArgsInCsfFile(node, newArgs);
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    // TODO, the comment is not preserved!!!
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+          initial: string;
+        }> = (props) => 
{JSON.stringify(props)}
;
+        
+        
+      - export const Empty = {} satisfies Story;
+      - 
+      + export const Empty = {
+      +   args: {
+      +     bordered: true,
+      +     initial: "test1",
+      +   },
+      + } satisfies Story;
+      + 
+        
+        export const EmptyWithComment = {
+        
+      -   // this is a useless comment, to test that it is preserved
+      - 
+      +   args: {
+      +     bordered: true,
+      +     initial: "test1",
+      +   },
+      + 
+        } satisfies Story;
+        
+        export const OnlyArgs = {
+          args: {
+            absolute: true,
+        
+      +     bordered: true,
+      +     initial: "test1",
+      + 
+          },
+        } satisfies Story;
+        
+        export const RenderNoArgs = {
+        
+      +   args: {
+      +     bordered: true,
+      +     initial: "test1",
+      +   },
+      + 
+      + 
+          render: (args) => ,
+        } satisfies Story;
+        
+        export const RenderArgs = {
+          args: {
+            absolute: true,
+        
+      +     bordered: true,
+      +     initial: "test1",
+      + 
+          },
+          render: (args) => ,
+        } satisfies Story;
+        
+        export const RenderExistingArgs = {
+          args: {
+            absolute: true,
+            bordered: true,
+        
+      -     initial: "test2",
+      - 
+      +     initial: "test1",
+      + 
+          },
+          render: (args) => ,
+        } satisfies Story;
+        
+        // The order of both the properties of the story and the order or args should be preserved
+        export const OrderedArgs = {
+          args: {
+            bordered: true,
+        
+      -     initial: "test2",
+      - 
+      +     initial: "test1",
+      + 
+            absolute: true,
+          },
+          render: (args) => ,
+        } satisfies Story;
+      ...
+        export const HasPlayFunction = {
+          args: {
+            bordered: true,
+        
+      -     initial: "test2",
+      - 
+      +     initial: "test1",
+      + 
+            absolute: true,
+          },
+          play: async ({ canvasElement }) => {
+            console.log("play");
+        ..."
+    `);
+  });
+  test('Export Variances', async () => {
+    const newArgs = { bordered: true, initial: 'test1' };
+
+    const before = await format(await readFile(FILES.exportVariances, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.exportVariances, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+    const nodes = names.map((name) => CSF.getStoryExport(name));
+
+    nodes.forEach((node) => {
+      if (node === undefined) {
+        return;
+      }
+      updateArgsInCsfFile(node, newArgs);
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    // TODO this is incomplete due to no support for export variances in csf-tools
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+        
+        export const DirectExport: Story = {
+          args: {
+        
+      -     initial: "bar",
+      - 
+      +     initial: "test1",
+      +     bordered: true,
+      + 
+          },
+        };
+        
+        const BlockExport: Story = {
+        ..."
+    `);
+  });
+  test('Data Variances', async () => {
+    const newArgs = {
+      myArray: ['FOO', 'BAR'],
+      myArrayDeep: [['FOO'], ['BAR']],
+      myBoolean: true,
+      myFunction: () => {},
+      myNull: null,
+      myNumber: 41,
+      myObject: {
+        FOO: 'BAR',
+      },
+      myString: 'FOO',
+      myUndefined: undefined,
+    };
+
+    const before = await format(await readFile(FILES.dataVariances, 'utf-8'), {
+      parser: 'typescript',
+    });
+    const CSF = await readCsf(FILES.dataVariances, { makeTitle });
+
+    const parsed = CSF.parse();
+    const names = Object.keys(parsed._stories);
+    const nodes = names.map((name) => CSF.getStoryExport(name));
+
+    nodes.forEach((node) => {
+      if (node === undefined) {
+        return;
+      }
+      updateArgsInCsfFile(node, newArgs);
+    });
+
+    const after = await format(printCsf(parsed).code, {
+      parser: 'typescript',
+    });
+
+    // check if the code was updated at all
+    expect(after).not.toBe(before);
+
+    // check if the code was updated correctly
+    expect(getDiff(before, after)).toMatchInlineSnapshot(`
+      "  ...
+        
+        export const All = {
+          args: {
+        
+      -     myArray: ["foo", "bar"],
+      -     myArrayDeep: [["foo"], ["bar"]],
+      - 
+      +     myArray: ["FOO", "BAR"],
+      +     myArrayDeep: [["FOO"], ["BAR"]],
+      + 
+            myBoolean: true,
+            myFunction: () => {},
+            myNull: null,
+        
+      -     myNumber: 42,
+      - 
+      +     myNumber: 41,
+      + 
+            myObject: {
+        
+      -       foo: "bar",
+      - 
+      +       FOO: "BAR",
+      + 
+            },
+        
+      -     myString: "foo",
+      - 
+      +     myString: "FOO",
+      + 
+            myUndefined: undefined,
+          },
+        } satisfies Story;
+        
+        export const None = {
+        
+      -   args: {},
+      - 
+      +   args: {
+      +     myArray: ["FOO", "BAR"],
+      +     myArrayDeep: [["FOO"], ["BAR"]],
+      +     myBoolean: true,
+      +     myFunction: () => {},
+      +     myNull: null,
+      +     myNumber: 41,
+      + 
+      +     myObject: {
+      +       FOO: "BAR",
+      +     },
+      + 
+      +     myString: "FOO",
+      +     myUndefined: undefined,
+      +   },
+      + 
+        } satisfies Story;
+        "
+    `);
+  });
+});
diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts
new file mode 100644
index 000000000000..f32db42f7978
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts
@@ -0,0 +1,119 @@
+import * as t from '@babel/types';
+import * as traverse from '@babel/traverse';
+import { valueToAST } from './valueToAST';
+import { SaveStoryError } from './utils';
+
+export const updateArgsInCsfFile = async (node: t.Node, input: Record) => {
+  let found = false;
+  const args = Object.fromEntries(
+    Object.entries(input).map(([k, v]) => {
+      return [k, valueToAST(v)];
+    })
+  );
+
+  // detect CSF2 and throw
+  if (t.isArrowFunctionExpression(node) || t.isCallExpression(node)) {
+    throw new SaveStoryError(`Updating a CSF2 story is not supported`);
+  }
+
+  if (t.isObjectExpression(node)) {
+    const properties = node.properties;
+    const argsProperty = properties.find((property) => {
+      if (t.isObjectProperty(property)) {
+        const key = property.key;
+        return t.isIdentifier(key) && key.name === 'args';
+      }
+      return false;
+    });
+
+    if (argsProperty) {
+      if (t.isObjectProperty(argsProperty)) {
+        const a = argsProperty.value;
+        if (t.isObjectExpression(a)) {
+          a.properties.forEach((p) => {
+            if (t.isObjectProperty(p)) {
+              const key = p.key;
+              if (t.isIdentifier(key) && key.name in args) {
+                p.value = args[key.name];
+                delete args[key.name];
+              }
+            }
+          });
+
+          const remainder = Object.entries(args);
+          if (Object.keys(args).length) {
+            remainder.forEach(([key, value]) => {
+              a.properties.push(t.objectProperty(t.identifier(key), value));
+            });
+          }
+        }
+      }
+    } else {
+      properties.unshift(
+        t.objectProperty(
+          t.identifier('args'),
+          t.objectExpression(
+            Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
+          )
+        )
+      );
+    }
+    return;
+  }
+
+  traverse.default(node, {
+    ObjectExpression(path) {
+      if (found) {
+        return;
+      }
+
+      found = true;
+      const properties = path.get('properties');
+      const argsProperty = properties.find((property) => {
+        if (property.isObjectProperty()) {
+          const key = property.get('key');
+          return key.isIdentifier() && key.node.name === 'args';
+        }
+        return false;
+      });
+
+      if (argsProperty) {
+        if (argsProperty.isObjectProperty()) {
+          const a = argsProperty.get('value');
+          if (a.isObjectExpression()) {
+            a.traverse({
+              ObjectProperty(p) {
+                const key = p.get('key');
+                if (key.isIdentifier() && key.node.name in args) {
+                  p.get('value').replaceWith(args[key.node.name]);
+                  delete args[key.node.name];
+                }
+              },
+              // @ts-expect-error noScope works but is not typed properly
+              noScope: true,
+            });
+
+            const remainder = Object.entries(args);
+            if (Object.keys(args).length) {
+              remainder.forEach(([key, value]) => {
+                a.pushContainer('properties', t.objectProperty(t.identifier(key), value));
+              });
+            }
+          }
+        }
+      } else {
+        path.unshiftContainer(
+          'properties',
+          t.objectProperty(
+            t.identifier('args'),
+            t.objectExpression(
+              Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value))
+            )
+          )
+        );
+      }
+    },
+
+    noScope: true,
+  });
+};
diff --git a/code/lib/core-server/src/utils/save-story/utils.ts b/code/lib/core-server/src/utils/save-story/utils.ts
new file mode 100644
index 000000000000..490cd212d884
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/utils.ts
@@ -0,0 +1 @@
+export class SaveStoryError extends Error {}
diff --git a/code/lib/core-server/src/utils/save-story/valueToAST.ts b/code/lib/core-server/src/utils/save-story/valueToAST.ts
new file mode 100644
index 000000000000..f09dd7b65a64
--- /dev/null
+++ b/code/lib/core-server/src/utils/save-story/valueToAST.ts
@@ -0,0 +1,44 @@
+import * as t from '@babel/types';
+import * as babylon from '@babel/parser';
+
+export function valueToAST(literal: T): any {
+  if (literal === null) {
+    return t.nullLiteral();
+  }
+  switch (typeof literal) {
+    case 'function':
+      const ast = babylon.parse(literal.toString(), {
+        allowReturnOutsideFunction: true,
+        allowSuperOutsideMethod: true,
+      });
+
+      // @ts-expect-error (it's the contents of the function, it's an expression, trust me)
+      return ast.program.body[0]?.expression;
+
+    case 'number':
+      return t.numericLiteral(literal);
+    case 'string':
+      return t.stringLiteral(literal);
+    case 'boolean':
+      return t.booleanLiteral(literal);
+    case 'undefined':
+      return t.identifier('undefined');
+    default:
+      if (Array.isArray(literal)) {
+        return t.arrayExpression(literal.map(valueToAST));
+      }
+      return t.objectExpression(
+        Object.keys(literal)
+          .filter((k) => {
+            // @ts-expect-error (it's a completely unknown object)
+            const value = literal[k];
+            return typeof value !== 'undefined';
+          })
+          .map((k) => {
+            // @ts-expect-error (it's a completely unknown object)
+            const value = literal[k];
+            return t.objectProperty(t.stringLiteral(k), valueToAST(value));
+          })
+      );
+  }
+}
diff --git a/code/lib/core-server/src/utils/search-files.test.ts b/code/lib/core-server/src/utils/search-files.test.ts
index 6aaec136df74..c7f7ab51d388 100644
--- a/code/lib/core-server/src/utils/search-files.test.ts
+++ b/code/lib/core-server/src/utils/search-files.test.ts
@@ -66,6 +66,28 @@ describe('search-files', () => {
     expect(files).toEqual(['src/commonjs-module.js']);
   });
 
+  it('should respect glob but also the allowed file extensions', async (t) => {
+    const files = await searchFiles({
+      searchQuery: '**/*',
+      cwd: path.join(__dirname, '__search-files-tests__'),
+    });
+
+    expect(files).toEqual([
+      'src/commonjs-module-default.js',
+      'src/commonjs-module.js',
+      'src/es-module.js',
+      'src/no-export.js',
+      'src/file-extensions/extension.cjs',
+      'src/file-extensions/extension.cts',
+      'src/file-extensions/extension.js',
+      'src/file-extensions/extension.jsx',
+      'src/file-extensions/extension.mjs',
+      'src/file-extensions/extension.mts',
+      'src/file-extensions/extension.ts',
+      'src/file-extensions/extension.tsx',
+    ]);
+  });
+
   it('should ignore node_modules', async (t) => {
     const files = await searchFiles({
       searchQuery: 'file-in-common.js',
@@ -75,6 +97,15 @@ describe('search-files', () => {
     expect(files).toEqual([]);
   });
 
+  it('should ignore story files', async (t) => {
+    const files = await searchFiles({
+      searchQuery: 'es-module.stories.js',
+      cwd: path.join(__dirname, '__search-files-tests__'),
+    });
+
+    expect(files).toEqual([]);
+  });
+
   it('should not return files outside of project root', async (t) => {
     await expect(() =>
       searchFiles({
diff --git a/code/lib/core-server/src/utils/search-files.ts b/code/lib/core-server/src/utils/search-files.ts
index b6f1bd89ab25..98557584c4fa 100644
--- a/code/lib/core-server/src/utils/search-files.ts
+++ b/code/lib/core-server/src/utils/search-files.ts
@@ -3,7 +3,15 @@ export type SearchResult = Array;
 /**
  * File extensions that should be searched for
  */
-const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
+const FILE_EXTENSIONS = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
+
+const IGNORED_FILES = [
+  '**/node_modules/**',
+  '**/*.spec.*',
+  '**/*.test.*',
+  '**/*.stories.*',
+  '**/storybook-static/**',
+];
 
 /**
  * Search for files in a directory that match the search query
@@ -15,9 +23,13 @@ const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts'];
 export async function searchFiles({
   searchQuery,
   cwd,
+  ignoredFiles = IGNORED_FILES,
+  fileExtensions = FILE_EXTENSIONS,
 }: {
   searchQuery: string;
   cwd: string;
+  ignoredFiles?: string[];
+  fileExtensions?: string[];
 }): Promise {
   // Dynamically import globby because it is a pure ESM module
   const { globby, isDynamicPattern } = await import('globby');
@@ -38,11 +50,14 @@ export async function searchFiles({
         ];
 
   const entries = await globby(globbedSearchQuery, {
-    ignore: ['**/node_modules/**', '**/*.spec.*', '**/*.test.*'],
+    ignore: ignoredFiles,
     gitignore: true,
+    caseSensitiveMatch: false,
     cwd,
     objectMode: true,
   });
 
-  return entries.map((entry) => entry.path);
+  return entries
+    .map((entry) => entry.path)
+    .filter((entry) => fileExtensions.some((ext) => entry.endsWith(`.${ext}`)));
 }
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index a621f5443ce3..21a901ada040 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -75,6 +75,7 @@ describe('useStoriesJson', () => {
     send.mockClear();
     write.mockClear();
     vi.mocked(debounce).mockImplementation((cb) => cb as any);
+    Watchpack.mockClear();
   });
 
   const request: Request = {
@@ -113,8 +114,11 @@ describe('useStoriesJson', () => {
                 "./src/A.stories.js",
               ],
               "tags": [
+                "dev",
+                "test",
+                "component-tag",
+                "story-tag",
                 "attached-mdx",
-                "docs",
               ],
               "title": "A",
               "type": "docs",
@@ -127,8 +131,11 @@ describe('useStoriesJson', () => {
                 "./src/A.stories.js",
               ],
               "tags": [
+                "dev",
+                "test",
+                "component-tag",
+                "story-tag",
                 "attached-mdx",
-                "docs",
               ],
               "title": "A",
               "type": "docs",
@@ -138,9 +145,10 @@ describe('useStoriesJson', () => {
               "importPath": "./src/A.stories.js",
               "name": "Story One",
               "tags": [
+                "dev",
+                "test",
                 "component-tag",
                 "story-tag",
-                "story",
               ],
               "title": "A",
               "type": "story",
@@ -150,8 +158,9 @@ describe('useStoriesJson', () => {
               "importPath": "./src/B.stories.ts",
               "name": "Story One",
               "tags": [
+                "dev",
+                "test",
                 "autodocs",
-                "story",
               ],
               "title": "B",
               "type": "story",
@@ -161,8 +170,9 @@ describe('useStoriesJson', () => {
               "importPath": "./src/D.stories.jsx",
               "name": "Story One",
               "tags": [
+                "dev",
+                "test",
                 "autodocs",
-                "story",
               ],
               "title": "D",
               "type": "story",
@@ -173,8 +183,9 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": [],
               "tags": [
+                "dev",
+                "test",
                 "unattached-mdx",
-                "docs",
               ],
               "title": "docs2/ComponentReference",
               "type": "docs",
@@ -185,8 +196,9 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": [],
               "tags": [
+                "dev",
+                "test",
                 "unattached-mdx",
-                "docs",
               ],
               "title": "docs2/NoTitle",
               "type": "docs",
@@ -197,8 +209,9 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": [],
               "tags": [
+                "dev",
+                "test",
                 "unattached-mdx",
-                "docs",
               ],
               "title": "docs2/Yabbadabbadooo",
               "type": "docs",
@@ -208,7 +221,8 @@ describe('useStoriesJson', () => {
               "importPath": "./src/first-nested/deeply/F.stories.js",
               "name": "Story One",
               "tags": [
-                "story",
+                "dev",
+                "test",
               ],
               "title": "first-nested/deeply/F",
               "type": "story",
@@ -218,8 +232,9 @@ describe('useStoriesJson', () => {
               "importPath": "./src/H.stories.mjs",
               "name": "Story One",
               "tags": [
+                "dev",
+                "test",
                 "autodocs",
-                "story",
               ],
               "title": "H",
               "type": "story",
@@ -229,8 +244,9 @@ describe('useStoriesJson', () => {
               "importPath": "./src/nested/Button.stories.ts",
               "name": "Story One",
               "tags": [
+                "dev",
+                "test",
                 "component-tag",
-                "story",
               ],
               "title": "nested/Button",
               "type": "story",
@@ -240,7 +256,8 @@ describe('useStoriesJson', () => {
               "importPath": "./src/second-nested/G.stories.ts",
               "name": "Story One",
               "tags": [
-                "story",
+                "dev",
+                "test",
               ],
               "title": "second-nested/G",
               "type": "story",
diff --git a/code/lib/core-server/src/utils/stories-json.ts b/code/lib/core-server/src/utils/stories-json.ts
index 074c0248cb0c..71b29a54a30b 100644
--- a/code/lib/core-server/src/utils/stories-json.ts
+++ b/code/lib/core-server/src/utils/stories-json.ts
@@ -1,3 +1,4 @@
+import { basename } from 'path';
 import type { Router, Request, Response } from 'express';
 import { writeJSON } from 'fs-extra';
 
@@ -7,6 +8,7 @@ import debounce from 'lodash/debounce.js';
 import { STORY_INDEX_INVALIDATED } from '@storybook/core-events';
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
 import { watchStorySpecifiers } from './watch-story-specifiers';
+import { watchConfig } from './watchConfig';
 import type { ServerChannel } from './get-server-channel';
 
 export const DEBOUNCE = 100;
@@ -25,6 +27,7 @@ export function useStoriesJson({
   router,
   initializedStoryIndexGenerator,
   workingDir = process.cwd(),
+  configDir,
   serverChannel,
   normalizedStories,
 }: {
@@ -32,6 +35,7 @@ export function useStoriesJson({
   initializedStoryIndexGenerator: Promise;
   serverChannel: ServerChannel;
   workingDir?: string;
+  configDir?: string;
   normalizedStories: NormalizedStoriesSpecifier[];
 }) {
   const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
@@ -42,6 +46,15 @@ export function useStoriesJson({
     generator.invalidate(specifier, path, removed);
     maybeInvalidate();
   });
+  if (configDir) {
+    watchConfig(configDir, async (filePath) => {
+      if (basename(filePath).startsWith('preview')) {
+        const generator = await initializedStoryIndexGenerator;
+        generator.invalidateAll();
+        maybeInvalidate();
+      }
+    });
+  }
 
   router.use('/index.json', async (req: Request, res: Response) => {
     try {
diff --git a/code/lib/core-server/src/utils/summarizeIndex.test.ts b/code/lib/core-server/src/utils/summarizeIndex.test.ts
index 8647c007463b..a2702a38a704 100644
--- a/code/lib/core-server/src/utils/summarizeIndex.test.ts
+++ b/code/lib/core-server/src/utils/summarizeIndex.test.ts
@@ -457,7 +457,7 @@ describe('summarizeIndex', () => {
             importPath: './template-stories/addons/docs/docs2/NoTitle.mdx',
             storiesImports: [],
             type: 'docs',
-            tags: ['docs'],
+            tags: ['docs', 'attached-mdx'],
           },
           'addons-docs-yabbadabbadooo--docs': {
             id: 'addons-docs-yabbadabbadooo--docs',
@@ -466,7 +466,7 @@ describe('summarizeIndex', () => {
             importPath: './template-stories/addons/docs/docs2/Title.mdx',
             storiesImports: [],
             type: 'docs',
-            tags: ['docs'],
+            tags: ['docs', 'attached-mdx'],
           },
         },
       })
diff --git a/code/lib/core-server/src/utils/watchConfig.ts b/code/lib/core-server/src/utils/watchConfig.ts
new file mode 100644
index 000000000000..99b85fe62e2a
--- /dev/null
+++ b/code/lib/core-server/src/utils/watchConfig.ts
@@ -0,0 +1,27 @@
+import Watchpack from 'watchpack';
+import type { Path } from '@storybook/types';
+
+// copied from './watch-story-specifiers.ts'
+/** Watch the .storybook dir for changes */
+export function watchConfig(
+  configDir: Path,
+  onInvalidate: (path: Path, removed: boolean) => Promise
+) {
+  const wp = new Watchpack({
+    followSymlinks: false,
+    ignored: ['**/.git', '**/node_modules'],
+  });
+
+  wp.watch({
+    directories: [configDir],
+  });
+  wp.on('change', async (filePath: Path, mtime: Date, explanation: string) => {
+    const removed = !mtime;
+    await onInvalidate(filePath, removed);
+  });
+  wp.on('remove', async (filePath: Path, explanation: string) => {
+    await onInvalidate(filePath, true);
+  });
+
+  return () => wp.close();
+}
diff --git a/code/lib/core-server/src/utils/whats-new.ts b/code/lib/core-server/src/utils/whats-new.ts
new file mode 100644
index 000000000000..3392c93d201f
--- /dev/null
+++ b/code/lib/core-server/src/utils/whats-new.ts
@@ -0,0 +1,119 @@
+import fs from 'fs-extra';
+import { logger } from '@storybook/node-logger';
+import { telemetry } from '@storybook/telemetry';
+import { findConfigFile } from '@storybook/core-common';
+import type { CoreConfig, Options } from '@storybook/types';
+import { printConfig, readConfig } from '@storybook/csf-tools';
+import fetch from 'node-fetch';
+import type { Channel } from '@storybook/channels';
+import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
+import {
+  REQUEST_WHATS_NEW_DATA,
+  RESULT_WHATS_NEW_DATA,
+  TELEMETRY_ERROR,
+  SET_WHATS_NEW_CACHE,
+  TOGGLE_WHATS_NEW_NOTIFICATIONS,
+} from '@storybook/core-events';
+import invariant from 'tiny-invariant';
+import { sendTelemetryError } from '../withTelemetry';
+
+export type OptionsWithRequiredCache = Exclude & Required>;
+
+// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
+export type WhatsNewResponse = {
+  title: string;
+  url: string;
+  blogUrl?: string;
+  publishedAt: string;
+  excerpt: string;
+};
+
+const WHATS_NEW_CACHE = 'whats-new-cache';
+const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
+
+export function initializeWhatsNew(
+  channel: Channel,
+  options: OptionsWithRequiredCache,
+  coreOptions: CoreConfig
+) {
+  channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
+    const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
+      logger.verbose(e);
+      return {};
+    });
+    await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data });
+  });
+
+  channel.on(REQUEST_WHATS_NEW_DATA, async () => {
+    try {
+      const post = (await fetch(WHATS_NEW_URL).then(async (response) => {
+        if (response.ok) return response.json();
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw response;
+      })) as WhatsNewResponse;
+
+      const configFileName = findConfigFile('main', options.configDir);
+      if (!configFileName) {
+        throw new Error(`unable to find storybook main file in ${options.configDir}`);
+      }
+      const main = await readConfig(configFileName);
+      const disableWhatsNewNotifications = main.getFieldValue([
+        'core',
+        'disableWhatsNewNotifications',
+      ]);
+
+      const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
+      const data = {
+        ...post,
+        status: 'SUCCESS',
+        postIsRead: post.url === cache.lastReadPost,
+        showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
+        disableWhatsNewNotifications,
+      } satisfies WhatsNewData;
+      channel.emit(RESULT_WHATS_NEW_DATA, { data });
+    } catch (e) {
+      logger.verbose(e instanceof Error ? e.message : String(e));
+      channel.emit(RESULT_WHATS_NEW_DATA, {
+        data: { status: 'ERROR' } satisfies WhatsNewData,
+      });
+    }
+  });
+
+  channel.on(
+    TOGGLE_WHATS_NEW_NOTIFICATIONS,
+    async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
+      const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
+      try {
+        const mainPath = findConfigFile('main', options.configDir);
+        invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
+        const main = await readConfig(mainPath);
+        main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
+        await fs.writeFile(mainPath, printConfig(main).code);
+        if (isTelemetryEnabled) {
+          await telemetry('core-config', { disableWhatsNewNotifications });
+        }
+      } catch (error) {
+        invariant(error instanceof Error);
+        if (isTelemetryEnabled) {
+          await sendTelemetryError(error, 'core-config', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+            skipPrompt: true,
+          });
+        }
+      }
+    }
+  );
+
+  channel.on(TELEMETRY_ERROR, async (error) => {
+    const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
+
+    if (isTelemetryEnabled) {
+      await sendTelemetryError(error, 'browser', {
+        cliOptions: options,
+        presetOptions: { ...options, corePresets: [], overridePresets: [] },
+        skipPrompt: true,
+      });
+    }
+  });
+}
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 48b4c79c4d48..0fcb906c7fda 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 2635decf0e3a..3a5b3fc5fac4 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 430b347c2451..eebba4d5912b 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
@@ -42,11 +42,11 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/generator": "^7.23.0",
-    "@babel/parser": "^7.23.0",
-    "@babel/traverse": "^7.23.2",
-    "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.4",
+    "@babel/generator": "^7.24.4",
+    "@babel/parser": "^7.24.4",
+    "@babel/traverse": "^7.24.1",
+    "@babel/types": "^7.24.0",
+    "@storybook/csf": "^0.1.7",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.5",
diff --git a/code/lib/csf-tools/src/CsfFile.test.ts b/code/lib/csf-tools/src/CsfFile.test.ts
index 21e902cce52f..669109d268ac 100644
--- a/code/lib/csf-tools/src/CsfFile.test.ts
+++ b/code/lib/csf-tools/src/CsfFile.test.ts
@@ -1104,8 +1104,6 @@ describe('CsfFile', () => {
             - component-tag
             - story-tag
             - play-fn
-          metaTags: &ref_0
-            - component-tag
           __id: component-id--a
         - type: story
           importPath: foo/bar.stories.js
@@ -1117,7 +1115,6 @@ describe('CsfFile', () => {
             - component-tag
             - story-tag
             - play-fn
-          metaTags: *ref_0
           __id: component-id--b
       `);
     });
@@ -1147,8 +1144,6 @@ describe('CsfFile', () => {
           metaId: component-id
           tags:
             - component-tag
-          metaTags:
-            - component-tag
           __id: custom-story-id
       `);
     });
@@ -1177,13 +1172,11 @@ describe('CsfFile', () => {
           tags:
             - component-tag
             - component-tag-dup
+            - component-tag-dup
             - inherit-tag-dup
             - story-tag
             - story-tag-dup
-          metaTags:
-            - component-tag
-            - component-tag-dup
-            - component-tag-dup
+            - story-tag-dup
             - inherit-tag-dup
           __id: custom-foo-title--a
       `);
diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
index 4516a293b1cc..cac931501eec 100644
--- a/code/lib/csf-tools/src/CsfFile.ts
+++ b/code/lib/csf-tools/src/CsfFile.ts
@@ -557,9 +557,10 @@ export class CsfFile {
         Either add the fileName option when creating the CsfFile instance, or create the index inputs manually.`
       );
     }
+
     return Object.entries(this._stories).map(([exportName, story]) => {
-      // combine meta and story tags, removing any duplicates
-      const tags = Array.from(new Set([...(this._meta?.tags ?? []), ...(story.tags ?? [])]));
+      // don't remove any duplicates or negations -- tags will be combined in the index
+      const tags = [...(this._meta?.tags ?? []), ...(story.tags ?? [])];
       return {
         type: 'story',
         importPath: this._fileName,
@@ -568,7 +569,6 @@ export class CsfFile {
         title: this.meta?.title,
         metaId: this.meta?.id,
         tags,
-        metaTags: this.meta?.tags,
         __id: story.id,
       };
     });
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index 087113cd0229..3a3fa0f79c70 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
@@ -54,7 +54,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.24.1",
     "babel-plugin-react-docgen": "4.2.1",
     "require-from-string": "^2.0.2",
     "typescript": "^5.3.2"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 48fc836d9fdf..e03672d92b1c 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index 28893f10f5c7..3c976d5bd9dc 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",
diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index fbb8b74a6420..4e946fa5d618 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -69,6 +69,7 @@ import type { ModuleFn } from './lib/types';
 
 import { types } from './lib/addons';
 
+export * from './lib/request-response';
 export * from './lib/shortcut';
 
 const { ActiveTabs } = layout;
@@ -478,11 +479,13 @@ export function useAddonState(addonId: string, defaultState?: S) {
   return useSharedState(addonId, defaultState);
 }
 
-export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void] {
+export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void, Args] {
   const { getCurrentStoryData, updateStoryArgs, resetStoryArgs } = useStorybookApi();
 
   const data = getCurrentStoryData();
   const args = data?.type === 'story' ? data.args : {};
+  const initialArgs = data?.type === 'story' ? data.initialArgs : {};
+
   const updateArgs = useCallback(
     (newArgs: Args) => updateStoryArgs(data as API_StoryEntry, newArgs),
     [data, updateStoryArgs]
@@ -492,7 +495,7 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[])
     [data, resetStoryArgs]
   );
 
-  return [args!, updateArgs, resetArgs];
+  return [args!, updateArgs, resetArgs, initialArgs!];
 }
 
 export function useGlobals(): [Args, (newGlobals: Args) => void] {
diff --git a/code/lib/manager-api/src/lib/request-response.ts b/code/lib/manager-api/src/lib/request-response.ts
new file mode 100644
index 000000000000..bed05f576461
--- /dev/null
+++ b/code/lib/manager-api/src/lib/request-response.ts
@@ -0,0 +1,51 @@
+import type { Channel } from '@storybook/channels';
+import type { RequestData, ResponseData } from '@storybook/core-events';
+
+export class RequestResponseError | void> extends Error {
+  payload: Payload | undefined = undefined;
+
+  constructor(message: string, payload?: Payload) {
+    super(message);
+    this.payload = payload;
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_requestResponse = <
+  RequestPayload,
+  ResponsePayload = void,
+  CreateNewStoryErrorPayload extends Record | void = void,
+>(
+  channel: Channel,
+  requestEvent: string,
+  responseEvent: string,
+  payload: RequestPayload,
+  timeout = 5000
+): Promise => {
+  let timeoutId: NodeJS.Timeout;
+
+  return new Promise((resolve, reject) => {
+    const request: RequestData = {
+      id: Math.random().toString(16).slice(2),
+      payload,
+    };
+
+    const responseHandler = (
+      response: ResponseData
+    ) => {
+      if (response.id !== request.id) return;
+      clearTimeout(timeoutId);
+      channel.off(responseEvent, responseHandler);
+      if (response.success) resolve(response.payload);
+      else reject(new RequestResponseError(response.error, response.payload));
+    };
+
+    channel.emit(requestEvent, request);
+    channel.on(responseEvent, responseHandler);
+
+    timeoutId = setTimeout(() => {
+      channel.off(responseEvent, responseHandler);
+      reject(new RequestResponseError('Timed out waiting for response'));
+    }, timeout);
+  });
+};
diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts
index 78c3307f179f..19ea80ce41f4 100644
--- a/code/lib/manager-api/src/modules/stories.ts
+++ b/code/lib/manager-api/src/modules/stories.ts
@@ -648,17 +648,20 @@ export const init: ModuleFn = ({
       }
     },
     experimental_setFilter: async (id, filterFunction) => {
-      const { internal_index: index } = store.getState();
       await store.setState({ filters: { ...store.getState().filters, [id]: filterFunction } });
 
-      if (index) {
-        await api.setIndex(index);
+      const { internal_index: index } = store.getState();
 
-        const refs = await fullAPI.getRefs();
-        Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => {
-          fullAPI.setRef(refId, { ...ref, storyIndex: internal_index }, true);
-        });
+      if (!index) {
+        return;
       }
+      // apply new filters by setting the index again
+      await api.setIndex(index);
+
+      const refs = await fullAPI.getRefs();
+      Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => {
+        fullAPI.setRef(refId, { ...ref, storyIndex: internal_index }, true);
+      });
     },
   };
 
@@ -879,6 +882,7 @@ export const init: ModuleFn = ({
     },
     init: async () => {
       provider.channel?.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex());
+
       await api.fetchIndex();
     },
   };
diff --git a/code/lib/manager-api/src/modules/versions.ts b/code/lib/manager-api/src/modules/versions.ts
index a414c07fe073..8305523f2f0d 100644
--- a/code/lib/manager-api/src/modules/versions.ts
+++ b/code/lib/manager-api/src/modules/versions.ts
@@ -109,7 +109,7 @@ export const init: ModuleFn = ({ store }) => {
       }
 
       if (renderer && typeof global.STORYBOOK_RENDERER !== 'undefined') {
-        const rendererName = (global.STORYBOOK_RENDERER as string).split('/').pop()?.toLowerCase();
+        const rendererName = global.STORYBOOK_RENDERER as string;
 
         if (rendererName) {
           url += `?renderer=${normalizeRendererName(rendererName)}`;
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index d7314740b1ba..7568ea2f301e 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '8.1.0-alpha.7';
+export const version = '8.2.0-alpha.1';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index edded56bf9c1..2135331ce405 100644
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 48bb90cfb6b0..88a8402be3a2 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "workspace:*",
     "@types/qs": "^6.9.5",
diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
new file mode 100644
index 000000000000..41363ff5c566
--- /dev/null
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import AnsiToHtml from 'ansi-to-html';
+import dedent from 'ts-dedent';
+
+const ansiConverter = new AnsiToHtml({
+  escapeXML: true,
+});
+
+const Component = ({ id, header, detail }: any) => {
+  const element = document.querySelector('.' + id);
+  if (!element) {
+    throw new Error('Element not found');
+  }
+
+  if (header) {
+    document.getElementById('error-message')!.innerHTML = ansiConverter.toHtml(header);
+  }
+
+  if (detail) {
+    document.getElementById('error-stack')!.innerHTML = ansiConverter.toHtml(detail);
+  }
+
+  // remove the ids, otherwise chromatic will assume the story failed to render
+  const content = element.outerHTML.replace('error-message', '').replace('error-stack', '');
+
+  // remove the content, otherwise chromatic will assume the story failed to render
+  document.getElementById('error-message')!.innerHTML = '';
+  document.getElementById('error-stack')!.innerHTML = '';
+
+  return (
+    

+  );
+};
+
+export default {
+  component: Component,
+  parameters: {
+    layout: 'fullscreen',
+    theme: 'light',
+  },
+  title: 'Errors',
+  args: {
+    id: 'sb-errordisplay',
+  },
+};
+
+export const MyError = {
+  args: {
+    header: `FAIL is not defined`,
+    detail: dedent`
+      ReferenceError: FAIL is not defined
+        at Constraint.execute (the-best-file.js:525:2)
+        at Constraint.recalculate (the-best-file.js:424:21)
+        at Planner.addPropagate (the-best-file.js:701:6)
+        at Constraint.satisfy (the-best-file.js:184:15)
+        at Planner.incrementalAdd (the-best-file.js:591:21)
+        at Constraint.addConstraint (the-best-file.js:162:10)
+        at Constraint.BinaryConstraint (the-best-file.js:346:7)
+        at Constraint.EqualityConstraint (the-best-file.js:515:38)
+        at chainTest (the-best-file.js:807:6)
+        at deltaBlue (the-best-file.js:879:2)`,
+  },
+};
+
+export const Missing = {
+  args: {
+    id: 'sb-nopreview',
+  },
+};
diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
index 29ea71045949..ee4524c32ecf 100644
--- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx
+++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
@@ -1,6 +1,14 @@
 import { global } from '@storybook/global';
 import { deprecate, logger } from '@storybook/client-logger';
+import type {
+  ArgTypesRequestPayload,
+  ArgTypesResponsePayload,
+  RequestData,
+  ResponseData,
+} from '@storybook/core-events';
 import {
+  ARGTYPES_INFO_REQUEST,
+  ARGTYPES_INFO_RESPONSE,
   CONFIG_ERROR,
   FORCE_REMOUNT,
   FORCE_RE_RENDER,
@@ -129,6 +137,7 @@ export class Preview {
     this.channel.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
     this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
     this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
+    this.channel.on(ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.bind(this));
     this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
     this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
     this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
@@ -295,6 +304,25 @@ export class Preview {
     });
   }
 
+  async onRequestArgTypesInfo({ id, payload }: RequestData) {
+    try {
+      await this.storeInitializationPromise;
+      const story = await this.storyStoreValue?.loadStory(payload);
+      this.channel.emit(ARGTYPES_INFO_RESPONSE, {
+        id,
+        success: true,
+        payload: { argTypes: story?.argTypes || {} },
+        error: null,
+      } satisfies ResponseData);
+    } catch (e: any) {
+      this.channel.emit(ARGTYPES_INFO_RESPONSE, {
+        id,
+        success: false,
+        error: e?.message,
+      } satisfies ResponseData);
+    }
+  }
+
   async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) {
     if (!this.storyStoreValue)
       throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onResetArgs' });
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
index 024e4f6bbda8..0ba45568789d 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
@@ -911,64 +911,74 @@ describe('PreviewWeb', () => {
     });
 
     describe('while story is still rendering', () => {
-      it('runs loaders again', async () => {
+      it('runs loaders again after renderToCanvas is done', async () => {
+        // Arrange - set up a gate to control when the loaders run
         const [loadersRanGate, openLoadersRanGate] = createGate();
         const [blockLoadersGate, openBlockLoadersGate] = createGate();
 
         document.location.search = '?id=component-one--a';
-        componentOneExports.default.loaders[0].mockImplementationOnce(async () => {
+        componentOneExports.default.loaders[0].mockImplementationOnce(async (input) => {
           openLoadersRanGate();
           return blockLoadersGate;
         });
 
+        // Act - render the first time
         await new PreviewWeb(importFn, getProjectAnnotations).ready();
         await loadersRanGate;
 
+        // Assert - loader to be called the first time
+        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce();
         expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
           expect.objectContaining({
             args: { foo: 'a', one: 'mapped-1' },
           })
         );
 
-        componentOneExports.default.loaders[0].mockClear();
+        // Act - update the args (while loader is still running)
         emitter.emit(UPDATE_STORY_ARGS, {
           storyId: 'component-one--a',
           updatedArgs: { new: 'arg' },
         });
-        await waitForRender();
 
-        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
-          expect.objectContaining({
-            args: { foo: 'a', new: 'arg', one: 'mapped-1' },
-          })
-        );
+        // Arrange - open the gate to let the loader finish and wait for render
+        openBlockLoadersGate({ l: 8 });
+        await waitForRender();
 
-        // Story gets rendered with updated args
-        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+        // Assert - renderToCanvas to be called the first time with initial args
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledOnce();
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
-            forceRemount: true, // Wasn't yet rendered so we need to force remount
+            forceRemount: true,
             storyContext: expect.objectContaining({
-              loaded: { l: 7 }, // This is the value returned by the *second* loader call
+              loaded: { l: 8 }, // This is the value returned by the *first* loader call
               args: { foo: 'a', new: 'arg', one: 'mapped-1' },
             }),
           }),
           'story-element'
         );
+        // Assert - loaders are not run again yet
+        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce();
 
-        // Now let the first loader call resolve
+        // Arrange - wait for loading and rendering to finish a second time
         mockChannel.emit.mockClear();
-        projectAnnotations.renderToCanvas.mockClear();
-        openBlockLoadersGate({ l: 8 });
         await waitForRender();
+        // Assert - loader is called a second time with updated args
+        await vi.waitFor(() => {
+          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+          expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(
+            expect.objectContaining({
+              args: { foo: 'a', new: 'arg', one: 'mapped-1' },
+            })
+          );
+        });
 
-        // Now the first call comes through, but picks up the new args
-        // Note this isn't a particularly realistic case (the second loader being quicker than the first)
-        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
+        // Assert - renderToCanvas is called a second time with updated args
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
+            forceRemount: false,
             storyContext: expect.objectContaining({
-              loaded: { l: 8 },
+              loaded: { l: 7 }, // This is the value returned by the *second* loader call
               args: { foo: 'a', new: 'arg', one: 'mapped-1' },
             }),
           }),
@@ -976,7 +986,7 @@ describe('PreviewWeb', () => {
         );
       });
 
-      it('renders a second time if renderToCanvas is running', async () => {
+      it('renders a second time after the already running renderToCanvas is done', async () => {
         const [gate, openGate] = createGate();
 
         document.location.search = '?id=component-one--a';
@@ -990,11 +1000,9 @@ describe('PreviewWeb', () => {
           updatedArgs: { new: 'arg' },
         });
 
-        // Now let the renderToCanvas call resolve
+        // Now let the first renderToCanvas call resolve
         openGate();
-        await waitForRender();
-
-        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: true,
@@ -1005,39 +1013,14 @@ describe('PreviewWeb', () => {
           }),
           'story-element'
         );
-        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
-          expect.objectContaining({
-            forceRemount: false,
-            storyContext: expect.objectContaining({
-              loaded: { l: 7 },
-              args: { foo: 'a', new: 'arg', one: 'mapped-1' },
-            }),
-          }),
-          'story-element'
-        );
-      });
 
-      it('works if it is called directly from inside non async renderToCanvas', async () => {
-        document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToCanvas.mockImplementation(() => {
-          emitter.emit(UPDATE_STORY_ARGS, {
-            storyId: 'component-one--a',
-            updatedArgs: { new: 'arg' },
-          });
-        });
-        await createAndRenderPreview();
+        // Wait for the second render to finish
+        mockChannel.emit.mockClear();
+        await waitForRender();
+        await waitForRenderPhase('rendering');
 
+        // Expect the second render to have the updated args
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
-        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
-          expect.objectContaining({
-            forceRemount: true,
-            storyContext: expect.objectContaining({
-              loaded: { l: 7 },
-              args: { foo: 'a', one: 'mapped-1' },
-            }),
-          }),
-          'story-element'
-        );
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({
             forceRemount: false,
@@ -1506,6 +1489,9 @@ describe('PreviewWeb', () => {
       openGate();
       await waitForRenderPhase('aborted');
 
+      // allow teardown to complete its retries
+      vi.runOnlyPendingTimers();
+
       await waitForRenderPhase('rendering');
       expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2);
 
@@ -2145,39 +2131,6 @@ describe('PreviewWeb', () => {
           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';
-          await new PreviewWeb(importFn, getProjectAnnotations).ready();
-          await waitForRenderPhase('loading');
-
-          emitter.emit(SET_CURRENT_STORY, {
-            storyId: 'component-one--b',
-            viewMode: 'story',
-          });
-          await waitForSetCurrentStory();
-          await waitForRender();
-
-          // Now let the loader resolve
-          openGate({ l: 8 });
-          await waitForRender();
-
-          // Story gets rendered with updated args
-          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1);
-          expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
-            expect.objectContaining({
-              forceRemount: true,
-              storyContext: expect.objectContaining({
-                id: 'component-one--b',
-                loaded: { l: 7 },
-              }),
-            }),
-            'story-element'
-          );
-        });
-
         it('aborts render for initial story', async () => {
           const [gate, openGate] = createGate();
 
@@ -2735,6 +2688,60 @@ describe('PreviewWeb', () => {
       });
     });
 
+    describe('if called twice simultaneously', () => {
+      it('does not get renders confused', async () => {
+        const [blockImportFnGate, openBlockImportFnGate] = createGate();
+        const [importFnCalledGate, openImportFnCalledGate] = createGate();
+        const newImportFn = vi.fn(async (path) => {
+          openImportFnCalledGate();
+          await blockImportFnGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await importFnCalledGate;
+        preview.onStoriesChanged({ importFn });
+
+        openBlockImportFnGate();
+        await waitForRender();
+
+        expect(preview.storyRenders.length).toEqual(1);
+      });
+
+      it('renders the second importFn', async () => {
+        const [importGate, openImportGate] = createGate();
+        const [importedGate, openImportedGate] = createGate();
+        const secondImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        const thirdImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: secondImportFn });
+        await importedGate;
+        preview.onStoriesChanged({ importFn: thirdImportFn });
+
+        openImportGate();
+        await waitForRender();
+
+        expect(thirdImportFn).toHaveBeenCalled();
+      });
+    });
+
     describe('when the current story changes', () => {
       const newComponentOneExports = merge({}, componentOneExports, {
         a: { args: { foo: 'edited' } },
@@ -3618,7 +3625,8 @@ describe('PreviewWeb', () => {
             "story": "A",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -3665,7 +3673,8 @@ describe('PreviewWeb', () => {
             "story": "B",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -3690,7 +3699,8 @@ describe('PreviewWeb', () => {
             "story": "E",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -3725,7 +3735,8 @@ describe('PreviewWeb', () => {
             "story": "C",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component Two",
           },
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
index b183a7488ba9..193a5f52358a 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx
@@ -55,10 +55,11 @@ function focusInInput(event: Event) {
 export const AUTODOCS_TAG = 'autodocs';
 export const STORIES_MDX_TAG = 'stories-mdx';
 export const ATTACHED_MDX_TAG = 'attached-mdx';
+export const UNATTACHED_MDX_TAG = 'unattached-mdx';
 
 /** Was this docs entry generated by a .mdx file? (see discussion below) */
 export function isMdxEntry({ tags }: DocsIndexEntry) {
-  return !tags?.includes(AUTODOCS_TAG) && !tags?.includes(STORIES_MDX_TAG);
+  return tags?.includes(UNATTACHED_MDX_TAG) || tags?.includes(ATTACHED_MDX_TAG);
 }
 
 type PossibleRender =
@@ -352,12 +353,8 @@ export class PreviewWithSelection extends Preview, (_?: any) => void] => {
-  let openGate = (_?: any) => {};
-  const gate = new Promise((resolve) => {
+const createGate = (): [Promise, () => void] => {
+  let openGate = () => {};
+  const gate = new Promise((resolve) => {
     openGate = resolve;
   });
   return [gate, openGate];
 };
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
 
-describe('StoryRender', () => {
-  it('throws PREPARE_ABORTED if torndown during prepare', async () => {
-    const [importGate, openImportGate] = createGate();
-    const mockStore = {
-      loadStory: vi.fn(async () => {
-        await importGate;
-        return {};
-      }),
-      cleanupStory: vi.fn(),
-    };
-
-    const render = new StoryRender(
-      new Channel({}),
-      mockStore as unknown as StoryStore,
-      vi.fn(),
-      {} as any,
-      entry.id,
-      'story'
-    );
-
-    const preparePromise = render.prepare();
-
-    render.teardown();
-
-    openImportGate();
-
-    await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED);
-  });
+window.location = { reload: vi.fn() } as any;
 
+describe('StoryRender', () => {
   it('does run play function if passed autoplay=true', async () => {
     const story = {
       id: 'id',
@@ -59,6 +34,7 @@ describe('StoryRender', () => {
       name: 'name',
       tags: [],
       applyLoaders: vi.fn(),
+      applyBeforeEach: vi.fn(),
       unboundStoryFn: vi.fn(),
       playFunction: vi.fn(),
       prepareContext: vi.fn(),
@@ -66,7 +42,7 @@ describe('StoryRender', () => {
 
     const render = new StoryRender(
       new Channel({}),
-      { getStoryContext: () => ({}) } as any,
+      { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any,
       vi.fn() as any,
       {} as any,
       entry.id,
@@ -86,6 +62,7 @@ describe('StoryRender', () => {
       name: 'name',
       tags: [],
       applyLoaders: vi.fn(),
+      applyBeforeEach: vi.fn(),
       unboundStoryFn: vi.fn(),
       playFunction: vi.fn(),
       prepareContext: vi.fn(),
@@ -93,7 +70,7 @@ describe('StoryRender', () => {
 
     const render = new StoryRender(
       new Channel({}),
-      { getStoryContext: () => ({}) } as any,
+      { getStoryContext: () => ({}), addCleanupCallbacks: vi.fn() } as any,
       vi.fn() as any,
       {} as any,
       entry.id,
@@ -105,4 +82,270 @@ describe('StoryRender', () => {
     await render.renderToElement({} as any);
     expect(story.playFunction).not.toHaveBeenCalled();
   });
+
+  it('only rerenders once when triggered multiple times while pending', async () => {
+    // Arrange - setup StoryRender and async gate blocking applyLoaders
+    const [loaderGate, openLoaderGate] = createGate();
+    const story = {
+      id: 'id',
+      title: 'title',
+      name: 'name',
+      tags: [],
+      applyLoaders: vi.fn(() => loaderGate),
+      applyBeforeEach: vi.fn(),
+      unboundStoryFn: vi.fn(),
+      playFunction: vi.fn(),
+      prepareContext: vi.fn(),
+    };
+    const store = {
+      getStoryContext: () => ({}),
+      cleanupStory: vi.fn(),
+      addCleanupCallbacks: vi.fn(),
+    };
+    const renderToScreen = vi.fn();
+    const render = new StoryRender(
+      new Channel({}),
+      store as any,
+      renderToScreen,
+      {} as any,
+      entry.id,
+      'story',
+      { autoplay: true },
+      story as any
+    );
+    // Arrange - render (blocked by loaders)
+    render.renderToElement({} as any);
+    expect(story.applyLoaders).toHaveBeenCalledOnce();
+    expect(render.phase).toBe('loading');
+
+    // Act - rerender 3x
+    render.rerender();
+    render.rerender();
+    render.rerender();
+
+    // Assert - still loading, not yet rendered
+    expect(story.applyLoaders).toHaveBeenCalledOnce();
+    expect(render.phase).toBe('loading');
+    expect(renderToScreen).not.toHaveBeenCalled();
+
+    // Act - finish loading
+    openLoaderGate();
+
+    // Assert - loaded and rendered twice, played once
+    await vi.waitFor(async () => {
+      console.log(render.phase);
+      expect(story.applyLoaders).toHaveBeenCalledTimes(2);
+      expect(renderToScreen).toHaveBeenCalledTimes(2);
+      expect(story.playFunction).toHaveBeenCalledOnce();
+    });
+  });
+
+  describe('teardown', () => {
+    it('throws PREPARE_ABORTED if torndown during prepare', async () => {
+      const [importGate, openImportGate] = createGate();
+      const mockStore = {
+        loadStory: vi.fn(async () => {
+          await importGate;
+          return {};
+        }),
+        cleanupStory: vi.fn(),
+      };
+
+      const render = new StoryRender(
+        new Channel({}),
+        mockStore as unknown as StoryStore,
+        vi.fn(),
+        {} as any,
+        entry.id,
+        'story'
+      );
+
+      const preparePromise = render.prepare();
+
+      render.teardown();
+
+      openImportGate();
+
+      await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED);
+    });
+
+    it('reloads the page when tearing down during loading', async () => {
+      // Arrange - setup StoryRender and async gate blocking applyLoaders
+      const [loaderGate] = createGate();
+      const story = {
+        id: 'id',
+        title: 'title',
+        name: 'name',
+        tags: [],
+        applyLoaders: vi.fn(() => loaderGate),
+        applyBeforeEach: vi.fn(),
+        unboundStoryFn: vi.fn(),
+        playFunction: vi.fn(),
+        prepareContext: vi.fn(),
+      };
+      const store = {
+        getStoryContext: () => ({}),
+        cleanupStory: vi.fn(),
+        addCleanupCallbacks: vi.fn(),
+      };
+      const render = new StoryRender(
+        new Channel({}),
+        store as any,
+        vi.fn() as any,
+        {} as any,
+        entry.id,
+        'story',
+        { autoplay: true },
+        story as any
+      );
+
+      // Act - render (blocked by loaders), teardown
+      render.renderToElement({} as any);
+      expect(story.applyLoaders).toHaveBeenCalledOnce();
+      expect(render.phase).toBe('loading');
+      render.teardown();
+
+      // Assert - window is reloaded
+      await vi.waitFor(() => {
+        expect(window.location.reload).toHaveBeenCalledOnce();
+        expect(store.cleanupStory).toHaveBeenCalledOnce();
+      });
+    });
+
+    it('reloads the page when tearing down during rendering', async () => {
+      // Arrange - setup StoryRender and async gate blocking renderToScreen
+      const [renderGate] = createGate();
+      const story = {
+        id: 'id',
+        title: 'title',
+        name: 'name',
+        tags: [],
+        applyLoaders: vi.fn(),
+        applyBeforeEach: vi.fn(),
+        unboundStoryFn: vi.fn(),
+        playFunction: vi.fn(),
+        prepareContext: vi.fn(),
+      };
+      const store = {
+        getStoryContext: () => ({}),
+        cleanupStory: vi.fn(),
+        addCleanupCallbacks: vi.fn(),
+      };
+      const renderToScreen = vi.fn(() => renderGate);
+
+      const render = new StoryRender(
+        new Channel({}),
+        store as any,
+        renderToScreen as any,
+        {} as any,
+        entry.id,
+        'story',
+        { autoplay: true },
+        story as any
+      );
+
+      // Act - render (blocked by renderToScreen), teardown
+      render.renderToElement({} as any);
+      await tick(); // go from 'loading' to 'rendering' phase
+      expect(renderToScreen).toHaveBeenCalledOnce();
+      expect(render.phase).toBe('rendering');
+      render.teardown();
+
+      // Assert - window is reloaded
+      await vi.waitFor(() => {
+        expect(window.location.reload).toHaveBeenCalledOnce();
+        expect(store.cleanupStory).toHaveBeenCalledOnce();
+      });
+    });
+
+    it('reloads the page when tearing down during playing', async () => {
+      // Arrange - setup StoryRender and async gate blocking playing
+      const [playGate] = createGate();
+      const story = {
+        id: 'id',
+        title: 'title',
+        name: 'name',
+        tags: [],
+        applyLoaders: vi.fn(),
+        applyBeforeEach: vi.fn(),
+        unboundStoryFn: vi.fn(),
+        playFunction: vi.fn(() => playGate),
+        prepareContext: vi.fn(),
+      };
+      const store = {
+        getStoryContext: () => ({}),
+        cleanupStory: vi.fn(),
+        addCleanupCallbacks: vi.fn(),
+      };
+
+      const render = new StoryRender(
+        new Channel({}),
+        store as any,
+        vi.fn() as any,
+        {} as any,
+        entry.id,
+        'story',
+        { autoplay: true },
+        story as any
+      );
+
+      // Act - render (blocked by playFn), teardown
+      render.renderToElement({} as any);
+      await tick(); // go from 'loading' to 'beforeEach' phase
+      await tick(); // go from 'beforeEach' to 'playing' phase
+      expect(story.playFunction).toHaveBeenCalledOnce();
+      expect(render.phase).toBe('playing');
+      render.teardown();
+
+      // Assert - window is reloaded
+      await vi.waitFor(() => {
+        expect(window.location.reload).toHaveBeenCalledOnce();
+        expect(store.cleanupStory).toHaveBeenCalledOnce();
+      });
+    });
+
+    it('reloads the page when remounting during loading', async () => {
+      // Arrange - setup StoryRender and async gate blocking applyLoaders
+      const [loaderGate] = createGate();
+      const story = {
+        id: 'id',
+        title: 'title',
+        name: 'name',
+        tags: [],
+        applyLoaders: vi.fn(() => loaderGate),
+        applyBeforeEach: vi.fn(),
+        unboundStoryFn: vi.fn(),
+        playFunction: vi.fn(),
+        prepareContext: vi.fn(),
+      };
+      const store = {
+        getStoryContext: () => ({}),
+        cleanupStory: vi.fn(),
+        addCleanupCallbacks: vi.fn(),
+      };
+      const render = new StoryRender(
+        new Channel({}),
+        store as any,
+        vi.fn() as any,
+        {} as any,
+        entry.id,
+        'story',
+        { autoplay: true },
+        story as any
+      );
+
+      // Act - render, blocked by loaders
+      render.renderToElement({} as any);
+      expect(story.applyLoaders).toHaveBeenCalledOnce();
+      expect(render.phase).toBe('loading');
+      // Act - remount
+      render.remount();
+
+      // Assert - window is reloaded
+      await vi.waitFor(() => {
+        expect(window.location.reload).toHaveBeenCalledOnce();
+        expect(store.cleanupStory).toHaveBeenCalledOnce();
+      });
+    });
+  });
 });
diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
index ff3449b7a437..8ade66fc8942 100644
--- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
+++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts
@@ -27,6 +27,7 @@ const { AbortController } = globalThis;
 export type RenderPhase =
   | 'preparing'
   | 'loading'
+  | 'beforeEach'
   | 'rendering'
   | 'playing'
   | 'played'
@@ -56,6 +57,8 @@ export class StoryRender implements Render {};
@@ -101,7 +104,7 @@ export class StoryRender implements Render);
+      await this.store.cleanupStory(this.story as PreparedStory);
       throw PREPARE_ABORTED;
     }
   }
@@ -120,7 +123,7 @@ export class StoryRender implements Render implements Render implements Render);
+          // TODO add this to CSF
+          canvasElement,
+        } as unknown as StoryContextForLoaders);
       });
-      if (abortSignal.aborted) {
-        return;
-      }
+      if (abortSignal.aborted) return;
 
       const renderStoryContext: StoryContext = {
         ...loadedContext!,
@@ -187,6 +200,14 @@ export class StoryRender implements Render {
+        const cleanupCallbacks = await applyBeforeEach(renderStoryContext);
+        this.store.addCleanupCallbacks(story, cleanupCallbacks);
+      });
+
+      if (abortSignal.aborted) return;
+
       const renderContext: RenderContext = {
         componentId,
         title,
@@ -265,13 +286,31 @@ export class StoryRender implements Render implements Render {
             "story": "A",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -409,7 +410,7 @@ describe('StoryStore', () => {
 
       const { hooks } = store.getStoryContext(story) as { hooks: HooksContext };
       hooks.clean = vi.fn();
-      store.cleanupStory(story);
+      await store.cleanupStory(story);
       expect(hooks.clean).toHaveBeenCalled();
     });
   });
@@ -476,7 +477,8 @@ describe('StoryStore', () => {
             "story": "A",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -514,7 +516,8 @@ describe('StoryStore', () => {
             "story": "B",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
           },
@@ -552,7 +555,8 @@ describe('StoryStore', () => {
             "story": "C",
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component Two",
           },
@@ -621,6 +625,7 @@ describe('StoryStore', () => {
       expect(store.raw()).toMatchInlineSnapshot(`
         [
           {
+            "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
               "a": {
@@ -659,13 +664,15 @@ describe('StoryStore', () => {
             "storyFn": [Function],
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
             "unboundStoryFn": [Function],
             "undecoratedStoryFn": [Function],
           },
           {
+            "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
               "a": {
@@ -704,13 +711,15 @@ describe('StoryStore', () => {
             "storyFn": [Function],
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component One",
             "unboundStoryFn": [Function],
             "undecoratedStoryFn": [Function],
           },
           {
+            "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
               "a": {
@@ -749,7 +758,8 @@ describe('StoryStore', () => {
             "storyFn": [Function],
             "subcomponents": undefined,
             "tags": [
-              "story",
+              "dev",
+              "test",
             ],
             "title": "Component Two",
             "unboundStoryFn": [Function],
@@ -810,7 +820,8 @@ describe('StoryStore', () => {
               "story": "A",
               "subcomponents": undefined,
               "tags": [
-                "story",
+                "dev",
+                "test",
               ],
               "title": "Component One",
             },
@@ -848,7 +859,8 @@ describe('StoryStore', () => {
               "story": "B",
               "subcomponents": undefined,
               "tags": [
-                "story",
+                "dev",
+                "test",
               ],
               "title": "Component One",
             },
@@ -886,7 +898,8 @@ describe('StoryStore', () => {
               "story": "C",
               "subcomponents": undefined,
               "tags": [
-                "story",
+                "dev",
+                "test",
               ],
               "title": "Component Two",
             },
diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts
index 123ea5b984c8..ebfe582cdfe2 100644
--- a/code/lib/preview-api/src/modules/store/StoryStore.ts
+++ b/code/lib/preview-api/src/modules/store/StoryStore.ts
@@ -40,6 +40,7 @@ import {
   normalizeProjectAnnotations,
   prepareContext,
 } from './csf';
+import type { CleanupCallback } from '@storybook/csf';
 
 // TODO -- what are reasonable values for these?
 const CSF_CACHE_SIZE = 1000;
@@ -56,6 +57,8 @@ export class StoryStore {
 
   hooks: Record>;
 
+  cleanupCallbacks: Record;
+
   cachedCSFFiles?: Record>;
 
   processCSFFileWithCache: typeof processCSFFile;
@@ -79,6 +82,7 @@ export class StoryStore {
     this.args = new ArgsStore();
     this.globals = new GlobalsStore({ globals, globalTypes });
     this.hooks = {};
+    this.cleanupCallbacks = {};
 
     // We use a cache for these two functions for two reasons:
     //  1. For performance
@@ -234,8 +238,17 @@ export class StoryStore {
     });
   }
 
-  cleanupStory(story: PreparedStory): void {
+  addCleanupCallbacks(story: PreparedStory, callbacks: CleanupCallback[]) {
+    this.cleanupCallbacks[story.id] = callbacks;
+  }
+
+  async cleanupStory(story: PreparedStory): Promise {
     this.hooks[story.id].clean();
+
+    const callbacks = this.cleanupCallbacks[story.id];
+    if (callbacks) for (const callback of [...callbacks].reverse()) await callback();
+
+    delete this.cleanupCallbacks[story.id];
   }
 
   extract(
diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
index 147038a5a8d2..ba9ead34d119 100644
--- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts
@@ -21,7 +21,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -45,7 +47,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -73,7 +77,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -107,7 +113,9 @@ describe('composeConfigs', () => {
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -144,7 +152,9 @@ describe('composeConfigs', () => {
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -172,7 +182,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: ['1', '2', '3', '4'],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -200,7 +212,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: ['1', '2', '3'],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -224,7 +238,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -249,7 +265,9 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
@@ -277,10 +295,12 @@ describe('composeConfigs', () => {
       globals: {},
       globalTypes: {},
       loaders: [],
+      beforeEach: [],
       render: 'render-2',
       renderToCanvas: 'renderToCanvas-2',
       applyDecorators: 'applyDecorators-2',
       runStep: expect.any(Function),
+      tags: [],
     });
   });
 
diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
index e5785a6a3f01..9c943e14f1c1 100644
--- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
+++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts
@@ -58,10 +58,12 @@ export function composeConfigs(
     globals: getObjectField(moduleExportList, 'globals'),
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
+    beforeEach: getArrayField(moduleExportList, 'beforeEach'),
     render: getSingletonField(moduleExportList, 'render'),
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
     renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
     applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
     runStep: composeStepRunners(stepRunners),
+    tags: getArrayField(moduleExportList, 'tags'),
   };
 }
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
index e2e6a88db31e..60cca0023352 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts
@@ -16,6 +16,7 @@ export function normalizeProjectAnnotations({
   argTypesEnhancers,
   decorators,
   loaders,
+  beforeEach,
   ...annotations
 }: ProjectAnnotations): NormalizedProjectAnnotations {
   return {
@@ -23,6 +24,7 @@ export function normalizeProjectAnnotations({
     ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
     decorators: normalizeArrays(decorators),
     loaders: normalizeArrays(loaders),
+    beforeEach: normalizeArrays(beforeEach),
     argTypesEnhancers: [
       ...(argTypesEnhancers || []),
       inferArgTypes,
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
index a4bf5a04fdeb..f9e4b9cdca92 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts
@@ -51,6 +51,7 @@ describe('normalizeStory', () => {
         {
           "argTypes": {},
           "args": {},
+          "beforeEach": [],
           "decorators": [],
           "id": "title--story-export",
           "loaders": [],
@@ -120,6 +121,7 @@ describe('normalizeStory', () => {
           {
             "argTypes": {},
             "args": {},
+            "beforeEach": [],
             "decorators": [],
             "id": "title--story-export",
             "loaders": [],
@@ -156,6 +158,7 @@ describe('normalizeStory', () => {
             "args": {
               "storyArg": "val",
             },
+            "beforeEach": [],
             "decorators": [
               [Function],
             ],
@@ -211,6 +214,7 @@ describe('normalizeStory', () => {
               "storyArg": "val",
               "storyArg2": "legacy",
             },
+            "beforeEach": [],
             "decorators": [
               [Function],
               [Function],
diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
index 9a96bc4a332e..fc228251d82e 100644
--- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts
@@ -54,6 +54,10 @@ export function normalizeStory(
   const args = { ...story?.args, ...storyObject.args };
   const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) };
   const loaders = [...normalizeArrays(storyObject.loaders), ...normalizeArrays(story?.loaders)];
+  const beforeEach = [
+    ...normalizeArrays(storyObject.beforeEach),
+    ...normalizeArrays(story?.beforeEach),
+  ];
   const { render, play, tags = [] } = storyObject;
 
   // eslint-disable-next-line no-underscore-dangle
@@ -68,6 +72,7 @@ export function normalizeStory(
     args,
     argTypes: normalizeInputTypes(argTypes),
     loaders,
+    beforeEach,
     ...(render && { render }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index a3aa544c4827..6babf08285ec 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -167,6 +167,136 @@ describe('composeStory', () => {
     expect(spyFn).toHaveBeenCalled();
   });
 
+  it('should work with spies set up in beforeEach', async () => {
+    const spyFn = vi.fn();
+
+    const Story: Story = {
+      args: {
+        spyFn,
+      },
+      beforeEach: async () => {
+        spyFn.mockReturnValue('mockedData');
+      },
+      render: (args) => {
+        const data = args.spyFn();
+        expect(data).toBe('mockedData');
+      },
+    };
+
+    const composedStory = composeStory(Story, {});
+    await composedStory.load();
+    composedStory();
+    expect(spyFn).toHaveBeenCalled();
+  });
+
+  it('should call beforeEach from Project, Meta and Story level', async () => {
+    const beforeEachSpy = vi.fn();
+    const cleanupSpy = vi.fn();
+
+    const metaObj: Meta = {
+      beforeEach: async () => {
+        beforeEachSpy('define from meta');
+
+        return () => {
+          cleanupSpy('cleanup from meta');
+        };
+      },
+    };
+
+    const Story: Story = {
+      render: () => 'foo',
+      beforeEach: async () => {
+        beforeEachSpy('define from story');
+
+        return () => {
+          cleanupSpy('cleanup from story');
+        };
+      },
+    };
+
+    const composedStory = composeStory(Story, metaObj, {
+      beforeEach: async () => {
+        beforeEachSpy('define from project');
+
+        return () => {
+          cleanupSpy('cleanup from project');
+        };
+      },
+    });
+    await composedStory.load();
+    composedStory();
+    expect(beforeEachSpy).toHaveBeenNthCalledWith(1, 'define from project');
+    expect(beforeEachSpy).toHaveBeenNthCalledWith(2, 'define from meta');
+    expect(beforeEachSpy).toHaveBeenNthCalledWith(3, 'define from story');
+
+    // simulate the next story's load to trigger cleanup
+    await composedStory.load();
+    expect(cleanupSpy).toHaveBeenNthCalledWith(1, 'cleanup from story');
+    expect(cleanupSpy).toHaveBeenNthCalledWith(2, 'cleanup from meta');
+    expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project');
+  });
+
+  it('should call beforeEach after loaders', async () => {
+    const spyFn = vi.fn();
+
+    const Story: Story = {
+      render: () => 'foo',
+      loaders: async () => {
+        spyFn('from loaders');
+      },
+      beforeEach: async () => {
+        spyFn('from beforeEach');
+      },
+    };
+
+    const composedStory = composeStory(Story, {});
+    await composedStory.load();
+    expect(spyFn).toHaveBeenNthCalledWith(1, 'from loaders');
+    expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach');
+  });
+
+  it('should warn when previous cleanups are still around when rendering a story', async () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const cleanupSpy = vi.fn();
+    const beforeEachSpy = vi.fn(() => {
+      return () => {
+        cleanupSpy();
+      };
+    });
+
+    const PreviousStory: Story = {
+      render: () => 'first',
+      beforeEach: beforeEachSpy,
+    };
+    const CurrentStory: Story = {
+      render: () => 'second',
+      args: {
+        firstArg: false,
+        secondArg: true,
+      },
+    };
+    const firstComposedStory = composeStory(PreviousStory, {});
+    await firstComposedStory.load();
+    firstComposedStory();
+
+    expect(beforeEachSpy).toHaveBeenCalled();
+    expect(cleanupSpy).not.toHaveBeenCalled();
+    expect(consoleWarnSpy).not.toHaveBeenCalled();
+
+    const secondComposedStory = composeStory(CurrentStory, {});
+    secondComposedStory();
+
+    expect(cleanupSpy).not.toHaveBeenCalled();
+    expect(consoleWarnSpy).toHaveBeenCalledOnce();
+    expect(consoleWarnSpy.mock.calls[0][0]).toMatchInlineSnapshot(
+      `
+      "Some stories were not cleaned up before rendering 'Unnamed Story (firstArg, secondArg)'.
+
+      You should load the story with \`await Story.load()\` before rendering it."
+    `
+    );
+  });
+
   it('should throw an error if Story is undefined', () => {
     expect(() => {
       // @ts-expect-error (invalid input)
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index 57e8fcda9a2b..056daa5dcbcb 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/naming-convention */
-import { isExportStory } from '@storybook/csf';
+import { type CleanupCallback, isExportStory } from '@storybook/csf';
 import dedent from 'ts-dedent';
 import type {
   Renderer,
@@ -29,6 +29,9 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 
 let globalProjectAnnotations: ProjectAnnotations = {};
 
+const DEFAULT_STORY_TITLE = 'ComposedStory';
+const DEFAULT_STORY_NAME = 'Unnamed Story';
+
 function extractAnnotation(
   annotation: NamedOrDefaultProjectAnnotations
 ) {
@@ -47,6 +50,8 @@ export function setProjectAnnotations(
   globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
 }
 
+const cleanups: { storyName: string; callback: CleanupCallback }[] = [];
+
 export function composeStory(
   storyAnnotations: LegacyStoryAnnotationsOrFn,
   componentAnnotations: ComponentAnnotations,
@@ -61,7 +66,7 @@ export function composeStory(componentAnnotations);
 
@@ -70,7 +75,7 @@ export function composeStory(
     storyName,
@@ -113,6 +118,8 @@ export function composeStory> = Object.assign(
     function storyFn(extraArgs?: Partial) {
       context.args = {
@@ -120,14 +127,46 @@ export function composeStory 0 && !previousCleanupsDone) {
+        let humanReadableIdentifier = storyName;
+        if (story.title !== DEFAULT_STORY_TITLE) {
+          // prefix with title unless it's the generic ComposedStory title
+          humanReadableIdentifier = `${story.title} - ${humanReadableIdentifier}`;
+        }
+        if (storyName === DEFAULT_STORY_NAME && Object.keys(context.args).length > 0) {
+          // suffix with args if it's an unnamed story and there are args
+          humanReadableIdentifier = `${humanReadableIdentifier} (${Object.keys(context.args).join(
+            ', '
+          )})`;
+        }
+        console.warn(
+          dedent`Some stories were not cleaned up before rendering '${humanReadableIdentifier}'.
+          
+          You should load the story with \`await Story.load()\` before rendering it.`
+        );
+        // TODO: Add a link to the docs when they are ready
+        // eg. "See https://storybook.js.org/docs/api/portable-stories-${process.env.JEST_WORKER_ID !== undefined ? 'jest' : 'vitest'}#3-load for more information."
+      }
       return story.unboundStoryFn(prepareContext(context));
     },
     {
       id: story.id,
       storyName,
       load: async () => {
+        // First run any registered cleanup function
+        for (const { callback } of [...cleanups].reverse()) await callback();
+        cleanups.length = 0;
+
+        previousCleanupsDone = true;
+
         const loadedContext = await story.applyLoaders(context);
         context.loaded = loadedContext.loaded;
+
+        cleanups.push(
+          ...(await story.applyBeforeEach(context))
+            .filter(Boolean)
+            .map((callback) => ({ storyName, callback }))
+        );
       },
       args: story.initialArgs as Partial,
       parameters: story.parameters as Parameters,
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
index b05485e5a506..a574080558c5 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts
@@ -44,7 +44,7 @@ describe('prepareStory', () => {
         { render }
       );
 
-      expect(tags).toEqual(['story-1', 'story-2', 'story']);
+      expect(tags).toEqual(['dev', 'test', 'component-1', 'component-2', 'story-1', 'story-2']);
     });
 
     it('component tags work if story are unset', () => {
@@ -58,13 +58,13 @@ describe('prepareStory', () => {
         { render }
       );
 
-      expect(tags).toEqual(['component-1', 'component-2', 'story']);
+      expect(tags).toEqual(['dev', 'test', 'component-1', 'component-2']);
     });
 
     it('sets a value even if annotations do not have tags', () => {
       const { tags } = prepareStory({ id, name, moduleExport }, { id, title }, { render });
 
-      expect(tags).toEqual(['story']);
+      expect(tags).toEqual(['dev', 'test']);
     });
   });
 
@@ -718,6 +718,7 @@ describe('prepareMeta', () => {
       name: storyName,
       story,
       applyLoaders,
+      applyBeforeEach,
       originalStoryFn,
       unboundStoryFn,
       undecoratedStoryFn,
diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
index d4613db8eb71..ce99cef8f1e0 100644
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-loop-func,no-underscore-dangle */
 import { global } from '@storybook/global';
-
 import type {
   Args,
   ArgsStoryFn,
@@ -20,7 +19,8 @@ import type {
   StoryContextForLoaders,
   StrictArgTypes,
 } from '@storybook/types';
-import { includeConditionalArg } from '@storybook/csf';
+import { type CleanupCallback, includeConditionalArg, combineTags } from '@storybook/csf';
+import { global as globalThis } from '@storybook/global';
 
 import { applyHooks } from '../../addons';
 import { combineParameters } from '../parameters';
@@ -65,9 +65,23 @@ export function prepareStory(
       const loaded: Record = Object.assign({}, ...loadResults);
       updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } };
     }
+
     return updatedContext;
   };
 
+  const applyBeforeEach = async (context: StoryContext): Promise => {
+    const cleanupCallbacks = new Array<() => unknown>();
+    for (const beforeEach of [
+      ...normalizeArrays(projectAnnotations.beforeEach),
+      ...normalizeArrays(componentAnnotations.beforeEach),
+      ...normalizeArrays(storyAnnotations.beforeEach),
+    ]) {
+      const cleanup = await beforeEach(context);
+      if (cleanup) cleanupCallbacks.push(cleanup);
+    }
+    return cleanupCallbacks;
+  };
+
   const undecoratedStoryFn = (context: StoryContext) =>
     (render as ArgsStoryFn)(context.args, context);
 
@@ -117,6 +131,7 @@ export function prepareStory(
     undecoratedStoryFn,
     unboundStoryFn,
     applyLoaders,
+    applyBeforeEach,
     playFunction,
   };
 }
@@ -140,7 +155,16 @@ function preparePartialAnnotations(
   // 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.
 
-  const tags = [...(storyAnnotations?.tags || componentAnnotations.tags || []), 'story'];
+  const defaultTags = ['dev', 'test'];
+  const extraTags = globalThis.DOCS_OPTIONS?.autodocs === true ? ['autodocs'] : [];
+
+  const tags = combineTags(
+    ...defaultTags,
+    ...extraTags,
+    ...(projectAnnotations.tags ?? []),
+    ...(componentAnnotations.tags ?? []),
+    ...(storyAnnotations?.tags ?? [])
+  );
 
   const parameters: Parameters = combineParameters(
     projectAnnotations.parameters,
diff --git a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
index 2a5b5be88e17..efc2d583bf31 100644
--- a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
+++ b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts
@@ -3,7 +3,7 @@ import type { Renderer, StepRunner } from '@storybook/types';
 /**
  * Compose step runners to create a single step runner that applies each step runner in order.
  *
- * A step runner is a a function that takes a defined step: `step('label', () => { ... })`
+ * A step runner is a function that takes a defined step: `step('label', () => { ... })`
  * and runs it. The prototypical example is from `@storybook/addon-interactions` where the
  * step runner will decorate all instrumented code inside the step with information about the
  * label.
diff --git a/code/lib/preview-api/template/stories/decorators.stories.ts b/code/lib/preview-api/template/stories/decorators.stories.ts
index 467f7245f383..24b1c51564bb 100644
--- a/code/lib/preview-api/template/stories/decorators.stories.ts
+++ b/code/lib/preview-api/template/stories/decorators.stories.ts
@@ -14,14 +14,14 @@ export default {
   parameters: { useProjectDecorator: true },
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
-      storyFn({ args: { ...context.args, text: `component ${context.args['text']}` } }),
+      storyFn({ args: { ...context.args, text: `component ${context.args.text}` } }),
   ],
 };
 
 export const Inheritance = {
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
-      storyFn({ args: { ...context.args, text: `story ${context.args['text']}` } }),
+      storyFn({ args: { ...context.args, text: `story ${context.args.text}` } }),
   ],
   args: {
     text: 'starting',
@@ -39,7 +39,7 @@ export const Hooks = {
     // decorator that uses hooks
     (storyFn: PartialStoryFn, context: StoryContext) => {
       useEffect(() => {});
-      return storyFn({ args: { ...context.args, text: `story ${context.args['text']}` } });
+      return storyFn({ args: { ...context.args, text: `story ${context.args.text}` } });
     },
     // conditional decorator, runs before the above
     (storyFn: PartialStoryFn, context: StoryContext) =>
diff --git a/code/lib/preview-api/template/stories/globals.stories.ts b/code/lib/preview-api/template/stories/globals.stories.ts
index 8e49f4b0095d..d6bc63b75e22 100644
--- a/code/lib/preview-api/template/stories/globals.stories.ts
+++ b/code/lib/preview-api/template/stories/globals.stories.ts
@@ -25,7 +25,7 @@ export const Events = {
   // Just pass the "foo" global to the pre
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
-      storyFn({ args: { text: context.globals['foo'] } }),
+      storyFn({ args: { text: context.globals.foo } }),
   ],
   play: async ({ canvasElement }: PlayFunctionContext) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
diff --git a/code/lib/preview-api/template/stories/preview.ts b/code/lib/preview-api/template/stories/preview.ts
index edd7ad4ba335..3f479374e900 100644
--- a/code/lib/preview-api/template/stories/preview.ts
+++ b/code/lib/preview-api/template/stories/preview.ts
@@ -13,7 +13,7 @@ export const loaders = [async () => ({ projectValue: 2 })];
 
 export const decorators = [
   (storyFn: PartialStoryFn, context: StoryContext) => {
-    if (context.parameters['useProjectDecorator'])
+    if (context.parameters.useProjectDecorator)
       return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } });
     return storyFn();
   },
diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts
index 477e07137987..aa521c6fed91 100644
--- a/code/lib/preview-api/template/stories/rendering.stories.ts
+++ b/code/lib/preview-api/template/stories/rendering.stories.ts
@@ -66,3 +66,34 @@ export const ChangeArgs = {
     await expect(button).toHaveFocus();
   },
 };
+
+let loadedLabel = 'Initial';
+
+/**
+ * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other
+ * Triggering multiple force remounts quickly should only result in a single remount in the end
+ * and the label should be 'Loaded. Click Me' at the end. If loaders are interleaving it would result in a label of 'Error: Interleaved loaders. Click Me'
+ * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result.
+ */
+export const SlowLoader = {
+  parameters: {
+    chromatic: { disable: true },
+  },
+  loaders: [
+    async () => {
+      loadedLabel = 'Loading...';
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.';
+      return { label: loadedLabel };
+    },
+  ],
+  decorators: [
+    (storyFn: any, context: any) =>
+      storyFn({
+        args: {
+          ...context.args,
+          label: `${context.loaded.label} ${context.args.label}`,
+        },
+      }),
+  ],
+};
diff --git a/code/lib/preview-api/template/stories/tags-add.stories.ts b/code/lib/preview-api/template/stories/tags-add.stories.ts
new file mode 100644
index 000000000000..6302085e5c19
--- /dev/null
+++ b/code/lib/preview-api/template/stories/tags-add.stories.ts
@@ -0,0 +1,39 @@
+import { global as globalThis } from '@storybook/global';
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
+import { within, expect } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Pre,
+  tags: ['!dev', '!autodocs', '!test'],
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: { tags: context.tags } },
+      });
+    },
+  ],
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Inheritance = {
+  tags: ['story-one'],
+  play: async ({ canvasElement }: PlayFunctionContext) => {
+    const canvas = within(canvasElement);
+    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+      tags: ['story-one'],
+    });
+  },
+  parameters: { chromatic: { disable: false } },
+};
+
+export const Dev = {
+  tags: ['dev'],
+};
+
+export const Autodocs = {
+  tags: ['autodocs'],
+};
+
+export const Test = {
+  tags: ['test'],
+};
diff --git a/code/lib/preview-api/template/stories/tags.stories.ts b/code/lib/preview-api/template/stories/tags-config.stories.ts
similarity index 84%
rename from code/lib/preview-api/template/stories/tags.stories.ts
rename to code/lib/preview-api/template/stories/tags-config.stories.ts
index 61ffe8811429..e36784304d39 100644
--- a/code/lib/preview-api/template/stories/tags.stories.ts
+++ b/code/lib/preview-api/template/stories/tags-config.stories.ts
@@ -16,11 +16,11 @@ export default {
 };
 
 export const Inheritance = {
-  tags: ['story-one', 'story-two'],
+  tags: ['story-one'],
   play: async ({ canvasElement }: PlayFunctionContext) => {
     const canvas = within(canvasElement);
     await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
-      tags: ['story-one', 'story-two', 'story'],
+      tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
     });
   },
   parameters: { chromatic: { disable: false } },
@@ -37,3 +37,7 @@ export const TestOnly = {
 export const DevOnly = {
   tags: ['dev-only'],
 };
+
+export const TagRemoval = {
+  tags: ['!component-two'],
+};
diff --git a/code/lib/preview-api/template/stories/tags-remove.stories.ts b/code/lib/preview-api/template/stories/tags-remove.stories.ts
new file mode 100644
index 000000000000..852d4f63585d
--- /dev/null
+++ b/code/lib/preview-api/template/stories/tags-remove.stories.ts
@@ -0,0 +1,39 @@
+import { global as globalThis } from '@storybook/global';
+import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
+import { within, expect } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Pre,
+  tags: ['component-one', 'autodocs'],
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) => {
+      return storyFn({
+        args: { object: { tags: context.tags } },
+      });
+    },
+  ],
+  parameters: { chromatic: { disable: true } },
+};
+
+export const Inheritance = {
+  tags: ['story-one'],
+  play: async ({ canvasElement }: PlayFunctionContext) => {
+    const canvas = within(canvasElement);
+    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+      tags: ['dev', 'test', 'component-one', 'autodocs', 'story-one'],
+    });
+  },
+  parameters: { chromatic: { disable: false } },
+};
+
+export const NoDev = {
+  tags: ['!dev'],
+};
+
+export const NoAutodocs = {
+  tags: ['!autodocs'],
+};
+
+export const NoTest = {
+  tags: ['!test'],
+};
diff --git a/code/lib/preview-api/template/stories/test-only-tag.stories.ts b/code/lib/preview-api/template/stories/test-only-tag.stories.ts
deleted file mode 100644
index 138f221d3ff7..000000000000
--- a/code/lib/preview-api/template/stories/test-only-tag.stories.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-export default {
-  component: globalThis.Components.Button,
-  tags: ['autodocs', 'test-only'],
-  parameters: { chromatic: { disable: true } },
-};
-
-export const Default = {
-  args: { label: 'Button' },
-};
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index aaaff8693593..88375573c9e1 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 35b3bd868d21..e92c94e69732 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
@@ -58,8 +58,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts
index e863a53262b6..fbcb353c3827 100644
--- a/code/lib/react-dom-shim/src/preset.ts
+++ b/code/lib/react-dom-shim/src/preset.ts
@@ -6,7 +6,7 @@ import { readFile } from 'fs/promises';
  * Get react-dom version from the resolvedReact preset, which points to either
  * a root react-dom dependency or the react-dom dependency shipped with addon-docs
  */
-const getIsReactVersion18 = async (options: Options) => {
+const getIsReactVersion18or19 = async (options: Options) => {
   const { legacyRootApi } =
     (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
 
@@ -24,11 +24,11 @@ const getIsReactVersion18 = async (options: Options) => {
   }
 
   const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8'));
-  return version.startsWith('18') || version.startsWith('0.0.0');
+  return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0');
 };
 
 export const webpackFinal = async (config: any, options: Options) => {
-  const isReactVersion18 = await getIsReactVersion18(options);
+  const isReactVersion18 = await getIsReactVersion18or19(options);
   if (isReactVersion18) {
     return config;
   }
@@ -46,7 +46,7 @@ export const webpackFinal = async (config: any, options: Options) => {
 };
 
 export const viteFinal = async (config: any, options: Options) => {
-  const isReactVersion18 = await getIsReactVersion18(options);
+  const isReactVersion18 = await getIsReactVersion18or19(options);
   if (isReactVersion18) {
     return config;
   }
diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx
index ddfa738d4dd9..5b9e88f98a84 100644
--- a/code/lib/react-dom-shim/src/react-18.tsx
+++ b/code/lib/react-dom-shim/src/react-18.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactElement } from 'react';
-import type { Root as ReactRoot } from 'react-dom/client';
 import React, { useLayoutEffect, useRef } from 'react';
+import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import ReactDOM from 'react-dom/client';
 
 // A map of all rendered React 18 nodes
@@ -21,9 +21,9 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   return children;
 };
 
-export const renderElement = async (node: ReactElement, el: Element) => {
+export const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => {
   // Create Root Element conditionally for new React 18 Root Api
-  const root = await getReactRoot(el);
+  const root = await getReactRoot(el, rootOptions);
 
   return new Promise((resolve) => {
     root.render( resolve(null)}>{node});
@@ -39,11 +39,11 @@ export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
   }
 };
 
-const getReactRoot = async (el: Element): Promise => {
+const getReactRoot = async (el: Element, rootOptions?: RootOptions): Promise => {
   let root = nodes.get(el);
 
   if (!root) {
-    root = ReactDOM.createRoot(el);
+    root = ReactDOM.createRoot(el, rootOptions);
     nodes.set(el, root);
   }
 
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 58d83e529778..173fa88a9e6e 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 1b480d450fe8..f932128f0966 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -45,7 +45,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/types": "workspace:*",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index bad5ecca34c1..5d0636c5cf9f 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index 846e7adb9556..c6372084c2c8 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -16,7 +16,10 @@ export type EventType =
   | 'error-metadata'
   | 'version-update'
   | 'core-config'
-  | 'remove';
+  | 'remove'
+  | 'save-story'
+  | 'create-new-story-file'
+  | 'create-new-story-file-search';
 
 export interface Dependency {
   version: string | undefined;
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index 502f18c5140e..1d9c5e8386e1 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/test",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts
new file mode 100644
index 000000000000..a6f613e7698c
--- /dev/null
+++ b/code/lib/test/template/stories/before-each.stories.ts
@@ -0,0 +1,44 @@
+import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test';
+
+const meta = {
+  component: globalThis.Components.Button,
+  loaders() {
+    spyOn(console, 'log').mockName('console.log');
+    console.log('1 - [from loaders]');
+  },
+  beforeEach() {
+    console.log('2 - [from meta beforeEach]');
+  },
+};
+
+export default meta;
+
+export const BeforeEachOrder = {
+  parameters: {
+    chromatic: { disable: true },
+  },
+  beforeEach() {
+    console.log('3 - [from story beforeEach]');
+  },
+  decorators: (StoryFn: any) => {
+    console.log('4 - [from decorator]');
+    return StoryFn();
+  },
+  args: {
+    label: 'Button',
+    onClick: () => {
+      console.log('5 - [from onClick]');
+    },
+  },
+  async play({ canvasElement }: any) {
+    await userEvent.click(getByRole(canvasElement, 'button'));
+
+    await expect(mocked(console.log).mock.calls).toEqual([
+      ['1 - [from loaders]'],
+      ['2 - [from meta beforeEach]'],
+      ['3 - [from story beforeEach]'],
+      ['4 - [from decorator]'],
+      ['5 - [from onClick]'],
+    ]);
+  },
+};
diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts
new file mode 100644
index 000000000000..8332183005a2
--- /dev/null
+++ b/code/lib/test/template/stories/module-mocking.stories.ts
@@ -0,0 +1,28 @@
+import { global as globalThis } from '@storybook/global';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox.
+// eslint-disable-next-line import/no-unresolved
+import { foo } from '#utils';
+import { expect, fn, isMockFunction, mocked } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    onClick: fn(),
+    label: 'Mock story',
+  },
+  parameters: {
+    chromatic: {
+      disable: true,
+    },
+  },
+  beforeEach: () => {
+    mocked(foo).mockReturnValue('mocked');
+  },
+  async play() {
+    await expect(isMockFunction(foo)).toBe(true);
+    await expect(foo()).toBe('mocked');
+  },
+};
+
+export const Basic = {};
diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts
new file mode 100644
index 000000000000..bd3955dc0729
--- /dev/null
+++ b/code/lib/test/template/stories/utils.mock.ts
@@ -0,0 +1,4 @@
+import { fn } from '@storybook/test';
+import * as utils from './utils.ts';
+
+export const foo = fn(utils.foo).mockName('foo');
diff --git a/code/lib/test/template/stories/utils.ts b/code/lib/test/template/stories/utils.ts
new file mode 100644
index 000000000000..5a80b1903c1f
--- /dev/null
+++ b/code/lib/test/template/stories/utils.ts
@@ -0,0 +1 @@
+export const foo = () => 'not mocked';
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index d0b87b51c0c8..f2c7c840c120 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -68,8 +68,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index bbac0e65beb1..32a8a94c0645 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
@@ -49,7 +49,7 @@
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.0.0",
     "typescript": "^5.3.2"
diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts
index 90d45a77d9ac..90a6962c7d1c 100644
--- a/code/lib/types/src/modules/api-stories.ts
+++ b/code/lib/types/src/modules/api-stories.ts
@@ -8,7 +8,7 @@ export interface API_BaseEntry {
   depth: number;
   name: string;
   refId?: string;
-  renderLabel?: (item: API_BaseEntry) => any;
+  renderLabel?: (item: API_BaseEntry, api: any) => any;
 }
 
 export interface API_RootEntry extends API_BaseEntry {
diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index 481139e71792..e858314af76d 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -45,7 +45,7 @@ export interface API_Provider {
   renderPreview?: API_IframeRenderer;
   handleAPI(api: API): void;
   getConfig(): {
-    sidebar?: API_SidebarOptions;
+    sidebar?: API_SidebarOptions;
     theme?: ThemeVars;
     StoryMapper?: API_StoryMapper;
     [k: string]: any;
@@ -106,11 +106,11 @@ export interface API_UI {
 export type API_PanelPositions = 'bottom' | 'right';
 export type API_ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
 
-export interface API_SidebarOptions {
+export interface API_SidebarOptions {
   showRoots?: boolean;
   filters?: Record;
   collapsedRoots?: string[];
-  renderLabel?: (item: API_HashEntry) => any;
+  renderLabel?: (item: API_HashEntry, api: API) => any;
 }
 
 interface OnClearOptions {
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index c4aeeacbcf1f..f16ef638cbf4 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -280,6 +280,8 @@ export type DocsOptions = {
    * Should we generate a docs entry per CSF file?
    * Set to 'tag' (the default) to generate an entry for every CSF file with the
    * 'autodocs' tag.
+   *
+   * @deprecated Use `tags: ['autodocs']` in `.storybook/preview.js` instead
    */
   autodocs?: boolean | 'tag';
   /**
@@ -569,3 +571,15 @@ export interface CoreCommon_StorybookInfo {
   previewConfig?: string;
   managerConfig?: string;
 }
+
+/**
+ * Given a generic string type, returns that type but ensures that a string in general is compatible with it.
+ * We use this construct to ensure that IDEs can provide better autocompletion for string types.
+ * This is, for example, needed for main config fields, where we want to ensure that the user can provide
+ * a custom string, but also a string that is compatible with the type.
+ * @example
+ * type Framework = CompatibleString<'@storybook/nextjs'>
+ * const framework: Framework = '@storybook/nextjs'; // valid and will be autocompleted
+ * const framework: Framework = path.dirname(require.resolve(path.join("@storybook/nextjs", "package.json"))) // valid
+ */
+export type CompatibleString = T | (string & Record);
diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts
index 1064354eefe0..56d435cdb533 100644
--- a/code/lib/types/src/modules/indexer.ts
+++ b/code/lib/types/src/modules/indexer.ts
@@ -107,8 +107,6 @@ export type BaseIndexInput = {
   metaId?: MetaId;
   /** Tags for filtering entries in Storybook and its tools. */
   tags?: Tag[];
-  /** Tags from the meta for filtering entries in Storybook and its tools. */
-  metaTags?: Tag[];
   /**
    * The id of the entry, auto-generated from {@link title}/{@link metaId} and {@link exportName} if unspecified.
    * If specified, the story in the CSF file _must_ have a matching id set at `parameters.__id`, to be correctly matched.
diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts
index ee34ad43ce79..041aaed2e709 100644
--- a/code/lib/types/src/modules/story.ts
+++ b/code/lib/types/src/modules/story.ts
@@ -3,6 +3,7 @@ import type {
   ProjectAnnotations as CsfProjectAnnotations,
   DecoratorFunction,
   LoaderFunction,
+  CleanupCallback,
 } from '@storybook/csf';
 
 import type {
@@ -103,6 +104,7 @@ export type PreparedStory =
     applyLoaders: (
       context: StoryContextForLoaders
     ) => Promise & { loaded: StoryContext['loaded'] }>;
+    applyBeforeEach: (context: StoryContext) => Promise;
     playFunction?: (context: StoryContext) => Promise | void;
   };
 
diff --git a/code/package.json b/code/package.json
index 29dc543f11e8..9295a38225d7 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -90,7 +90,7 @@
     "type-fest": "~2.19"
   },
   "dependencies": {
-    "@chromatic-com/storybook": "^1.2.18",
+    "@chromatic-com/storybook": "^1.3.2",
     "@nx/eslint": "18.0.6",
     "@nx/vite": "18.0.6",
     "@nx/workspace": "18.0.6",
@@ -127,7 +127,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 3f7e99928679..43cc552142cd 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/create-react-app/src/helpers/checkPresets.ts b/code/presets/create-react-app/src/helpers/checkPresets.ts
index 2827dab51f58..91166273cc20 100644
--- a/code/presets/create-react-app/src/helpers/checkPresets.ts
+++ b/code/presets/create-react-app/src/helpers/checkPresets.ts
@@ -1,4 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { logger } from '@storybook/node-logger';
 import type { PluginOptions } from '../types';
 
diff --git a/code/presets/create-react-app/src/index.ts b/code/presets/create-react-app/src/index.ts
index 2fc78a1cfa0d..bfeb48c7cf2e 100644
--- a/code/presets/create-react-app/src/index.ts
+++ b/code/presets/create-react-app/src/index.ts
@@ -1,6 +1,6 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { join, relative, dirname } from 'path';
 import type { Configuration, RuleSetRule, WebpackPluginInstance } from 'webpack';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { logger } from '@storybook/node-logger';
 import PnpWebpackPlugin from 'pnp-webpack-plugin';
 import { mergePlugins } from './helpers/mergePlugins';
@@ -126,6 +126,14 @@ const webpack = async (
         ...getModulePath(CWD),
       ],
       plugins: [PnpWebpackPlugin as any],
+      // manual copy from builder-webpack because defaults are disabled in this CRA preset
+      conditionNames: [
+        ...(webpackConfig.resolve?.conditionNames ?? []),
+        'storybook',
+        'stories',
+        'test',
+        '...',
+      ],
     },
     resolveLoader,
   } as Configuration;
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 5209a5cabfb1..765843eb1132 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index 71d1cad823e2..1aa673454d6c 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 33e1c1abc278..4fd04d2dca7f 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
@@ -84,8 +84,8 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "typescript": {
diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
index ac83e37982de..ba3dd1805999 100644
--- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
+++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
@@ -22,6 +22,7 @@ import {
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')
@@ -58,7 +59,7 @@ const actualNameHandler: Handler = function actualNameHandler(documentation, com
   }
 };
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
@@ -107,8 +108,8 @@ export default async function reactDocgenLoader(
     const magicString = new MagicString(source);
 
     docgenResults.forEach((info) => {
-      const { actualName, ...docgenInfo } = info;
-      if (actualName) {
+      const { actualName, definedInFile, ...docgenInfo } = info;
+      if (actualName && definedInFile == this.resourcePath) {
         const docNode = JSON.stringify(docgenInfo);
         magicString.append(`;${actualName}.__docgenInfo=${docNode}`);
       }
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 79d58fccb7c3..67dd41d4a677 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 7631ae956d49..f44cf1790b02 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 500f80f54b1c..52af041e207b 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": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index def5200f6755..d4afcaaa397c 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 09fc253432d9..f6dc4ee8add2 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index c71f8628de5e..2edae30f4fc8 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -41,6 +41,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "experimental-playwright": [
+        "dist/playwright.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "template/cli/**/*",
@@ -86,8 +96,8 @@
     "require-from-string": "^2.0.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "typescript": ">= 4.2.x"
   },
   "peerDependenciesMeta": {
diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
index 96b750f26525..a51b7aa54382 100644
--- a/code/renderers/react/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -50,6 +50,7 @@ const annotateWithDocgen = (inputPath: string) => {
 const skippedTests = [
   'js-class-component',
   'js-function-component',
+  'js-re-exported-component',
   'js-function-component-inline-defaults',
   'js-function-component-inline-defaults-no-propTypes',
   'ts-function-component',
diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index d8821a3458e4..8cb2e76f9b2d 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -74,7 +74,7 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement);
+  await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
 
   return () => unmountElement(canvasElement);
 }
diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
index 51b837feb2b6..2fb12d5579e7 100644
--- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot
@@ -1,5 +1,5 @@
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import PropTypes from 'prop-types';
diff --git a/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot
new file mode 100644
index 000000000000..c3ad6f276316
--- /dev/null
+++ b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot
@@ -0,0 +1 @@
+export { component } from '../js-function-component/input.jsx';
\ No newline at end of file
diff --git a/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx
new file mode 100644
index 000000000000..7b7ce9d3c8e9
--- /dev/null
+++ b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx
@@ -0,0 +1,3 @@
+import { component } from '../js-function-component/input.jsx';
+
+export { component };
diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx
index a72d6771dbeb..2101e61979f3 100644
--- a/code/renderers/react/template/stories/js-argtypes.stories.jsx
+++ b/code/renderers/react/template/stories/js-argtypes.stories.jsx
@@ -7,6 +7,7 @@ import { ThemeProvider, themes, convert } from '@storybook/theming';
 
 import { component as JsClassComponentComponent } from './docgen-components/js-class-component/input.jsx';
 import { component as JsFunctionComponentComponent } from './docgen-components/js-function-component/input.jsx';
+import { component as JsRexportedComponentComponent } from './docgen-components/js-re-exported-component/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsComponent } from './docgen-components/js-function-component-inline-defaults/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx';
 import { component as JsProptypesShapeComponent } from './docgen-components/9399-js-proptypes-shape/input.jsx';
@@ -60,6 +61,10 @@ export const JsClassComponent = { parameters: { component: JsClassComponentCompo
 
 export const JsFunctionComponent = { parameters: { component: JsFunctionComponentComponent } };
 
+export const JsRexportedComponent = {
+  parameters: { component: JsRexportedComponentComponent },
+};
+
 export const JsFunctionComponentInlineDefaults = {
   parameters: { component: JsFunctionComponentInlineDefaultsComponent },
 };
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index f7c4cfa88ef0..dbf87e873c3b 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
@@ -46,7 +46,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 8240c18f4359..472b96713c58 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index b50d57c870ca..c4576b99d866 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -40,6 +40,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "experimental-playwright": [
+        "dist/playwright.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "template/cli/**/*",
diff --git a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
index ad10ccc96a52..5fb9e1bf028f 100644
--- a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
+++ b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
@@ -1217,6 +1217,8 @@ export const referenceTypeEvents: TestComponent = {
     events: [
       {
         name: 'foo',
+        description: '',
+        tags: [],
         type: '[data?: { foo: string; } | undefined]',
         signature: '(event: "foo", data?: { foo: string; } | undefined): void',
         declarations: [],
@@ -1248,6 +1250,8 @@ export const referenceTypeEvents: TestComponent = {
       },
       {
         name: 'bar',
+        description: '',
+        tags: [],
         type: '[value: { year: number; title?: any; }]',
         signature: '(event: "bar", value: { year: number; title?: any; }): void',
         declarations: [],
@@ -1282,6 +1286,8 @@ export const referenceTypeEvents: TestComponent = {
       },
       {
         name: 'baz',
+        description: '',
+        tags: [],
         type: '[]',
         signature: '(event: "baz"): void',
         declarations: [],
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts
new file mode 100644
index 000000000000..be2f612287a5
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineModel.stories.ts
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Component from './define-model/component.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+} satisfies Meta;
+
+type Story = StoryObj;
+export default meta;
+
+export const Default: Story = {
+  args: {
+    modelValue: 'Test value',
+  },
+};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts
new file mode 100644
index 000000000000..1a06ce6bb504
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Component from './define-slots/component.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+} satisfies Meta;
+
+type Story = StoryObj;
+export default meta;
+
+export const Default: Story = {
+  args: {
+    default: ({ num }) => `Default slot { num=${num} }`,
+    named: ({ str }) => `Named slot { str=${str} }`,
+    vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`,
+  },
+};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue
new file mode 100644
index 000000000000..0b1ea4b3a3d6
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-model/component.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue
new file mode 100644
index 000000000000..94533f010bdb
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/define-slots/component.vue
@@ -0,0 +1,22 @@
+
+
+
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 0b14130edbac..0d640c18fc52 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 4025715324d0..03dea1aea08d 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -8,9 +8,12 @@ const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 const allStories = [
   {
     directory: '../manager/src',
-    files: '**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
     titlePrefix: '@manager',
   },
+  {
+    directory: '../../lib/preview-api/src',
+    titlePrefix: '@preview',
+  },
   {
     directory: '../components/src/components',
     titlePrefix: '@components',
@@ -19,6 +22,14 @@ const allStories = [
     directory: '../blocks/src',
     titlePrefix: '@blocks',
   },
+  {
+    directory: '../../addons/controls/src', // TODO other addons?
+    titlePrefix: '@addons/controls',
+  },
+  {
+    directory: '../../addons/onboarding/src',
+    titlePrefix: '@addons/onboarding',
+  },
 ];
 
 /**
diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx
index 7cdbda8d32e9..1ac61cf4d375 100644
--- a/code/ui/.storybook/manager.tsx
+++ b/code/ui/.storybook/manager.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { addons, types } from '@storybook/manager-api';
+import { addons } from '@storybook/manager-api';
 import startCase from 'lodash/startCase.js';
 
 addons.setConfig({
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index edae82e2f19d..fbe192d8e291 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -48,7 +48,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
@@ -60,7 +60,7 @@
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
-    "markdown-to-jsx": "7.3.2",
+    "markdown-to-jsx": "^7.4.5",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-colorful": "^5.1.2",
@@ -75,8 +75,8 @@
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "react": {
diff --git a/code/ui/blocks/src/blocks/Stories.stories.tsx b/code/ui/blocks/src/blocks/Stories.stories.tsx
index 9462f5f2a2dd..0c91aec638e6 100644
--- a/code/ui/blocks/src/blocks/Stories.stories.tsx
+++ b/code/ui/blocks/src/blocks/Stories.stories.tsx
@@ -26,3 +26,13 @@ export const DifferentToolbars: Story = {
     relativeCsfPaths: ['../examples/StoriesParameters.stories'],
   },
 };
+export const NoAutodocs: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonNoAutodocs.stories'],
+  },
+};
+export const SomeAutodocs: Story = {
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonSomeAutodocs.stories'],
+  },
+};
diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx
index 8681e4151c4d..c2b5c53dc729 100644
--- a/code/ui/blocks/src/blocks/Stories.tsx
+++ b/code/ui/blocks/src/blocks/Stories.tsx
@@ -34,6 +34,17 @@ export const Stories: FC = ({ title = 'Stories', includePrimary =
   if (filter) {
     stories = stories.filter((story) => filter(story, getStoryContext(story)));
   }
+  // NOTE: this should be part of the default filter function. However, there is currently
+  // no way to distinguish a Stories block in an autodocs page from Stories in an MDX file
+  // making https://github.com/storybookjs/storybook/pull/26634 an unintentional breaking change.
+  //
+  // The new behavior here is that if NONE of the stories in the autodocs page are tagged
+  // with 'autodocs', we show all stories. If ANY of the stories have autodocs then we use
+  // the new behavior.
+  const hasAutodocsTaggedStory = stories.some((story) => story.tags?.includes('autodocs'));
+  if (hasAutodocsTaggedStory) {
+    stories = stories.filter((story) => story.tags?.includes('autodocs'));
+  }
 
   if (!includePrimary) stories = stories.slice(1);
 
diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
new file mode 100644
index 000000000000..6ee1e865baba
--- /dev/null
+++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Subtitle } from './Subtitle';
+import * as DefaultButtonStories from '../examples/Button.stories';
+import * as ButtonStoriesWithMetaSubtitleAsBoth from '../examples/ButtonWithMetaSubtitleAsBoth.stories';
+import * as ButtonStoriesWithMetaSubtitleAsComponentSubtitle from '../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories';
+import * as ButtonStoriesWithMetaSubtitleAsDocsSubtitle from '../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories';
+
+const meta: Meta = {
+  component: Subtitle,
+  parameters: {
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+    // workaround for https://github.com/storybookjs/storybook/issues/20505
+    docs: { source: { type: 'code' } },
+    attached: false,
+    docsStyles: true,
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OfCSFFileAsBoth: Story = {
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsBoth,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'],
+  },
+};
+export const OfCSFFileAsComponentSubtitle: Story = {
+  name: 'Of CSF File As parameters.componentSubtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'],
+  },
+};
+export const OfCSFFileAsDocsSubtitle: Story = {
+  name: 'Of CSF File As parameters.docs.subtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'],
+  },
+};
+export const OfMetaAsBoth: Story = {
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsBoth.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'],
+  },
+};
+export const OfMetaAsComponentSubtitle: Story = {
+  name: 'Of Meta As parameters.componentSubtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'],
+  },
+};
+export const OfMetaAsDocsSubtitle: Story = {
+  name: 'Of Meta As parameters.docs.subtitle',
+  args: {
+    of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle.default,
+  },
+  parameters: {
+    relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'],
+  },
+};
+export const DefaultAttached: Story = {
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+export const OfUndefinedAttached: Story = {
+  args: {
+    // @ts-expect-error this is supposed to be undefined
+    // eslint-disable-next-line import/namespace
+    of: DefaultButtonStories.NotDefined,
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    relativeCsfPaths: ['../examples/Button.stories'],
+    attached: true,
+  },
+  decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ? 
 : s())],
+};
+export const OfStringMetaAttached: Story = {
+  name: 'Of "meta" Attached',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+export const Children: Story = {
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false },
+  render: () => This subtitle is a string passed as a children,
+};
diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx
index 143543cb27fb..055ed047cc12 100644
--- a/code/ui/blocks/src/blocks/Subtitle.tsx
+++ b/code/ui/blocks/src/blocks/Subtitle.tsx
@@ -1,15 +1,49 @@
 import type { FunctionComponent, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
+import { deprecate } from '@storybook/client-logger';
+
 import { Subtitle as PureSubtitle } from '../components';
-import { DocsContext } from './DocsContext';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 
 interface SubtitleProps {
   children?: ReactNode;
+  /**
+   * Specify where to get the subtitle from.
+   * If not specified, the subtitle will be extracted from the meta of the attached CSF file.
+   */
+  of?: Of;
 }
 
-export const Subtitle: FunctionComponent = ({ children }) => {
-  const docsContext = useContext(DocsContext);
-  const content = children || docsContext.storyById().parameters?.componentSubtitle;
+const DEPRECATION_MIGRATION_LINK =
+  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle';
+
+export const Subtitle: FunctionComponent = (props) => {
+  const { of, children } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
+  let preparedMeta;
+  try {
+    preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
+  } catch (error) {
+    if (children && !error.message.includes('did you forget to use ?')) {
+      // ignore error about unattached CSF since we can still render children
+      throw error;
+    }
+  }
+
+  const { componentSubtitle, docs } = preparedMeta?.parameters || {};
+
+  if (componentSubtitle) {
+    deprecate(
+      `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}`
+    );
+  }
+
+  const content = children || docs?.subtitle || componentSubtitle;
 
   return content ? (
     {content}
diff --git a/code/ui/blocks/src/blocks/Title.stories.tsx b/code/ui/blocks/src/blocks/Title.stories.tsx
new file mode 100644
index 000000000000..a75b6ef72d98
--- /dev/null
+++ b/code/ui/blocks/src/blocks/Title.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Title } from './Title';
+import * as DefaultButtonStories from '../examples/Button.stories';
+
+const meta: Meta = {
+  component: Title,
+  title: 'Blocks/Title',
+  parameters: {
+    controls: {
+      include: [],
+      hideNoControlsWarning: true,
+    },
+    // workaround for https://github.com/storybookjs/storybook/issues/20505
+    docs: { source: { type: 'code' } },
+    attached: false,
+    docsStyles: true,
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OfCSFFile: Story = {
+  args: {
+    of: DefaultButtonStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const OfMeta: Story = {
+  args: {
+    of: DefaultButtonStories,
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'] },
+};
+
+export const OfStringMetaAttached: Story = {
+  name: 'Of attached "meta"',
+  args: {
+    of: 'meta',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
+
+export const Children: Story = {
+  args: {
+    children: 'Title as children',
+  },
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false },
+};
+
+export const DefaultAttached: Story = {
+  args: {},
+  parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true },
+};
diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx
index 1f52fb2cc179..28ac06136ef1 100644
--- a/code/ui/blocks/src/blocks/Title.tsx
+++ b/code/ui/blocks/src/blocks/Title.tsx
@@ -1,10 +1,20 @@
 import type { ComponentTitle } from '@storybook/types';
 import type { FunctionComponent, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React from 'react';
 import { Title as PureTitle } from '../components';
-import { DocsContext } from './DocsContext';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 
 interface TitleProps {
+  /**
+   * Specify where to get the title from. Must be a CSF file's default export.
+   * If not specified, the title will be read from children, or extracted from the meta of the attached CSF file.
+   */
+  of?: Of;
+
+  /**
+   * Specify content to display as the title.
+   */
   children?: ReactNode;
 }
 
@@ -12,12 +22,27 @@ const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
 
 export const extractTitle = (title: ComponentTitle) => {
   const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR);
-  return (groups && groups[groups.length - 1]) || title;
+  return groups?.[groups?.length - 1] || title;
 };
 
-export const Title: FunctionComponent = ({ children }) => {
-  const context = useContext(DocsContext);
-  const content = children || extractTitle(context.storyById().title);
+export const Title: FunctionComponent = (props) => {
+  const { children, of } = props;
+
+  if ('of' in props && of === undefined) {
+    throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
+  }
+
+  let preparedMeta;
+  try {
+    preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta;
+  } catch (error) {
+    if (children && !error.message.includes('did you forget to use ?')) {
+      // ignore error about unattached CSF since we can still render children
+      throw error;
+    }
+  }
+
+  const content = children || extractTitle(preparedMeta?.title);
 
   return content ? {content} : null;
 };
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index 39ed63dc6299..159b65b5df03 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -52,27 +52,6 @@ export const Compact = {
   args: { ...Normal.args, compact: true },
 };
 
-const AddonPanelLayout = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content,
-}));
-
-export const InAddonPanel = {
-  args: { ...Normal.args, inAddonPanel: true },
-  decorators: [(storyFn: any) => {storyFn()}],
-};
-
-export const InAddonPanelNoControls = {
-  render: (args: any) => ,
-  args: {
-    rows: {
-      stringType: { ...stringType, control: false },
-      numberType: { ...numberType, control: false },
-    },
-  },
-  decorators: InAddonPanel.decorators,
-};
-
 export const Sections = {
   args: {
     rows: {
@@ -137,6 +116,33 @@ export const AllControls = {
   },
 };
 
+const AddonPanelLayout = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  background: theme.background.content,
+}));
+
+export const InAddonPanel = {
+  args: {
+    ...Normal.args,
+    inAddonPanel: true,
+    rows: SectionsAndSubsections.args.rows,
+  },
+  decorators: [(storyFn: any) => {storyFn()}],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const InAddonPanelNoControls = {
+  ...InAddonPanel,
+  args: {
+    ...InAddonPanel.args,
+    rows: Object.fromEntries(
+      Object.entries(InAddonPanel.args.rows).map(([k, v]) => [k, { ...v, control: null }])
+    ),
+  },
+};
+
 export const Error = {
   args: {
     error: ArgsTableError.NO_COMPONENT,
diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx
index 5495d89c5981..76fb8f1c4f05 100644
--- a/code/ui/blocks/src/components/Source.tsx
+++ b/code/ui/blocks/src/components/Source.tsx
@@ -98,7 +98,7 @@ const Source: FunctionComponent = ({
   language,
   code,
   dark,
-  format,
+  format = false,
   ...rest
 }) => {
   const { typography } = useTheme();
@@ -138,7 +138,4 @@ const Source: FunctionComponent = ({
   );
 };
 
-Source.defaultProps = {
-  format: false,
-};
 export { Source, StyledSyntaxHighlighter };
diff --git a/code/ui/blocks/src/components/Typeset.tsx b/code/ui/blocks/src/components/Typeset.tsx
index 8fbfca58b568..76b70c998859 100644
--- a/code/ui/blocks/src/components/Typeset.tsx
+++ b/code/ui/blocks/src/components/Typeset.tsx
@@ -35,7 +35,7 @@ const Wrapper = styled.div(withReset, ({ theme }) => ({
 
 export interface TypesetProps {
   fontFamily?: string;
-  fontSizes: string[];
+  fontSizes: (string | number)[];
   fontWeight?: number;
   sampleText?: string;
 }
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
index b0ab993f3cff..1ac10a7531b2 100644
--- a/code/ui/blocks/src/controls/Color.tsx
+++ b/code/ui/blocks/src/controls/Color.tsx
@@ -2,7 +2,7 @@ import type { FC, ChangeEvent, FocusEvent } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import convert from 'color-convert';
-import throttle from 'lodash/throttle.js';
+import debounce from 'lodash/debounce.js';
 import { styled } from '@storybook/theming';
 import { TooltipNote, WithTooltip, Form } from '@storybook/components';
 
@@ -317,10 +317,10 @@ export const ColorControl: FC = ({
   startOpen = false,
   argType,
 }) => {
-  const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]);
+  const debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
     initialValue,
-    throttledOnChange
+    debouncedOnChange
   );
   const { presets, addPreset } = usePresets(presetColors, color, colorSpace);
   const Picker = ColorPicker[colorSpace];
diff --git a/code/ui/blocks/src/controls/options/Checkbox.tsx b/code/ui/blocks/src/controls/options/Checkbox.tsx
index 6be088b111ba..7c883c21300c 100644
--- a/code/ui/blocks/src/controls/options/Checkbox.tsx
+++ b/code/ui/blocks/src/controls/options/Checkbox.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
           },
         },
   (props) => {
-    if ([props['aria-readonly']]) {
+    if (props['aria-readonly'] === 'true') {
       return {
         input: {
           cursor: 'not-allowed',
diff --git a/code/ui/blocks/src/controls/options/Radio.tsx b/code/ui/blocks/src/controls/options/Radio.tsx
index d3bc514f3361..022c23ccb7b3 100644
--- a/code/ui/blocks/src/controls/options/Radio.tsx
+++ b/code/ui/blocks/src/controls/options/Radio.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
           },
         },
   (props) => {
-    if ([props['aria-readonly']]) {
+    if (props['aria-readonly'] === 'true') {
       return {
         input: {
           cursor: 'not-allowed',
@@ -86,7 +86,7 @@ export const RadioControl: FC = ({
              onChange(options[e.currentTarget.value])}
diff --git a/code/ui/blocks/src/examples/Button.stories.tsx b/code/ui/blocks/src/examples/Button.stories.tsx
index e5fc5b2e3457..a49f88f5d8f8 100644
--- a/code/ui/blocks/src/examples/Button.stories.tsx
+++ b/code/ui/blocks/src/examples/Button.stories.tsx
@@ -17,6 +17,9 @@ const meta = {
     notes: 'These are notes for the Button stories',
     info: 'This is info for the Button stories',
     jsx: { useBooleanShorthandSyntax: false },
+    docs: {
+      subtitle: 'This is the subtitle for the Button stories',
+    },
   },
 } satisfies Meta;
 
diff --git a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx b/code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx
similarity index 62%
rename from docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
rename to code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx
index 164bb2d6617a..c934e70753f2 100644
--- a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
+++ b/code/ui/blocks/src/examples/ButtonNoAutodocs.stories.tsx
@@ -1,17 +1,15 @@
-```tsx
-// Button.stories.ts|tsx
-
-import type { Meta } from 'storybook-solidjs';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta = {
+  title: 'examples/ButtonNoAutodocs',
   component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta;
 
 export default meta;
@@ -26,8 +24,6 @@ export const Primary: Story = {
 
 export const Secondary: Story = {
   args: {
-    ...Primary.args,
-    primary: false,
+    label: 'Button',
   },
 };
-```
diff --git a/docs/snippets/react/button-story-auto-docs.ts-4-9.mdx b/code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx
similarity index 66%
rename from docs/snippets/react/button-story-auto-docs.ts-4-9.mdx
rename to code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx
index 14f45d47dc56..dd5f7d227f49 100644
--- a/docs/snippets/react/button-story-auto-docs.ts-4-9.mdx
+++ b/code/ui/blocks/src/examples/ButtonSomeAutodocs.stories.tsx
@@ -1,17 +1,15 @@
-```ts
-// Button.stories.ts|tsx
-
-import type { Meta } from '@storybook/react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 
 const meta = {
+  title: 'examples/ButtonSomeAutodocs',
   component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta;
 
 export default meta;
@@ -25,9 +23,8 @@ export const Primary: Story = {
 };
 
 export const Secondary: Story = {
+  tags: ['autodocs'],
   args: {
-    ...Primary.args,
-    primary: false,
+    label: 'Button',
   },
 };
-```
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
new file mode 100644
index 000000000000..5b4235c07c57
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in Both',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    // this is to test the deprecated features of the Subtitle block
+    componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
+    docs: {
+      subtitle: 'This subtitle is set in parameters.docs.subtitle',
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const WithMetaSubtitleAsBoth: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
new file mode 100644
index 000000000000..57a106340421
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in componentSubtitle',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    // this is to test the deprecated features of the Subtitle block
+    componentSubtitle: 'This subtitle is set in parameters.componentSubtitle',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const WithMetaSubtitleInComponentSubtitle: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
new file mode 100644
index 000000000000..3df3110baf6c
--- /dev/null
+++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta = {
+  title: 'examples/Button with Meta Subtitle in docs.subtitle',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  parameters: {
+    // Stop *this* story from being stacked in Chromatic
+    theme: 'default',
+    docs: {
+      subtitle: 'This subtitle is set in parameters.docs.subtitle',
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const WithMetaSubtitleInDocsSubtitle: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
diff --git a/code/ui/blocks/src/examples/EmptyExample.tsx b/code/ui/blocks/src/examples/EmptyExample.tsx
index d9ad80b7a120..a1b48922f303 100644
--- a/code/ui/blocks/src/examples/EmptyExample.tsx
+++ b/code/ui/blocks/src/examples/EmptyExample.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export const EmptyExample = ({}) => (
   

-    This component is not intended to render anything, it simply serves a something to hang
+    This component is not intended to render anything, it simply serves as something to hang
     parameters off
   

 );
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 200b81381b85..ddbeddc843c3 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -59,9 +59,10 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.7",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/theming": "workspace:*",
@@ -86,8 +87,8 @@
     "use-resize-observer": "^9.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/ui/components/src/components/Badge/Badge.stories.tsx b/code/ui/components/src/components/Badge/Badge.stories.tsx
index 530b4f368ac2..974dc64f8be1 100644
--- a/code/ui/components/src/components/Badge/Badge.stories.tsx
+++ b/code/ui/components/src/components/Badge/Badge.stories.tsx
@@ -1,12 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import { Badge } from './Badge';
 
-export default {
+const meta = {
   component: Badge,
-};
+} satisfies Meta;
 
-export const Default = { args: { children: 'Default' } };
-export const Positive = { args: { status: 'positive', children: 'Positive' } };
-export const Negative = { args: { status: 'negative', children: 'Negative' } };
-export const Neutral = { args: { status: 'neutral', children: 'Neutral' } };
-export const Warning = { args: { status: 'warning', children: 'Warning' } };
-export const Critical = { args: { status: 'critical', children: 'Critical' } };
+export default meta;
+type Story = StoryObj;
+
+export const Default = { args: { children: 'Default' } } satisfies Story;
+export const Positive = { args: { status: 'positive', children: 'Positive' } } satisfies Story;
+export const Negative = { args: { status: 'negative', children: 'Negative' } } satisfies Story;
+export const Neutral = { args: { status: 'neutral', children: 'Neutral' } } satisfies Story;
+export const Warning = { args: { status: 'warning', children: 'Warning' } } satisfies Story;
+export const Critical = { args: { status: 'critical', children: 'Critical' } } satisfies Story;
diff --git a/code/ui/components/src/components/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx
index f9d1c9b91ebb..51bcee12e2ef 100644
--- a/code/ui/components/src/components/Badge/Badge.tsx
+++ b/code/ui/components/src/components/Badge/Badge.tsx
@@ -80,7 +80,7 @@ const BadgeWrapper = styled.div(
 );
 
 export interface BadgeProps {
-  status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
+  status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
   children?: React.ReactNode;
 }
 
diff --git a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx
similarity index 55%
rename from code/addons/onboarding/src/components/Modal/Modal.stories.tsx
rename to code/ui/components/src/components/Modal/Modal.stories.tsx
index 527aa87d4323..658683e6368b 100644
--- a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx
+++ b/code/ui/components/src/components/Modal/Modal.stories.tsx
@@ -3,18 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, expect } from '@storybook/test';
 
 import { Modal } from './Modal';
+import { Button } from '../Button/Button';
 
-const meta: Meta = {
+type Story = StoryObj;
+
+const meta = {
   component: Modal,
   decorators: [(storyFn) => 
{storyFn()}
],
-};
+} satisfies Meta;
 
 export default meta;
 
-type Story = StoryObj;
-
 export const Default: Story = {
   args: {
+    children: undefined,
     width: undefined,
     height: undefined,
   },
@@ -24,12 +26,10 @@ export const Default: Story = {
     return (
       <>
         
-          {({ Close }) => (
-            

-              
Hello world!

-               setOpen(false)}>Close
-            

-          )}
+          

+            
Hello world!

+             setOpen(false)}>Close
+          

         
         
       
@@ -54,12 +54,10 @@ export const FixedWidth: Story = {
     return (
       <>
         
-          {({ Close }) => (
-            

-              
Hello world!

-               setOpen(false)}>Close
-            

-          )}
+          

+            
Hello world!

+             setOpen(false)}>Close
+          

         
         
       
@@ -84,12 +82,10 @@ export const FixedHeight: Story = {
     return (
       <>
         
-          {({ Close }) => (
-            

-              
Hello world!

-               setOpen(false)}>Close
-            

-          )}
+          

+            
Hello world!

+             setOpen(false)}>Close
+          

         
         
       
@@ -115,12 +111,10 @@ export const FixedWidthAndHeight: Story = {
     return (
       <>
         
-          {({ Close }) => (
-            

-              
Hello world!

-               setOpen(false)}>Close
-            

-          )}
+          

+            
Hello world!

+             setOpen(false)}>Close
+          

         
         
       
@@ -133,3 +127,48 @@ export const FixedWidthAndHeight: Story = {
     await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument();
   },
 };
+
+export const StyledComponents: Story = {
+  args: {
+    ...Default.args,
+    width: 500,
+  },
+  render: (props) => {
+    const [isOpen, setOpen] = useState(false);
+
+    return (
+      <>
+        
+          
+            
+              Hello
+              Lorem ipsum dolor sit amet.
+            
+            
+              
+                One
+                Two
+              
+              Right
+            
+            Another section
+            
+              
+              
+                
+              
+            
+          
+          Oops. Something went wrong.
+        
+        
+      
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!);
+    const button = canvas.getAllByText('Open modal')[0];
+    await userEvent.click(button);
+    await expect(canvas.findByText('Hello')).resolves.toBeInTheDocument();
+  },
+};
diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx
new file mode 100644
index 000000000000..07dd2f66d44c
--- /dev/null
+++ b/code/ui/components/src/components/Modal/Modal.styled.tsx
@@ -0,0 +1,137 @@
+import { keyframes, styled } from '@storybook/theming';
+import * as Dialog from '@radix-ui/react-dialog';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { IconButton } from '../IconButton/IconButton';
+import { CrossIcon } from '@storybook/icons';
+
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+const expand = keyframes({
+  from: { maxHeight: 0 },
+  to: {},
+});
+
+const zoomIn = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translate(-50%, -50%) scale(0.9)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translate(-50%, -50%) scale(1)',
+  },
+});
+
+export const Overlay = styled.div({
+  backgroundColor: 'rgba(27, 28, 29, 0.2)',
+  position: 'fixed',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: 10,
+  animation: `${fadeIn} 200ms`,
+});
+
+export const Container = styled.div<{ width?: number; height?: number }>(
+  ({ theme, width, height }) => ({
+    backgroundColor: theme.background.bar,
+    borderRadius: 6,
+    boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 38px -10px`,
+    position: 'fixed',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: width ?? 740,
+    height: height ?? 'auto',
+    maxWidth: 'calc(100% - 40px)',
+    maxHeight: '85vh',
+    overflow: 'hidden',
+    zIndex: 11,
+    animation: `${zoomIn} 200ms`,
+
+    '&:focus-visible': {
+      outline: 'none',
+    },
+  })
+);
+
+export const CloseButton = (props: React.ComponentProps) => (
+  
+    
+      
+    
+  
+);
+
+export const Content = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: 16,
+  gap: 16,
+});
+
+export const Row = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: 16,
+});
+
+export const Col = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+});
+
+export const Header = (props: React.ComponentProps) => (
+  
+    
+    
+  
+);
+
+export const Title = styled(Dialog.Title)(({ theme }) => ({
+  margin: 0,
+  fontSize: theme.typography.size.s3,
+  fontWeight: theme.typography.weight.bold,
+}));
+
+export const Description = styled(Dialog.Description)(({ theme }) => ({
+  position: 'relative',
+  zIndex: 1,
+  margin: 0,
+  fontSize: theme.typography.size.s2,
+}));
+
+export const Actions = styled.div({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  gap: 8,
+});
+
+export const ErrorWrapper = styled.div(({ theme }) => ({
+  maxHeight: 100,
+  overflow: 'auto',
+  animation: `${expand} 300ms, ${fadeIn} 300ms`,
+  backgroundColor: theme.background.critical,
+  color: theme.color.lightest,
+  fontSize: theme.typography.size.s2,
+
+  '& > div': {
+    position: 'relative',
+    padding: '8px 16px',
+  },
+}));
+
+export const Error = ({
+  children,
+  ...props
+}: { children: React.ReactNode } & ComponentProps) => (
+  
+    
{children}

+  
+);
diff --git a/code/addons/onboarding/src/components/Modal/Modal.tsx b/code/ui/components/src/components/Modal/Modal.tsx
similarity index 59%
rename from code/addons/onboarding/src/components/Modal/Modal.tsx
rename to code/ui/components/src/components/Modal/Modal.tsx
index 4c8bd9bec66d..ad5ddaa85b4e 100644
--- a/code/addons/onboarding/src/components/Modal/Modal.tsx
+++ b/code/ui/components/src/components/Modal/Modal.tsx
@@ -1,52 +1,51 @@
 import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
-import { ContentWrapper, StyledOverlay } from './Modal.styled';
+import * as Components from './Modal.styled';
 
-type ContentProps = React.ComponentProps;
+type ContentProps = React.ComponentProps;
 
 interface ModalProps extends Omit, 'children'> {
   width?: number;
   height?: number;
-  children: (props: {
-    Title: typeof Dialog.Title;
-    Description: typeof Dialog.Description;
-    Close: typeof Dialog.Close;
-  }) => React.ReactNode;
+  children: React.ReactNode;
   onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
   onInteractOutside?: ContentProps['onInteractOutside'];
+  className?: string;
+  container?: HTMLElement;
 }
 
 export const initial = { opacity: 0 };
 export const animate = { opacity: 1, transition: { duration: 0.3 } };
 export const exit = { opacity: 0, transition: { duration: 0.3 } };
 
-export function Modal({
+function BaseModal({
   children,
   width,
   height,
   onEscapeKeyDown,
   onInteractOutside = (ev) => ev.preventDefault(),
+  className,
+  container,
   ...rootProps
 }: ModalProps) {
   return (
     
-      
+      
         
-          
+          
         
-        
-          {children({
-            Title: Dialog.Title,
-            Description: Dialog.Description,
-            Close: Dialog.Close,
-          })}
-        
+          
+            {children}
+          
+        
       
     
   );
 }
+
+export const Modal = Object.assign(BaseModal, Components, { Dialog });
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
index f3f965af8783..cd697523d44d 100644
--- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { styled } from '@storybook/theming';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
@@ -75,36 +75,35 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
   },
 }));
 
-export const ScrollArea = ({
-  children,
-  horizontal = false,
-  vertical = false,
-  offset = 2,
-  scrollbarSize = 6,
-  className,
-}: ScrollAreaProps) => (
-  
-    {children}
-    {horizontal && (
-      
-        
-      
-    )}
-    {vertical && (
-      
-        
-      
-    )}
-    {horizontal && vertical && }
-  
+export const ScrollArea = forwardRef(
+  (
+    { children, horizontal = false, vertical = false, offset = 2, scrollbarSize = 6, className },
+    ref
+  ) => (
+    
+      {children}
+      {horizontal && (
+        
+          
+        
+      )}
+      {vertical && (
+        
+          
+        
+      )}
+      {horizontal && vertical && }
+    
+  )
 );
+ScrollArea.displayName = 'ScrollArea';
diff --git a/code/ui/components/src/components/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx
index 19b21ae8d2f7..bf4e5f00c1db 100644
--- a/code/ui/components/src/components/form/field/field.tsx
+++ b/code/ui/components/src/components/form/field/field.tsx
@@ -38,7 +38,3 @@ export const Field = ({ label, children, ...props }: FieldProps) => (
     {children}
   
 );
-
-Field.defaultProps = {
-  label: undefined,
-};
diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx
index a3c40fd8a9d9..658b994b1e2e 100644
--- a/code/ui/components/src/components/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/components/tabs/tabs.stories.tsx
@@ -18,6 +18,11 @@ interface FibonacciMap {
   [key: string]: number;
 }
 
+function Counter() {
+  const [count, setCount] = React.useState(0);
+  return ;
+}
+
 function fibonacci(num: number, memo?: FibonacciMap): number {
   if (!memo) {
     memo = {};
@@ -376,3 +381,22 @@ export const StatelessWithCustomEmpty = {
     />
   ),
 } satisfies StoryObj;
+
+export const StatefulWithStatefulPanel = {
+  render: (args) => {
+    const [update, setUpdate] = React.useState(0);
+    return (
+      

+        
+        
+          

+            
+          

+          

+            
+          

+        
+      

+    );
+  },
+} satisfies Story;
diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx
index 5b0cbb2b5612..de3eb731d3be 100644
--- a/code/ui/components/src/components/tabs/tabs.tsx
+++ b/code/ui/components/src/components/tabs/tabs.tsx
@@ -134,29 +134,24 @@ export interface TabsProps {
 export const Tabs: FC = memo(
   ({
     children,
-    selected,
+    selected = null,
     actions,
-    absolute,
-    bordered,
-    tools,
+    absolute = false,
+    bordered = false,
+    tools = null,
     backgroundColor,
-    id: htmlId,
-    menuName,
+    id: htmlId = null,
+    menuName = 'Tabs',
     emptyState,
     showToolsWhenEmpty,
   }) => {
-    const idList = childrenToList(children)
-      .map((i) => i.id)
-      .join(',');
-
     const list = useMemo(
       () =>
         childrenToList(children).map((i, index) => ({
           ...i,
           active: selected ? i.id === selected : index === 0,
         })),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- we're using idList as a replacement for children
-      [selected, idList]
+      [children, selected]
     );
 
     const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list);
@@ -211,15 +206,6 @@ export const Tabs: FC = memo(
   }
 );
 Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false,
-  menuName: 'Tabs',
-};
 
 export interface TabsStateProps {
   children: TabsProps['children'];
diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
index 34921e65d5ae..5d5ebf763b99 100644
--- a/code/ui/components/src/components/tooltip/ListItem.tsx
+++ b/code/ui/components/src/components/tooltip/ListItem.tsx
@@ -186,17 +186,18 @@ export interface ListItemProps extends Omit, 'href'
 }
 
 const ListItem = ({
-  loading,
-  title,
-  center,
-  right,
-  icon,
-  active,
-  disabled,
+  loading = false,
+  title = Loading state,
+  center = null,
+  right = null,
+
+  active = false,
+  disabled = false,
   isIndented,
-  href,
-  onClick,
-  LinkWrapper,
+  href = null,
+  onClick = null,
+  icon,
+  LinkWrapper = null,
   ...rest
 }: ListItemProps) => {
   const itemProps = getItemProps(onClick, href, LinkWrapper);
@@ -220,16 +221,4 @@ const ListItem = ({
   );
 };
 
-ListItem.defaultProps = {
-  loading: false,
-  title: Loading state,
-  center: null,
-  right: null,
-  active: false,
-  disabled: false,
-  href: null,
-  LinkWrapper: null,
-  onClick: null,
-};
-
 export default ListItem;
diff --git a/code/ui/components/src/components/tooltip/Tooltip.tsx b/code/ui/components/src/components/tooltip/Tooltip.tsx
index d4ccde5e41df..6f14a148bfeb 100644
--- a/code/ui/components/src/components/tooltip/Tooltip.tsx
+++ b/code/ui/components/src/components/tooltip/Tooltip.tsx
@@ -126,7 +126,16 @@ export interface TooltipProps {
 
 export const Tooltip = React.forwardRef(
   (
-    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props },
+    {
+      placement = 'top',
+      hasChrome = true,
+      children,
+      arrowProps = {},
+      tooltipRef,
+      color,
+      withArrows,
+      ...props
+    },
     ref
   ) => {
     return (
@@ -139,10 +148,3 @@ export const Tooltip = React.forwardRef(
 );
 
 Tooltip.displayName = 'Tooltip';
-Tooltip.defaultProps = {
-  color: undefined,
-  tooltipRef: undefined,
-  hasChrome: true,
-  placement: 'top',
-  arrowProps: {},
-};
diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
index 8c9d1b6564ad..fcb88ca25545 100644
--- a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
@@ -58,7 +58,7 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
-export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => {
+export const TooltipLinkList = ({ links, LinkWrapper = null }: TooltipLinkListProps) => {
   const hasIcon = links.some((link) => link.icon);
   return (
     
@@ -68,7 +68,3 @@ export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) =>
     
   );
 };
-
-TooltipLinkList.defaultProps = {
-  LinkWrapper: ListItem.defaultProps.LinkWrapper,
-};
diff --git a/code/ui/components/src/components/tooltip/TooltipMessage.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
index 1e47bb5481f5..7da93fc1474d 100644
--- a/code/ui/components/src/components/tooltip/TooltipMessage.tsx
+++ b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
@@ -60,9 +60,3 @@ export const TooltipMessage = ({ title, desc, links }: TooltipMessageProps) => {
     
   );
 };
-
-TooltipMessage.defaultProps = {
-  title: null,
-  desc: null,
-  links: null,
-};
diff --git a/code/ui/components/src/components/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx
index a95db5d76af2..b14015aa0d10 100644
--- a/code/ui/components/src/components/tooltip/WithTooltip.tsx
+++ b/code/ui/components/src/components/tooltip/WithTooltip.tsx
@@ -45,23 +45,42 @@ export interface WithTooltipPureProps
 
 // Pure, does not bind to the body
 const WithTooltipPure = ({
-  svg,
-  trigger,
-  closeOnOutsideClick,
-  placement,
-  hasChrome,
+  svg = false,
+  trigger = 'click',
+  closeOnOutsideClick = false,
+  placement = 'top',
+  modifiers = [
+    {
+      name: 'preventOverflow',
+      options: {
+        padding: 8,
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [8, 8],
+      },
+    },
+    {
+      name: 'arrow',
+      options: {
+        padding: 8,
+      },
+    },
+  ],
+  hasChrome = true,
+  defaultVisible = false,
   withArrows,
   offset,
   tooltip,
   children,
   closeOnTriggerHidden,
   mutationObserverOptions,
-  defaultVisible,
   delayHide,
   visible,
   interactive,
   delayShow,
-  modifiers,
   strategy,
   followCursor,
   onVisibleChange,
@@ -120,35 +139,6 @@ const WithTooltipPure = ({
   );
 };
 
-WithTooltipPure.defaultProps = {
-  svg: false,
-  trigger: 'click',
-  closeOnOutsideClick: false,
-  placement: 'top',
-  modifiers: [
-    {
-      name: 'preventOverflow',
-      options: {
-        padding: 8,
-      },
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: [8, 8],
-      },
-    },
-    {
-      name: 'arrow',
-      options: {
-        padding: 8,
-      },
-    },
-  ],
-  hasChrome: true,
-  defaultVisible: false,
-};
-
 export interface WithTooltipStateProps extends Omit {
   startOpen?: boolean;
   onVisibleChange?: (visible: boolean) => void | boolean;
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index ffe4a08d699f..372a684c315d 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -42,6 +42,7 @@ export { createCopyToClipboardFunction } from './components/syntaxhighlighter/sy
 
 // UI
 export { ActionBar } from './components/ActionBar/ActionBar';
+export { Modal } from './components/Modal/Modal';
 export { Spaced } from './components/spaced/Spaced';
 export { Placeholder } from './components/placeholder/placeholder';
 export { ScrollArea } from './components/ScrollArea/ScrollArea';
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 9dd2b2528cd8..fcdeaba1e98d 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.1.0-alpha.7",
+  "version": "8.2.0-alpha.1",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -85,6 +85,7 @@
     "@storybook/test": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
+    "@tanstack/react-virtual": "^3.3.0",
     "@testing-library/react": "^11.2.2",
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.3.4",
@@ -94,7 +95,7 @@
     "fs-extra": "^11.1.0",
     "fuse.js": "^3.6.1",
     "lodash": "^4.17.21",
-    "markdown-to-jsx": "7.3.2",
+    "markdown-to-jsx": "^7.4.5",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "qs": "^6.10.0",
@@ -107,6 +108,7 @@
     "resolve-from": "^5.0.0",
     "semver": "^7.3.7",
     "store2": "^2.14.2",
+    "telejson": "^7.2.0",
     "ts-dedent": "^2.0.0",
     "typescript": "^5.3.2"
   },
diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx
index a17636ceadbd..3df7a5900dfb 100644
--- a/code/ui/manager/src/components/layout/Layout.tsx
+++ b/code/ui/manager/src/components/layout/Layout.tsx
@@ -81,7 +81,7 @@ const useLayoutSyncingState = ({
   useLayoutEffect(() => {
     if (
       internalDraggingSizeState.isDragging || // wait with syncing managerLayoutState until user is done dragging
-      layoutStateIsEqual(prevManagerLayoutStateRef.current, internalDraggingSizeState) // don't sync managerLayoutState if it doesn't differ from internalDraggingSizeState
+      layoutStateIsEqual(managerLayoutState, internalDraggingSizeState) // don't sync managerLayoutState if it doesn't differ from internalDraggingSizeStatee)
     ) {
       return;
     }
@@ -95,6 +95,7 @@ const useLayoutSyncingState = ({
       ...nextState,
     };
     setManagerLayoutState(nextState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalDraggingSizeState, setManagerLayoutState]);
 
   const isPagesShown =
diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
index 9ecee759fb06..ee3b8aa1a00d 100644
--- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -19,16 +19,17 @@ interface MobileNavigationProps {
  */
 const useFullStoryName = () => {
   const { index } = useStorybookState();
-  const currentStory = useStorybookApi().getCurrentStoryData();
+  const api = useStorybookApi();
+  const currentStory = api.getCurrentStoryData();
 
   if (!currentStory) return '';
 
-  let fullStoryName = currentStory.renderLabel?.(currentStory) || currentStory.name;
+  let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
   let node = index[currentStory.id];
 
   while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
     node = index[node.parent];
-    const parentName = node.renderLabel?.(node) || node.name;
+    const parentName = node.renderLabel?.(node, api) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index af4c7fcc8e57..a3b87acdcf52 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -218,7 +218,7 @@ export const BookIconLongSubHeadline: Story = {
       content: {
         headline: 'Storybook has a book icon!',
         subHeadline:
-          'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
+          'Find out more! by clicking on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
       },
       icon: ,
       link: undefined,
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index d47f539a3f1c..f8e44fcd3660 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -81,7 +81,7 @@ const NotificationWithInteractiveStates = styled(Notification)(() => ({
       'rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)',
   },
 }));
-const NotificationButton = NotificationWithInteractiveStates.withComponent('button');
+const NotificationButton = NotificationWithInteractiveStates.withComponent('div');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 
 const NotificationIconWrapper = styled.div(() => ({
diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
new file mode 100644
index 000000000000..0e16ea234750
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
@@ -0,0 +1,219 @@
+import React, { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
+import { CheckIcon } from '@storybook/icons';
+import type {
+  ArgTypesRequestPayload,
+  ArgTypesResponsePayload,
+  CreateNewStoryErrorPayload,
+  CreateNewStoryRequestPayload,
+  CreateNewStoryResponsePayload,
+  FileComponentSearchRequestPayload,
+  FileComponentSearchResponsePayload,
+  RequestData,
+  ResponseData,
+  SaveStoryRequestPayload,
+  SaveStoryResponsePayload,
+} from '@storybook/core-events';
+import {
+  ARGTYPES_INFO_REQUEST,
+  ARGTYPES_INFO_RESPONSE,
+  CREATE_NEW_STORYFILE_REQUEST,
+  CREATE_NEW_STORYFILE_RESPONSE,
+  FILE_COMPONENT_SEARCH_REQUEST,
+  FILE_COMPONENT_SEARCH_RESPONSE,
+  SAVE_STORY_REQUEST,
+  SAVE_STORY_RESPONSE,
+} from '@storybook/core-events';
+import type { RequestResponseError } from '@storybook/manager-api';
+import { addons, experimental_requestResponse, useStorybookApi } from '@storybook/manager-api';
+
+import { useDebounce } from '../../hooks/useDebounce';
+import type { NewStoryPayload, SearchResult } from './FileSearchList';
+import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils';
+import { FileSearchModal } from './FileSearchModal';
+
+interface CreateNewStoryFileModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const stringifyArgs = (args: Record) =>
+  JSON.stringify(args, (_, value) => {
+    if (typeof value === 'function') return '__sb_empty_function_arg__';
+    return value;
+  });
+
+export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFileModalProps) => {
+  const [isLoading, setLoading] = useState(false);
+  const [fileSearchQuery, setFileSearchQuery] = useState('');
+  const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 600);
+  const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced);
+  const emittedValue = useRef(null);
+  const [error, setError] = useState<{ selectedItemId?: number | string; error: string } | null>(
+    null
+  );
+  const api = useStorybookApi();
+
+  const [searchResults, setSearchResults] = useState(null);
+
+  const handleSuccessfullyCreatedStory = useCallback(
+    (componentExportName: string) => {
+      api.addNotification({
+        id: 'create-new-story-file-success',
+        content: {
+          headline: 'Story file created',
+          subHeadline: `${componentExportName} was created`,
+        },
+        duration: 8_000,
+        icon: ,
+      });
+
+      onOpenChange(false);
+    },
+    [api, onOpenChange]
+  );
+
+  const handleStoryAlreadyExists = useCallback(() => {
+    api.addNotification({
+      id: 'create-new-story-file-error',
+      content: {
+        headline: 'Story already exists',
+        subHeadline: `Successfully navigated to existing story`,
+      },
+      duration: 8_000,
+      icon: ,
+    });
+
+    onOpenChange(false);
+  }, [api, onOpenChange]);
+
+  const handleFileSearch = useCallback(() => {
+    setLoading(true);
+    const channel = addons.getChannel();
+
+    const set = (data: ResponseData) => {
+      const isLatestRequest = data.id === fileSearchQueryDeferred;
+
+      if (isLatestRequest) {
+        if (data.success) {
+          setSearchResults(data.payload.files);
+        } else {
+          setError({ error: data.error });
+        }
+
+        channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
+        setLoading(false);
+        emittedValue.current = null;
+      }
+    };
+
+    channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set);
+
+    if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) {
+      emittedValue.current = fileSearchQueryDeferred;
+      channel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
+        id: fileSearchQueryDeferred,
+        payload: {},
+      } satisfies RequestData);
+    } else {
+      setSearchResults(null);
+      setLoading(false);
+    }
+
+    return () => {
+      channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
+    };
+  }, [fileSearchQueryDeferred]);
+
+  const handleCreateNewStory = useCallback(
+    async ({
+      componentExportName,
+      componentFilePath,
+      componentIsDefaultExport,
+      componentExportCount,
+      selectedItemId,
+    }: NewStoryPayload) => {
+      try {
+        const channel = addons.getChannel();
+
+        const createNewStoryResult = await experimental_requestResponse<
+          CreateNewStoryRequestPayload,
+          CreateNewStoryResponsePayload,
+          CreateNewStoryErrorPayload
+        >(channel, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, {
+          componentExportName,
+          componentFilePath,
+          componentIsDefaultExport,
+          componentExportCount,
+        });
+
+        setError(null);
+
+        const storyId = createNewStoryResult.storyId;
+
+        await trySelectNewStory(api.selectStory, storyId);
+
+        try {
+          const argTypesInfoResult = await experimental_requestResponse<
+            ArgTypesRequestPayload,
+            ArgTypesResponsePayload
+          >(channel, ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, {
+            storyId,
+          });
+
+          const argTypes = argTypesInfoResult.argTypes;
+
+          const requiredArgs = extractSeededRequiredArgs(argTypes);
+
+          await experimental_requestResponse(
+            channel,
+            SAVE_STORY_REQUEST,
+            SAVE_STORY_RESPONSE,
+            {
+              args: stringifyArgs(requiredArgs),
+              importPath: createNewStoryResult.storyFilePath,
+              csfId: storyId,
+            }
+          );
+        } catch (e) {}
+
+        handleSuccessfullyCreatedStory(componentExportName);
+        handleFileSearch();
+      } catch (e: any) {
+        switch (e?.payload?.type as CreateNewStoryErrorPayload['type']) {
+          case 'STORY_FILE_EXISTS':
+            const err = e as RequestResponseError;
+            await trySelectNewStory(api.selectStory, err.payload.kind);
+            handleStoryAlreadyExists();
+            break;
+          default:
+            setError({ selectedItemId: selectedItemId, error: (e as any)?.message });
+            break;
+        }
+      }
+    },
+    [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]
+  );
+
+  useEffect(() => {
+    setError(null);
+  }, [fileSearchQueryDeferred]);
+
+  useEffect(() => {
+    return handleFileSearch();
+  }, [handleFileSearch]);
+
+  return (
+    
+  );
+};
diff --git a/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx b/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx
new file mode 100644
index 000000000000..83e2dac00f83
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx
@@ -0,0 +1,118 @@
+import type { Virtualizer } from '@tanstack/react-virtual';
+import { useEffect } from 'react';
+import { flushSync } from 'react-dom';
+
+interface UseArrowKeyNavigationProps {
+  rowVirtualizer: Virtualizer;
+  parentRef: React.MutableRefObject;
+  selectedItem: number | null;
+}
+
+/**
+ * Hook to navigate through the list of items and subitems using the arrow keys
+ */
+export const useArrowKeyNavigation = ({
+  parentRef,
+  rowVirtualizer,
+  selectedItem,
+}: UseArrowKeyNavigationProps) => {
+  useEffect(() => {
+    const handleArrowKeys = (event: KeyboardEvent) => {
+      if (!parentRef.current) {
+        return;
+      }
+
+      const maxIndex = rowVirtualizer.options.count;
+      const activeElement = document.activeElement;
+      const rowIndex = parseInt(activeElement.getAttribute('data-index') || '-1', 10);
+      const isActiveElementInput = activeElement.tagName === 'INPUT';
+
+      const getFirstElement = () =>
+        document.querySelector('[data-index="0"]') as HTMLElement | null;
+      const getLastElement = () =>
+        document.querySelector(`[data-index="${maxIndex - 1}"]`) as HTMLElement | null;
+
+      if (event.code === 'ArrowDown' && activeElement) {
+        event.stopPropagation();
+
+        // If the search input is focused, focus the first element
+        if (isActiveElementInput) {
+          getFirstElement()?.focus();
+          return;
+        }
+
+        // if the last element is focused, focus the first element
+        if (rowIndex === maxIndex - 1) {
+          flushSync(() => {
+            rowVirtualizer.scrollToIndex(0, { align: 'start' });
+          });
+          setTimeout(() => {
+            getFirstElement()?.focus();
+          }, 100);
+          return;
+        }
+
+        // if the focus is on an selected element, focus the first element in the sublist
+        if (selectedItem === rowIndex) {
+          const firstSubListItem = document.querySelector(
+            `[data-index-position="${selectedItem}_first"]`
+          ) as HTMLElement;
+          firstSubListItem?.focus();
+          return;
+        }
+
+        // if the focus is on the last element on a sublist, focus the next parent list element
+        if (selectedItem !== null) {
+          const isLastElementSelected = activeElement
+            .getAttribute('data-index-position')
+            ?.includes('last');
+          if (isLastElementSelected) {
+            const nextElement = document.querySelector(
+              `[data-index="${selectedItem + 1}"]`
+            ) as HTMLElement;
+            nextElement?.focus();
+            return;
+          }
+        }
+
+        const nextElement = activeElement.nextElementSibling as HTMLElement;
+        nextElement?.focus();
+      }
+
+      if (event.code === 'ArrowUp' && activeElement) {
+        if (isActiveElementInput) {
+          flushSync(() => {
+            rowVirtualizer.scrollToIndex(maxIndex - 1, { align: 'start' });
+          });
+          setTimeout(() => {
+            getLastElement()?.focus();
+          }, 100);
+          return;
+        }
+
+        // if the focus is on the first element on a sublist, focus the previous parent list element
+        if (selectedItem !== null) {
+          const isLastElementSelected = activeElement
+            .getAttribute('data-index-position')
+            ?.includes('first');
+          if (isLastElementSelected) {
+            const prevElement = document.querySelector(
+              `[data-index="${selectedItem}"]`
+            ) as HTMLElement;
+            prevElement?.focus();
+            return;
+          }
+        }
+
+        const previousElement = activeElement.previousElementSibling as HTMLElement;
+        previousElement?.focus();
+      }
+    };
+    // listener for arrow keys to select the next/previous element by using the current active element as base
+    document.addEventListener('keydown', handleArrowKeys, { capture: true });
+
+    return () => {
+      document.removeEventListener('keydown', handleArrowKeys, { capture: true });
+    };
+  }, [rowVirtualizer, selectedItem, parentRef]);
+};
diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx
new file mode 100644
index 000000000000..420d4ce5dc6e
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileList.tsx
@@ -0,0 +1,215 @@
+import { styled } from '@storybook/theming';
+import { rgba } from 'polished';
+
+export const FileListWrapper = styled('div')(({ theme }) => ({
+  marginTop: '-16px',
+  // after element which fades out the list
+  '&::after': {
+    content: '""',
+    position: 'fixed',
+    pointerEvents: 'none',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '80px',
+    background: `linear-gradient(${rgba(theme.barBg, 0)} 10%, ${theme.barBg} 80%)`,
+  },
+}));
+
+export const FileList = styled('div')(({ theme }) => ({
+  height: '280px',
+  overflow: 'auto',
+  msOverflowStyle: 'none',
+  scrollbarWidth: 'none',
+  position: 'relative',
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+}));
+
+export const FileListLi = styled('li')(({ theme }) => ({
+  ':focus-visible': {
+    outline: 'none',
+
+    '.file-list-item': {
+      borderRadius: '4px',
+      background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+
+      '> svg': {
+        display: 'flex',
+      },
+    },
+  },
+}));
+
+export const FileListItem = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+}));
+
+export const FileListItemContentWrapper = styled.div<{
+  selected: boolean;
+  disabled: boolean;
+  error: boolean;
+}>(({ theme, selected, disabled, error }) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: '8px',
+  alignSelf: 'stretch',
+  padding: '8px 16px',
+  cursor: 'pointer',
+  borderRadius: '4px',
+
+  ...(selected && {
+    borderRadius: '4px',
+    background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+
+    '> svg': {
+      display: 'flex',
+    },
+  }),
+
+  ...(disabled && {
+    cursor: 'not-allowed',
+
+    div: {
+      color: `${theme.color.mediumdark} !important`,
+    },
+  }),
+
+  ...(error && {
+    background: theme.base === 'light' ? '#00000011' : '#00000033',
+  }),
+
+  '&:hover': {
+    background: error
+      ? '#00000022'
+      : theme.base === 'dark'
+        ? 'rgba(255,255,255,.1)'
+        : theme.color.mediumlight,
+
+    '> svg': {
+      display: 'flex',
+    },
+  },
+}));
+
+export const FileListUl = styled('ul')({
+  margin: 0,
+  padding: '0 0 0 0',
+  width: '100%',
+  position: 'relative',
+});
+
+export const FileListItemContent = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  width: 'calc(100% - 50px)',
+});
+
+export const FileListIconWrapper = styled('div')<{ error: boolean }>(({ theme, error }) => ({
+  color: error ? theme.color.negativeText : theme.color.secondary,
+}));
+
+export const FileListItemLabel = styled('div')<{ error: boolean }>(({ theme, error }) => ({
+  color: error
+    ? theme.color.negativeText
+    : theme.base === 'dark'
+      ? theme.color.lighter
+      : theme.color.darkest,
+  fontSize: '14px',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '100%',
+}));
+
+export const FileListItemPath = styled('div')(({ theme }) => ({
+  color: theme.color.mediumdark,
+  fontSize: '14px',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '100%',
+}));
+
+export const FileListExport = styled('ul')(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+}));
+
+export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, error }) => ({
+  padding: '8px 16px 8px 16px',
+  marginLeft: '30px',
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  fontSize: '14px',
+  cursor: 'pointer',
+  borderRadius: '4px',
+
+  ':focus-visible': {
+    outline: 'none',
+  },
+
+  ...(error && {
+    background: '#F9ECEC',
+    color: theme.color.negativeText,
+  }),
+
+  '&:hover,:focus-visible': {
+    background: error
+      ? '#F9ECEC'
+      : theme.base === 'dark'
+        ? 'rgba(255, 255, 255, 0.1)'
+        : theme.color.mediumlight,
+
+    '> svg': {
+      display: 'flex',
+    },
+  },
+
+  '> div > svg': {
+    color: error ? theme.color.negativeText : theme.color.secondary,
+  },
+}));
+
+export const FileListItemExportName = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  width: 'calc(100% - 20px)',
+}));
+
+export const FileListItemExportNameContent = styled('span')(({ theme }) => ({
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: 'calc(100% - 160px)',
+  display: 'inline-block',
+}));
+
+export const DefaultExport = styled('span')(({ theme }) => ({
+  display: 'inline-block',
+  padding: `1px ${theme.appBorderRadius}px`,
+  borderRadius: '2px',
+  fontSize: '10px',
+  color: theme.base === 'dark' ? theme.color.lightest : '#727272',
+  backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5',
+}));
+
+export const NoResults = styled('div')(({ theme }) => ({
+  textAlign: 'center',
+  maxWidth: '334px',
+  margin: '16px auto 50px auto',
+  fontSize: '14px',
+  color: theme.base === 'dark' ? theme.color.lightest : '#000',
+}));
+
+export const NoResultsDescription = styled('p')(({ theme }) => ({
+  margin: 0,
+  color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark,
+}));
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
new file mode 100644
index 000000000000..f2fb798d5992
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn, fireEvent, findByText, expect } from '@storybook/test';
+
+import { FileSearchList } from './FileSearchList';
+
+const meta = {
+  component: FileSearchList,
+  args: {
+    onNewStory: fn(),
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {
+    isLoading: true,
+    searchResults: null,
+    errorItemId: null,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    isLoading: false,
+    searchResults: [],
+    errorItemId: null,
+  },
+};
+
+export const WithResults: Story = {
+  play: async ({ canvasElement, args }) => {
+    // use react testing library
+    // select first item in the list and click on it
+    const firstItem = await findByText(canvasElement, 'module-multiple-exports.js');
+    fireEvent.click(firstItem);
+
+    const exportedElement1 = await findByText(canvasElement, 'module-multiple-exports');
+    fireEvent.click(exportedElement1);
+
+    expect(args.onNewStory).toHaveBeenCalledWith({
+      selectedItemId: 'src/module-multiple-exports.js_0',
+      componentExportName: 'default',
+      componentFilePath: 'src/module-multiple-exports.js',
+      componentIsDefaultExport: true,
+    });
+
+    const exportedElement2 = await findByText(canvasElement, 'namedExport');
+    fireEvent.click(exportedElement2);
+
+    expect(args.onNewStory).toHaveBeenCalledWith({
+      selectedItemId: 'src/module-multiple-exports.js_1',
+      componentExportName: 'namedExport',
+      componentFilePath: 'src/module-multiple-exports.js',
+      componentIsDefaultExport: false,
+    });
+
+    const singleExport = await findByText(canvasElement, 'module-single-export.js');
+    fireEvent.click(singleExport);
+
+    expect(args.onNewStory).toHaveBeenCalledWith({
+      selectedItemId: 'src/module-single-export.js',
+      componentExportName: 'default',
+      componentFilePath: 'src/module-single-export.js',
+      componentIsDefaultExport: true,
+    });
+
+    expect(args.onNewStory).toHaveBeenCalledTimes(3);
+
+    const noExportsModule1 = await findByText(canvasElement, 'no-exports-module.js');
+    fireEvent.click(noExportsModule1);
+
+    expect(args.onNewStory).toHaveBeenCalledTimes(3);
+
+    const noExportsModule2 = await findByText(canvasElement, 'no-exports-module-1.js');
+    fireEvent.click(noExportsModule2);
+
+    expect(args.onNewStory).toHaveBeenCalledTimes(3);
+  },
+  args: {
+    isLoading: false,
+    errorItemId: null,
+    searchResults: [
+      {
+        exportedComponents: [],
+        storyFileExists: false,
+        filepath: 'src/no-exports-module.js',
+      },
+      {
+        storyFileExists: false,
+        exportedComponents: [
+          {
+            default: true,
+            name: 'default',
+          },
+          {
+            default: false,
+            name: 'namedExport',
+          },
+        ],
+        filepath: 'src/module-multiple-exports.js',
+      },
+      {
+        storyFileExists: false,
+        exportedComponents: null,
+        filepath: 'src/no-exports-module-1.js',
+      },
+      {
+        storyFileExists: false,
+        exportedComponents: [
+          {
+            default: true,
+            name: 'default',
+          },
+        ],
+        filepath: 'src/module-single-export.js',
+      },
+      {
+        storyFileExists: true,
+        exportedComponents: [
+          {
+            default: true,
+            name: 'default',
+          },
+          {
+            default: false,
+            name: 'namedExportWithStory',
+          },
+        ],
+        filepath: 'src/has-story-file-with-multiple-exports.js',
+      },
+      {
+        storyFileExists: true,
+        exportedComponents: [
+          {
+            default: true,
+            name: 'default',
+          },
+        ],
+        filepath: 'src/has-story-file.js',
+      },
+    ],
+  },
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
new file mode 100644
index 000000000000..316704abfba6
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
@@ -0,0 +1,368 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons';
+import { styled } from '@storybook/theming';
+import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton';
+import {
+  DefaultExport,
+  FileList,
+  FileListExport,
+  FileListIconWrapper,
+  FileListItem,
+  FileListItemContent,
+  FileListItemContentWrapper,
+  FileListItemExport,
+  FileListItemExportName,
+  FileListItemExportNameContent,
+  FileListItemLabel,
+  FileListItemPath,
+  FileListLi,
+  FileListUl,
+  FileListWrapper,
+  NoResults,
+  NoResultsDescription,
+} from './FileList';
+import type { VirtualItem } from '@tanstack/react-virtual';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type {
+  CreateNewStoryRequestPayload,
+  FileComponentSearchResponsePayload,
+} from '@storybook/core-events';
+import { WithTooltip, TooltipNote } from '@storybook/components';
+import { useArrowKeyNavigation } from './FIleSearchList.utils';
+
+export type SearchResult = FileComponentSearchResponsePayload['files'][0];
+
+export interface NewStoryPayload extends CreateNewStoryRequestPayload {
+  selectedItemId: string | number;
+}
+
+const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({
+  display: 'none',
+  alignSelf: 'center',
+  color: theme.color.mediumdark,
+}));
+
+const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({
+  display: 'none',
+  alignSelf: 'center',
+  color: theme.color.mediumdark,
+}));
+
+interface FileSearchListProps {
+  isLoading: boolean;
+  searchResults: Array | null;
+  onNewStory: (props: NewStoryPayload) => void;
+  errorItemId?: number | string;
+}
+
+interface FileItemContentProps {
+  virtualItem: VirtualItem;
+  selected: number | null;
+  searchResult: SearchResult;
+}
+
+interface FileItemSelectionPayload {
+  virtualItem: VirtualItem;
+  searchResult: SearchResult;
+  itemId: string;
+}
+
+interface FileItemComponentSelectionPayload {
+  searchResult: SearchResult;
+  component: SearchResult['exportedComponents'][0];
+  id: string;
+}
+
+export const FileSearchList = memo(function FileSearchList({
+  isLoading,
+  searchResults,
+  onNewStory,
+  errorItemId,
+}: FileSearchListProps) {
+  const [selectedItem, setSelectedItem] = useState(null);
+  const parentRef = React.useRef();
+
+  const sortedSearchResults = useMemo(() => {
+    // search results with no exports should be at the end of the list
+    return [...(searchResults ?? [])]?.sort((a, b) => {
+      const isALowPriority = a.exportedComponents === null || a.exportedComponents?.length === 0;
+      const hasAStory = a.storyFileExists;
+
+      const isBLowPriority = b.exportedComponents === null || b.exportedComponents?.length === 0;
+      const hasBStory = b.storyFileExists;
+
+      if (hasAStory && !hasBStory) {
+        return -1;
+      }
+
+      if (hasBStory && !hasAStory) {
+        return 1;
+      }
+
+      if (isALowPriority && !isBLowPriority) {
+        return 1;
+      }
+
+      if (!isALowPriority && isBLowPriority) {
+        return -1;
+      }
+
+      return 0;
+    });
+  }, [searchResults]);
+
+  const count = searchResults?.length || 0;
+
+  const rowVirtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    paddingStart: 16,
+    paddingEnd: 40,
+    estimateSize: () => 54,
+    overscan: 2,
+  });
+
+  useArrowKeyNavigation({ rowVirtualizer, parentRef, selectedItem });
+
+  const handleFileItemSelection = useCallback(
+    ({ virtualItem, searchResult, itemId }: FileItemSelectionPayload) => {
+      if (searchResult?.exportedComponents?.length > 1) {
+        setSelectedItem((sItem) => {
+          if (sItem === virtualItem.index) {
+            return null;
+          }
+
+          return virtualItem.index;
+        });
+      } else if (searchResult?.exportedComponents?.length === 1) {
+        onNewStory({
+          componentExportName: searchResult.exportedComponents[0].name,
+          componentFilePath: searchResult.filepath,
+          componentIsDefaultExport: searchResult.exportedComponents[0].default,
+          selectedItemId: itemId,
+          componentExportCount: 1,
+        });
+      }
+    },
+    [onNewStory]
+  );
+
+  const handleFileItemComponentSelection = useCallback(
+    ({ searchResult, component, id }: FileItemComponentSelectionPayload) => {
+      onNewStory({
+        componentExportName: component.name,
+        componentFilePath: searchResult.filepath,
+        componentIsDefaultExport: component.default,
+        selectedItemId: id,
+        componentExportCount: searchResult.exportedComponents.length,
+      });
+    },
+    [onNewStory]
+  );
+
+  const ListItem = useCallback(
+    ({ virtualItem, selected, searchResult }: FileItemContentProps) => {
+      const itemError = errorItemId === searchResult.filepath;
+      const itemSelected = selected === virtualItem.index;
+
+      return (
+        
+          
+            
+              
+            
+            
+              
+                {searchResult.filepath.split('/').at(-1)}
+              
+              {searchResult.filepath}
+            
+            {itemSelected ?  : }
+          
+          {searchResult?.exportedComponents?.length > 1 && itemSelected && (
+             {
+                e.stopPropagation();
+              }}
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  e.stopPropagation();
+                }
+              }}
+            >
+              {searchResult.exportedComponents?.map((component, itemExportId) => {
+                const itemExportError = errorItemId === `${searchResult.filepath}_${itemExportId}`;
+                const position =
+                  itemExportId === 0
+                    ? 'first'
+                    : itemExportId === searchResult.exportedComponents.length - 1
+                      ? 'last'
+                      : 'middle';
+
+                return (
+                   {
+                      handleFileItemComponentSelection({
+                        searchResult,
+                        component,
+                        id: `${searchResult.filepath}_${itemExportId}`,
+                      });
+                    }}
+                    onKeyUp={(event) => {
+                      if (event.key === 'Enter') {
+                        handleFileItemComponentSelection({
+                          searchResult,
+                          component,
+                          id: `${searchResult.filepath}_${itemExportId}`,
+                        });
+                      }
+                    }}
+                  >
+                    
+                      
+                      {component.default ? (
+                        <>
+                          
+                            {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)}
+                          
+                          Default export
+                        
+                      ) : (
+                        component.name
+                      )}
+                    
+                    
+                  
+                );
+              })}
+            
+          )}
+        
+      );
+    },
+    [handleFileItemComponentSelection, errorItemId]
+  );
+
+  if (isLoading && (searchResults === null || searchResults?.length === 0)) {
+    return ;
+  }
+
+  if (searchResults?.length === 0) {
+    return (
+      
+        
We could not find any file with that name

+        
+          You may want to try using different keywords, check for typos, and adjust your filters
+        
+      
+    );
+  }
+
+  if (sortedSearchResults?.length > 0) {
+    return (
+      
+        
+          
+            {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+              const searchResult = sortedSearchResults[virtualItem.index];
+              const noExports =
+                searchResult.exportedComponents === null ||
+                searchResult.exportedComponents?.length === 0;
+
+              const itemProps = {};
+
+              return (
+                 {
+                    handleFileItemSelection({
+                      virtualItem,
+                      itemId: searchResult.filepath,
+                      searchResult,
+                    });
+                  }}
+                  onKeyUp={(event) => {
+                    if (event.key === 'Enter') {
+                      handleFileItemSelection({
+                        virtualItem,
+                        itemId: searchResult.filepath,
+                        searchResult,
+                      });
+                    }
+                  }}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${virtualItem.start}px)`,
+                  }}
+                  tabIndex={0}
+                >
+                  {noExports ? (
+                    
+                      }
+                    >
+                      
+                    
+                  ) : (
+                    
+                  )}
+                
+              );
+            })}
+          
+        
+      
+    );
+  }
+
+  return null;
+});
diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx
new file mode 100644
index 000000000000..eaeaca9c0f75
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton';
+
+const meta = {
+  component: FileSearchListLoadingSkeleton,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx
new file mode 100644
index 000000000000..f8050f4942f6
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { FileList, FileListItem } from './FileList';
+
+const FileListItemContentWrapperSkeleton = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: '8px',
+  alignSelf: 'stretch',
+  padding: '8px 16px',
+}));
+
+const FileListItemContentSkeleton = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  width: '100%',
+  borderRadius: '3px',
+});
+
+const FileListIconWrapperSkeleton = styled.div(({ theme }) => ({
+  width: '14px',
+  height: '14px',
+  borderRadius: '3px',
+  marginTop: '1px',
+  background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)',
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+}));
+
+const FileListItemSkeleton = styled.div(({ theme }) => ({
+  height: '16px',
+  borderRadius: '3px',
+  background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)',
+  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
+  width: '100%',
+  maxWidth: '100%',
+
+  '+ div': {
+    marginTop: '6px',
+  },
+}));
+
+export const FileSearchListLoadingSkeleton = () => {
+  return (
+    
+      {[1, 2, 3].map((result) => (
+        
+          
+            
+            
+              
+              
+            
+          
+        
+      ))}
+    
+  );
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx
new file mode 100644
index 000000000000..aaa604953aea
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx
@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { findByText, fireEvent, fn, expect } from '@storybook/test';
+import { WithResults } from './FileSearchList.stories';
+import React, { useState } from 'react';
+
+import { FileSearchModal } from './FileSearchModal';
+
+const meta = {
+  component: FileSearchModal,
+  args: {
+    open: true,
+    setError: fn(),
+    onCreateNewStory: fn(),
+    onOpenChange: fn(),
+    setFileSearchQuery: fn(),
+  },
+  // This decorator is used to show the modal in the side by side view
+  decorators: [
+    (Story, context) => {
+      const [container, setContainer] = useState(null);
+
+      if (context.globals.theme === 'side-by-side') {
+        return (
+          
 {
+              setContainer(element);
+            }}
+            style={{
+              width: '100%',
+              height: '100%',
+              minHeight: '600px',
+              transform: 'translateZ(0)',
+            }}
+          >
+            {Story({ args: { ...context.args, container } })}
+          

+        );
+      }
+
+      return Story();
+    },
+  ],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const InitialState: Story = {
+  args: {
+    fileSearchQuery: '',
+    fileSearchQueryDeferred: '',
+    isLoading: false,
+    error: null,
+    searchResults: null,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: true,
+    error: null,
+    searchResults: null,
+  },
+};
+
+export const LoadingWithPreviousResults: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: true,
+    error: null,
+    searchResults: WithResults.args.searchResults,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: false,
+    error: null,
+    searchResults: [],
+  },
+};
+
+export const WithSearchResults: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: false,
+    error: null,
+    searchResults: WithResults.args.searchResults,
+  },
+  play: async ({ canvasElement, args }) => {
+    const parent = canvasElement.parentNode as HTMLElement;
+
+    const moduleSingleExport = await findByText(parent, 'module-single-export.js');
+    await fireEvent.click(moduleSingleExport);
+
+    expect(args.onCreateNewStory).toHaveBeenCalledWith({
+      componentExportCount: 1,
+      componentExportName: 'default',
+      componentFilePath: 'src/module-single-export.js',
+      componentIsDefaultExport: true,
+      selectedItemId: 'src/module-single-export.js',
+    });
+  },
+};
+
+export const WithSearchResultsAndError: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: false,
+    error: { error: 'Some error occured', selectedItemId: 'src/module-multiple-exports.js' },
+    searchResults: WithResults.args.searchResults,
+  },
+};
+
+export const WithSearchResultsAndMultiLineError: Story = {
+  args: {
+    fileSearchQuery: 'src',
+    fileSearchQueryDeferred: 'src',
+    isLoading: false,
+    error: {
+      error: 'A very long error occured. A very long error occured. A very long error occured.',
+      selectedItemId: 'src/module-multiple-exports.js',
+    },
+    searchResults: WithResults.args.searchResults,
+  },
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
new file mode 100644
index 000000000000..40f7b4e76ba9
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useTransition } from 'react';
+import { Modal, Form } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons';
+
+import type { NewStoryPayload, SearchResult } from './FileSearchList';
+import { FileSearchList } from './FileSearchList';
+import { useMeasure } from '../../hooks/useMeasure';
+
+const MODAL_HEIGHT = 418;
+
+const ModalStyled = styled(Modal)(() => ({
+  boxShadow: 'none',
+  background: 'transparent',
+}));
+
+const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
+  backgroundColor: theme.background.bar,
+  borderRadius: 6,
+  boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px`,
+  padding: '16px',
+  transition: 'height 0.3s',
+  height: height ? `${height + 32}px` : 'auto',
+  overflow: 'hidden',
+}));
+
+const ModalContent = styled(Modal.Content)(({ theme }) => ({
+  margin: 0,
+  color: theme.base === 'dark' ? theme.color.lighter : theme.color.mediumdark,
+}));
+
+const ModalInput = styled(Form.Input)(({ theme }) => ({
+  paddingLeft: 40,
+  paddingRight: 28,
+  fontSize: 14,
+  height: 40,
+
+  ...(theme.base === 'light' && {
+    color: theme.color.darkest,
+  }),
+
+  '::placeholder': {
+    color: theme.color.mediumdark,
+  },
+  '&:invalid:not(:placeholder-shown)': {
+    boxShadow: `${theme.color.negative} 0 0 0 1px inset`,
+  },
+  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
+    {
+      display: 'none',
+    },
+}));
+
+const SearchField = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'relative',
+});
+
+const SearchIconWrapper = styled.div(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 16,
+  zIndex: 1,
+  pointerEvents: 'none',
+  color: theme.darkest,
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+}));
+
+const LoadingIcon = styled.div(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  right: 16,
+  zIndex: 1,
+  color: theme.darkest,
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  '@keyframes spin': {
+    from: { transform: 'rotate(0deg)' },
+    to: { transform: 'rotate(360deg)' },
+  },
+  animation: 'spin 1s linear infinite',
+}));
+
+const ModalError = styled(Modal.Error)({
+  position: 'absolute',
+  padding: '8px 40px 8px 16px',
+  bottom: 0,
+  maxHeight: 'initial',
+  width: '100%',
+
+  div: {
+    wordBreak: 'break-word',
+  },
+
+  '> div': {
+    padding: 0,
+  },
+});
+
+const ModalErrorCloseIcon = styled(CloseAltIcon)({
+  position: 'absolute',
+  top: 4,
+  right: -24,
+  cursor: 'pointer',
+});
+
+type Error = { selectedItemId?: number | string; error: string } | null;
+
+interface FileSearchModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fileSearchQuery: string;
+  fileSearchQueryDeferred: string;
+  setFileSearchQuery: (query: string) => void;
+  isLoading: boolean;
+  error: Error;
+  searchResults: SearchResult[] | null;
+  onCreateNewStory: (payload: NewStoryPayload) => void;
+  setError: (error: Error) => void;
+  container?: HTMLElement;
+}
+
+export const FileSearchModal = ({
+  open,
+  onOpenChange,
+  fileSearchQuery,
+  setFileSearchQuery,
+  isLoading,
+  error,
+  searchResults,
+  onCreateNewStory,
+  setError,
+  container,
+}: FileSearchModalProps) => {
+  const [modalContentRef, modalContentDimensions] = useMeasure();
+  const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height);
+  const [, startTransition] = useTransition();
+  // This internal state is used to maintain cursor position when the user types in the search input
+  // See: https://github.com/facebook/react/issues/5386#issuecomment-334001976
+  const [searchInputValue, setSearchInputValue] = useState(fileSearchQuery);
+
+  useEffect(() => {
+    if (modalMaxHeight < modalContentDimensions.height) {
+      setModalMaxHeight(modalContentDimensions.height);
+    }
+  }, [modalContentDimensions.height, modalMaxHeight]);
+
+  return (
+     {
+        onOpenChange(false);
+      }}
+      onInteractOutside={() => {
+        onOpenChange(false);
+      }}
+      container={container}
+    >
+      
+        
+          
+            Add a new story
+            We will create a new story for your component
+          
+          
+            
+              
+            
+             {
+                const newValue = (e.target as HTMLInputElement).value;
+                setSearchInputValue(newValue);
+                startTransition(() => {
+                  setFileSearchQuery(newValue);
+                });
+              }}
+            />
+            {isLoading && (
+              
+                
+              
+            )}
+          
+          {
+            
+          }
+        
+      
+      {error && fileSearchQuery !== '' && (
+        
+          
{error.error}

+           {
+              setError(null);
+            }}
+          />
+        
+      )}
+    
+  );
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
new file mode 100644
index 000000000000..d86a9c208d68
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { extractSeededRequiredArgs } from './FileSearchModal.utils';
+import type { ArgTypes } from '@storybook/csf';
+
+describe('FileSearchModal.utils', () => {
+  describe('extractSeededRequiredArgs', () => {
+    it('should extract seeded required args', () => {
+      const argTypes = {
+        string: {
+          type: { name: 'string', required: true },
+        },
+        stringOptional: {
+          type: { name: 'string', required: false },
+        },
+        number: {
+          type: { name: 'number', required: true },
+        },
+        boolean: {
+          type: { name: 'boolean', required: true },
+        },
+        function: {
+          type: { name: 'function', required: true },
+        },
+        object: {
+          type: {
+            name: 'object',
+            required: true,
+            value: {
+              a: { name: 'string', required: true },
+              b: { name: 'number' },
+            },
+          },
+        },
+        union: {
+          type: {
+            name: 'union',
+            required: true,
+            value: [{ name: 'string', required: true }, { name: 'number' }],
+          },
+        },
+        enum: {
+          type: {
+            name: 'enum',
+            required: true,
+            value: ['a', 'b', 'c'],
+          },
+          options: ['a', 'b', 'c'],
+        },
+        otherObject: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'object' },
+        },
+        otherInlineRadio: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'inline-radio', options: ['a', 'b', 'c'] },
+        },
+        otherRadio: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'radio', options: ['d', 'e', 'f'] },
+        },
+        otherInlineCheck: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'inline-check', options: ['g', 'h', 'i'] },
+        },
+        otherCheck: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'check', options: ['j', 'k', 'l'] },
+        },
+        otherSelect: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'select', options: ['m', 'n', 'o'] },
+        },
+        otherMultiSelect: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'multi-select', options: ['p', 'q', 'r'] },
+        },
+        otherColor: {
+          type: { name: 'other', required: true, value: '' },
+          control: { type: 'color' },
+        },
+        intersection: {
+          type: {
+            name: 'intersection',
+            required: true,
+            value: [
+              {
+                name: 'object',
+                value: {
+                  a: { name: 'string', required: true },
+                  b: { name: 'number' },
+                },
+              },
+            ],
+          },
+        },
+        tuple: {
+          type: {
+            name: 'other',
+            required: true,
+            value: 'tuple',
+          },
+        },
+      } as ArgTypes;
+
+      expect(extractSeededRequiredArgs(argTypes)).toEqual({
+        boolean: true,
+        function: expect.any(Function),
+        number: 0,
+        enum: 'a',
+        otherCheck: 'j',
+        otherColor: '#000000',
+        otherInlineCheck: 'g',
+        otherInlineRadio: 'a',
+        otherMultiSelect: 'p',
+        otherObject: {},
+        otherRadio: 'd',
+        otherSelect: 'm',
+        string: 'string',
+        object: { a: 'a' },
+        union: 'union',
+        intersection: { a: 'a' },
+        tuple: [],
+      });
+    });
+  });
+});
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
new file mode 100644
index 000000000000..f334aadc461c
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
@@ -0,0 +1,117 @@
+import type { ArgTypes, SBType } from '@storybook/csf';
+
+export function extractSeededRequiredArgs(argTypes: ArgTypes) {
+  const extractedArgTypes = Object.keys(argTypes).reduce(
+    (acc, key: keyof typeof argTypes) => {
+      const argType = argTypes[key];
+
+      if (typeof argType.control === 'object' && 'type' in argType.control) {
+        switch (argType.control.type) {
+          case 'object':
+            acc[key] = {};
+            break;
+          case 'inline-radio':
+          case 'radio':
+          case 'inline-check':
+          case 'check':
+          case 'select':
+          case 'multi-select':
+            acc[key] = argType.control.options?.[0];
+            break;
+          case 'color':
+            acc[key] = '#000000';
+            break;
+          default:
+            break;
+        }
+      }
+
+      setArgType(argType.type, acc, key);
+      return acc;
+    },
+    {} as Record
+  );
+  return extractedArgTypes;
+}
+
+function setArgType(
+  type: 'string' | 'number' | 'boolean' | 'symbol' | 'function' | SBType,
+  obj: Record,
+  objKey: string | number
+) {
+  if (typeof type === 'string' || !type.required) {
+    return;
+  }
+
+  switch (type.name) {
+    case 'boolean':
+      obj[objKey] = true;
+      break;
+    case 'number':
+      obj[objKey] = 0;
+      break;
+    case 'string':
+      obj[objKey] = objKey;
+      break;
+    case 'array':
+      obj[objKey] = [];
+      break;
+    case 'object':
+      obj[objKey] = {};
+      Object.entries(type.value ?? {}).forEach(([typeKey, typeVal]) => {
+        setArgType(typeVal, obj[objKey], typeKey);
+      });
+      break;
+    case 'function':
+      obj[objKey] = () => {};
+      break;
+    case 'intersection':
+      if (type.value?.every((v) => v.name === 'object')) {
+        obj[objKey] = {};
+        type.value?.forEach((typeVal) => {
+          if (typeVal.name === 'object') {
+            Object.entries(typeVal.value ?? {}).forEach(([typeValKey, typeValVal]) => {
+              setArgType(typeValVal, obj[objKey], typeValKey);
+            });
+          }
+        });
+      }
+      break;
+    case 'union':
+      if (type.value?.[0] !== undefined) {
+        setArgType(type.value[0], obj, objKey);
+      }
+      break;
+
+    case 'enum':
+      if (type.value?.[0] !== undefined) {
+        obj[objKey] = type.value?.[0];
+      }
+      break;
+
+    case 'other':
+      if (typeof type.value === 'string' && type.value === 'tuple') {
+        obj[objKey] = [];
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+export async function trySelectNewStory(
+  selectStory: (id: string) => Promise | void,
+  storyId: string,
+  attempt = 1
+): Promise {
+  if (attempt > 10) {
+    throw new Error('We could not select the new story. Please try again.');
+  }
+
+  try {
+    await selectStory(storyId);
+  } catch (e) {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    return trySelectNewStory(selectStory, storyId, attempt + 1);
+  }
+}
diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
new file mode 100644
index 000000000000..76136230d3d8
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconSymbols } from './IconSymbols';
+
+const meta = {
+  component: IconSymbols,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/code/ui/manager/src/components/sidebar/Search.stories.tsx b/code/ui/manager/src/components/sidebar/Search.stories.tsx
index 8eb50c9832c9..8b796158db8d 100644
--- a/code/ui/manager/src/components/sidebar/Search.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.stories.tsx
@@ -43,6 +43,12 @@ const baseProps = {
 
 export const Simple: StoryFn = () => {() => null};
 
+export const SimpleWithCreateButton: StoryFn = () => (
+  
+    {() => null}
+  
+);
+
 export const FilledIn: StoryFn = () => (
   
     {() => }
diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx
index 38ac1b3c1f21..6cfa55ec415e 100644
--- a/code/ui/manager/src/components/sidebar/Search.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.tsx
@@ -6,7 +6,8 @@ import type { FuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
 import { global } from '@storybook/global';
 import React, { useRef, useState, useCallback } from 'react';
-import { CloseIcon, SearchIcon } from '@storybook/icons';
+import { CloseIcon, PlusIcon, SearchIcon } from '@storybook/icons';
+import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
 import { DEFAULT_REF_ID } from './Sidebar';
 import type {
   CombinedDataset,
@@ -21,6 +22,7 @@ import { isSearchResult, isExpandType } from './types';
 import { scrollIntoView, searchItem } from '../../utils/tree';
 import { getGroupStatus, getHighestStatus } from '../../utils/status';
 import { useLayout } from '../layout/LayoutProvider';
+import { CreateNewStoryFileModal } from './CreateNewStoryFileModal';
 
 const { document } = global;
 
@@ -43,6 +45,16 @@ const options = {
   ],
 } as FuseOptions;
 
+const SearchBar = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  columnGap: 6,
+});
+
+const TooltipNoteWrapper = styled(TooltipNote)({
+  margin: 0,
+});
+
 const ScreenReaderLabel = styled.label({
   position: 'absolute',
   left: -10000,
@@ -52,6 +64,10 @@ const ScreenReaderLabel = styled.label({
   overflow: 'hidden',
 });
 
+const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({
+  color: theme.color.mediumdark,
+}));
+
 const SearchIconWrapper = styled.div(({ theme }) => ({
   position: 'absolute',
   top: 0,
@@ -67,15 +83,17 @@ const SearchIconWrapper = styled.div(({ theme }) => ({
 const SearchField = styled.div({
   display: 'flex',
   flexDirection: 'column',
+  flexGrow: 1,
   position: 'relative',
 });
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
-  height: 32,
+  height: 28,
   paddingLeft: 28,
   paddingRight: 28,
-  border: `1px solid ${theme.appBorderColor}`,
+  border: 0,
+  boxShadow: `${theme.button.border} 0 0 0 1px inset`,
   background: 'transparent',
   borderRadius: 4,
   fontSize: `${theme.typography.size.s1 + 1}px`,
@@ -113,7 +131,7 @@ const Input = styled.input(({ theme }) => ({
 
 const FocusKey = styled.code(({ theme }) => ({
   position: 'absolute',
-  top: 8,
+  top: 6,
   right: 9,
   height: 16,
   zIndex: 1,
@@ -146,24 +164,30 @@ const ClearIcon = styled.div(({ theme }) => ({
 
 const FocusContainer = styled.div({ outline: 0 });
 
+const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
+const isRendererReact = global.STORYBOOK_RENDERER === 'react';
+
 export const Search = React.memo<{
   children: SearchChildrenFn;
   dataset: CombinedDataset;
   enableShortcuts?: boolean;
   getLastViewed: () => Selection[];
   initialQuery?: string;
+  showCreateStoryButton?: boolean;
 }>(function Search({
   children,
   dataset,
   enableShortcuts = true,
   getLastViewed,
   initialQuery = '',
+  showCreateStoryButton = isDevelopment && isRendererReact,
 }) {
   const api = useStorybookApi();
   const inputRef = useRef(null);
   const [inputPlaceholder, setPlaceholder] = useState('Find components');
   const [allComponents, showAllComponents] = useState(false);
   const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
+  const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false);
 
   const makeFuse = useCallback(() => {
     const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
@@ -360,31 +384,55 @@ export const Search = React.memo<{
         return (
           <>
             Search for components
-            
-              
-                
-              
-              
-              {!isMobile && enableShortcuts && !isOpen && (
-                
-                  {searchShortcut === '⌘ K' ? (
-                    <>
-                      ⌘K
-                    
-                  ) : (
-                    searchShortcut
-                  )}
-                
-              )}
-              {isOpen && (
-                 clearSelection()}>
-                  
-                
+            
+              
+                
+                  
+                
+                
+                {!isMobile && enableShortcuts && !isOpen && (
+                  
+                    {searchShortcut === '⌘ K' ? (
+                      <>
+                        ⌘K
+                      
+                    ) : (
+                      searchShortcut
+                    )}
+                  
+                )}
+                {isOpen && (
+                   clearSelection()}>
+                    
+                  
+                )}
+              
+              {showCreateStoryButton && (
+                <>
+                  }
+                  >
+                     {
+                        setIsFileSearchModalOpen(true);
+                      }}
+                      variant="outline"
+                    >
+                      
+                    
+                  
+                  
+                
               )}
-            
+            
             
               {children({
                 query: input,
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
index 253775bc07c7..46c3d7c14979 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx
@@ -40,6 +40,7 @@ const meta = {
     refId: DEFAULT_REF_ID,
     refs: {},
     status: {},
+    showCreateStoryButton: true,
   },
   decorators: [
     (storyFn) => (
@@ -107,6 +108,12 @@ const refsEmpty = {
 
 export const Simple: Story = {};
 
+export const SimpleInProduction: Story = {
+  args: {
+    showCreateStoryButton: false,
+  },
+};
+
 export const Loading: Story = {
   args: {
     previewInitialized: false,
diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
index 0da159ffb4f1..66c4e7aabf4c 100644
--- a/code/ui/manager/src/components/sidebar/Sidebar.tsx
+++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -114,6 +114,7 @@ export interface SidebarProps extends API_LoadedRefData {
   menuHighlighted?: boolean;
   enableShortcuts?: boolean;
   onMenuClick?: HeadingProps['onMenuClick'];
+  showCreateStoryButton?: boolean;
 }
 
 export const Sidebar = React.memo(function Sidebar({
@@ -130,6 +131,7 @@ export const Sidebar = React.memo(function Sidebar({
   enableShortcuts = true,
   refs = {},
   onMenuClick,
+  showCreateStoryButton,
 }: SidebarProps) {
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
@@ -149,7 +151,12 @@ export const Sidebar = React.memo(function Sidebar({
             isLoading={isLoading}
             onMenuClick={onMenuClick}
           />
-          
+          
             {({
               query,
               results,
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index 42aa27ce694a..caa19f0cab4d 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -220,7 +220,8 @@ const Node = React.memo(function Node({
           }}
           {...(item.type === 'docs' && { docsMode })}
         >
-          {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+          {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+            item.name}
         
         {isSelected && (
           
@@ -272,7 +273,7 @@ const Node = React.memo(function Node({
           aria-expanded={isExpanded}
         >
           
-          {item.renderLabel?.(item) || item.name}
+          {item.renderLabel?.(item, api) || item.name}
         
         {isExpanded && (
           (function Node({
           }
         }}
       >
-        {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+        {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+          item.name}
       
     );
   }
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index d3da898e844c..d89f2fc14018 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -86,6 +86,7 @@ export default {
     'Link',
     'ListItem',
     'Loader',
+    'Modal',
     'OL',
     'P',
     'Placeholder',
@@ -130,16 +131,18 @@ export default {
     'createBrowserChannel',
   ],
   '@storybook/core-events': [
+    'ARGTYPES_INFO_REQUEST',
+    'ARGTYPES_INFO_RESPONSE',
     'CHANNEL_CREATED',
     'CHANNEL_WS_DISCONNECT',
     'CONFIG_ERROR',
-    'CREATE_NEW_STORYFILE',
-    'CREATE_NEW_STORYFILE_RESULT',
+    'CREATE_NEW_STORYFILE_REQUEST',
+    'CREATE_NEW_STORYFILE_RESPONSE',
     'CURRENT_STORY_WAS_SET',
     'DOCS_PREPARED',
     'DOCS_RENDERED',
-    'FILE_COMPONENT_SEARCH',
-    'FILE_COMPONENT_SEARCH_RESULT',
+    'FILE_COMPONENT_SEARCH_REQUEST',
+    'FILE_COMPONENT_SEARCH_RESPONSE',
     'FORCE_REMOUNT',
     'FORCE_RE_RENDER',
     'GLOBALS_UPDATED',
@@ -152,6 +155,8 @@ export default {
     'REQUEST_WHATS_NEW_DATA',
     'RESET_STORY_ARGS',
     'RESULT_WHATS_NEW_DATA',
+    'SAVE_STORY_REQUEST',
+    'SAVE_STORY_RESPONSE',
     'SELECT_STORY',
     'SET_CONFIG',
     'SET_CURRENT_STORY',
@@ -464,12 +469,14 @@ export default {
     'Consumer',
     'ManagerContext',
     'Provider',
+    'RequestResponseError',
     'addons',
     'combineParameters',
     'controlOrMetaKey',
     'controlOrMetaSymbol',
     'eventMatchesShortcut',
     'eventToShortcut',
+    'experimental_requestResponse',
     'isMacLike',
     'isShortcutTaken',
     'keyToSymbol',
diff --git a/code/ui/manager/src/hooks/useDebounce.ts b/code/ui/manager/src/hooks/useDebounce.ts
new file mode 100644
index 000000000000..48f64b82953c
--- /dev/null
+++ b/code/ui/manager/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export function useDebounce(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
diff --git a/code/ui/manager/src/hooks/useMeasure.tsx b/code/ui/manager/src/hooks/useMeasure.tsx
new file mode 100644
index 000000000000..26d349bd216f
--- /dev/null
+++ b/code/ui/manager/src/hooks/useMeasure.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+// Copied and modified from https://usehooks.com/usemeasure
+export function useMeasure() {
+  const [dimensions, setDimensions] = React.useState({
+    width: null,
+    height: null,
+  });
+
+  const prevObserver = React.useRef(null);
+
+  const customRef = React.useCallback((node: T) => {
+    if (prevObserver.current) {
+      prevObserver.current.disconnect();
+      prevObserver.current = null;
+    }
+
+    if (node?.nodeType === Node.ELEMENT_NODE) {
+      const observer = new ResizeObserver(([entry]) => {
+        if (entry && entry.borderBoxSize) {
+          const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
+
+          setDimensions({ width, height });
+        }
+      });
+
+      observer.observe(node);
+      prevObserver.current = observer;
+    }
+  }, []);
+
+  return [customRef, dimensions] as const;
+}
diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts
index c51fcc2f2f86..5ac9aaa1a174 100644
--- a/code/ui/manager/src/typings.d.ts
+++ b/code/ui/manager/src/typings.d.ts
@@ -26,4 +26,5 @@ declare var __STORYBOOK_ICONS__: any;
 declare var __STORYBOOK_CLIENT_LOGGER__: any;
 declare var __STORYBOOK_ADDONS_CHANNEL__: any;
 declare var __STORYBOOK_TYPES__: any;
+declare var STORYBOOK_RENDERER: string | undefined;
 declare var sendTelemetryError: (error: any) => void;
diff --git a/code/yarn.lock b/code/yarn.lock
index 9af4e4c2f3fd..f12c511b2380 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -360,20 +360,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/code-frame@npm:7.23.5"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
   dependencies:
-    "@babel/highlight": "npm:^7.23.4"
-    chalk: "npm:^2.4.2"
-  checksum: 10c0/a10e843595ddd9f97faa99917414813c06214f4d9205294013e20c70fbdf4f943760da37dec1d998bf3e6fc20fa2918a47c0e987a7e458663feb7698063ad7c6
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10c0/d1d4cba89475ab6aab7a88242e1fd73b15ecb9f30c109b69752956434d10a26a52cbd37727c4eca104b6d45227bd1dfce39a6a6f4a14c9b2f07f871e968cf406
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
-  version: 7.23.5
-  resolution: "@babel/compat-data@npm:7.23.5"
-  checksum: 10c0/081278ed46131a890ad566a59c61600a5f9557bd8ee5e535890c8548192532ea92590742fd74bd9db83d74c669ef8a04a7e1c85cdea27f960233e3b83c3a957c
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/compat-data@npm:7.24.4"
+  checksum: 10c0/9cd8a9cd28a5ca6db5d0e27417d609f95a8762b655e8c9c97fd2de08997043ae99f0139007083c5e607601c6122e8432c85fe391731b19bf26ad458fa0c60dd3
   languageName: node
   linkType: hard
 
@@ -400,7 +400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.24.0, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:7.24.0":
   version: 7.24.0
   resolution: "@babel/core@npm:7.24.0"
   dependencies:
@@ -423,7 +423,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:7.23.6, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6":
+"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.24.4, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/fc136966583e64d6f84f4a676368de6ab4583aa87f867186068655b30ef67f21f8e65a88c6d446a7efd219ad7ffb9185c82e8a90183ee033f6f47b5026641e16
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:7.23.6":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
   dependencies:
@@ -435,6 +458,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:7.22.5, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -453,7 +488,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
+"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/helper-compilation-targets@npm:7.23.6"
   dependencies:
@@ -466,22 +501,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5, @babel/helper-create-class-features-plugin@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.0"
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
     "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
     "@babel/helper-optimise-call-expression": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/341548496df202805489422a160bba75b111d994c64d788a397c35f01784632af48bf06023af8aa2fe72c2c254f8c885b4e0f7f3df5ef17a37370f2feaf80328
+  checksum: 10c0/6ebb38375dcd44c79f40008c2de4d023376cf436c135439f15c9c54603c2d6a8ada39b2e07be545da684d9e40b602a0cb0d1670f3877d056deb5f0d786c4bf86
   languageName: node
   linkType: hard
 
@@ -513,9 +548,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.0"
+"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -524,7 +559,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/bf6af52fadbbebc5bf71166b91eac4fc21431ec9b0d2a94063f3a3d900ed44aa1384ad23e920a85e7a657fcf3e80edb2eaaac9d902bd1e632f3b50c836b45c53
+  checksum: 10c0/f777fe0ee1e467fdaaac059c39ed203bdc94ef2465fb873316e9e1acfc511a276263724b061e3b0af2f6d7ad3ff174f2bb368fde236a860e0f650fda43d7e022
   languageName: node
   linkType: hard
 
@@ -554,7 +589,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-member-expression-to-functions@npm:^7.22.15, @babel/helper-member-expression-to-functions@npm:^7.23.0":
+"@babel/helper-member-expression-to-functions@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0"
   dependencies:
@@ -563,12 +598,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.8.3":
-  version: 7.22.15
-  resolution: "@babel/helper-module-imports@npm:7.22.15"
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3, @babel/helper-module-imports@npm:^7.8.3":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
   dependencies:
-    "@babel/types": "npm:^7.22.15"
-  checksum: 10c0/4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10c0/052c188adcd100f5e8b6ff0c9643ddaabc58b6700d3bbbc26804141ad68375a9f97d9d173658d373d31853019e65f62610239e3295cdd58e573bdcb2fded188d
   languageName: node
   linkType: hard
 
@@ -616,16 +651,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.22.20":
-  version: 7.22.20
-  resolution: "@babel/helper-replace-supers@npm:7.22.20"
+"@babel/helper-replace-supers@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-replace-supers@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-member-expression-to-functions": "npm:^7.22.15"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
     "@babel/helper-optimise-call-expression": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/6b0858811ad46873817c90c805015d63300e003c5a85c147a17d9845fa2558a02047c3cc1f07767af59014b2dd0fa75b503e5bc36e917f360e9b67bb6f1e79f4
+  checksum: 10c0/d39a3df7892b7c3c0e307fb229646168a9bd35e26a72080c2530729322600e8cff5f738f44a14860a2358faffa741b6a6a0d6749f113387b03ddbfa0ec10e1a0
   languageName: node
   linkType: hard
 
@@ -657,9 +692,9 @@ __metadata:
   linkType: hard
 
 "@babel/helper-string-parser@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/helper-string-parser@npm:7.23.4"
-  checksum: 10c0/f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac
+  version: 7.24.1
+  resolution: "@babel/helper-string-parser@npm:7.24.1"
+  checksum: 10c0/2f9bfcf8d2f9f083785df0501dbab92770111ece2f90d120352fda6dd2a7d47db11b807d111e6f32aa1ba6d763fe2dc6603d153068d672a5d0ad33ca802632b2
   languageName: node
   linkType: hard
 
@@ -670,7 +705,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5":
+"@babel/helper-validator-option@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-validator-option@npm:7.23.5"
   checksum: 10c0/af45d5c0defb292ba6fd38979e8f13d7da63f9623d8ab9ededc394f67eb45857d2601278d151ae9affb6e03d5d608485806cd45af08b4468a0515cf506510e94
@@ -688,70 +723,83 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/helpers@npm:7.24.0"
+"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helpers@npm:7.24.4"
   dependencies:
     "@babel/template": "npm:^7.24.0"
-    "@babel/traverse": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
     "@babel/types": "npm:^7.24.0"
-  checksum: 10c0/dd27c9f11c1c5244ef312fae37636f2fcc69c541c46508017b846c4cf680af059f1922ce84e3f778f123a70d027ded75c96070ee8e906f3bc52dc26dc43df608
+  checksum: 10c0/747ef62b7fe87de31a2f3c19ff337a86cbb79be2f6c18af63133b614ab5a8f6da5b06ae4b06fb0e71271cb6a27efec6f8b6c9f44c60b8a18777832dc7929e6c5
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/highlight@npm:7.23.4"
+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
   dependencies:
     "@babel/helper-validator-identifier": "npm:^7.22.20"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
-  checksum: 10c0/fbff9fcb2f5539289c3c097d130e852afd10d89a3a08ac0b5ebebbc055cc84a4bcc3dcfed463d488cde12dd0902ef1858279e31d7349b2e8cee43913744bda33
+    picocolors: "npm:^1.0.0"
+  checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
-  version: 7.24.0
-  resolution: "@babel/parser@npm:7.24.0"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+  version: 7.24.4
+  resolution: "@babel/parser@npm:7.24.4"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/77593d0b9de9906823c4d653bb6cda1c7593837598516330f655f70cba6224a37def7dbe5b4dad0038482d407d8d209eb8be5f48ca9a13357d769f829c5adb8e
+  checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/356a4e9fc52d7ca761ce6857fc58e2295c2785d22565760e6a5680be86c6e5883ab86e0ba25ef572882c01713d3a31ae6cfa3e3222cdb95e6026671dab1fa415
+  checksum: 10c0/9aed453a1a21e4fd29add0b4a2d82a2c6f43a47c80d28411f8327f2a714064bc93a6f622c701d263970e0d72d7901d28f7f51e91ba91a31306efe8f17c411182
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/d4e592e6fc4878654243d2e7b51ea86471b868a8cb09de29e73b65d2b64159990c6c198fd7c9c2af2e38b1cddf70206243792853c47384a84f829dada152f605
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3, @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10c0/a8785f099d55ca71ed89815e0f3a636a80c16031f80934cfec17c928d096ee0798964733320c8b145ef36ba429c5e19d5107b06231e0ab6777cfb0f01adfdc23
+  checksum: 10c0/351c36e45795a7890d610ab9041a52f4078a59429f6e74c281984aa44149a10d43e82b3a8172c703c0d5679471e165d1c02b6d2e45a677958ee301b89403f202
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7, @babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/355746e21ad7f43e4f4daef54cfe2ef461ecd19446b2afedd53c39df1bf9aa2eeeeaabee2279b1321de89a97c9360e4f76e9ba950fee50ff1676c25f6929d625
+  checksum: 10c0/d7dd5a59a54635a3152895dcaa68f3370bb09d1f9906c1e72232ff759159e6be48de4a598a993c986997280a2dc29922a48aaa98020f16439f3f57ad72788354
   languageName: node
   linkType: hard
 
@@ -768,15 +816,15 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.22.7":
-  version: 7.24.0
-  resolution: "@babel/plugin-proposal-decorators@npm:7.24.0"
+  version: 7.24.1
+  resolution: "@babel/plugin-proposal-decorators@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.24.0"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
-    "@babel/plugin-syntax-decorators": "npm:^7.24.0"
+    "@babel/plugin-syntax-decorators": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6bf16cb2b5b2f1b63b5ea964853cd3b3419c8285296b5bf64a64127c9d5c1b2e6829e84bd92734e4b71df67686d8f36fb01bb8a45fc52bcece7503b73bc42ec7
+  checksum: 10c0/ffe49522ada6581f1c760b777dbd913afcd204e11e6907c4f2c293ce6d30961449ac19d9960250d8743a1f60e21cb667e51a3af15992dfe7627105e039c46a9b
   languageName: node
   linkType: hard
 
@@ -884,14 +932,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-decorators@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/plugin-syntax-decorators@npm:7.24.0"
+"@babel/plugin-syntax-decorators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-decorators@npm:7.24.1"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6c11801e062772d4e1b0b418a4732574128b1dfc13193a2909fa93937346746aaa7046f88f6026ff3c80777c967d0fe2e4bb19a1d3fb399e8349c81741e4f471
+  checksum: 10c0/14028a746f86efbdd47e4961456bb53d656e9e3461890f66b1b01032151d15fda5ba99fcaa60232a229a33aa9e73b11c2597b706d5074c520155757e372cd17b
   languageName: node
   linkType: hard
 
@@ -917,36 +965,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-syntax-flow@npm:7.22.5"
+"@babel/plugin-syntax-flow@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-flow@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/07afc7df02141597968532bfbfa3f6c0ad21a2bdd885d0e5e035dcf60fdf35f0995631c9750b464e1a6f2feea14160a82787f914e88e8f7115dc99f09853e43e
+  checksum: 10c0/618de04360a96111408abdaafaba2efbaef0d90faad029d50e0281eaad5d7c7bd2ce4420bbac0ee27ad84c2b7bbc3e48f782064f81ed5bc40c398637991004c7
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.22.5, @babel/plugin-syntax-import-assertions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
+"@babel/plugin-syntax-import-assertions@npm:^7.23.3, @babel/plugin-syntax-import-assertions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7db8b59f75667bada2293353bb66b9d5651a673b22c72f47da9f5c46e719142481601b745f9822212fd7522f92e26e8576af37116f85dae1b5e5967f80d0faab
+  checksum: 10c0/72f0340d73e037f0702c61670054e0af66ece7282c5c2f4ba8de059390fee502de282defdf15959cd9f71aa18dc5c5e4e7a0fde317799a0600c6c4e0a656d82b
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
+"@babel/plugin-syntax-import-attributes@npm:^7.23.3, @babel/plugin-syntax-import-attributes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/99b40d33d79205a8e04bb5dea56fd72906ffc317513b20ca7319e7683e18fce8ea2eea5e9171056f92b979dc0ab1e31b2cb5171177a5ba61e05b54fe7850a606
+  checksum: 10c0/309634e3335777aee902552b2cf244c4a8050213cc878b3fb9d70ad8cbbff325dc46ac5e5791836ff477ea373b27832238205f6ceaff81f7ea7c4c7e8fbb13bb
   languageName: node
   linkType: hard
 
@@ -972,14 +1020,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
+"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-jsx@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/563bb7599b868773f1c7c1d441ecc9bc53aeb7832775da36752c926fc402a1fa5421505b39e724f71eb217c13e4b93117e081cac39723b0e11dac4c897f33c3e
+  checksum: 10c0/6cec76fbfe6ca81c9345c2904d8d9a8a0df222f9269f0962ed6eb2eb8f3f10c2f15e993d1ef09dbaf97726bf1792b5851cf5bd9a769f966a19448df6be95d19a
   languageName: node
   linkType: hard
 
@@ -1071,14 +1119,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.3.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-typescript@npm:7.23.3"
+"@babel/plugin-syntax-typescript@npm:^7.24.1, @babel/plugin-syntax-typescript@npm:^7.3.3":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/4d6e9cdb9d0bfb9bd9b220fc951d937fce2ca69135ec121153572cebe81d86abc9a489208d6b69ee5f10cadcaeffa10d0425340a5029e40e14a6025021b90948
+  checksum: 10c0/7a81e277dcfe3138847e8e5944e02a42ff3c2e864aea6f33fd9b70d1556d12b0e70f0d56cc1985d353c91bcbf8fe163e6cc17418da21129b7f7f1d8b9ac00c93
   languageName: node
   linkType: hard
 
@@ -1094,18 +1142,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3"
+"@babel/plugin-transform-arrow-functions@npm:^7.23.3, @babel/plugin-transform-arrow-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/b128315c058f5728d29b0b78723659b11de88247ea4d0388f0b935cddf60a80c40b9067acf45cbbe055bd796928faef152a09d9e4a0695465aca4394d9f109ca
+  checksum: 10c0/f44bfacf087dc21b422bab99f4e9344ee7b695b05c947dacae66de05c723ab9d91800be7edc1fa016185e8c819f3aca2b4a5f66d8a4d1e47d9bad80b8fa55b8e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.23.9":
+"@babel/plugin-transform-async-generator-functions@npm:7.23.9":
   version: 7.23.9
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
   dependencies:
@@ -1119,7 +1167,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.23.3":
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
+    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/55ceed059f819dcccbfe69600bfa1c055ada466bd54eda117cfdd2cf773dd85799e2f6556e4a559b076e93b9704abcca2aef9d72aad7dc8a5d3d17886052f1d3
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-async-to-generator@npm:7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
   dependencies:
@@ -1132,284 +1194,297 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/82c12a11277528184a979163de7189ceb00129f60dd930b0d5313454310bf71205f302fb2bf0430247161c8a22aaa9fb9eec1459f9f7468206422c191978fd59
+  checksum: 10c0/3731ba8e83cbea1ab22905031f25b3aeb0b97c6467360a2cc685352f16e7c786417d8883bc747f5a0beff32266bdb12a05b6292e7b8b75967087200a7bc012c4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.8.3":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3, @babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/83006804dddf980ab1bcd6d67bc381e24b58c776507c34f990468f820d0da71dba3697355ca4856532fa2eeb2a1e3e73c780f03760b5507a511cbedb0308e276
+  checksum: 10c0/6fbaa85f5204f34845dfc0bebf62fdd3ac5a286241c85651e59d426001e7a1785ac501f154e093e0b8ee49e1f51e3f8b06575a5ae8d4a9406d43e4816bf18c37
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
+"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.24.4, @babel/plugin-transform-block-scoping@npm:^7.8.3":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/bca30d576f539eef216494b56d610f1a64aa9375de4134bc021d9660f1fa735b1d7cc413029f22abc0b7cb737e3a57935c8ae9d8bd1730921ccb1deebce51bfd
+  checksum: 10c0/62f55fd1b60a115506e9553c3bf925179b1ab8a42dc31471c4e3ada20573a488b5c5e3317145da352493ef07f1d9750ce1f8a49cb3f39489ac1ab42e5ddc883d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
+"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3, @babel/plugin-transform-class-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/00dff042ac9df4ae67b5ef98b1137cc72e0a24e6d911dc200540a8cb1f00b4cff367a922aeb22da17da662079f0abcd46ee1c5f4cdf37ceebf6ff1639bb9af27
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.23.4, @babel/plugin-transform-class-static-block@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10c0/fdca96640ef29d8641a7f8de106f65f18871b38cc01c0f7b696d2b49c76b77816b30a812c08e759d06dd10b4d9b3af6b5e4ac22a2017a88c4077972224b77ab0
+  checksum: 10c0/19dfeaf4a2ac03695034f7211a8b5ad89103b224608ac3e91791055107c5fe4d7ebe5d9fbb31b4a91265694af78762260642eb270f4b239c175984ee4b253f80
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+"@babel/plugin-transform-classes@npm:^7.23.8, @babel/plugin-transform-classes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-classes@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/227ac5166501e04d9e7fbd5eda6869b084ffa4af6830ac12544ac6ea14953ca00eb1762b0df9349c0f6c8d2a799385910f558066cd0fb85b9ca437b1131a6043
+  checksum: 10c0/586a95826be4d68056fa23d8e6c34353ce2ea59bf3ca8cf62bc784e60964d492d76e1b48760c43fd486ffb65a79d3fed9a4f91289e4f526f88c3b6acc0dfb00e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
+"@babel/plugin-transform-computed-properties@npm:^7.23.3, @babel/plugin-transform-computed-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/template": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/template": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/3ca8a006f8e652b58c21ecb84df1d01a73f0a96b1d216fd09a890b235dd90cb966b152b603b88f7e850ae238644b1636ce5c30b7c029c0934b43383932372e4a
+  checksum: 10c0/8292c508b656b7722e2c2ca0f6f31339852e3ed2b9b80f6e068a4010e961b431ca109ecd467fc906283f4b1574c1e7b1cb68d35a4dea12079d386c15ff7e0eac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-destructuring@npm:7.23.3"
+"@babel/plugin-transform-destructuring@npm:^7.23.3, @babel/plugin-transform-destructuring@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-destructuring@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/717e9a62c1b0c93c507f87b4eaf839ec08d3c3147f14d74ae240d8749488d9762a8b3950132be620a069bde70f4b3e4ee9867b226c973fcc40f3cdec975cde71
+  checksum: 10c0/a08e706a9274a699abc3093f38c72d4a5354eac11c44572cc9ea049915b6e03255744297069fd94fcce82380725c5d6b1b11b9a84c0081aa3aa6fc2fdab98ef6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
+"@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/6c89286d1277c2a63802a453c797c87c1203f89e4c25115f7b6620f5fce15d8c8d37af613222f6aa497aa98773577a6ec8752e79e13d59bc5429270677ea010b
+  checksum: 10c0/758def705ec5a87ef910280dc2df5d2fda59dc5d4771c1725c7aed0988ae5b79e29aeb48109120301a3e1c6c03dfac84700469de06f38ca92c96834e09eadf5d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
+"@babel/plugin-transform-duplicate-keys@npm:^7.23.3, @babel/plugin-transform-duplicate-keys@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7e2640e4e6adccd5e7b0615b6e9239d7c98363e21c52086ea13759dfa11cf7159b255fc5331c2de435639ea8eb6acefae115ae0d797a3d19d12587652f8052a5
+  checksum: 10c0/41072f57f83a6c2b15f3ee0b6779cdca105ff3d98061efe92ac02d6c7b90fdb6e7e293b8a4d5b9c690d9ae5d3ae73e6bde4596dc4d8c66526a0e5e1abc73c88c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
+"@babel/plugin-transform-dynamic-import@npm:^7.23.4, @babel/plugin-transform-dynamic-import@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/19ae4a4a2ca86d35224734c41c48b2aa6a13139f3cfa1cbd18c0e65e461de8b65687dec7e52b7a72bb49db04465394c776aa1b13a2af5dc975b2a0cde3dcab67
+  checksum: 10c0/7e2834780e9b5251ef341854043a89c91473b83c335358620ca721554877e64e416aeb3288a35f03e825c4958e07d5d00ead08c4490fadc276a21fe151d812f1
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3, @babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1"
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5c33ee6a1bdc52fcdf0807f445b27e3fbdce33008531885e65a699762327565fffbcfde8395be7f21bcb22d582e425eddae45650c986462bb84ba68f43687516
+  checksum: 10c0/f0fc4c5a9add25fd6bf23dabe6752e9b7c0a2b2554933dddfd16601245a2ba332b647951079c782bf3b94c6330e3638b9b4e0227f469a7c1c707446ba0eba6c7
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
+"@babel/plugin-transform-export-namespace-from@npm:^7.23.4, @babel/plugin-transform-export-namespace-from@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/38bf04f851e36240bbe83ace4169da626524f4107bfb91f05b4ad93a5fb6a36d5b3d30b8883c1ba575ccfc1bac7938e90ca2e3cb227f7b3f4a9424beec6fd4a7
+  checksum: 10c0/510bb23b2423d5fbffef69b356e4050929c21a7627e8194b1506dd935c7d9cbbd696c9ae9d7c3bcd7e6e7b69561b0b290c2d72d446327b40fc20ce40bbca6712
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.22.5"
+"@babel/plugin-transform-flow-strip-types@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-flow": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-flow": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5949a8e5214e3fc65d31dab0551423cea9d9eef35faa5d0004707ba7347baf96166aa400907ce7498f754db4e1e9d039ca434a508546b0dc9fdae9a42e814c1a
+  checksum: 10c0/e6aa9cbad0441867598d390d4df65bc8c6b797574673e4eedbdae0cc528e81e00f4b2cd38f7d138b0f04bcdd2540384a9812d5d76af5abfa06aee1c7fc20ca58
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+"@babel/plugin-transform-for-of@npm:^7.23.6, @babel/plugin-transform-for-of@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/46681b6ab10f3ca2d961f50d4096b62ab5d551e1adad84e64be1ee23e72eb2f26a1e30e617e853c74f1349fffe4af68d33921a128543b6f24b6d46c09a3e2aec
+  checksum: 10c0/e4bc92b1f334246e62d4bde079938df940794db564742034f6597f2e38bd426e11ae8c5670448e15dd6e45c462f2a9ab3fa87259bddf7c08553ffd9457fc2b2c
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
+"@babel/plugin-transform-function-name@npm:^7.23.3, @babel/plugin-transform-function-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/89cb9747802118048115cf92a8f310752f02030549b26f008904990cbdc86c3d4a68e07ca3b5c46de8a46ed4df2cb576ac222c74c56de67253d2a3ddc2956083
+  checksum: 10c0/65c1735ec3b5e43db9b5aebf3c16171c04b3050c92396b9e22dda0d2aaf51f43fdcf147f70a40678fd9a4ee2272a5acec4826e9c21bcf968762f4c184897ad75
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
+"@babel/plugin-transform-json-strings@npm:^7.23.4, @babel/plugin-transform-json-strings@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/39e82223992a9ad857722ae051291935403852ad24b0dd64c645ca1c10517b6bf9822377d88643fed8b3e61a4e3f7e5ae41cf90eb07c40a786505d47d5970e54
+  checksum: 10c0/13d9b6a3c31ab4be853b3d49d8d1171f9bd8198562fd75da8f31e7de31398e1cfa6eb1d073bed93c9746e4f9c47a53b20f8f4c255ece3f88c90852ad3181dc2d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-literals@npm:7.23.3"
+"@babel/plugin-transform-literals@npm:^7.23.3, @babel/plugin-transform-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/8292106b106201464c2bfdd5c014fe6a9ca1c0256eb0a8031deb20081e21906fe68b156186f77d993c23eeab6d8d6f5f66e8895eec7ed97ce6de5dbcafbcd7f4
+  checksum: 10c0/a27cc7d565ee57b5a2bf136fa889c5c2f5988545ae7b3b2c83a7afe5dd37dfac80dca88b1c633c65851ce6af7d2095c04c01228657ce0198f918e64b5ccd01fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4, @babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/87b034dd13143904e405887e6125d76c27902563486efc66b7d9a9d8f9406b76c6ac42d7b37224014af5783d7edb465db0cdecd659fa3227baad0b3a6a35deff
+  checksum: 10c0/98a2e0843ddfe51443c1bfcf08ba40ad8856fd4f8e397b392a5390a54f257c8c1b9a99d8ffc0fc7e8c55cce45e2cd9c2795a4450303f48f501bcbd662de44554
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
+"@babel/plugin-transform-member-expression-literals@npm:^7.23.3, @babel/plugin-transform-member-expression-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/687f24f3ec60b627fef6e87b9e2770df77f76727b9d5f54fa4c84a495bb24eb4a20f1a6240fa22d339d45aac5eaeb1b39882e941bfd00cf498f9c53478d1ec88
+  checksum: 10c0/2af731d02aa4c757ef80c46df42264128cbe45bfd15e1812d1a595265b690a44ad036041c406a73411733540e1c4256d8174705ae6b8cfaf757fc175613993fd
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
+"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3, @babel/plugin-transform-modules-amd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/9f7ec036f7cfc588833a4dd117a44813b64aa4c1fd5bfb6c78f60198c1d290938213090c93a46f97a68a2490fad909e21a82b2472e95da74d108c125df21c8d5
+  checksum: 10c0/71fd04e5e7026e6e52701214b1e9f7508ba371b757e5075fbb938a79235ed66a54ce65f89bb92b59159e9f03f01b392e6c4de6d255b948bec975a90cfd6809ef
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3"
+"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3, @babel/plugin-transform-modules-commonjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-simple-access": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5c8840c5c9ecba39367ae17c973ed13dbc43234147b77ae780eec65010e2a9993c5d717721b23e8179f7cf49decdd325c509b241d69cfbf92aa647a1d8d5a37d
+  checksum: 10c0/efb3ea2047604a7eb44a9289311ebb29842fe6510ff8b66a77a60440448c65e1312a60dc48191ed98246bdbd163b5b6f3348a0669bcc0e3809e69c7c776b20fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
+"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/1926631fe9d87c0c53427a3420ad49da62d53320d0016b6afab64e5417a672aa5bdff3ea1d24746ffa1e43319c28a80f5d8cef0ad214760d399c293b5850500f
+  checksum: 10c0/38145f8abe8a4ce2b41adabe5d65eb7bd54a139dc58e2885fec975eb5cf247bd938c1dd9f09145c46dbe57d25dd0ef7f00a020e5eb0cbe8195b2065d51e2d93d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
+"@babel/plugin-transform-modules-umd@npm:^7.23.3, @babel/plugin-transform-modules-umd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f0d2f890a15b4367d0d8f160bed7062bdb145c728c24e9bfbc1211c7925aae5df72a88df3832c92dd2011927edfed4da1b1249e4c78402e893509316c0c2caa6
+  checksum: 10c0/14c90c58562b54e17fe4a8ded3f627f9a993648f8378ef00cb2f6c34532032b83290d2ad54c7fff4f0c2cd49091bda780f8cc28926ec4b77a6c2141105a2e699
   languageName: node
   linkType: hard
 
@@ -1425,160 +1500,159 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
+"@babel/plugin-transform-new-target@npm:^7.23.3, @babel/plugin-transform-new-target@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f489b9e1f17b42b2ba6312d58351e757cb23a8409f64f2bb6af4c09d015359588a5d68943b20756f141d0931a94431c782f3ed1225228a930a04b07be0c31b04
+  checksum: 10c0/c4cabe628163855f175a8799eb73d692b6f1dc347aae5022af0c253f80c92edb962e48ddccc98b691eff3d5d8e53c9a8f10894c33ba4cebc2e2f8f8fe554fb7a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/bce490d22da5c87ff27fffaff6ad5a4d4979b8d7b72e30857f191e9c1e1824ba73bb8d7081166289369e388f94f0ce5383a593b1fc84d09464a062c75f824b0b
+  checksum: 10c0/c8532951506fb031287280cebeef10aa714f8a7cea2b62a13c805f0e0af945ba77a7c87e4bbbe4c37fe973e0e5d5e649cfac7f0374f57efc54cdf9656362a392
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.22.11, @babel/plugin-transform-numeric-separator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
+"@babel/plugin-transform-numeric-separator@npm:^7.23.4, @babel/plugin-transform-numeric-separator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/e34902da4f5588dc4812c92cb1f6a5e3e3647baf7b4623e30942f551bf1297621abec4e322ebfa50b320c987c0f34d9eb4355b3d289961d9035e2126e3119c12
+  checksum: 10c0/15e2b83292e586fb4f5b4b4021d4821a806ca6de2b77d5ad6c4e07aa7afa23704e31b4d683dac041afc69ac51b2461b96e8c98e46311cc1faba54c73f235044f
   languageName: node
   linkType: hard
 
 "@babel/plugin-transform-object-assign@npm:^7.8.3":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-object-assign@npm:7.22.5"
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-assign@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c80ca956ccc45c68a6f35e8aea80e08c0a653e4baf243727d4258f242d312d71be20e3fad35a1f2cd9d58b30dcbb5cdf5f8d6c6614a3f8c6079d90f9b1dadee6
+  checksum: 10c0/eb30beac71a5930ecdfc8740b184f22dd2043b1ac6f9f6818fb2e10ddfbdd6536b4ddb0d00af2c9f4a375823f52a566915eb598bea0633484aa5ff5db4e547fd
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.22.15, @babel/plugin-transform-object-rest-spread@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0"
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.0, @babel/plugin-transform-object-rest-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/02fe8b99ee6329e68b97b1b1b5410e50c6c20470e73dcd1d287c6ddb5623c654dce82327b2a3f6710ee3b512fe4950e43ab81d0bbc33d771f0cad3bc3cef87c6
+  checksum: 10c0/e301f1a66b63bafc2bce885305cc88ab30ec875b5e2c7933fb7f9cbf0d954685aa10334ffcecf147ba19d6a1d7ffab37baf4ce871849d395941c56fdb3060f73
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-super@npm:7.23.3"
+"@babel/plugin-transform-object-super@npm:^7.23.3, @babel/plugin-transform-object-super@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/a6856fd8c0afbe5b3318c344d4d201d009f4051e2f6ff6237ff2660593e93c5997a58772b13d639077c3e29ced3440247b29c496cd77b13af1e7559a70009775
+  checksum: 10c0/d30e6b9e59a707efd7ed524fc0a8deeea046011a6990250f2e9280516683138e2d13d9c52daf41d78407bdab0378aef7478326f2a15305b773d851cb6e106157
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4, @babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/4ef61812af0e4928485e28301226ce61139a8b8cea9e9a919215ebec4891b9fea2eb7a83dc3090e2679b7d7b2c8653da601fbc297d2addc54a908b315173991e
+  checksum: 10c0/68408b9ef772d9aa5dccf166c86dc4d2505990ce93e03dcfc65c73fb95c2511248e009ba9ccf5b96405fb85de1c16ad8291016b1cc5689ee4becb1e3050e0ae7
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.4, @babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
     "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/305b773c29ad61255b0e83ec1e92b2f7af6aa58be4cba1e3852bddaa14f7d2afd7b4438f41c28b179d6faac7eb8d4fb5530a17920294f25d459b8f84406bfbfb
+  checksum: 10c0/b4688795229c9e9ce978eccf979fe515eb4e8d864d2dcd696baa937c8db13e3d46cff664a3cd6119dfe60e261f5d359b10c6783effab7cc91d75d03ad7f43d05
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
+"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/a8d4cbe0f6ba68d158f5b4215c63004fc37a1fdc539036eb388a9792017c8496ea970a1932ccb929308f61e53dc56676ed01d8df6f42bc0a85c7fd5ba82482b7
+  checksum: 10c0/eee8d2f72d3ee0876dc8d85f949f4adf34685cfe36c814ebc20c96315f3891a53d43c764d636b939e34d55e6a6a4af9aa57ed0d7f9439eb5771a07277c669e55
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
+"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3, @babel/plugin-transform-private-methods@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/745a655edcd111b7f91882b921671ca0613079760d8c9befe336b8a9bc4ce6bb49c0c08941831c950afb1b225b4b2d3eaac8842e732db095b04db38efd8c34f4
+  checksum: 10c0/d8e18587d2a8b71a795da5e8841b0e64f1525a99ad73ea8b9caa331bc271d69646e2e1e749fd634321f3df9d126070208ddac22a27ccf070566b2efb74fecd99
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
+"@babel/plugin-transform-private-property-in-object@npm:^7.23.4, @babel/plugin-transform-private-property-in-object@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/8d31b28f24204b4d13514cd3a8f3033abf575b1a6039759ddd6e1d82dd33ba7281f9bc85c9f38072a665d69bfa26dc40737eefaf9d397b024654a483d2357bf5
+  checksum: 10c0/33d2b9737de7667d7a1b704eef99bfecc6736157d9ea28c2e09010d5f25e33ff841c41d89a4430c5d47f4eb3384e24770fa0ec79600e1e38d6d16e2f9333b4b5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-property-literals@npm:7.23.3"
+"@babel/plugin-transform-property-literals@npm:^7.23.3, @babel/plugin-transform-property-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/b2549f23f90cf276c2e3058c2225c3711c2ad1c417e336d3391199445a9776dd791b83be47b2b9a7ae374b40652d74b822387e31fa5267a37bf49c122e1a9747
+  checksum: 10c0/3bf3e01f7bb8215a8b6d0081b6f86fea23e3a4543b619e059a264ede028bc58cdfb0acb2c43271271915a74917effa547bc280ac636a9901fa9f2fb45623f87e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
+"@babel/plugin-transform-react-display-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/3aed142af7bd1aed1df2bdad91ed33ba1cdd5c3c67ce6eafba821ff72f129162a197ffb55f1eb1775af276abd5545934489a8257fef6c6665ddf253a4f39a939
+  checksum: 10c0/adf1a3cb0df8134533a558a9072a67e34127fd489dfe431c3348a86dd41f3e74861d5d5134bbb68f61a9cdb3f7e79b2acea1346be94ce4d3328a64e5a9e09be1
   languageName: node
   linkType: hard
 
@@ -1594,28 +1668,28 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-transform-react-jsx-self@npm:^7.18.6":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5"
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b
+  checksum: 10c0/ea362ff94b535c753f560eb1f5e063dc72bbbca17ed58837a949a7b289d5eacc7b0a28296d1932c94429b168d6040cdee5484a59b9e3c021f169e0ee137e6a27
   languageName: node
   linkType: hard
 
 "@babel/plugin-transform-react-jsx-source@npm:^7.19.6":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5"
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a
+  checksum: 10c0/ea8e3263c0dc51fbc97c156cc647150a757cc56de10781287353d0ce9b2dcd6b6d93d573c0142d7daf5d6fb554c74fa1971ae60764924ea711161d8458739b63
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
+"@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4"
   dependencies:
@@ -1630,42 +1704,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
+"@babel/plugin-transform-react-pure-annotations@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/76287adeab656fb7f39243e5ab6a8c60069cf69fffeebd1566457d56cb2f966366a23bd755d3e369f4d0437459e3b76243df370caa7d7d2287a8560b66c53ca2
+  checksum: 10c0/9eb3056fcaadd63d404fd5652b2a3f693bc4758ba753fee5b5c580c7a64346eeeb94e5a4f77a99c76f3cf06d1f1ad6c227647cd0b1219efe3d00cafa5a6e7b2a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
+"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     regenerator-transform: "npm:^0.15.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/3b0e989ae5db78894ee300b24e07fbcec490c39ab48629c519377581cf94e90308f4ddc10a8914edc9f403e2d3ac7a7ae0ae09003629d852da03e2ba846299c6
+  checksum: 10c0/0a333585d7c0b38d31cc549d0f3cf7c396d1d50b6588a307dc58325505ddd4f5446188bc536c4779431b396251801b3f32d6d8e87db8274bc84e8c41950737f7
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
+"@babel/plugin-transform-reserved-words@npm:^7.23.3, @babel/plugin-transform-reserved-words@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/4e6d61f6c9757592661cfbd2c39c4f61551557b98cb5f0995ef10f5540f67e18dde8a42b09716d58943b6e4b7ef5c9bcf19902839e7328a4d49149e0fecdbfcd
+  checksum: 10c0/936d6e73cafb2cbb495f6817c6f8463288dbc9ab3c44684b931ebc1ece24f0d55dfabc1a75ba1de5b48843d0fef448dcfdbecb8485e4014f8f41d0d1440c536f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.24.0, @babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2":
+"@babel/plugin-transform-runtime@npm:7.24.0":
   version: 7.24.0
   resolution: "@babel/plugin-transform-runtime@npm:7.24.0"
   dependencies:
@@ -1681,120 +1755,136 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3"
+"@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2, @babel/plugin-transform-runtime@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-runtime@npm:7.24.3"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.1"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
+    semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c423c66fec0b6503f50561741754c84366ef9e9818442c8881fbaa90cc363fd137084b9431cdc00ed2f1fd8c8a1a5982c4a7e1f2af3769db4caf2ac7ea55d4f0
+  checksum: 10c0/ee01967bf405d84bd95ca4089166a18fb23fe9851a6da53dcf712a7f8ba003319996f21f320d568ec76126e18adfaee978206ccda86eef7652d47cc9a052e75e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-spread@npm:7.23.3"
+"@babel/plugin-transform-shorthand-properties@npm:^7.23.3, @babel/plugin-transform-shorthand-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/8273347621183aada3cf1f3019d8d5f29467ba13a75b72cb405bc7f23b7e05fd85f4edb1e4d9f0103153dddb61826a42dc24d466480d707f8932c1923a4c25fa
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-spread@npm:^7.23.3, @babel/plugin-transform-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-spread@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/a348e4ae47e4ceeceb760506ec7bf835ccc18a2cf70ec74ebfbe41bc172fa2412b05b7d1b86836f8aee375e41a04ff20486074778d0e2d19d668b33dc52e9dbb
+  checksum: 10c0/50a0302e344546d57e5c9f4dea575f88e084352eeac4e9a3e238c41739eef2df1daf4a7ebbb3ccb7acd3447f6a5ce9938405f98bf5f5583deceb8257f5a673c9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
+"@babel/plugin-transform-sticky-regex@npm:^7.23.3, @babel/plugin-transform-sticky-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/cd15c407906b41e4b924ea151e455c11274dba050771ee7154ad88a1a274140ac5e84efc8d08c4379f2f0cec8a09e4a0a3b2a3a954ba6a67d9fb35df1c714c56
+  checksum: 10c0/786fe2ae11ef9046b9fa95677935abe495031eebf1274ad03f2054a20adea7b9dbd00336ac0b143f7924bc562e5e09793f6e8613607674b97e067d4838ccc4a0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-template-literals@npm:7.23.3"
+"@babel/plugin-transform-template-literals@npm:^7.23.3, @babel/plugin-transform-template-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/9b5f43788b9ffcb8f2b445a16b1aa40fcf23cb0446a4649445f098ec6b4cb751f243a535da623d59fefe48f4c40552f5621187a61811779076bab26863e3373d
+  checksum: 10c0/f73bcda5488eb81c6e7a876498d9e6b72be32fca5a4d9db9053491a2d1300cd27b889b463fd2558f3cd5826a85ed00f61d81b234aa55cb5a0abf1b6fa1bd5026
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
+"@babel/plugin-transform-typeof-symbol@npm:^7.23.3, @babel/plugin-transform-typeof-symbol@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/50e81d84c6059878be2a0e41e0d790cab10882cfb8fa85e8c2665ccb0b3cd7233f49197f17427bc7c1b36c80e07076640ecf1b641888d78b9cb91bc16478d84a
+  checksum: 10c0/d392f549bfd13414f59feecdf3fb286f266a3eb9107a9de818e57907bda56eed08d1f6f8e314d09bf99252df026a7fd4d5df839acd45078a777abcebaa9a8593
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.23.3":
-  version: 7.23.5
-  resolution: "@babel/plugin-transform-typescript@npm:7.23.5"
+"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.24.1":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-typescript@npm:7.24.4"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.23.5"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-typescript": "npm:^7.23.3"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-typescript": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/75d6689bfdf4c9462b5fb21107c295717c9bedffe5eae8b22b0a65c9603660683d55e020df83825de13792358043bd939f48efc2b3a293b5210a608076c94934
+  checksum: 10c0/fa6625046f219cdc75061025c8031ada75ef631b137f1442e3d0054ba4e63548eb12cf55e2e1f442c889aa5fdd76d0d0b7904fdf812ce4c38748446227acc798
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
+"@babel/plugin-transform-unicode-escapes@npm:^7.23.3, @babel/plugin-transform-unicode-escapes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f1ed54742dc982666f471df5d087cfda9c6dbf7842bec2d0f7893ed359b142a38c0210358f297ab5c7a3e11ec0dfb0e523de2e2edf48b62f257aaadd5f068866
+  checksum: 10c0/67a72a1ed99639de6a93aead35b1993cb3f0eb178a8991fcef48732c38c9f0279c85bbe1e2e2477b85afea873e738ff0955a35057635ce67bc149038e2d8a28e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3, @babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/dca5702d43fac70351623a12e4dfa454fd028a67498888522b644fd1a02534fabd440106897e886ebcc6ce6a39c58094ca29953b6f51bc67372aa8845a5ae49f
+  checksum: 10c0/d9d9752df7d51bf9357c0bf3762fe16b8c841fca9ecf4409a16f15ccc34be06e8e71abfaee1251b7d451227e70e6b873b36f86b090efdb20f6f7de5fdb6c7a05
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-regex@npm:^7.23.3, @babel/plugin-transform-unicode-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/df824dcca2f6e731f61d69103e87d5dd974d8a04e46e28684a4ba935ae633d876bded09b8db890fd72d0caf7b9638e2672b753671783613cc78d472951e2df8c
+  checksum: 10c0/6046ab38e5d14ed97dbb921bd79ac1d7ad9d3286da44a48930e980b16896db2df21e093563ec3c916a630dc346639bf47c5924a33902a06fe3bbb5cdc7ef5f2f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3, @babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/30fe1d29af8395a867d40a63a250ca89072033d9bc7d4587eeebeaf4ad7f776aab83064321bfdb1d09d7e29a1d392852361f4f60a353f0f4d1a3b435dcbf256b
+  checksum: 10c0/b6c1f6b90afeeddf97e5713f72575787fcb7179be7b4c961869bfbc66915f66540dc49da93e4369da15596bd44b896d1eb8a50f5e1fd907abd7a1a625901006b
   languageName: node
   linkType: hard
 
@@ -1808,7 +1898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.24.0, @babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2":
+"@babel/preset-env@npm:7.24.0":
   version: 7.24.0
   resolution: "@babel/preset-env@npm:7.24.0"
   dependencies:
@@ -1898,16 +1988,107 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
+  dependencies:
+    "@babel/compat-data": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1"
+    "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
+    "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
+    "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
+    "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
+    "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
+    "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.24.4"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.24.4"
+    "@babel/plugin-transform-classes": "npm:^7.24.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-for-of": "npm:^7.24.1"
+    "@babel/plugin-transform-function-name": "npm:^7.24.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.24.1"
+    "@babel/plugin-transform-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.24.1"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-new-target": "npm:^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-object-super": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.24.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1"
+    "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.4"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
+    core-js-compat: "npm:^3.31.0"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/72a79d0cd38cb26f143509dd0c58db34b5b1ae90116863f55a404f0eb06a64a3cdcb1abd0b6435fafe463bbf55b82ffcf56aedee91e8d37797bf53e4ae74c413
+  languageName: node
+  linkType: hard
+
 "@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.15":
-  version: 7.22.15
-  resolution: "@babel/preset-flow@npm:7.22.15"
+  version: 7.24.1
+  resolution: "@babel/preset-flow@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/7eef0c84ec1889d6c4f7a67d7d1a81703420eed123a8c23f25af148eead77907f0bd701f3e729fdb37d3ddb2a373bf43938b36a9ba17f546111ddb9521466b92
+  checksum: 10c0/e2209158d68a456b8f9d6cd6c810e692f3ab8ca28edba99afcecaacd657ace7cc905e566f84d6da06e537836a2f830bc6ddf4cb34006d57303ff9a40a94fa433
   languageName: node
   linkType: hard
 
@@ -1924,49 +2105,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/preset-react@npm:7.23.3"
+"@babel/preset-react@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/preset-react@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-transform-react-display-name": "npm:^7.23.3"
-    "@babel/plugin-transform-react-jsx": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-transform-react-display-name": "npm:^7.24.1"
+    "@babel/plugin-transform-react-jsx": "npm:^7.23.4"
     "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5"
-    "@babel/plugin-transform-react-pure-annotations": "npm:^7.23.3"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/cecb2493e09fd4ffa5effcef1d06e968386b1bfe077a99834f7e8ef249208274fca62fe5a6b3986ef1c1c3900b2eb409adb528ae1b73dba31397b16f9262e83c
+  checksum: 10c0/a842abc5a024ed68a0ce4c1244607d40165cb6f8cf1817ebda282e470f20302d81c6a61cb41c1a31aa6c4e99ce93df4dd9e998a8ded1417c25d7480f0e14103a
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.23.2":
-  version: 7.23.3
-  resolution: "@babel/preset-typescript@npm:7.23.3"
+"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/preset-typescript@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-syntax-jsx": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-typescript": "npm:^7.23.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-typescript": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/e72b654c7f0f08b35d7e1c0e3a59c0c13037f295c425760b8b148aa7dde01e6ddd982efc525710f997a1494fafdd55cb525738c016609e7e4d703d02014152b7
+  checksum: 10c0/0033dc6fbc898ed0d8017c83a2dd5e095c82909e2f83e48cf9f305e3e9287148758c179ad90f27912cf98ca68bfec3643c57c70c0ca34d3a6c50dc8243aef406
   languageName: node
   linkType: hard
 
 "@babel/register@npm:^7.13.16, @babel/register@npm:^7.22.15":
-  version: 7.22.15
-  resolution: "@babel/register@npm:7.22.15"
+  version: 7.23.7
+  resolution: "@babel/register@npm:7.23.7"
   dependencies:
     clone-deep: "npm:^4.0.1"
     find-cache-dir: "npm:^2.0.0"
     make-dir: "npm:^2.1.0"
-    pirates: "npm:^4.0.5"
+    pirates: "npm:^4.0.6"
     source-map-support: "npm:^0.5.16"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/895cc773c3b3eae909478ea2a9735ef6edd634b04b4aaaad2ce576fd591c2b3c70ff8c90423e769a291bee072186e7e4801480c1907e31ba3053c6cdba5571cb
+  checksum: 10c0/b2466e41a4394e725b57e139ba45c3f61b88546d3cb443e84ce46cb34071b60c6cdb706a14c58a1443db530691a54f51da1f0c97f6c1aecbb838a2fb7eb5dbb9
   languageName: node
   linkType: hard
 
@@ -1978,12 +2159,12 @@ __metadata:
   linkType: hard
 
 "@babel/runtime-corejs3@npm:^7.10.2":
-  version: 7.23.1
-  resolution: "@babel/runtime-corejs3@npm:7.23.1"
+  version: 7.24.4
+  resolution: "@babel/runtime-corejs3@npm:7.24.4"
   dependencies:
     core-js-pure: "npm:^3.30.2"
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/6e2c2b11779ff56c88b1f3a8742498640f7271ad4fcf9cfd24052bbb236a5e7c4c7c8d81cda751da3b4effa678736303deb78441c5752e63bfb90d6453fd870f
+  checksum: 10c0/121bec9a0b505e2995c4b71cf480167e006e8ee423f77bccc38975bfbfbfdb191192ff03557c18fad6de8f2b85c12c49aaa4b92d1d5fe0c0e136da664129be1e
   languageName: node
   linkType: hard
 
@@ -1996,7 +2177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.24.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:7.24.0":
   version: 7.24.0
   resolution: "@babel/runtime@npm:7.24.0"
   dependencies:
@@ -2014,7 +2195,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.22.15":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.24.4
   resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
@@ -2043,21 +2224,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.4.5":
-  version: 7.24.0
-  resolution: "@babel/traverse@npm:7.24.0"
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5":
+  version: 7.24.1
+  resolution: "@babel/traverse@npm:7.24.1"
   dependencies:
-    "@babel/code-frame": "npm:^7.23.5"
-    "@babel/generator": "npm:^7.23.6"
+    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/generator": "npm:^7.24.1"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
-    "@babel/parser": "npm:^7.24.0"
+    "@babel/parser": "npm:^7.24.1"
     "@babel/types": "npm:^7.24.0"
     debug: "npm:^4.3.1"
     globals: "npm:^11.1.0"
-  checksum: 10c0/55ffd2b0ce0fbd0a09051edc4def4fb1e96f35e0b100c0dc2a7429df569971ae312c290e980e423471f350961705698a257c7eea8c8304918024cc26f02468ba
+  checksum: 10c0/c087b918f6823776537ba246136c70e7ce0719fc05361ebcbfd16f4e6f2f6f1f8f4f9167f1d9b675f27d12074839605189cc9d689de20b89a85e7c140f23daab
   languageName: node
   linkType: hard
 
@@ -2086,16 +2267,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^1.2.18":
-  version: 1.2.18
-  resolution: "@chromatic-com/storybook@npm:1.2.18"
+"@chromatic-com/storybook@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "@chromatic-com/storybook@npm:1.3.2"
   dependencies:
-    chromatic: "npm:^11.0.0"
+    chromatic: "npm:^11.3.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
     react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
-  checksum: 10c0/b0b4c48dba1d6cddcc2b2541ba970ac4be7861583387f9525d60797663459fdb8db25fe99759c7e51ebb256daf185116450f5f33a04e35e0a2aa458f0ab24541
+  checksum: 10c0/30f7d946e41d031d45991ea8cf2f42b64330a12ddb1330a5a0bfe9734511e36f0691f897b0075c41c4c9fa5de6382598e98179a5ac2f9139bd619fc46487bbeb
   languageName: node
   linkType: hard
 
@@ -3392,9 +3573,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0":
-  version: 0.3.0
-  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0"
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1":
+  version: 0.3.1
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1"
   dependencies:
     glob: "npm:^7.2.0"
     glob-promise: "npm:^4.2.0"
@@ -3406,7 +3587,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0
+  checksum: 10c0/a9c7a03d7d1daf5bd64949255516ba64c88d5600366c8c74dcdb6f37c2a6099daaec02860b7587d2220e61afa47a0b2de17ef70d723c2db02f24e0890edfd9f3
   languageName: node
   linkType: hard
 
@@ -3462,7 +3643,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -4984,11 +5165,13 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-common": "workspace:*"
+    "@storybook/icons": "npm:^1.2.5"
     "@storybook/manager-api": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
+    dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -5023,7 +5206,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
-    "@babel/core": "npm:^7.12.3"
+    "@babel/core": "npm:^7.24.4"
     "@mdx-js/mdx": "npm:^3.0.0"
     "@mdx-js/react": "npm:^3.0.0"
     "@rollup/pluginutils": "npm:^5.0.2"
@@ -5140,7 +5323,7 @@ __metadata:
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -5150,7 +5333,7 @@ __metadata:
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
@@ -5408,7 +5591,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -5422,7 +5605,7 @@ __metadata:
     color-convert: "npm:^2.0.1"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
-    markdown-to-jsx: "npm:7.3.2"
+    markdown-to-jsx: "npm:^7.4.5"
     memoizerific: "npm:^1.11.3"
     polished: "npm:^4.2.2"
     react-colorful: "npm:^5.1.2"
@@ -5431,8 +5614,8 @@ __metadata:
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
@@ -5452,7 +5635,7 @@ __metadata:
     "@types/ejs": "npm:^3.1.1"
     "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
     browser-assert: "npm:^1.2.1"
-    ejs: "npm:^3.1.8"
+    ejs: "npm:^3.1.10"
     esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0"
     esbuild-plugin-alias: "npm:^0.2.1"
     express: "npm:^4.17.3"
@@ -5523,7 +5706,6 @@ __metadata:
     "@types/semver": "npm:^7.3.4"
     "@types/terser-webpack-plugin": "npm:^5.2.0"
     "@types/webpack-hot-middleware": "npm:^2.25.6"
-    "@types/webpack-virtual-modules": "npm:^0.1.1"
     browser-assert: "npm:^1.2.1"
     case-sensitive-paths-webpack-plugin: "npm:^2.4.0"
     cjs-module-lexer: "npm:^1.2.3"
@@ -5550,7 +5732,7 @@ __metadata:
     webpack: "npm:5"
     webpack-dev-middleware: "npm:^6.1.2"
     webpack-hot-middleware: "npm:^2.25.1"
-    webpack-virtual-modules: "npm:^0.5.0"
+    webpack-virtual-modules: "npm:^0.6.0"
   peerDependenciesMeta:
     typescript:
       optional: true
@@ -5574,8 +5756,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
   dependencies:
-    "@babel/core": "npm:^7.23.0"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -5636,10 +5818,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
-    "@babel/core": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.4"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -5672,10 +5854,11 @@ __metadata:
   resolution: "@storybook/components@workspace:ui/components"
   dependencies:
     "@popperjs/core": "npm:^2.6.0"
+    "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/test": "workspace:*"
@@ -5695,8 +5878,8 @@ __metadata:
     use-resize-observer: "npm:^9.1.0"
     util-deprecate: "npm:^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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   languageName: unknown
   linkType: soft
 
@@ -5759,6 +5942,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:lib/core-events"
   dependencies:
+    "@storybook/csf": "npm:^0.1.7"
     chalk: "npm:^4.1.0"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
@@ -5770,16 +5954,17 @@ __metadata:
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
-    "@babel/core": "npm:^7.23.9"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
     "@discoveryjs/json-ext": "npm:^0.5.3"
     "@storybook/addon-docs": "workspace:*"
     "@storybook/builder-manager": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/csf-tools": "workspace:*"
-    "@storybook/docs-mdx": "npm:3.0.0"
+    "@storybook/docs-mdx": "npm:3.1.0-next.0"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/manager": "workspace:*"
     "@storybook/manager-api": "workspace:*"
@@ -5789,6 +5974,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/compression": "npm:^1.7.0"
     "@types/detect-port": "npm:^1.3.0"
+    "@types/diff": "npm:^5.0.9"
     "@types/ip": "npm:^1.1.0"
     "@types/node": "npm:^18.0.0"
     "@types/node-fetch": "npm:^2.5.7"
@@ -5799,11 +5985,10 @@ __metadata:
     boxen: "npm:^7.1.1"
     camelcase: "npm:^8.0.0"
     chalk: "npm:^4.1.0"
-    cjs-module-lexer: "npm:^1.2.3"
     cli-table3: "npm:^0.6.1"
     compression: "npm:^1.7.4"
     detect-port: "npm:^1.3.0"
-    es-module-lexer: "npm:^1.5.0"
+    diff: "npm:^5.2.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
@@ -5856,11 +6041,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
   dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.4"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/types": "workspace:*"
     "@types/fs-extra": "npm:^11.0.1"
     "@types/js-yaml": "npm:^4.0.5"
@@ -5881,19 +6066,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "@storybook/csf@npm:0.1.4"
+"@storybook/csf@npm:^0.1.7":
+  version: 0.1.7
+  resolution: "@storybook/csf@npm:0.1.7"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10c0/a988e37d5dd3e6fcd44c16b08f4778b1bf1f4b46491d1331afac9366852208b64214425331f1496c3666fd284ad42c14ef8b5f678ade94fe82534d1e631c4ae8
+  checksum: 10c0/aaebc9fa5f850cebef1fd9d786d7b5844e2d88e5c8078904ea4571c053f858fab064392960274b854037b9f8693d12c7c45c3c4c9142ec88a08fb498f3f056a5
   languageName: node
   linkType: hard
 
-"@storybook/docs-mdx@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@storybook/docs-mdx@npm:3.0.0"
-  checksum: 10c0/4f4242fc05b57e8dc239204c71fd0d1481c9abbf20d12dd0f3dace74f77a7ff7cbe0bd07d7d785873b45747be64cad273423d3dc0cf89b52e9f117592a4b054f
+"@storybook/docs-mdx@npm:3.1.0-next.0":
+  version: 3.1.0-next.0
+  resolution: "@storybook/docs-mdx@npm:3.1.0-next.0"
+  checksum: 10c0/7622d7c6318e842c90a71c1836d68531236c31fff7081c885803eddfafb7e3f8998689f612eaa0292209ada8352a36657dcacb5d3ef4632b8e8b8a283c39602e
   languageName: node
   linkType: hard
 
@@ -5901,7 +6086,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/docs-tools@workspace:lib/docs-tools"
   dependencies:
-    "@babel/preset-react": "npm:^7.23.3"
+    "@babel/preset-react": "npm:^7.24.1"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -5966,6 +6151,7 @@ __metadata:
     "@storybook/core-server": "workspace:*"
     "@storybook/html": "workspace:*"
     "@storybook/node-logger": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.3.2"
@@ -5981,6 +6167,7 @@ __metadata:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/html": "workspace:*"
     "@storybook/preset-html-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -6058,7 +6245,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -6098,6 +6285,7 @@ __metadata:
     "@storybook/test": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
+    "@tanstack/react-virtual": "npm:^3.3.0"
     "@testing-library/react": "npm:^11.2.2"
     "@types/react-transition-group": "npm:^4"
     "@types/semver": "npm:^7.3.4"
@@ -6107,7 +6295,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     fuse.js: "npm:^3.6.1"
     lodash: "npm:^4.17.21"
-    markdown-to-jsx: "npm:7.3.2"
+    markdown-to-jsx: "npm:^7.4.5"
     memoizerific: "npm:^1.11.3"
     polished: "npm:^4.2.2"
     qs: "npm:^6.10.0"
@@ -6120,6 +6308,7 @@ __metadata:
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.3.7"
     store2: "npm:^2.14.2"
+    telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -6129,22 +6318,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
   dependencies:
-    "@babel/core": "npm:^7.23.2"
+    "@babel/core": "npm:^7.24.4"
     "@babel/plugin-syntax-bigint": "npm:^7.8.3"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.22.5"
-    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.22.11"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.22.15"
-    "@babel/plugin-transform-runtime": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/preset-react": "npm:^7.22.15"
-    "@babel/preset-typescript": "npm:^7.23.2"
-    "@babel/runtime": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-runtime": "npm:^7.24.3"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/preset-react": "npm:^7.24.1"
+    "@babel/preset-typescript": "npm:^7.24.1"
+    "@babel/runtime": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
-    "@storybook/addon-actions": "workspace:*"
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
@@ -6152,6 +6340,7 @@ __metadata:
     "@storybook/preset-react-webpack": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/test": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/babel__core": "npm:^7"
     "@types/babel__plugin-transform-runtime": "npm:^7"
@@ -6185,8 +6374,8 @@ __metadata:
     webpack: "npm:^5.65.0"
   peerDependencies:
     next: ^13.5.0 || ^14.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     webpack: ^5.0.0
   dependenciesMeta:
     sharp:
@@ -6218,6 +6407,7 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/preact": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
@@ -6235,6 +6425,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preact": "workspace:*"
     "@storybook/preset-preact-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     preact: "npm:^10.5.13"
     typescript: "npm:^5.3.2"
@@ -6322,8 +6513,8 @@ __metadata:
     typescript: "npm:^5.3.2"
     webpack: "npm:5"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     typescript:
       optional: true
@@ -6394,7 +6585,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -6449,8 +6640,8 @@ __metadata:
     "@storybook/types": "workspace:*"
     typescript: "npm:^5.3.2"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   languageName: unknown
   linkType: soft
 
@@ -6458,11 +6649,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-vite@workspace:frameworks/react-vite"
   dependencies:
-    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0"
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.1"
     "@rollup/pluginutils": "npm:^5.0.2"
     "@storybook/builder-vite": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     find-up: "npm:^5.0.0"
     magic-string: "npm:^0.30.0"
@@ -6472,8 +6664,8 @@ __metadata:
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     vite: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
@@ -6485,10 +6677,11 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/preset-react-webpack": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
@@ -6529,8 +6722,8 @@ __metadata:
     type-fest: "npm:~2.19"
     util-deprecate: "npm:^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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
@@ -6542,7 +6735,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/root@workspace:."
   dependencies:
-    "@chromatic-com/storybook": "npm:^1.2.18"
+    "@chromatic-com/storybook": "npm:^1.3.2"
     "@nx/eslint": "npm:18.0.6"
     "@nx/vite": "npm:18.0.6"
     "@nx/workspace": "npm:18.0.6"
@@ -6579,7 +6772,7 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -6725,6 +6918,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-server-webpack": "workspace:*"
     "@storybook/server": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -6734,7 +6928,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/preview-api": "workspace:*"
@@ -6751,7 +6945,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@storybook/types": "workspace:*"
     estraverse: "npm:^5.2.0"
     lodash: "npm:^4.17.21"
@@ -6767,6 +6961,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/svelte": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
@@ -6791,6 +6986,7 @@ __metadata:
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-svelte-webpack": "workspace:*"
     "@storybook/svelte": "workspace:*"
+    "@storybook/types": "workspace:*"
     svelte: "npm:^4.0.0"
     svelte-loader: "npm:^3.1.9"
     typescript: "npm:^5.3.2"
@@ -6835,6 +7031,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/svelte": "workspace:*"
     "@storybook/svelte-vite": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
@@ -6915,8 +7112,8 @@ __metadata:
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
@@ -6930,7 +7127,7 @@ __metadata:
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
     "@storybook/channels": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.7"
     "@types/express": "npm:^4.7.0"
     "@types/fs-extra": "npm:^11.0.1"
     "@types/node": "npm:^18.0.0"
@@ -6945,6 +7142,7 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/core-server": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@types/find-package-json": "npm:^1.2.6"
     "@types/node": "npm:^18.0.0"
@@ -6952,7 +7150,7 @@ __metadata:
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
-    vue-component-meta: "npm:^1.8.27"
+    vue-component-meta: "npm:^2.0.0"
     vue-docgen-api: "npm:^4.75.1"
   peerDependencies:
     vite: ^4.0.0 || ^5.0.0
@@ -6966,6 +7164,7 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/preset-vue3-webpack": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/vue3": "workspace:*"
     "@types/node": "npm:^18.0.0"
     "@vue/compiler-sfc": "npm:3.0.0"
@@ -7009,6 +7208,7 @@ __metadata:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/node-logger": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/web-components": "workspace:*"
     "@types/node": "npm:^18.0.0"
     magic-string: "npm:^0.30.0"
@@ -7022,6 +7222,7 @@ __metadata:
   dependencies:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
+    "@storybook/types": "workspace:*"
     "@storybook/web-components": "workspace:*"
     "@types/node": "npm:^18.0.0"
     lit: "npm:2.3.1"
@@ -7119,6 +7320,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-virtual@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "@tanstack/react-virtual@npm:3.3.0"
+  dependencies:
+    "@tanstack/virtual-core": "npm:3.3.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/52b30c87cbf2518cfe19812b290c60dd576587545bc910adf5a17ff16b241c4cf28690163db2063afd9e3adc0259086263071e63c8c8380ac56c0f6a54bde820
+  languageName: node
+  linkType: hard
+
+"@tanstack/virtual-core@npm:3.3.0":
+  version: 3.3.0
+  resolution: "@tanstack/virtual-core@npm:3.3.0"
+  checksum: 10c0/d31125fde6a3ef3aefd3754b37f4724772c8a567f4e8212cf02a64fba6fde9ab8f80a8c9f99d28b046f84a938aea390adbd591eb4858d849a05326b0cebdfc25
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^7.28.1, @testing-library/dom@npm:^7.29.4":
   version: 7.31.2
   resolution: "@testing-library/dom@npm:7.31.2"
@@ -7532,6 +7752,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff@npm:^5.0.9":
+  version: 5.0.9
+  resolution: "@types/diff@npm:5.0.9"
+  checksum: 10c0/038e4d831f6d9826f0019fa07ec821a1f966160cd0d62aede6fc6ab269fc969ac6e665f7849fb2189fb92f7865488dcaabcb278c3df877d0d3581f2a7e1a67b2
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/doctrine@npm:0.0.3"
@@ -8309,15 +8536,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/webpack-virtual-modules@npm:^0.1.1":
-  version: 0.1.3
-  resolution: "@types/webpack-virtual-modules@npm:0.1.3"
-  dependencies:
-    "@types/webpack": "npm:^4"
-  checksum: 10c0/3ead19e20df409433de7f5244d3c581ba050c691fe0aee0014fac4d9307366791e07c1db5c8beee0bd5010d4e06fd9b600dc9efc27e0aaf7d8daa9ec0714abf6
-  languageName: node
-  linkType: hard
-
 "@types/webpack@npm:^4":
   version: 4.41.34
   resolution: "@types/webpack@npm:4.41.34"
@@ -8759,12 +8977,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/language-core@npm:1.11.1, @volar/language-core@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/language-core@npm:1.11.1"
+"@volar/language-core@npm:2.2.2, @volar/language-core@npm:~2.2.2":
+  version: 2.2.2
+  resolution: "@volar/language-core@npm:2.2.2"
   dependencies:
-    "@volar/source-map": "npm:1.11.1"
-  checksum: 10c0/92c4439e3a9ccc534c970031388c318740f6fa032283d03e136c6c8c0228f549c68a7c363af1a28252617a0dca6069e14028329ac906d5acf1912931d0cdcb69
+    "@volar/source-map": "npm:2.2.2"
+  checksum: 10c0/e921772ffbd21f16b6aa48f2ea1b118f8b04af2738bba59e1629de5521bc7b4f543252173dbb6136a98d302b5babab92191a4f07c4a47f553645802e89be833c
   languageName: node
   linkType: hard
 
@@ -8777,12 +8995,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/source-map@npm:1.11.1, @volar/source-map@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/source-map@npm:1.11.1"
+"@volar/source-map@npm:2.2.2":
+  version: 2.2.2
+  resolution: "@volar/source-map@npm:2.2.2"
   dependencies:
-    muggle-string: "npm:^0.3.1"
-  checksum: 10c0/0bfc639889802705f8036ea8b2052a95a4d691a68bc2b6744ba8b9d312d887393dd3278101180a5ee5304972899d493972a483afafd41e097968746c77d724cb
+    muggle-string: "npm:^0.4.0"
+  checksum: 10c0/c827d825f960c56e152fbe26d609f0cbab7ece301e1855f14e6716dc5ef198a732a37f2dfdf0914102c69bf8954d6d79b663d363072e8b01beeaa7f169e477c2
   languageName: node
   linkType: hard
 
@@ -8795,13 +9013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/typescript@npm:~1.11.1":
-  version: 1.11.1
-  resolution: "@volar/typescript@npm:1.11.1"
+"@volar/typescript@npm:~2.2.2":
+  version: 2.2.2
+  resolution: "@volar/typescript@npm:2.2.2"
   dependencies:
-    "@volar/language-core": "npm:1.11.1"
+    "@volar/language-core": "npm:2.2.2"
     path-browserify: "npm:^1.0.1"
-  checksum: 10c0/86fe153db3a14d8eb3632784a1d7fcbfbfb51fa5517c3878bfdd49ee8d15a83b1a09f9c589454b7396454c104d3a8e2db3a987dc99b37c33816772fc3e292bf2
+  checksum: 10c0/3f558e6ecd2cd7cfbd37bc6bf83f20db6cd33f5ad05c6ad2c4fe6c2e98e3148f8253ff2ce64890ad23c3cbb19135ee5c539b240742d2507d7dc749b0eecbc6fc
   languageName: node
   linkType: hard
 
@@ -8830,7 +9048,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.4.5, @vue/compiler-core@npm:^3.0.0":
+"@vue/compiler-core@npm:3.4.27, @vue/compiler-core@npm:^3.0.0":
+  version: 3.4.27
+  resolution: "@vue/compiler-core@npm:3.4.27"
+  dependencies:
+    "@babel/parser": "npm:^7.24.4"
+    "@vue/shared": "npm:3.4.27"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/fbc9a4a6c467fa47609df3337c1b2012a55e3b07adbffc45a31435237ec1169d0a4ece22f3538607364427b779ce04154b86a0e8dd40d3bd4aa03358d4db136d
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-core@npm:3.4.5":
   version: 3.4.5
   resolution: "@vue/compiler-core@npm:3.4.5"
   dependencies:
@@ -8863,7 +9094,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.4.5, @vue/compiler-dom@npm:^3.2.0, @vue/compiler-dom@npm:^3.3.0":
+"@vue/compiler-dom@npm:3.4.5":
   version: 3.4.5
   resolution: "@vue/compiler-dom@npm:3.4.5"
   dependencies:
@@ -8873,6 +9104,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-dom@npm:^3.2.0, @vue/compiler-dom@npm:^3.3.0, @vue/compiler-dom@npm:^3.4.0":
+  version: 3.4.27
+  resolution: "@vue/compiler-dom@npm:3.4.27"
+  dependencies:
+    "@vue/compiler-core": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  checksum: 10c0/ceb8aef314b6b7df1ab6cd3c7c1290e5b60363a6092bbffc3ee6aca42f6f5247a070b0dcbe71530751e840d01beec00a6268e3663abcf4a6ac297a32bfb90e49
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-sfc@npm:3.0.0":
   version: 3.0.0
   resolution: "@vue/compiler-sfc@npm:3.0.0"
@@ -8985,17 +9226,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/language-core@npm:1.8.27":
-  version: 1.8.27
-  resolution: "@vue/language-core@npm:1.8.27"
+"@vue/language-core@npm:2.0.17":
+  version: 2.0.17
+  resolution: "@vue/language-core@npm:2.0.17"
   dependencies:
-    "@volar/language-core": "npm:~1.11.1"
-    "@volar/source-map": "npm:~1.11.1"
-    "@vue/compiler-dom": "npm:^3.3.0"
-    "@vue/shared": "npm:^3.3.0"
+    "@volar/language-core": "npm:~2.2.2"
+    "@vue/compiler-dom": "npm:^3.4.0"
+    "@vue/shared": "npm:^3.4.0"
     computeds: "npm:^0.0.1"
     minimatch: "npm:^9.0.3"
-    muggle-string: "npm:^0.3.1"
     path-browserify: "npm:^1.0.1"
     vue-template-compiler: "npm:^2.7.14"
   peerDependencies:
@@ -9003,7 +9242,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/2018214d8ce2643d19e8e84eddaeacddca28b2980984d7916d97f97556c3716be184cf9f8c4f506d072a11f265401e3bc0391117cf7cfcc1e4a25048f4432dc7
+  checksum: 10c0/fd040d1c7c3c52b88ed607f467beb86ac65b716918c32e1c995017deb00daf4636e616a9a63e8dce23699718bf0011e2327a5873c1ec638dab8e9a7760d70e8c
   languageName: node
   linkType: hard
 
@@ -9106,7 +9345,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.4.5, @vue/shared@npm:^3.3.0":
+"@vue/shared@npm:3.4.27, @vue/shared@npm:^3.3.0, @vue/shared@npm:^3.4.0":
+  version: 3.4.27
+  resolution: "@vue/shared@npm:3.4.27"
+  checksum: 10c0/4a21918858270bcc654bb94b3429d9acbe95af097ea3063e192b36bd502dc896ca47778fa74a863b01f677ec271b189eb90f8b372943c10e52725a6bdc7f6cd5
+  languageName: node
+  linkType: hard
+
+"@vue/shared@npm:3.4.5":
   version: 3.4.5
   resolution: "@vue/shared@npm:3.4.5"
   checksum: 10c0/4bd4f6a6369ab02b8a01ac3b93fb5d580d3ea0e9781dd2be8ab676b50521733acbc85fac6b48bc9cd3704dc9237d6365148d287da51c07e1d0568d6c0f7742a1
@@ -10337,16 +10583,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.8":
-  version: 0.4.9
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.9"
+"babel-plugin-polyfill-corejs2@npm:^0.4.10, babel-plugin-polyfill-corejs2@npm:^0.4.8":
+  version: 0.4.11
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/2cd47af763eb40aa41f1d6d9cbf1bdd217ff6c28f614b057c0328ee42a4d82cbcdcbc7d081d93e2a2d80446c899f25c3ebec048a63d260ef65a0a364134f71cd
+  checksum: 10c0/b2217bc8d5976cf8142453ed44daabf0b2e0e75518f24eac83b54a8892e87a88f1bd9089daa92fd25df979ecd0acfd29b6bc28c4182c1c46344cee15ef9bce84
+  languageName: node
+  linkType: hard
+
+"babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
+  dependencies:
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    core-js-compat: "npm:^3.36.1"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/31b92cd3dfb5b417da8dfcf0deaa4b8b032b476d7bb31ca51c66127cf25d41e89260e89d17bc004b2520faa38aa9515fafabf81d89f9d4976e9dc1163e4a7c41
   languageName: node
   linkType: hard
 
@@ -10373,6 +10631,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-polyfill-regenerator@npm:^0.6.1":
+  version: 0.6.2
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
+  dependencies:
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
+  peerDependencies:
+    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
+  checksum: 10c0/bc541037cf7620bc84ddb75a1c0ce3288f90e7d2799c070a53f8a495c8c8ae0316447becb06f958dd25dcce2a2fce855d318ecfa48036a1ddb218d55aa38a744
+  languageName: node
+  linkType: hard
+
 "babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1":
   version: 4.2.1
   resolution: "babel-plugin-react-docgen@npm:4.2.1"
@@ -10981,7 +11250,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0":
+"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.22.2, browserslist@npm:^4.23.0":
   version: 4.23.0
   resolution: "browserslist@npm:4.23.0"
   dependencies:
@@ -11475,9 +11744,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.0.0":
-  version: 11.0.8
-  resolution: "chromatic@npm:11.0.8"
+"chromatic@npm:^11.3.0":
+  version: 11.3.0
+  resolution: "chromatic@npm:11.3.0"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -11490,7 +11759,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/422ab9afd9667f94813b2355144092fe5abe6538394e308619411050fea8265b9531a88a13b8563bf40172bd99b47de3c89642f34ec2d1f1bc42c958568e2902
+  checksum: 10c0/e977ef43a43ebb0250ec8fc46f5751c8cb9b798f75fcf9ec52485c1127caf9d6cef0346a9dd1660a8967faf1a7cde579571a0ac130cfaf475d6f22e4929003b6
   languageName: node
   linkType: hard
 
@@ -12175,12 +12444,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
-  version: 3.36.0
-  resolution: "core-js-compat@npm:3.36.0"
+"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0, core-js-compat@npm:^3.36.1":
+  version: 3.37.0
+  resolution: "core-js-compat@npm:3.37.0"
   dependencies:
-    browserslist: "npm:^4.22.3"
-  checksum: 10c0/5ce2ad0ece8379883c01958e196575abc015692fc0394b8917f132b6b32e5c2bfb2612902c3f98f270cfa2d9d6522c28d36665038f3726796f1f4b436e4f863e
+    browserslist: "npm:^4.23.0"
+  checksum: 10c0/ca6ba7d200f7a4a850fd5cba58b40ab78139d3f301bad7b53816eafe0cfb000523e72882069ddaba440794b950ed101225668bf7b97b73e54a5e3384a8215e03
   languageName: node
   linkType: hard
 
@@ -13026,7 +13295,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff@npm:^5.0.0":
+"diff@npm:^5.0.0, diff@npm:^5.2.0":
   version: 5.2.0
   resolution: "diff@npm:5.2.0"
   checksum: 10c0/aed0941f206fe261ecb258dc8d0ceea8abbde3ace5827518ff8d302f0fc9cc81ce116c4d8f379151171336caf0516b79e01abdc1ed1201b6440d895a66689eb4
@@ -13346,14 +13615,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.7, ejs@npm:^3.1.8":
-  version: 3.1.9
-  resolution: "ejs@npm:3.1.9"
+"ejs@npm:^3.1.10, ejs@npm:^3.1.7":
+  version: 3.1.10
+  resolution: "ejs@npm:3.1.10"
   dependencies:
     jake: "npm:^10.8.5"
   bin:
     ejs: bin/cli.js
-  checksum: 10c0/f0e249c79128810f5f6d5cbf347fc906d86bb9384263db0b2a9004aea649f2bc2d112736de5716c509c80afb4721c47281bd5b57c757d3b63f1bf5ac5f885893
+  checksum: 10c0/52eade9e68416ed04f7f92c492183340582a36482836b11eab97b159fcdcfdedc62233a1bf0bf5e5e1851c501f2dca0e2e9afd111db2599e4e7f53ee29429ae1
   languageName: node
   linkType: hard
 
@@ -19450,12 +19719,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:7.3.2":
-  version: 7.3.2
-  resolution: "markdown-to-jsx@npm:7.3.2"
+"markdown-to-jsx@npm:^7.4.5":
+  version: 7.4.5
+  resolution: "markdown-to-jsx@npm:7.4.5"
   peerDependencies:
     react: ">= 0.14.0"
-  checksum: 10c0/191b9a9defeed02e12dd340cebf279f577266dac7b34574fa44ce4d64ee8536f9967d455b8303c853f84413feb473118290a6160d8221eeaf3b9e4961b8980e3
+  checksum: 10c0/1c917be129a2d7091715cca7230c7adfa457ed3069fb243d6df4f22721749ee1a5a6d7be5d88d8ccbb422cc8c7f12fb87112e24c70da9ea45d9a3b9b62ffbb76
   languageName: node
   linkType: hard
 
@@ -21002,6 +21271,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"muggle-string@npm:^0.4.0":
+  version: 0.4.1
+  resolution: "muggle-string@npm:0.4.1"
+  checksum: 10c0/e914b63e24cd23f97e18376ec47e4ba3aa24365e4776212b666add2e47bb158003212980d732c49abf3719568900af7861873844a6e2d3a7ca7e86952c0e99e9
+  languageName: node
+  linkType: hard
+
 "multicast-dns@npm:^7.2.5":
   version: 7.2.5
   resolution: "multicast-dns@npm:7.2.5"
@@ -22664,7 +22940,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.5":
+"pirates@npm:^4.0.6":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
   checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
@@ -22982,7 +23258,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.35, postcss@npm:^8.2.14, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
+"postcss@npm:8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
   dependencies:
@@ -23003,7 +23279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.38":
+"postcss@npm:^8.2.14, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35, postcss@npm:^8.4.38":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -25961,14 +26237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "source-map-js@npm:1.0.2"
-  checksum: 10c0/32f2dfd1e9b7168f9a9715eb1b4e21905850f3b50cf02cf476e47e4eebe8e6b762b63a64357896aa29b37e24922b4282df0f492e0d2ace572b43d15525976ff8
-  languageName: node
-  linkType: hard
-
-"source-map-js@npm:^1.2.0":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
   checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
@@ -27658,23 +27927,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:~5.3.2":
-  version: 5.3.3
-  resolution: "typescript@npm:5.3.3"
+"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:^5.4.3":
+  version: 5.4.3
+  resolution: "typescript@npm:5.4.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
+  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "typescript@npm:5.4.3"
+"typescript@npm:~5.3.2":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
+  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
   languageName: node
   linkType: hard
 
@@ -27688,23 +27957,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin, typescript@patch:typescript@npm%3A~5.3.2#optional!builtin":
-  version: 5.3.3
-  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"
+"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin":
+  version: 5.4.3
+  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin::version=5.4.3&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
+  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.4.3#optional!builtin":
-  version: 5.4.3
-  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin::version=5.4.3&hash=5adc0c"
+"typescript@patch:typescript@npm%3A~5.3.2#optional!builtin":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
+  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
   languageName: node
   linkType: hard
 
@@ -28788,27 +29057,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-component-meta@npm:^1.8.27":
-  version: 1.8.27
-  resolution: "vue-component-meta@npm:1.8.27"
+"vue-component-meta@npm:^2.0.0":
+  version: 2.0.17
+  resolution: "vue-component-meta@npm:2.0.17"
   dependencies:
-    "@volar/typescript": "npm:~1.11.1"
-    "@vue/language-core": "npm:1.8.27"
+    "@volar/typescript": "npm:~2.2.2"
+    "@vue/language-core": "npm:2.0.17"
     path-browserify: "npm:^1.0.1"
-    vue-component-type-helpers: "npm:1.8.27"
+    vue-component-type-helpers: "npm:2.0.17"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/40884b316940e6995a6e7f9e5cbe5536b5c6e380acfd5b1d24914511972a241550c04474f4fffdf6305b1c9962b1137b5fd6183dc309127d3a268fe7d8d85df9
-  languageName: node
-  linkType: hard
-
-"vue-component-type-helpers@npm:1.8.27":
-  version: 1.8.27
-  resolution: "vue-component-type-helpers@npm:1.8.27"
-  checksum: 10c0/3403d70951e422162321e810f54f23f11ee5d2642631d2ca2cb1de18e5d35a0b7b05dd1f9bd02a0ae77dfa0b80751d826865d98f928ae6d6fbce9303406c9820
+  checksum: 10c0/78d2932c9c21275fae76224a088248bcaa6b70b0d3b13a615b823a5243ab4fbefb6a0d8fde300892f88700bdbb7198e61a4ebbd649efc785a3a8589fd0d8dbff
   languageName: node
   linkType: hard
 
@@ -28819,6 +29081,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-component-type-helpers@npm:2.0.17":
+  version: 2.0.17
+  resolution: "vue-component-type-helpers@npm:2.0.17"
+  checksum: 10c0/4c550eea579c5a045df1ee6394475b507631591de5d9f62e12a252221b7e67638287e1e9952f29186ea833074b4dcb0bd16cd753f10f990bf432bd10a56075b6
+  languageName: node
+  linkType: hard
+
 "vue-component-type-helpers@npm:latest":
   version: 1.8.15
   resolution: "vue-component-type-helpers@npm:1.8.15"
@@ -29227,13 +29496,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-virtual-modules@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "webpack-virtual-modules@npm:0.5.0"
-  checksum: 10c0/0742e069cd49d91ccd0b59431b3666903d321582c1b1062fa6bdae005c3538af55ff8787ea5eafbf72662f3496d3a879e2c705d55ca0af8283548a925be18484
-  languageName: node
-  linkType: hard
-
 "webpack-virtual-modules@npm:^0.6.0":
   version: 0.6.1
   resolution: "webpack-virtual-modules@npm:0.6.1"
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index c2c1afad9edb..8c0df55119fd 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -260,11 +260,11 @@ The following table details how to use the API values:
 
 The following options are configurable under the `sidebar` namespace:
 
-| Name               | Type     | Description                                                   | Example Value                                    |
-| ------------------ | -------- | ------------------------------------------------------------- | ------------------------------------------------ |
-| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                          |
-| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                              |
-| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => {item.name}` |
+| Name               | Type     | Description                                                   | Example Value                                         |
+| ------------------ | -------- | ------------------------------------------------------------- | ----------------------------------------------------- |
+| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                               |
+| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                                   |
+| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item, api) => {item.name}` |
 
 The following options are configurable under the `toolbar` namespace:
 
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index a1f8c4369fff..ae2cb3d779f1 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -1,5 +1,6 @@
 ---
 title: 'CLI options'
+hideRendererSelector: true
 ---
 
 The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.
@@ -118,6 +119,7 @@ Options include:
 | `--debug`                | Outputs more logs in the CLI to assist debugging
`storybook init --debug`                                                                                                               |
 | `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)
`storybook init --disable-telemetry`                                               |
 | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)
`storybook init --enable-crash-reports` |
+| `--no-dev`               | Complete the initialization of Storybook without running the Storybook dev server
`storybook init --no-dev`                                                                             |
 
 ### `add`
 
diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md
index 1104184c9992..3478a0c2fe8a 100644
--- a/docs/api/doc-block-subtitle.md
+++ b/docs/api/doc-block-subtitle.md
@@ -30,6 +30,12 @@ import { Subtitle } from '@storybook/blocks';
 
 Type: `JSX.Element | string`
 
-Default: `parameters.componentSubtitle`
+Default: `parameters.docs.subtitle`
 
 Provides the content.
+
+### `of`
+
+Type: CSF file exports
+
+Specifies which meta's subtitle is displayed.
diff --git a/docs/api/doc-block-title.md b/docs/api/doc-block-title.md
index 886d19075386..0427e763a390 100644
--- a/docs/api/doc-block-title.md
+++ b/docs/api/doc-block-title.md
@@ -31,3 +31,9 @@ import { Title } from '@storybook/blocks';
 Type: `JSX.Element | string`
 
 Provides the content. Falls back to value of `title` in an [attached](./doc-block-meta.md#attached-vs-unattached) CSF file (or value derived from [autotitle](../configure/sidebar-and-urls.md#csf-30-auto-titles)), trimmed to the last segment. For example, if the title value is `'path/to/components/Button'`, the default content is `'Button'`.
+
+### `of`
+
+Type: CSF file exports
+
+Specifies which meta's title is displayed.
diff --git a/docs/api/doc-block-typeset.md b/docs/api/doc-block-typeset.md
index 22933dc5f521..047657cd89f8 100644
--- a/docs/api/doc-block-typeset.md
+++ b/docs/api/doc-block-typeset.md
@@ -84,7 +84,7 @@ Provides a font family to be displayed.
 
 ### `fontSizes`
 
-Type: `number[]`
+Type: `(string | number)[]`
 
 Provides a list of available font sizes (in `px`).
 
diff --git a/docs/api/index.md b/docs/api/index.md
index 60edd614c32c..f719ab3291b3 100644
--- a/docs/api/index.md
+++ b/docs/api/index.md
@@ -66,7 +66,7 @@ An overview of all available API references for Storybook.
     
       CSF
       
-        Component Story Format (CSF) is the API for writing stories. It's an
+        Component Story Format (CSF) is the API for writing stories. It's an 
         open standard based on ES6 modules that
         is portable beyond Storybook.
       
diff --git a/docs/api/parameters.md b/docs/api/parameters.md
index 506dc051b3df..f70fa3395962 100644
--- a/docs/api/parameters.md
+++ b/docs/api/parameters.md
@@ -141,6 +141,51 @@ When specifying a custom sorting function, the function behaves like a typical J
 
 See [the guide](../writing-stories/naming-components-and-hierarchy/#sorting-stories) for usage examples.
 
+### `test`
+
+Type:
+
+```ts
+{
+  clearMocks?: boolean;
+  mockReset?: boolean;
+  restoreMocks?: boolean;
+  dangerouslyIgnoreUnhandledErrors?: boolean;
+}
+```
+
+#### `clearMocks`
+
+Type: `boolean`
+
+Default: `false`
+
+[Similar to Vitest](https://vitest.dev/config/#clearmocks), it will call `.mockClear()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history, but not reset its implementation to the default one.
+
+#### `mockReset`
+
+Type: `boolean`
+
+Default: `false`
+
+[Similar to Vitest](https://vitest.dev/config/#mockreset), it will call `.mockReset()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history and reset its implementation to an empty function (will return `undefined`).
+
+#### `restoreMocks`
+
+Type: `boolean`
+
+Default: `true`
+
+[Similar to Vitest](https://vitest.dev/config/#restoremocks), it will call `.restoreMocks()` on all spies created with `fn()` from `@storybook/test` when a story unmounts. This will clear mock history and reset its implementation to the original one.
+
+#### `dangerouslyIgnoreUnhandledErrors`
+
+Type: `boolean`
+
+Default: `false`
+
+Unhandled errors might cause false positive assertions. Setting this to `true` will prevent the [play function](../writing-stories/play-function.md) from failing and showing a warning when unhandled errors are thrown during execution.
+
 ---
 
 ### Essential addons
diff --git a/docs/api/portable-stories-jest.md b/docs/api/portable-stories-jest.md
index 4c4141a53922..cae15f1ca62a 100644
--- a/docs/api/portable-stories-jest.md
+++ b/docs/api/portable-stories-jest.md
@@ -2,6 +2,8 @@
 title: 'Portable stories in Jest'
 ---
 
+
+
 export const SUPPORTED_RENDERERS = ['react', 'vue'];
 
 
@@ -20,16 +22,17 @@ Portable stories in Jest are currently only supported in [React](?renderer=react
 
 Portable stories are Storybook [stories](../writing-stories/index.md) which can be used in external environments, such as [Jest](https://jestjs.io).
 
-Normally, Storybok composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Jest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.
+Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Jest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.
 
 
 
 
 
-**Using `Next.js`?** You need to do two things differently when using portable stories in Jest with Next.js projects:
+**Using `Next.js`?** You need to do three things differently when using portable stories in Jest with Next.js projects:
 
 - Configure the [`next/jest.js` transformer](https://nextjs.org/docs/pages/building-your-application/testing/jest#manual-setup), which will handle all of the necessary Next.js configuration for you.
 - Import [`composeStories`](#composestories) or [`composeStory`](#composestory) from the `@storybook/nextjs` package (e.g. `import { composeStories } from '@storybook/nextjs'`).
+- Set up [internal module aliases](../get-started/nextjs.md#storybooknextjsexport-mocks) to ensure the framework configuration works correctly and to be able to mock and assert on them.
 
 
 
@@ -91,15 +94,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                                     | Description                                                     |
-| ---------- | -------------------------------------------------------- | --------------------------------------------------------------- |
-| storyName  | `string`                                                 | The story's name                                                |
-| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                  |
-| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                          |
-| id         | `string`                                                 | The story's id                                                  |
-| parameters | `Record`                                    | The story's [parameters](./parameters.md)                       |
-| load       | `() => Promise`                                    | Executes all the [loaders](#2-load-optional) for a given story  |
-| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story |
+| Property   | Type                                                     | Description                                                                           |
+| ---------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| storyName  | `string`                                                 | The story's name                                                                      |
+| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                                        |
+| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                                                |
+| id         | `string`                                                 | The story's id                                                                        |
+| parameters | `Record`                                    | The story's [parameters](./parameters.md)                                             |
+| load       | `() => Promise`                                    | [Prepares](#3-prepare) the story for rendering and and cleans up all previous stories |
+| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#5-play) of a given story                                |
 
 ## composeStory
 
@@ -239,18 +242,22 @@ When you want to reuse a story in a different environment, however, it's crucial
 
 👉 For this, you use the [`setProjectAnnotations`](#setprojectannotations) API.
 
-### 2. Prepare
+### 2. Compose
 
 The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). You do not need to do anything for this step.
 
-### 3. Load
-
-**(optional)**
+### 3. Prepare
 
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md). In portable stories, the loaders are not applied automatically—you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-tests/interaction-testing.md#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself.
 
 👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
+
+
+It is recommended to always run `load` before rendering, even if the story doesn't have any loaders or beforeEach applied. By doing so, you ensure that the tests are cleaned up properly to maintain isolation and you will not have to update your test if you later add them to your story.
+
+
+
 
 
 
 
 
 
-**Using `Next.js`?** Next.js requires specific configuration that is only available in [Jest](./portable-stories-jest.md). The portable stories API is not supported in Next.js with Playwright CT.
+**Using `Next.js`?** The portable stories API is not yet supported in Next.js with Playwright CT.
+
+
 
 
 
@@ -87,9 +89,25 @@ Instead of using Playwright's own `test` function, you can use Storybook's speci
 
 
 
-
+
+
+The code which you write in your Playwright test file is transformed and orchestrated by Playwright, where part of the code executes in Node, while other parts execute in the browser.
+
+Because of this, you have to compose the stories _in a separate file than your own test file_:
+
+```ts
+// Button.stories.portable.ts
+// Replace  with your renderer, e.g. react, vue3
+import { composeStories } from '@storybook/';
+
+import * as stories from './Button.stories';
+
+// This function will be executed in the browser
+// and compose all stories, exporting them in a single object
+export default composeStories(stories);
+```
 
-Please note the [limitations of importing stories in Playwright CT](#importing-stories-in-playwright-ct).
+You can then import the composed stories in your Playwright test file, as in the example above.
 
 
 
@@ -126,7 +144,7 @@ This API should be called once, before the tests run, in [`playwright/index.ts`]
 // Replace  with your renderer, e.g. react, vue3
 import { setProjectAnnotations } from '@storybook/';
 import * as addonAnnotations from 'my-addon/preview';
-import * as previewAnnotations from './.storybook/preview';
+import * as previewAnnotations from '../.storybook/preview';
 
 setProjectAnnotations([previewAnnotations, addonAnnotations]);
 ```
@@ -159,26 +177,6 @@ A set of project [annotations](#annotations) (those defined in `.storybook/previ
 
 Annotations are the metadata applied to a story, like [args](../writing-stories/args.md), [decorators](../writing-stories/decorators.md), [loaders](../writing-stories/loaders.md), and [play functions](../writing-stories/play-function.md). They can be defined for a specific story, all stories for a component, or all stories in the project.
 
-## Importing stories in Playwright CT
-
-The code which you write in your Playwright test file is transformed and orchestrated by Playwright, where part of the code executes in Node, while other parts execute in the browser.
-
-Because of this, you have to compose the stories _in a separate file than your own test file_:
-
-```ts
-// Button.stories.portable.ts
-// Replace  with your renderer, e.g. react, vue3
-import { composeStories } from '@storybook/';
-
-import * as stories from './Button.stories';
-
-// This function will be executed in the browser
-// and compose all stories, exporting them in a single object
-export default composeStories(stories);
-```
-
-You can then import the composed stories in your Playwright test file, as in the [example above](#createtest).
-
 
 
 [Read more about Playwright's component testing](https://playwright.dev/docs/test-components#test-stories).
@@ -219,7 +217,7 @@ If your stories behave differently based on [globals](../essentials/toolbars-and
 
 ```tsx
 // Button.portable.ts
-import { test } from 'vitest';
+import { test } from 'playwright';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 
diff --git a/docs/api/portable-stories-vitest.md b/docs/api/portable-stories-vitest.md
index 0342b7cc1e21..75b15935fb68 100644
--- a/docs/api/portable-stories-vitest.md
+++ b/docs/api/portable-stories-vitest.md
@@ -2,6 +2,8 @@
 title: 'Portable stories in Vitest'
 ---
 
+
+
 export const SUPPORTED_RENDERERS = ['react', 'vue', 'svelte'];
 
 
@@ -99,15 +101,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                      | Description                                                     |
-| ---------- | ----------------------------------------- | --------------------------------------------------------------- |
-| storyName  | `string`                                  | The story's name                                                |
-| args       | `Record`                     | The story's [args](../writing-stories/args.md)                  |
-| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                          |
-| id         | `string`                                  | The story's id                                                  |
-| parameters | `Record`                     | The story's [parameters](./parameters.md)                       |
-| load       | `() => Promise`                     | Executes all the [loaders](#2-load-optional) for a given story  |
-| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story |
+| Property   | Type                                      | Description                                                                           |
+| ---------- | ----------------------------------------- | ------------------------------------------------------------------------------------- |
+| storyName  | `string`                                  | The story's name                                                                      |
+| args       | `Record`                     | The story's [args](../writing-stories/args.md)                                        |
+| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                                |
+| id         | `string`                                  | The story's id                                                                        |
+| parameters | `Record`                     | The story's [parameters](./parameters.md)                                             |
+| load       | `() => Promise`                     | [Prepares](#3-prepare) the story for rendering and and cleans up all previous stories |
+| play       | `(context) => Promise \| undefined` | Executes the [play function](#5-play) of a given story                                |
 
 ## composeStory
 
@@ -234,18 +236,22 @@ When you want to reuse a story in a different environment, however, it's crucial
 
 👉 For this, you use the [`setProjectAnnotations`](#setprojectannotations) API.
 
-### 2. Prepare
+### 2. Compose
 
 The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). You do not need to do anything for this step.
 
-### 3. Load
-
-**(optional)**
+### 3. Prepare
 
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md). In portable stories, the loaders are not applied automatically—you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-tests/interaction-testing.md#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically — you have to apply them yourself.
 
 👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
+
+
+It is recommended to always run `load` before rendering, even if the story doesn't have any loaders or beforeEach applied. By doing so, you ensure that the tests are cleaned up properly to maintain isolation and you will not have to update your test if you later add them to your story.
+
+
+
 
 
  {item.name}` |
+| Name               | Type     | Description                                                   | Example Value                                         |
+| ------------------ | -------- | ------------------------------------------------------------- | ----------------------------------------------------- |
+| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                               |
+| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                                   |
+| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item, api) => {item.name}` |
 
 The following options are configurable under the `toolbar` namespace:
 
diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
index 77ffed4231db..02f32cac96ca 100644
--- a/docs/configure/images-and-assets.md
+++ b/docs/configure/images-and-assets.md
@@ -42,8 +42,8 @@ Configure a directory (or a list of directories) where your assets live when sta
 
 
 
diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md
index fff549e8ef4c..87f8bc8c8d9b 100644
--- a/docs/configure/story-rendering.md
+++ b/docs/configure/story-rendering.md
@@ -2,7 +2,54 @@
 title: 'Story rendering'
 ---
 
-In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
+In Storybook, your stories render in a particular “preview” iframe (also called the Canvas) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [builder](../builders/index.md) config, but you also may want to run some code for every story or directly control the rendered HTML to help your stories render correctly.
+
+## Running code for every story
+
+Code executed in the preview file (`.storybook/preview.js|ts`) runs for every story in your Storybook. This is useful for setting up global styles, initializing libraries, or anything else required to render your components.
+
+
+
+Here's an example of how you might use the preview file to initialize a library that must run before your components render:
+
+```ts
+// .storybook/preview.ts
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Preview } from '@storybook/your-renderer';
+
+import { initialize } from '../lib/your-library';
+
+initialize();
+
+const preview: Preview = {
+  // ...
+};
+
+export default preview;
+```
+
+
+
+
+
+For example, with Vue, you can extend Storybook's application and register your library (e.g., [Fontawesome](https://github.com/FortAwesome/vue-fontawesome)). Or with Angular, add the package ([localize](https://angular.io/api/localize)) into your `polyfills.ts` and import it:
+
+
+
+
+
+
+
+
 
 ## Adding to <head>
 
diff --git a/docs/contribute/storybook-reproduction-generator-location.png b/docs/contribute/storybook-reproduction-generator-location.png
index d33bd52e2850..516221fc9017 100644
Binary files a/docs/contribute/storybook-reproduction-generator-location.png and b/docs/contribute/storybook-reproduction-generator-location.png differ
diff --git a/docs/contribute/storybook-reproduction-generator-template.png b/docs/contribute/storybook-reproduction-generator-template.png
index 95a8052eeda9..8065c179ef19 100644
Binary files a/docs/contribute/storybook-reproduction-generator-template.png and b/docs/contribute/storybook-reproduction-generator-template.png differ
diff --git a/docs/essentials/addon-themes-example.gif b/docs/essentials/addon-themes-example.gif
index f4fc95ef5919..f50bd0d6dab9 100644
Binary files a/docs/essentials/addon-themes-example.gif and b/docs/essentials/addon-themes-example.gif differ
diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
index 60c950c34d29..030d92ad6ea1 100644
--- a/docs/essentials/controls.md
+++ b/docs/essentials/controls.md
@@ -385,6 +385,45 @@ Unless you need the flexibility of a function, an easier way to map primitives t
 
 Note that both `mapping` and `control.labels` don't have to be exhaustive. If the currently selected option is not listed, it's used verbatim.
 
+## Creating and editing stories from controls
+
+The Controls addon allows you to create or edit stories, directly from the Controls panel.
+
+### Create a new story
+
+Open the Controls panel for a story and adjust the value of a control. Then save those changes as a new story.
+
+
+
+
+
+If you're working on a component that does not yet have any stories, you can click the ➕ button in the sidebar to search for your component and have a basic story created for you.
+
+
+
+
+
+### Edit a story
+
+You can also update a control's value, then save the changes to the story. The story file's code will be updated for you.
+
+
+
 ## Configuration
 
 The Controls addon can be configured in two ways:
diff --git a/docs/essentials/index.md b/docs/essentials/index.md
index 2ef9254bfab7..15414870764a 100644
--- a/docs/essentials/index.md
+++ b/docs/essentials/index.md
@@ -87,16 +87,16 @@ Below is an abridged configuration and table with all the available options for
 
 
 
-| Addon                          | Option             | Description                                                                                                                                              |
-| ------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@storybook/addon-actions`     | N/A                | N/A                                                                                                                                                      |
-| `@storybook/addon-viewport`    | N/A                | N/A                                                                                                                                                      |
-| `@storybook/addon-docs`        | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`.                                                               |
-|                                | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.md#lack-of-github-flavored-markdown-gfm). |
-| `@storybook/addon-controls`    | N/A                | N/A                                                                                                                                                      |
-| `@storybook/addon-backgrounds` | N/A                | N/A                                                                                                                                                      |
-| `@storybook/addon-toolbars`    | N/A                | N/A                                                                                                                                                      |
-| `@storybook/addon-measure`     | N/A                | N/A                                                                                                                                                      |
+| Addon                          | Option             | Description                                                                                                                                                   |
+| ------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@storybook/addon-actions`     | N/A                | N/A                                                                                                                                                           |
+| `@storybook/addon-viewport`    | N/A                | N/A                                                                                                                                                           |
+| `@storybook/addon-docs`        | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`.                                                                    |
+|                                | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.md#markdown-tables-arent-rendering-correctly). |
+| `@storybook/addon-controls`    | N/A                | N/A                                                                                                                                                           |
+| `@storybook/addon-backgrounds` | N/A                | N/A                                                                                                                                                           |
+| `@storybook/addon-toolbars`    | N/A                | N/A                                                                                                                                                           |
+| `@storybook/addon-measure`     | N/A                | N/A                                                                                                                                                           |
 
 When you start Storybook, your custom configuration will override the default.
 
diff --git a/docs/get-started/edit-story-from-controls-optimized.mp4 b/docs/get-started/edit-story-from-controls-optimized.mp4
new file mode 100644
index 000000000000..3bab35082317
Binary files /dev/null and b/docs/get-started/edit-story-from-controls-optimized.mp4 differ
diff --git a/docs/get-started/edit-story-in-code-optimized.mp4 b/docs/get-started/edit-story-in-code-optimized.mp4
new file mode 100644
index 000000000000..2346f7186d36
Binary files /dev/null and b/docs/get-started/edit-story-in-code-optimized.mp4 differ
diff --git a/docs/get-started/new-component-story-from-plus-button-optimized.mp4 b/docs/get-started/new-component-story-from-plus-button-optimized.mp4
new file mode 100644
index 000000000000..c313266e1707
Binary files /dev/null and b/docs/get-started/new-component-story-from-plus-button-optimized.mp4 differ
diff --git a/docs/get-started/new-component-story-in-code-optimized.mp4 b/docs/get-started/new-component-story-in-code-optimized.mp4
new file mode 100644
index 000000000000..08c119a4cae0
Binary files /dev/null and b/docs/get-started/new-component-story-in-code-optimized.mp4 differ
diff --git a/docs/get-started/new-story-from-controls-optimized.mp4 b/docs/get-started/new-story-from-controls-optimized.mp4
new file mode 100644
index 000000000000..e4bb41534021
Binary files /dev/null and b/docs/get-started/new-story-from-controls-optimized.mp4 differ
diff --git a/docs/get-started/new-story-in-code-optimized.mp4 b/docs/get-started/new-story-in-code-optimized.mp4
new file mode 100644
index 000000000000..0f9527bc3a5f
Binary files /dev/null and b/docs/get-started/new-story-in-code-optimized.mp4 differ
diff --git a/docs/get-started/nextjs.md b/docs/get-started/nextjs.md
index b17cf19661b3..4e12e6608a7c 100644
--- a/docs/get-started/nextjs.md
+++ b/docs/get-started/nextjs.md
@@ -131,7 +131,7 @@ This framework allows you to use Next.js's [next/image](https://nextjs.org/docs/
 [Local images](https://nextjs.org/docs/pages/building-your-application/optimizing/images#local-images) are supported.
 
 ```jsx
-// index.js
+// index.jsx
 import Image from 'next/image';
 import profilePic from '../public/me.png';
 
@@ -158,7 +158,7 @@ function Home() {
 [Remote images](https://nextjs.org/docs/pages/building-your-application/optimizing/images#remote-images) are also supported.
 
 ```jsx
-// index.js
+// index.jsx
 import Image from 'next/image';
 
 export default function Home() {
@@ -301,41 +301,6 @@ The default values on the stubbed router are as follows (see [globals](../essent
 ```ts
 // Default router
 const defaultRouter = {
-  push(...args) {
-    action('nextRouter.push')(...args);
-    return Promise.resolve(true);
-  },
-  replace(...args) {
-    action('nextRouter.replace')(...args);
-    return Promise.resolve(true);
-  },
-  reload(...args) {
-    action('nextRouter.reload')(...args);
-  },
-  back(...args) {
-    action('nextRouter.back')(...args);
-  },
-  forward() {
-    action('nextRouter.forward')();
-  },
-  prefetch(...args) {
-    action('nextRouter.prefetch')(...args);
-    return Promise.resolve();
-  },
-  beforePopState(...args) {
-    action('nextRouter.beforePopState')(...args);
-  },
-  events: {
-    on(...args) {
-      action('nextRouter.events.on')(...args);
-    },
-    off(...args) {
-      action('nextRouter.events.off')(...args);
-    },
-    emit(...args) {
-      action('nextRouter.events.emit')(...args);
-    },
-  },
   // The locale should be configured globally: https://storybook.js.org/docs/essentials/toolbars-and-globals#globals
   locale: globals?.locale,
   asPath: '/',
@@ -350,20 +315,33 @@ const defaultRouter = {
 };
 ```
 
-### Actions integration caveats
-
-If you override a function, you lose the automatic action tab integration and have to build it out yourself, which looks something like this (make sure you install the `@storybook/addon-actions` package):
-
-
+Additionally, the [`router` object](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object) contains all of the original methods (such as `push()`, `replace()`, etc.) as mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
 
-
+To override these defaults, you can use [parameters](../writing-stories/parameters.md) and [`beforeEach`](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up):
 
-
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/react';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/router.mock';
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default router properties
+      router: {
+        basePath: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default router method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+```
 
 ## Next.js navigation
 
@@ -493,43 +471,38 @@ The default values on the stubbed navigation context are as follows:
 ```ts
 // Default navigation context
 const defaultNavigationContext = {
-  push(...args) {
-    action('nextNavigation.push')(...args);
-  },
-  replace(...args) {
-    action('nextNavigation.replace')(...args);
-  },
-  forward(...args) {
-    action('nextNavigation.forward')(...args);
-  },
-  back(...args) {
-    action('nextNavigation.back')(...args);
-  },
-  prefetch(...args) {
-    action('nextNavigation.prefetch')(...args);
-  },
-  refresh: () => {
-    action('nextNavigation.refresh')();
-  },
   pathname: '/',
   query: {},
 };
 ```
 
-### Actions integration caveats
-
-If you override a function, you lose the automatic action tab integration and have to build it out yourself, which looks something like this (make sure you install the `@storybook/addon-actions` package):
-
-
+Additionally, the [`router` object](https://nextjs.org/docs/app/api-reference/functions/use-router#userouter) contains all of the original methods (such as `push()`, `replace()`, etc.) as mock functions that can be manipulated and asserted on using [regular mock APIs](https://vitest.dev/api/mock.html).
 
-
+To override these defaults, you can use [parameters](../writing-stories/parameters.md) and [`beforeEach`](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up):
 
-
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/react';
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getRouter } from '@storybook/nextjs/navigation.mock';
+
+const preview: Preview = {
+  parameters: {
+    nextjs: {
+      // 👇 Override the default navigation properties
+      navigation: {
+        pathname: '/app/',
+      },
+    },
+  },
+  async beforeEach() {
+    // 👇 Manipulate the default navigation method mocks
+    getRouter().push.mockImplementation(() => {
+      /* ... */
+    });
+  },
+};
+```
 
 ## Next.js Head
 
@@ -618,7 +591,7 @@ export default HelloWorld;
 
 You can use your own babel config too. This is an example of how you can customize styled-jsx.
 
-```json
+```jsonc
 // .babelrc (or whatever config file you use)
 {
   "presets": [
@@ -645,7 +618,7 @@ This allows for cool things like zero-config Tailwind! (See [Next.js' example](h
 [Absolute imports](https://nextjs.org/docs/pages/building-your-application/configuring/absolute-imports-and-module-aliases#absolute-imports) from the root directory are supported.
 
 ```jsx
-// index.js
+// index.jsx
 // All good!
 import Button from 'components/button';
 // Also good!
@@ -671,6 +644,135 @@ import 'styles/globals.scss';
 // ...
 ```
 
+
+
+Absolute imports **cannot** be mocked in stories/tests. See the [Mocking modules](#mocking-modules) section for more information.
+
+
+
+## Module aliases
+
+[Module aliases](https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases#module-aliases) are also supported.
+
+```jsx
+// index.jsx
+// All good!
+import Button from '@/components/button';
+// Also good!
+import styles from '@/styles/HomePage.module.css';
+
+export default function HomePage() {
+  return (
+    <>
+      
Hello World

+      

+    `,
+  }),
+};
+```
diff --git a/docs/snippets/vue/tags-combo-example.ts-4-9.mdx b/docs/snippets/vue/tags-combo-example.ts-4-9.mdx
new file mode 100644
index 000000000000..5d07a43808b0
--- /dev/null
+++ b/docs/snippets/vue/tags-combo-example.ts-4-9.mdx
@@ -0,0 +1,42 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    components: { Button },
+    template: `
+      

+        

+    `,
+  }),
+};
+```
diff --git a/docs/snippets/vue/tags-combo-example.ts.mdx b/docs/snippets/vue/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..19874ca03d3f
--- /dev/null
+++ b/docs/snippets/vue/tags-combo-example.ts.mdx
@@ -0,0 +1,42 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { Button } from './Button';
+
+const meta: Meta = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    components: { Button },
+    template: `
+      

+        

+    `,
+  }),
+};
+```
diff --git a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
index 3c8db13088d7..26dafd70c3ad 100644
--- a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
+++ b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-vite
+pnpm add --save-dev @storybook/vue3-vite
 ```
diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
index 24ce6105b49e..91cb03115e56 100644
--- a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-webpack5
+pnpm add --save-dev @storybook/vue3-webpack5
 ```
diff --git a/docs/snippets/web-components/app-story-with-mock.js.mdx b/docs/snippets/web-components/app-story-with-mock.js.mdx
deleted file mode 100644
index 2d5b9a38f63a..000000000000
--- a/docs/snippets/web-components/app-story-with-mock.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// App.stories.js
-
-export default {
-  component: 'demo-app',
-};
-
-export const Success = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
-    },
-  },
-};
-```
diff --git a/docs/snippets/web-components/app-story-with-mock.ts.mdx b/docs/snippets/web-components/app-story-with-mock.ts.mdx
deleted file mode 100644
index e8de25628bd7..000000000000
--- a/docs/snippets/web-components/app-story-with-mock.ts.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// App.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  component: 'demo-app',
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Success: Story = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
-    },
-  },
-};
-```
diff --git a/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx b/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx
new file mode 100644
index 000000000000..7c4a9907894c
--- /dev/null
+++ b/docs/snippets/web-components/before-each-in-meta-mock-date.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Page.stories.js
+import MockDate from 'mockdate';
+
+import { getUserFromSession } from '../../api/session.mock';
+
+export default {
+  component: 'my-page',
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+};
+
+export const Default = {
+  async play({ canvasElement }) {
+    // ... This will run with the mocked Date
+  },
+};
+```
diff --git a/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx b/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx
new file mode 100644
index 000000000000..3e1c4911e348
--- /dev/null
+++ b/docs/snippets/web-components/before-each-in-meta-mock-date.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+import MockDate from 'mockdate';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '../../api/session.mock';
+
+const meta: Meta = {
+  component: 'my-page',
+  // 👇 Set the value of Date for every story in the file
+  async beforeEach() {
+    MockDate.set('2024-02-14');
+
+    // 👇 Reset the Date after each story
+    return () => {
+      MockDate.reset();
+    };
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  async play({ canvasElement }) {
+    // ... This will run with the mocked Date
+  },
+};
+```
diff --git a/docs/snippets/web-components/button-story-auto-docs.js.mdx b/docs/snippets/web-components/button-story-auto-docs.js.mdx
deleted file mode 100644
index c45b64d54fde..000000000000
--- a/docs/snippets/web-components/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// Button.stories.js
-
-export default {
-  component: 'custom-button',
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/web-components/button-story-auto-docs.ts.mdx b/docs/snippets/web-components/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 34d74da947b1..000000000000
--- a/docs/snippets/web-components/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  component: 'custom-button',
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
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 a513b8a06d69..cda12f18a916 100644
--- a/docs/snippets/web-components/button-story-rename-story.js.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.js.mdx
@@ -6,6 +6,11 @@ export default {
 };
 
 export const Primary = {
+  // 👇 Rename this story
   name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
 };
 ```
diff --git a/docs/snippets/web-components/button-story-rename-story.ts.mdx b/docs/snippets/web-components/button-story-rename-story.ts.mdx
index d927d44851fa..8d76cb92be12 100644
--- a/docs/snippets/web-components/button-story-rename-story.ts.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.ts.mdx
@@ -1,6 +1,5 @@
 ```ts
 // Button.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
@@ -11,6 +10,11 @@ export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {
+  // 👇 Rename this story
   name: 'I am the primary',
+  args: {
+    label: 'Button',
+    primary: true,
+  },
 };
 ```
diff --git a/docs/snippets/web-components/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
similarity index 63%
rename from docs/snippets/web-components/documentscreen-story-msw-rest-request.js.mdx
rename to docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
index 6a4fce7cc13c..d1c3cda8bc9f 100644
--- a/docs/snippets/web-components/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
@@ -1,7 +1,6 @@
 ```js
 // YourPage.stories.js
-
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 export default {
   component: 'demo-document-screen',
@@ -34,21 +33,28 @@ const TestData = {
 
 export const MockedSuccess = {
   parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return new HttpResponse.json(TestData);
+        }),
+      ],
+    },
   },
 };
 
 export const MockedError = {
   parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
   },
 };
 ```
diff --git a/docs/snippets/web-components/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
similarity index 66%
rename from docs/snippets/web-components/documentscreen-story-msw-rest-request.ts.mdx
rename to docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
index 9329c3b3f293..b12fd8f93a41 100644
--- a/docs/snippets/web-components/documentscreen-story-msw-rest-request.ts.mdx
+++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
@@ -1,9 +1,8 @@
 ```ts
 // YourPage.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { rest } from 'msw';
+import { http, HttpResponse, delay } from 'msw';
 
 const meta: Meta = {
   component: 'demo-document-screen',
@@ -39,21 +38,28 @@ const TestData = {
 
 export const MockedSuccess: Story = {
   parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint/', () => {
+          return new HttpResponse.json(TestData);
+        }),
+      ],
+    },
   },
 };
 
 export const MockedError: Story = {
   parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
+    msw: {
+      handlers: [
+        http.get('https://your-restful-endpoint', async () => {
+          await delay(800);
+          return new HttpResponse(null, {
+            status: 403,
+          });
+        }),
+      ],
+    },
   },
 };
 ```
diff --git a/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx b/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx
new file mode 100644
index 000000000000..b89c145a5114
--- /dev/null
+++ b/docs/snippets/web-components/storybook-test-fn-mock-spy.js.mdx
@@ -0,0 +1,30 @@
+```js
+// NoteUI.stories.js
+import { expect, userEvent, within } from '@storybook/test';
+
+import { saveNote } from '../../app/actions.mock';
+import { createNotes } from '../../mocks/notes';
+
+export default {
+  title: 'Mocked/NoteUI',
+  component: 'note-ui',
+};
+
+const notes = createNotes();
+
+export const SaveFlow = {
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+};
+```
diff --git a/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx b/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx
new file mode 100644
index 000000000000..9a94601ec81d
--- /dev/null
+++ b/docs/snippets/web-components/storybook-test-fn-mock-spy.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// NoteUI.stories.ts
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { saveNote } from '../../app/actions.mock';
+import { createNotes } from '../../mocks/notes';
+
+const meta: Meta = {
+  title: 'Mocked/NoteUI',
+  component: 'note-ui',
+};
+export default meta;
+
+type Story = StoryObj;
+
+const notes = createNotes();
+
+export const SaveFlow: Story = {
+  name: 'Save Flow ▶',
+  args: {
+    isEditing: true,
+    note: notes[0],
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    const saveButton = canvas.getByRole('menuitem', { name: /done/i });
+    await userEvent.click(saveButton);
+    // 👇 This is the mock function, so you can assert its behavior
+    await expect(saveNote).toHaveBeenCalled();
+  },
+};
+```
diff --git a/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx b/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx
new file mode 100644
index 000000000000..9f89343855b3
--- /dev/null
+++ b/docs/snippets/web-components/storybook-test-mock-return-value.js.mdx
@@ -0,0 +1,15 @@
+```js
+// Page.stories.js
+import { getUserFromSession } from '../../api/session.mock';
+
+export default {
+  component: 'my-page',
+};
+
+export const Default = {
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+};
+```
diff --git a/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx b/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx
new file mode 100644
index 000000000000..54ffafc25108
--- /dev/null
+++ b/docs/snippets/web-components/storybook-test-mock-return-value.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+// 👇 Must include the `.mock` portion of filename to have mocks typed correctly
+import { getUserFromSession } from '../../api/session.mock';
+
+const meta: Meta = {
+  component: 'my-page',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  async beforeEach() {
+    // 👇 Set the return value for the getUserFromSession function
+    getUserFromSession.mockReturnValue({ id: '1', name: 'Alice' });
+  },
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx
new file mode 100644
index 000000000000..2d583742ba05
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx
@@ -0,0 +1,9 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx
new file mode 100644
index 000000000000..8f22771a18be
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx
@@ -0,0 +1,12 @@
+```ts
+// Button.stories.ts
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx
new file mode 100644
index 000000000000..39cb92375359
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx
@@ -0,0 +1,9 @@
+```js
+// Page.stories.js
+export default {
+  title: 'Page',
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx
new file mode 100644
index 000000000000..8210e75a2ebc
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx
@@ -0,0 +1,12 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Page',
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx
new file mode 100644
index 000000000000..7f9e0c2cd176
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx
new file mode 100644
index 000000000000..e46bbf2e9b03
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-combo-example.js.mdx b/docs/snippets/web-components/tags-combo-example.js.mdx
new file mode 100644
index 000000000000..0558c0d5da66
--- /dev/null
+++ b/docs/snippets/web-components/tags-combo-example.js.mdx
@@ -0,0 +1,35 @@
+```ts
+// Button.stories.ts
+import { html } from 'lit';
+
+export default {
+  title: 'Button',
+  component: 'demo-button',
+};
+
+export const Variant1 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => html`
+    

+      
+      
+      
+    

+  `,
+};
+```
diff --git a/docs/snippets/web-components/tags-combo-example.ts.mdx b/docs/snippets/web-components/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..67265784bbba
--- /dev/null
+++ b/docs/snippets/web-components/tags-combo-example.ts.mdx
@@ -0,0 +1,39 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => html`
+    

+      
+      
+      
+    

+  `,
+};
+```
diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx
new file mode 100644
index 000000000000..6618e9dd205c
--- /dev/null
+++ b/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+```
diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx
new file mode 100644
index 000000000000..a48803256500
--- /dev/null
+++ b/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-in-meta-and-story.js.mdx b/docs/snippets/web-components/tags-in-meta-and-story.js.mdx
new file mode 100644
index 000000000000..74e5be5e167a
--- /dev/null
+++ b/docs/snippets/web-components/tags-in-meta-and-story.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx b/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx
new file mode 100644
index 000000000000..79d5f1f5ec55
--- /dev/null
+++ b/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-remove-in-story.js.mdx b/docs/snippets/web-components/tags-remove-in-story.js.mdx
new file mode 100644
index 000000000000..acdc34f2b679
--- /dev/null
+++ b/docs/snippets/web-components/tags-remove-in-story.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-remove-in-story.ts.mdx b/docs/snippets/web-components/tags-remove-in-story.ts.mdx
new file mode 100644
index 000000000000..99f56aceecd9
--- /dev/null
+++ b/docs/snippets/web-components/tags-remove-in-story.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
index c2fa67cea100..b48f36c4e8f3 100644
--- a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
+++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-vite
+pnpm add --save-dev @storybook/web-components-vite
 ```
diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
index 91bf902cac48..2e04a2e57537 100644
--- a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-webpack5
+pnpm add --save-dev @storybook/web-components-webpack5
 ```
diff --git a/docs/toc.js b/docs/toc.js
index a4d3e85cf6be..8915f1148f61 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -136,11 +136,38 @@ module.exports = {
           title: 'Loaders',
           type: 'link',
         },
+        {
+          pathSegment: 'tags',
+          title: 'Tags',
+          type: 'link',
+        },
         {
           pathSegment: 'naming-components-and-hierarchy',
           title: 'Naming components and hierarchy',
           type: 'link',
         },
+        {
+          pathSegment: '',
+          title: 'Mocking data and modules',
+          type: 'menu',
+          children: [
+            {
+              pathSegment: 'mocking-modules',
+              title: 'Modules',
+              type: 'link',
+            },
+            {
+              pathSegment: 'mocking-network-requests',
+              title: 'Network requests',
+              type: 'link',
+            },
+            {
+              pathSegment: 'mocking-providers',
+              title: 'Providers',
+              type: 'link',
+            },
+          ],
+        },
         {
           pathSegment: 'build-pages-with-storybook',
           title: 'Build pages and screens',
@@ -611,7 +638,7 @@ module.exports = {
               pathSegment: 'main-config-static-dirs',
               type: 'link',
             },
-             {
+            {
               title: 'swc',
               pathSegment: 'main-config-swc',
               type: 'link',
@@ -745,21 +772,23 @@ module.exports = {
           pathSegment: '',
           type: 'menu',
           children: [
-            {
-              pathSegment: 'portable-stories-jest',
-              title: 'Jest',
-              type: 'link',
-            },
+            // Unpublished for now
+            // {
+            //   pathSegment: 'portable-stories-jest',
+            //   title: 'Jest',
+            //   type: 'link',
+            // },
             {
               pathSegment: 'portable-stories-playwright',
               title: 'Playwright',
               type: 'link',
             },
-            {
-              pathSegment: 'portable-stories-vitest',
-              title: 'Vitest',
-              type: 'link',
-            },
+            // Unpublished for now
+            // {
+            //   pathSegment: 'portable-stories-vitest',
+            //   title: 'Vitest',
+            //   type: 'link',
+            // },
           ],
         },
         
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index e301faf03c32..f2b7dba133dd 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"7.5.0","info":{"plain":"- 💃🏼 Now supports Lit 3.0 and Vite 5 \n- 👻 storiesOf and storyStoreV6 officially deprecated \n- 🔨 Fix Webpack5 build errors not being propagated \n- 🀄 Support rename font import for Next.js \n- ⬆️ Upgrade react-docgen to 6.0.x and improve argTypes \n- ✨ Many Angular improvements such as introducing argsToTemplate , new schema debugging options, support for standalone directives, etc."}}
+{"version":"8.1.0","info":{"plain":"- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"}}
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 2f8990d20967..697ac1cd38e6 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.1.0-alpha.7","info":{"plain":"- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!\n- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!\n- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}}
+{"version":"8.2.0-alpha.1","info":{"plain":"- CLI: Add optional `--dev` and `--no-dev` options to `storybook init` CLI - [#26918](https://github.com/storybookjs/storybook/pull/26918), thanks @fastfrwrd!\n- CLI: Include `@storybook/addon-svelte-csf` when initializing new projects - [#27070](https://github.com/storybookjs/storybook/pull/27070), thanks @benmccann!\n- Dependency: Upgrade `webpack-virtual-modules` to 0.6.0 - [#27102](https://github.com/storybookjs/storybook/pull/27102), thanks @fyodorovandrei!\n- Dependency: bump `markdown-to-jsx` to v7.4.5 - [#26694](https://github.com/storybookjs/storybook/pull/26694), thanks @xyy94813!\n- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!\n- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman!\n- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold!\n- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic!\n- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee!\n- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic!"}}
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index cad2b6e901d4..726a6a158579 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -6,35 +6,78 @@ title: 'Automatic documentation and Storybook'
 
 Storybook Autodocs is a powerful tool that can help you quickly generate comprehensive documentation for your UI components. By leveraging Autodocs, you're transforming your stories into living documentation which can be further extended with [MDX](./mdx.md) and [Doc Blocks](./doc-blocks.md) to provide a clear and concise understanding of your components' functionality.
 
-## Setup automated documentation
+Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
 
-To enable auto-generated documentation for your stories, you'll need to add the `tags` configuration property to the story's default export. For example:
+![Storybook autodocs](./autodocs.png)
+
+## Set up automated documentation
+
+Autodocs is configured through [tags](../writing-stories/tags.md). If a [CSF](../api/csf.md) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.
+
+To enable automatic documentation for all stories in a project, add it to `tags` in your `.storybook/preview.js|ts` file:
 
 
 
 
 
 
 
-![Storybook autodocs](./autodocs.png)
+You can also enable it at the component (or story) level:
+
+
+
+
+
+
+
+You can disable auto docs for a particular component by [removing the tag](../writing-stories/tags.md#removing-tags):
+
+
 
-Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
+
+
+
+
+Similarly, you can exclude a particular story from the auto docs page, by removing the tag:
+
+
+
+
+
+
 
 ### Configure
 
-By default, Storybook offers zero-config support for documentation and automatically sets up a documentation page for each story enabled via the `tags` configuration property. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts|cjs`) and provide additional options to control how documentation gets created. Listed below are the available options and examples of how to use them.
+In addition to enabling the feature with `tags`, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts|cjs`) and provide additional options to control how documentation gets created. Listed below are the available options and examples of how to use them.
 
 
 
@@ -47,10 +90,9 @@ By default, Storybook offers zero-config support for documentation and automatic
 
 
 
-| Option        | Description                                                                                                                                                                                                                                                                                                              |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `autodocs`    | Configures auto-generated documentation pages. Available options: `true`, `false`,`tag` (default). `true`/`false` enable/disable autodocs globally. `tag` allows you to opt in per component by adding the `tags: ['autodocs']` annotation in the component's default export. 
 Default: `docs: { autodocs: 'tag' }` |
-| `defaultName` | Renames the auto-generated documentation page
 Default: `docs: { defaultName: 'Documentation' }`                                                                                                                                                                                                                     |
+| Option        | Description                                                                                          |
+| ------------- | ---------------------------------------------------------------------------------------------------- |
+| `defaultName` | Renames the auto-generated documentation page
 Default: `docs: { defaultName: 'Documentation' }` |
 
 ### Write a custom template
 
@@ -134,7 +176,7 @@ Storybook's auto-generated documentation pages can be quite long and difficult t
 By default, the table of contents on the documentation page will only show the `h3` headings that are automatically generated. However, if you want to customize the table of contents, you can add more parameters to the `toc` property. The following options and examples of how to use them are available.
 
 | Option                | Description                                                                                                                                                                                                     |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `contentsSelector`    | Defines the container's CSS selector for search for the headings 
 `toc: { contentsSelector: '.sbdocs-content' }`                                                                                           |
 | `disable`             | Hides the table of contents for the documentation pages 
 `toc: { disable: true }`                                                                                                                          |
 | `headingSelector`     | Defines the list of headings to feature in the table of contents 
 `toc: { headingSelector: 'h1, h2, h3' }`                                                                                                 |
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index aeb293e09fc8..0563733e0dac 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -73,226 +73,19 @@ This approach is beneficial when the various subcomponents export a complex list
 
 ## Mocking connected components
 
-If you need to render a connected component in Storybook, you can mock the network requests to fetch its data. There are various layers in which you can do that.
+Connected components are components that depend on external data or services. For example, a full page component is often a connected component. When you render a connected component in Storybook, you need to mock the data or modules that the component depends on. There are various layers in which you can do that.
 
-### Mocking providers
+### [Mocking imports](./mocking-modules.md)
 
-Suppose you are using a provider that supplies data via the context. In that case, you can wrap your story in a decorator that provides a mocked version of that provider. For example, in the [Screens](https://storybook.js.org/tutorials/intro-to-storybook/react/en/screen/) chapter of the Intro to Storybook tutorial, we mock a Redux provider with mock data.
+Components can depend on modules that are imported into the component file. These can be from external packages or internal to your project. When rendering those components in Storybook or testing them, you may want to mock those modules to control their behavior.
 
-### Mocking API Services
+### [Mocking API Services](./mocking-network-requests.md)
 
-Connected applications such as Twitter, Instagram, amongst others, are everywhere, consuming data from REST or GraphQL endpoints. Suppose you're working in an application that relies on either of these data providers. In that case, you can add Mock Service Worker (MSW) via [Storybook's MSW addon](https://storybook.js.org/addons/msw-storybook-addon) to mock data alongside your app and stories.
+For components that make network requests (e.g., fetching data from a REST or GraphQL API), you can mock those requests in your stories.
 
-[Mock Service Worker](https://mswjs.io/) is an API mocking library. It relies on service workers to capture network requests and provides mocked data in response. The MSW addon adds this functionality into Storybook, allowing you to mock API requests in your stories. Below is an overview of how to set up and use the addon.
+### [Mocking providers](./mocking-providers.md)
 
-Run the following commands to install MSW, the addon, and generate a mock service worker.
-
-
-
-
-
-
-
-
-
-If you're working with Angular, you'll need to adjust the command to save the mock service worker file in a different directory (e.g., `src`).
-
-
-
-Update your `.storybook/preview.js` file and enable the addon via a [global decorator](./decorators.md#global-decorators).
-
-
-
-
-
-
-
-Finally, update your [`.storybook/main.js|ts`](../configure/index.md#using-storybook-api) to allow Storybook to load the generated mock service worker file as follows:
-
-
-
-
-
-
-
-#### Mocking REST requests with MSW addon
-
-If you're working with pure presentational screens, adding stories through [args composition](#args-composition-for-presentational-screens) is recommended. You can easily encode all the data via [args](../writing-stories/args.md), removing the need for handling it with "wrapper components". However, this approach loses its flexibility if the screen's data is retrieved from a RESTful endpoint within the screen itself. For instance, if your screen had a similar implementation to retrieve a list of documents:
-
-
-
-
-
-
-
-To test your screen with the mocked data, you could write a similar set of stories:
-
-
-
-
-
-
-
-
-
-This example details how you can mock the REST request with fetch. Similar HTTP clients such as [`axios`](https://axios-http.com/) can be used as well.
-
-
-
-The mocked data (i.e., `TestData`) will be injected via [parameters](./parameters.md), enabling you to configure it per-story basis.
-
-#### Mocking GraphQL queries with MSW addon
-
-In addition to mocking RESTful requests, the other noteworthy feature of the [MSW addon](https://msw-sb.vercel.app/?path=/story/guides-introduction--page) is the ability to mock incoming data from any of the mainstream [GraphQL](https://www.apollographql.com/docs/react/integrations/integrations/) clients (e.g., [Apollo Client](https://www.apollographql.com/docs/), [URQL](https://formidable.com/open-source/urql/) or [React Query](https://react-query.tanstack.com/)). For instance, if your screen retrieves the user's information and a list of documents based on a query result, you could have a similar implementation:
-
-
-
-
-
-
-
-To test your screen with the GraphQL mocked data, you could write the following stories:
-
-
-
-
-
-
-
-### Mocking imports
-
-It is also possible to mock imports directly, as you might in a unit test, using Webpack’s aliasing. It's advantageous if your component makes network requests directly with third-party libraries.
-
-We'll use [isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch) as an example.
-
-Inside a directory called `__mocks__`, create a new file called
-`isomorphic-fetch.js` with the following code:
-
-
-
-
-
-
-
-The code above creates a decorator which reads story-specific data off the story's [parameters](./parameters.md), enabling you to configure the mock on a per-story basis.
-
-To use the mock in place of the real import, we use [Webpack aliasing](https://webpack.js.org/configuration/resolve/#resolvealias):
-
-
-
-
-
-
-
-Add the decorator you've just implemented to your [`storybook/preview.js`](../configure/index.md#configure-story-rendering):
-
-
-
-
-
-
-
-Finally, we can set the mock values in a specific story. Let's borrow an example from this [blog post](https://medium.com/@edogc/visual-unit-testing-with-react-storybook-and-fetch-mock-4594d3a281e6):
-
-
-
-
-
-
-
-### Specific mocks
-
-Another mocking approach is to use libraries that intercept calls at a lower level. For instance, you can use [`fetch-mock`](https://www.npmjs.com/package/fetch-mock) to mock fetch requests specifically.
-
-Like the [import mocking](##mocking-imports) above, once you have a mock, you’ll still want to set the return value of the mock per-story basis. Do this in Storybook with a [decorator](./decorators.md) that reads the story's [parameters](./parameters.md).
+Components can receive data or configuration from context providers. For example, a styled component might access its theme from a ThemeProvider or Redux uses React context to provide components access to app data. You can mock a provider and the value it's providing and wrap your component with it in your stories.
 
 
 
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index 8c3160302cf8..7ada612fe8b8 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -40,49 +40,43 @@ Some components require a “harness” to render in a useful way. For instance,
 
 ## “Context” for mocking
 
-Framework-specific libraries (e.g., [Styled Components](https://styled-components.com/), [Fontawesome](https://github.com/FortAwesome/vue-fontawesome) for Vue, Angular's [localize](https://angular.io/api/localize)) may require additional configuration to render correctly in Storybook.
+The second argument to a decorator function is the **story context** which contains the properties:
 
-For example, if you're working with React's Styled Components and your components use themes, add a single global decorator to [`.storybook/preview.js`](../configure/index.md#configure-story-rendering) to enable them. With Vue, extend Storybook's application and register your library. Or with Angular, add the package into your `polyfills.ts` and import it:
+- `args` - the story arguments. You can use some [`args`](./args.md) in your decorators and drop them in the story implementation itself.
+- `argTypes`- Storybook's [argTypes](../api/arg-types.md) allow you to customize and fine-tune your stories [`args`](./args.md).
+- `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI.
+- `hooks` - Storybook's API hooks (e.g., useArgs).
+- `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons.
+- `viewMode`- Storybook's current active window (e.g., canvas, docs).
+
+This context can be used to adjust the behavior of your decorator based on the story's arguments or other metadata. For example, you could create a decorator that allows you to optionally apply a layout to the story, by defining `parameters.pageLayout = 'page'` (or `'page-mobile'`):
+:
 
 
 
 
 
 
 
-In the example above, the values provided are hardcoded. Still, you may want to vary them, either per-story basis (i.e., if the values you're adding are relevant to a specific story) or in a user-controlled way (e.g., provide a theme switcher or a different set of icons).
-
-The second argument to a decorator function is the **story context** which in particular contains the keys:
-
-- `args` - the story arguments. You can use some [`args`](./args.md) in your decorators and drop them in the story implementation itself.
-- `argTypes`- Storybook's [argTypes](../api/arg-types.md) allow you to customize and fine-tune your stories [`args`](./args.md).
-- `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.md#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.md#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI.
-- `hooks` - Storybook's API hooks (e.g., useArgs).
-- `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons.
-- `viewMode`- Storybook's current active window (e.g., canvas, docs).
-
 
 
-This pattern can also be applied to your own stories. Some of Storybook's supported frameworks already use it (e.g., Vue 3).
+For another example, see the section on [configuring the mock provider](./mocking-providers.md#configuring-the-mock-provider), which demonstrates how to use the same technique to change which theme is provided to the component.
 
 
 
 ### Using decorators to provide data
 
-If your components are “connected” and require side-loaded data to render, you can use decorators to provide that data in a mocked way without having to refactor your components to take that data as an arg. There are several techniques to achieve this. Depending on exactly how you are loading that data -- read more in the [building pages in Storybook](./build-pages-with-storybook.md) section.
+If your components are “connected” and require side-loaded data to render, you can use decorators to provide that data in a mocked way without having to refactor your components to take that data as an arg. There are several techniques to achieve this. Depending on exactly how you are loading that data. Read more in the [building pages in Storybook](./build-pages-with-storybook.md) section.
 
 ## Story decorators
 
diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index ec51a7dc1d39..d88567e3ee2c 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -4,18 +4,19 @@ title: 'How to write stories'
 
 
 
-A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set
-of arguments.
+A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set of arguments.
 
 Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts.
 
 ## Where to put stories
 
-A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.
+A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. In your filesytem, it looks something like this:
 
 ```
-Button.js | ts | jsx | tsx | vue | svelte
-Button.stories.js | ts | jsx | tsx
+components/
+├─ Button/
+│  ├─ Button.js | ts | jsx | tsx | vue | svelte
+│  ├─ Button.stories.js | ts | jsx | tsx
 ```
 
 ## Component Story Format
@@ -64,22 +65,23 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 
 
 
@@ -103,12 +105,6 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 
 
-
-
-The recommendation mentioned above also applies to other frameworks, not only React.
-
-
-
 
 
 
@@ -130,12 +126,6 @@ The recommendation mentioned above also applies to other frameworks, not only Re
 
 
 
-
-
-The recommendation mentioned above also applies to other frameworks, not only Solid.
-
-
-
 
 
 ### Rename stories
@@ -168,39 +158,12 @@ You can rename any particular story you need. For instance, to give it a more ac
 
 Your story will now be shown in the sidebar with the given text.
 
-## How to write stories
-
-A story is an object that describes how to render a component. You can have multiple stories per component, and the simplest way to create stories is to render a component with different arguments multiple times.
-
-
-
-
-
-
-
-It's straightforward for components with few stories but can be repetitive with many stories.
+
+
 
-### Using args
+## How to write stories
 
-Refine this pattern by introducing `args` for your component's stories. It reduces the boilerplate code you'll need to write and maintain for each story.
+A story is an object that describes how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story from above.
 
 
 
@@ -226,8 +189,6 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
 
 
 
-By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
-
 What’s more, you can import `args` to reuse when writing stories for other components, and it's helpful when you’re building composite components. For example, if we make a `ButtonGroup` story, we might remix two stories from its child component `Button`.
 
 
@@ -255,7 +216,7 @@ What’s more, you can import `args` to reuse when writing stories for other com
 
 When Button’s signature changes, you only need to change Button’s stories to reflect the new schema, and ButtonGroup’s stories will automatically be updated. This pattern allows you to reuse your data definitions across the component hierarchy, making your stories more maintainable.
 
-That’s not all! Each of the args from the story function are live editable using Storybook’s [controls](../essentials/controls.md) panel. It means your team can dynamically change components in Storybook to stress test and find edge cases.
+That’s not all! Each of the args from the story function are live editable using Storybook’s [Controls](../essentials/controls.md) panel. It means your team can dynamically change components in Storybook to stress test and find edge cases.
 
 
 
+You can also use the Controls panel to edit or save a new story after adjusting its control values.
+
+
+
 Addons can enhance args. For instance, [Actions](../essentials/actions.md) auto-detects which args are callbacks and appends a logging function to them. That way, interactions (like clicks) get logged in the actions panel.
 
 
 
+### Run code before each test
+
+It can be helpful to run code before each test to set up the initial state of the component or reset the state of modules. You can do this by adding an asynchronous `beforeEach` function to the story, meta (which will run before each story in the file), or the preview file (`.storybook/preview.js|ts`, which will run before every story in the project).
+
+Additionally, if you return a cleanup function from the `beforeEach` function, it will run **after** each test, when the story is remounted or navigated away from.
+
+
+
+It is _not_ necessary to restore `fn()` mocks with the cleanup function, as Storybook will already do that automatically before rendering a story. See the [`parameters.test.restoreMocks` API](../api/parameters.md#restoremocks) for more information.
+
+
+
+Here's an example of using the [`mockdate`](https://github.com/boblauer/MockDate) package to mock the [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) and reset it when the story unmounts.
+
+
+
+
+
+
+
 ### API for user-events
 
 Under the hood, Storybook’s `@storybook/test` package provides Testing Library’s [`user-events`](https://testing-library.com/docs/user-event/intro/) APIs. If you’re familiar with [Testing Library](https://testing-library.com/), you should be at home in Storybook.
@@ -152,6 +180,26 @@ This will show your interactions nested in a collapsible group:
 
 ![Interaction testing with labeled steps](./storybook-addon-interactions-steps.png)
 
+### Mocked modules
+
+If your component depends on modules that are imported into the component file, you can mock those modules to control and assert on their behavior. This is detailed in the [mocking modules](./mocking-modules.md) guide.
+
+You can then import the mocked module (which has all of the helpful methods of a [Vitest mocked function](https://vitest.dev/api/mock.html)) into your story and use it to assert on the behavior of your component:
+
+
+
+
+
+
+
 ### Interactive debugger
 
 If you check your interactions panel, you'll see the step-by-step flow. It also offers a handy set of UI controls to pause, resume, rewind, and step through each interaction.
diff --git a/docs/writing-tests/test-coverage-storybook.gif b/docs/writing-tests/test-coverage-storybook.gif
index 0c155b67d054..060eecb12df3 100644
Binary files a/docs/writing-tests/test-coverage-storybook.gif and b/docs/writing-tests/test-coverage-storybook.gif differ
diff --git a/scripts/package.json b/scripts/package.json
index bf44133234b4..5c1d6ec3f774 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -19,7 +19,6 @@
     "local-registry": "node --loader esbuild-register/loader -r esbuild-register ./run-registry.ts",
     "publish": "node --loader esbuild-register/loader -r esbuild-register ./sandbox/publish.ts",
     "release:cancel-preparation-runs": "node --loader esbuild-register/loader -r esbuild-register ./release/cancel-preparation-runs.ts",
-    "release:ensure-next-ahead": "node --loader esbuild-register/loader -r esbuild-register ./release/ensure-next-ahead.ts",
     "release:generate-pr-description": "node --loader esbuild-register/loader -r esbuild-register ./release/generate-pr-description.ts",
     "release:get-changelog-from-file": "node --loader esbuild-register/loader -r esbuild-register ./release/get-changelog-from-file.ts",
     "release:get-current-version": "node --loader esbuild-register/loader -r esbuild-register ./release/get-current-version.ts",
@@ -121,7 +120,7 @@
     "danger": "^11.2.6",
     "dataloader": "^2.2.2",
     "detect-port": "^1.3.0",
-    "ejs": "^3.1.8",
+    "ejs": "^3.1.10",
     "ejs-lint": "^2.0.0",
     "esbuild": "^0.20.1",
     "esbuild-plugin-alias": "^0.2.1",
diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts
index d4163609d5bf..39e070e8c4d0 100755
--- a/scripts/prepare/addon-bundle.ts
+++ b/scripts/prepare/addon-bundle.ts
@@ -126,8 +126,10 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         platform: 'neutral',
         external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages],
         esbuildOptions: (options) => {
+          /* eslint-disable no-param-reassign */
           options.platform = 'neutral';
           Object.assign(options, getESBuildOptions(optimized));
+          /* eslint-enable no-param-reassign */
         },
       })
     );
diff --git a/scripts/release/__tests__/ensure-next-ahead.test.ts b/scripts/release/__tests__/ensure-next-ahead.test.ts
deleted file mode 100644
index d7a3f99c03b7..000000000000
--- a/scripts/release/__tests__/ensure-next-ahead.test.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import path from 'path';
-import { vi, describe, it, expect, beforeEach } from 'vitest';
-import * as fsExtraOriginal from 'fs-extra';
-import { run as ensureNextAhead } from '../ensure-next-ahead';
-import * as gitClient_ from '../utils/git-client';
-import * as bumpVersion_ from '../version';
-
-vi.mock('../utils/git-client');
-vi.mock('../version');
-vi.mock('fs-extra', async () => import('../../../code/__mocks__/fs-extra'));
-
-const fsExtra = vi.mocked(
-  fsExtraOriginal as any
-);
-
-const bumpVersion = vi.mocked(bumpVersion_, true);
-const gitClient = vi.mocked(gitClient_, true);
-
-vi.spyOn(console, 'log').mockImplementation(() => {});
-vi.spyOn(console, 'warn').mockImplementation(() => {});
-vi.spyOn(console, 'error').mockImplementation(() => {});
-
-const CODE_PACKAGE_JSON_PATH = path.join(__dirname, '..', '..', '..', 'code', 'package.json');
-
-describe('Ensure next ahead', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    gitClient.git.status.mockResolvedValue({ current: 'next' } as any);
-    fsExtra.__setMockFiles({
-      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0' }),
-    });
-  });
-
-  it('should throw when main-version is missing', async () => {
-    await expect(ensureNextAhead({})).rejects.toThrowErrorMatchingInlineSnapshot(`
-      [ZodError: [
-  {
-    "code": "invalid_type",
-    "expected": "string",
-    "received": "undefined",
-    "path": [
-      "mainVersion"
-    ],
-    "message": "Required"
-  }
-]]
-    `);
-  });
-
-  it('should throw when main-version is not a semver string', async () => {
-    await expect(ensureNextAhead({ mainVersion: '200' })).rejects
-      .toThrowErrorMatchingInlineSnapshot(`
-      [ZodError: [
-  {
-    "code": "custom",
-    "message": "main-version must be a valid semver version string like '7.4.2'.",
-    "path": []
-  }
-]]
-    `);
-  });
-
-  it('should not bump version when next is already ahead of main', async () => {
-    await expect(ensureNextAhead({ mainVersion: '1.0.0' })).resolves.toBeUndefined();
-    expect(bumpVersion.run).not.toHaveBeenCalled();
-  });
-
-  it('should bump version to 3.1.0-alpha.0 when main is 3.0.0 and next is 2.0.0', async () => {
-    await expect(ensureNextAhead({ mainVersion: '3.0.0' })).resolves.toBeUndefined();
-    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '3.1.0-alpha.0' });
-  });
-
-  it('should bump version to 2.1.0-alpha.0 when main and next are both 2.0.0', async () => {
-    await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined();
-    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' });
-  });
-
-  it('should bump version to 2.1.0-alpha.0 when main is 2.0.0 and and next is 2.0.0-rc.10', async () => {
-    fsExtra.__setMockFiles({
-      [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0-rc.10' }),
-    });
-
-    await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined();
-    expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' });
-  });
-});
diff --git a/scripts/release/ensure-next-ahead.ts b/scripts/release/ensure-next-ahead.ts
deleted file mode 100644
index 308004f031cf..000000000000
--- a/scripts/release/ensure-next-ahead.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * This script ensures that next is always one minor ahead of main.
- * This is needed when releasing a stable from next.
- * Next will be at eg. 7.4.0-alpha.4, and main will be at 7.3.0.
- * Then we release 7.4.0 by merging next to latest-release to main.
- * We then ensure here that next is bumped to 7.5.0-alpha.0 - without releasing it.
- * If this is a patch release bumping main to 7.3.1, next will not be touched because it's already ahead.
- */
-
-/* eslint-disable no-console */
-import chalk from 'chalk';
-import path from 'path';
-import program from 'commander';
-import semver from 'semver';
-import { z } from 'zod';
-import { readJson } from 'fs-extra';
-import { esMain } from '../utils/esmain';
-import { run as bumpVersion } from './version';
-import { git } from './utils/git-client';
-
-program
-  .name('ensure-next-ahead')
-  .description('ensure the "next" branch is always a minor version ahead of "main"')
-  .requiredOption('-M, --main-version ', 'The version currently on the "main" branch');
-
-const optionsSchema = z
-  .object({
-    mainVersion: z.string(),
-  })
-  .refine((schema) => semver.valid(schema.mainVersion), {
-    message: "main-version must be a valid semver version string like '7.4.2'.",
-  });
-
-type Options = {
-  mainVersion: string;
-};
-
-const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code');
-const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json');
-
-const validateOptions = (options: { [key: string]: any }): options is Options => {
-  optionsSchema.parse(options);
-  return true;
-};
-
-const getCurrentVersion = async () => {
-  const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
-  console.log(`📐 Current version of Storybook is ${chalk.green(version)}`);
-  return version;
-};
-
-export const run = async (options: unknown) => {
-  if (!validateOptions(options)) {
-    return;
-  }
-  const { mainVersion } = options;
-
-  const { current: currentGitBranch } = await git.status();
-
-  if (currentGitBranch !== 'next') {
-    console.warn(
-      `🚧 The current branch is not "next" but "${currentGitBranch}", this only really makes sense to run on the "next" branch.`
-    );
-  }
-
-  // Get the current version from code/package.json
-  const currentNextVersion = await getCurrentVersion();
-  if (semver.gt(currentNextVersion, mainVersion)) {
-    console.log(
-      `✅ The version on next (${chalk.green(
-        currentNextVersion
-      )}) is already ahead of the version on main (${chalk.green(mainVersion)}), no action needed.`
-    );
-    return;
-  }
-
-  const nextNextVersion = `${semver.inc(mainVersion, 'minor')}-alpha.0`;
-
-  console.log(
-    `🤜 The version on next (${chalk.green(
-      currentNextVersion
-    )}) is behind the version on main (${chalk.green(mainVersion)}), bumping to ${chalk.blue(
-      nextNextVersion
-    )}...`
-  );
-
-  await bumpVersion({ exact: nextNextVersion });
-
-  console.log(
-    `✅ bumped all versions to ${chalk.green(
-      nextNextVersion
-    )}, remember to commit and push to next.`
-  );
-};
-
-if (esMain(import.meta.url)) {
-  const parsed = program.parse();
-  run(parsed.opts()).catch((err) => {
-    console.error(err);
-    process.exit(1);
-  });
-}
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index bc71a1433441..8f11b3a7a4db 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -163,7 +163,7 @@ const runGenerators = async (
           else if (expected.renderer === '@storybook/server') flags = ['--type server'];
 
           const time = process.hrtime();
-          console.log(`🧬 Generating ${name} (${{ dirName }})`);
+          console.log(`🧬 Generating ${name} (${dirName})`);
           await emptyDir(baseDir);
 
           // We do the creation inside a temp dir to avoid yarn container problems
diff --git a/scripts/tasks/e2e-tests-build.ts b/scripts/tasks/e2e-tests-build.ts
index a90670fa7258..8e419ddf15cb 100644
--- a/scripts/tasks/e2e-tests-build.ts
+++ b/scripts/tasks/e2e-tests-build.ts
@@ -3,11 +3,12 @@ import type { Task } from '../task';
 import { exec } from '../utils/exec';
 import { PORT } from './serve';
 
-export const e2eTestsBuild: Task & { port: number } = {
+export const e2eTestsBuild: Task & { port: number; type: 'build' | 'dev' } = {
   description: 'Run e2e tests against a sandbox in prod mode',
   dependsOn: ['serve'],
   junit: true,
   port: PORT,
+  type: 'build',
   async ready() {
     return false;
   },
@@ -29,6 +30,7 @@ export const e2eTestsBuild: Task & { port: number } = {
       {
         env: {
           STORYBOOK_URL: `http://localhost:${this.port}`,
+          STORYBOOK_TYPE: this.type,
           STORYBOOK_TEMPLATE_NAME: key,
           ...(junitFilename && {
             PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
diff --git a/scripts/tasks/e2e-tests-dev.ts b/scripts/tasks/e2e-tests-dev.ts
index 50dce2123a14..42c6f4c72b70 100644
--- a/scripts/tasks/e2e-tests-dev.ts
+++ b/scripts/tasks/e2e-tests-dev.ts
@@ -6,4 +6,5 @@ export const e2eTestsDev: typeof e2eTestsBuild = {
   description: 'Run e2e tests against a sandbox in dev mode',
   dependsOn: ['dev'],
   port: PORT,
+  type: 'dev',
 };
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index cd7dc643a185..bee4513a4326 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -467,6 +467,12 @@ export const addStories: Task['run'] = async (
       cwd,
       disableDocs,
     });
+
+    await linkPackageStories(await workspacePath('core package', '@storybook/test'), {
+      mainConfig,
+      cwd,
+      disableDocs,
+    });
   }
 
   const mainAddons = (mainConfig.getSafeFieldValue(['addons']) || []).reduce(
@@ -533,6 +539,32 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
 
   Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value));
 
+  const previewHeadCode = `
+    (head) => \`
+      \${head}
+      ${templateConfig.previewHead || ''}
+      
+    \``;
+  mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
+
   // Simulate Storybook Lite
   if (disableDocs) {
     const addons = mainConfig.getFieldValue(['addons']);
@@ -554,6 +586,19 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
   await writeConfig(mainConfig);
 };
 
+export async function setImportMap(cwd: string) {
+  const packageJson = await readJson(join(cwd, 'package.json'));
+
+  packageJson.imports = {
+    '#utils': {
+      storybook: './template-stories/lib/test/utils.mock.ts',
+      default: './template-stories/lib/test/utils.ts',
+    },
+  };
+
+  await writeJson(join(cwd, 'package.json'), packageJson, { spaces: 2 });
+}
+
 /**
  * Sets compodoc option in angular.json projects to false. We have to generate compodoc
  * manually to avoid symlink issues related to the template-stories folder.
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index ee57d64a0c38..1d3a1e1af74f 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -37,7 +37,7 @@ export const sandbox: Task = {
       await remove(details.sandboxDir);
     }
 
-    const { create, install, addStories, extendMain, init, addExtraDependencies } =
+    const { create, install, addStories, extendMain, init, addExtraDependencies, setImportMap } =
       // @ts-expect-error esbuild for some reason exports a default object
       // eslint-disable-next-line import/extensions
       (await import('./sandbox-parts.ts')).default;
@@ -84,6 +84,8 @@ export const sandbox: Task = {
 
     await extendMain(details, options);
 
+    await setImportMap(details.sandboxDir);
+
     logger.info(`✅ Storybook sandbox created at ${details.sandboxDir}`);
   },
 };
diff --git a/scripts/utils/concurrency.ts b/scripts/utils/concurrency.ts
index 781c7c0d6787..f80487794555 100644
--- a/scripts/utils/concurrency.ts
+++ b/scripts/utils/concurrency.ts
@@ -2,6 +2,9 @@ import os from 'os';
 
 /**
  * The maximum number of concurrent tasks we want to have on some CLI and CI tasks.
- * The amount of CPUS minus one, arbitrary limited to 15 to not overload CI executors.
+ * The amount of CPUS minus one, arbitrary limited to 5 to not overload CI executors.
  */
-export const maxConcurrentTasks = Math.min(Math.max(1, os.cpus().length - 1), 15);
+export const maxConcurrentTasks = Math.min(
+  Math.max(1, os.cpus().length - 1),
+  process.env.CI ? 5 : 15
+);
diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
index a2fb82e1fa6a..90a6fb44b0df 100644
--- a/scripts/utils/yarn.ts
+++ b/scripts/utils/yarn.ts
@@ -22,6 +22,7 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
   const packageJsonPath = path.join(cwd, 'package.json');
   const packageJson = await readJSON(packageJsonPath);
   packageJson.resolutions = {
+    ...packageJson.resolutions,
     ...storybookVersions,
     'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
@@ -97,7 +98,13 @@ export const configureYarn2ForVerdaccio = async ({
     `yarn config set enableImmutableInstalls false`,
   ];
 
-  if (key.includes('svelte-kit')) {
+  if (
+    key.includes('svelte-kit') ||
+    // React prereleases will have INCOMPATIBLE_PEER_DEPENDENCY errors because of transitive dependencies not allowing v19 betas
+    key.includes('nextjs/prerelease') ||
+    key.includes('react-vite/prerelease') ||
+    key.includes('react-webpack/prerelease')
+  ) {
     // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte
     command.push(
       `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index fb585cb2070b..2c35285f4f8a 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -2769,7 +2769,7 @@ __metadata:
     danger: "npm:^11.2.6"
     dataloader: "npm:^2.2.2"
     detect-port: "npm:^1.3.0"
-    ejs: "npm:^3.1.8"
+    ejs: "npm:^3.1.10"
     ejs-lint: "npm:^2.0.0"
     esbuild: "npm:^0.20.1"
     esbuild-plugin-alias: "npm:^0.2.1"
@@ -6302,7 +6302,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.7, ejs@npm:^3.1.8":
+"ejs@npm:^3.1.10":
+  version: 3.1.10
+  resolution: "ejs@npm:3.1.10"
+  dependencies:
+    jake: "npm:^10.8.5"
+  bin:
+    ejs: bin/cli.js
+  checksum: 10c0/52eade9e68416ed04f7f92c492183340582a36482836b11eab97b159fcdcfdedc62233a1bf0bf5e5e1851c501f2dca0e2e9afd111db2599e4e7f53ee29429ae1
+  languageName: node
+  linkType: hard
+
+"ejs@npm:^3.1.7":
   version: 3.1.9
   resolution: "ejs@npm:3.1.9"
   dependencies:
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
index 5689702fae31..3867a50e7bc7 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
@@ -1,4 +1,5 @@
 const nextJest = require('next/jest.js');
+const { getPackageAliases } = require('@storybook/nextjs/export-mocks');
  
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
@@ -11,6 +12,9 @@ const customJestConfig = {
   testEnvironment: 'jsdom',
   // Add more setup options before each test is run
   setupFilesAfterEnv: ['./jest.setup.ts'],
+  moduleNameMapper: {
+    ...getPackageAliases()
+  },
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/public/vercel.svg b/test-storybooks/portable-stories-kitchen-sink/nextjs/public/vercel.svg
index d2f84222734f..a7a91feef7e2 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/public/vercel.svg
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/public/vercel.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx
index f675ad7181ef..8a120eb80e2a 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx
@@ -8,6 +8,8 @@ import {
 } from 'next/navigation';
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { getRouter } from '@storybook/nextjs/navigation.mock';
 
 function Component() {
   const router = useRouter();
@@ -96,12 +98,32 @@ export default {
         query: {
           foo: 'bar',
         },
+        prefetch: () => {
+          console.log('custom prefetch');
+        },
       },
     },
   },
 } as Meta;
 
-export const Default: Story = {};
+export const Default: StoryObj = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const routerMock = getRouter();
+
+    await step('Asserts whether forward hook is called', async () => {
+      const forwardBtn = await canvas.findByText('Go forward');
+      await userEvent.click(forwardBtn);
+      await expect(routerMock.forward).toHaveBeenCalled();
+    });
+
+    await step('Asserts whether custom prefetch hook is called', async () => {
+      const prefetchBtn = await canvas.findByText('Prefetch');
+      await userEvent.click(prefetchBtn);
+      await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html');
+    });
+  },
+};
 
 export const WithSegmentDefined: Story = {
   parameters: {
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx
new file mode 100644
index 000000000000..1c75f64375ea
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta } from '@storybook/react';
+import type { StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+import { cookies, headers } from '@storybook/nextjs/headers.mock';
+import NextHeader from './NextHeader';
+
+export default {
+  component: NextHeader,
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  loaders: async () => {
+    cookies().set('firstName', 'Jane');
+    cookies().set({
+      name: 'lastName',
+      value: 'Doe',
+    });
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const headersMock = headers();
+    const cookiesMock = cookies();
+    await step('Cookie and header store apis are called upon rendering', async () => {
+      await expect(cookiesMock.getAll).toHaveBeenCalled();
+      await expect(headersMock.entries).toHaveBeenCalled();
+    });
+
+    await step('Upon clicking on submit, the user-id cookie is set', async () => {
+      const submitButton = await canvas.findByRole('button');
+      await userEvent.click(submitButton);
+
+      await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id');
+    });
+
+    await step('The user-id cookie is available in cookie and header stores', async () => {
+      await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id');
+      await expect(cookiesMock.get('user-id')).toEqual({
+        name: 'user-id',
+        value: 'encrypted-id',
+      });
+    });
+  },
+};
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx
new file mode 100644
index 000000000000..8321a9820141
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { cookies, headers } from 'next/headers';
+
+export default function Component() {
+  function handleClick() {
+    cookies().set('user-id', 'encrypted-id');
+  }
+
+  return (
+    <>
+      
Cookies:

+      {cookies()
+        .getAll()
+        .map(({ name, value }) => {
+          return (
+            

+              Name: {name}
+              Value: {value}
+            

+          );
+        })}
+
+      
Headers:

+      {Array.from(headers()).map(([name, value]: [string, string]) => {
+        return (
+          

+            Name: {name}
+            Value: {value}
+          

+        );
+      })}
+
+        
+    
+  );
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx
index 2ea7511a2f4e..f5a840241fb4 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx
@@ -1,5 +1,8 @@
-import { useRouter } from 'next/router';
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, within, userEvent } from '@storybook/test';
+import { getRouter } from '@storybook/nextjs/router.mock';
+import Router, { useRouter } from 'next/router';
 
 function Component() {
   const router = useRouter();
@@ -19,10 +22,12 @@ function Component() {
       name: 'Prefetch',
     },
     {
+      // @ts-expect-error (old API)
       cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
       name: 'Push HTML',
     },
     {
+      // @ts-expect-error (old API)
       cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
       name: 'Replace',
     },
@@ -30,6 +35,7 @@ function Component() {
 
   return (
     

+      
Router pathname: {Router.pathname}

       
pathname: {router.pathname}

       

         searchparams:{' '}
@@ -61,9 +67,42 @@ export default {
         query: {
           foo: 'bar',
         },
+        prefetch: () => {
+          console.log('custom prefetch');
+        },
       },
     },
   },
-};
+} as Meta;
+
+export const Default: StoryObj = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const routerMock = getRouter();
+
+    await step('Router property overrides should be available in useRouter fn', async () => {
+      await expect(Router.pathname).toBe('/hello');
+      await expect(Router.query).toEqual({ foo: 'bar' });
+    });
 
-export const Default = {};
+    await step(
+      'Router property overrides should be available in default export from next/router',
+      async () => {
+        await expect(Router.pathname).toBe('/hello');
+        await expect(Router.query).toEqual({ foo: 'bar' });
+      }
+    );
+
+    await step('Asserts whether forward hook is called', async () => {
+      const forwardBtn = await canvas.findByText('Go forward');
+      await userEvent.click(forwardBtn);
+      await expect(routerMock.forward).toHaveBeenCalled();
+    });
+
+    await step('Asserts whether custom prefetch hook is called', async () => {
+      const prefetchBtn = await canvas.findByText('Prefetch');
+      await userEvent.click(prefetchBtn);
+      await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html');
+    });
+  },
+};
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
index 92790424407b..5e046e9b7a0b 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
@@ -945,6 +945,100 @@ exports[`renders navigationStories stories renders WithSegmentDefinedForParams 1
 
 `;
 
+exports[`renders nextHeaderStories stories renders Default 1`] = `
+
+  

+    

+      Global Decorator
+      

+      

+        Cookies:
+      

+      

+        
+          Name:
+        
+         
+        
+          firstName
+        
+        
+          Value:
+        
+         
+        
+          Jane
+        
+      

+      

+        
+          Name:
+        
+         
+        
+          lastName
+        
+        
+          Value:
+        
+         
+        
+          Doe
+        
+      

+      

+        Headers:
+      

+      

+        
+          Name:
+        
+         
+        
+          cookie
+        
+        
+          Value:
+        
+         
+        
+          firstName=Jane; lastName=Doe
+        
+      

+      

+        
+          Name:
+        
+         
+        
+          timezone
+        
+        
+          Value:
+        
+         
+        
+          Central European Summer Time
+        
+      

+      
+    

+  

+
+`;
+
 exports[`renders routerStories stories renders Default 1`] = `
 
   

@@ -954,6 +1048,10 @@ exports[`renders routerStories stories renders Default 1`] = `
       Global Decorator
       

       

+        

+          Router pathname: 
+          /hello
+        

         

           pathname: 
           /hello
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/assets/accessibility.svg b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/assets/accessibility.svg
index a3288830e348..107e93f83840 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/assets/accessibility.svg
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/assets/accessibility.svg
@@ -1,5 +1 @@
-
-  Accessibility
-  
-  
-
\ No newline at end of file
+Accessibility
\ No newline at end of file
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
index c17fd43fc746..79684dc595e0 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
@@ -11,6 +11,7 @@ import * as styledJsxStories from './StyledJsx.stories';
 import * as dynamicImportStories from './DynamicImport.stories';
 import * as fontStories from './Font.stories';
 import * as headStories from './Head.stories';
+import * as nextHeaderStories from './NextHeader.stories';
 import * as getImagePropsStories from './GetImageProps.stories';
 
 // example with composeStories, returns an object with all stories composed with args/decorators
@@ -28,8 +29,9 @@ const runTests = (name: string, storiesModule: any) => {
   })
 }
 
-// // example with composeStory, returns a single story composed with args/decorators
+// example with composeStory, returns a single story composed with args/decorators
 describe('renders', () => {
+  runTests('nextHeaderStories', nextHeaderStories);
   runTests('navigationStories', navigationStories);
   runTests('linkStories', linkStories);
   runTests('routerStories', routerStories);
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
index 99d48a7714ec..5016189d6c21 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
@@ -50,14 +50,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5":
+"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  languageName: node
+  linkType: hard
+
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/compat-data@npm:7.23.5"
   checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9":
+"@babel/compat-data@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/compat-data@npm:7.24.4"
+  checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/core@npm:7.23.9"
   dependencies:
@@ -80,7 +97,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2":
+"@babel/core@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
   dependencies:
@@ -92,6 +132,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -110,7 +162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/helper-compilation-targets@npm:7.23.6"
   dependencies:
@@ -142,6 +194,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -155,9 +226,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0"
+"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -166,7 +237,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03
+  checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff
   languageName: node
   linkType: hard
 
@@ -214,6 +285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
@@ -245,6 +325,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/helper-plugin-utils@npm:7.24.0"
+  checksum: 10/dc8c7af321baf7653d93315beffee1790eb2c464b4f529273a24c8743a3f3095bf3f2d11828cb2c52d56282ef43a4bdc67a79c9ab8dd845e35d01871f3f28a0e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -271,6 +358,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-replace-supers@npm:7.24.1"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -341,6 +441,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helpers@npm:7.24.4"
+  dependencies:
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -352,6 +463,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/parser@npm:7.23.9"
@@ -361,39 +484,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
+"@babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/parser@npm:7.24.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232
+  checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2
+  checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548
+  checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa
   languageName: node
   linkType: hard
 
@@ -483,25 +627,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.22.5, @babel/plugin-syntax-import-assertions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
+"@babel/plugin-syntax-import-assertions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7
+  checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
+"@babel/plugin-syntax-import-attributes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e
+  checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e
   languageName: node
   linkType: hard
 
@@ -538,6 +682,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-jsx@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/712f7e7918cb679f106769f57cfab0bc99b311032665c428b98f4c3e2e6d567601d45386a4f246df6a80d741e1f94192b3f008800d66c4f1daae3ad825c243f0
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -637,6 +792,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-typescript@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-typescript@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bf4bd70788d5456b5f75572e47a2e31435c7c4e43609bd4dffd2cc0c7a6cf90aabcf6cd389e351854de9a64412a07d30effef5373251fe8f6a4c9db0c0163bda
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6"
@@ -649,67 +815,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3"
+"@babel/plugin-transform-arrow-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66
+  checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
+"@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0
+  checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c
+  checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020
+  checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+"@babel/plugin-transform-block-scoping@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b
+  checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
+"@babel/plugin-transform-class-properties@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
   dependencies:
@@ -721,116 +887,128 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
+"@babel/plugin-transform-class-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e
+  checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+"@babel/plugin-transform-classes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-classes@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23
+  checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
+"@babel/plugin-transform-computed-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/template": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/template": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad
+  checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-destructuring@npm:7.23.3"
+"@babel/plugin-transform-destructuring@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-destructuring@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed
+  checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
+"@babel/plugin-transform-dotall-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3
+  checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
+"@babel/plugin-transform-duplicate-keys@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16
+  checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
+"@babel/plugin-transform-dynamic-import@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845
+  checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1"
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66
+  checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
+"@babel/plugin-transform-export-namespace-from@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93
+  checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421
   languageName: node
   linkType: hard
 
@@ -846,86 +1024,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+"@babel/plugin-transform-for-of@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735
+  checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
+"@babel/plugin-transform-function-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6
+  checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
+"@babel/plugin-transform-json-strings@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de
+  checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-literals@npm:7.23.3"
+"@babel/plugin-transform-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed
+  checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
+  checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
+"@babel/plugin-transform-member-expression-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db
+  checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
+"@babel/plugin-transform-modules-amd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2
+  checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73
   languageName: node
   linkType: hard
 
@@ -942,29 +1120,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-systemjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0
+  checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
+"@babel/plugin-transform-modules-umd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5
+  checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083
   languageName: node
   linkType: hard
 
@@ -980,18 +1171,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
+"@babel/plugin-transform-new-target@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b
+  checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11":
   version: 7.23.4
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
   dependencies:
@@ -1003,58 +1194,69 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.22.11, @babel/plugin-transform-numeric-separator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-numeric-separator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3
+  checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.22.15, @babel/plugin-transform-object-rest-spread@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4"
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.3"
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/656f09c4ec629856e807d5b386559166ae417ff75943abce19656b2c6de5101dfd0aaf23f9074e854339370b4e09f57518d3202457046ee5b567ded531005479
+  checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-super@npm:7.23.3"
+"@babel/plugin-transform-object-super@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53
+  checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf
+  checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0":
   version: 7.23.4
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
   dependencies:
@@ -1067,18 +1269,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
+"@babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-parameters@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df
+  checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
+"@babel/plugin-transform-private-methods@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
   dependencies:
@@ -1090,39 +1305,51 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
+"@babel/plugin-transform-private-methods@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.24.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-property-in-object@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42
+  checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-property-literals@npm:7.23.3"
+"@babel/plugin-transform-property-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9
+  checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
+"@babel/plugin-transform-react-display-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779
+  checksum: 10/4cc7268652bd73a9e249db006d7278e3e90c033684e59801012311536f1ff93eb63fea845325035533aa281e428e6ec2ae0ad04659893ec1318250ddcf4a2f77
   languageName: node
   linkType: hard
 
@@ -1137,7 +1364,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
+"@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4"
   dependencies:
@@ -1152,110 +1379,110 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
+"@babel/plugin-transform-react-pure-annotations@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666
+  checksum: 10/06a6bfe80f1f36408d07dd80c48cf9f61177c8e5d814e80ddbe88cfad81a8b86b3110e1fe9d1ac943db77e74497daa7f874b5490c788707106ad26ecfbe44813
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
+"@babel/plugin-transform-regenerator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     regenerator-transform: "npm:^0.15.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6
+  checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
+"@babel/plugin-transform-reserved-words@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48
+  checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:^7.23.2":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-runtime@npm:7.23.9"
+"@babel/plugin-transform-runtime@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-runtime@npm:7.24.3"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
-    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
+    "@babel/helper-module-imports": "npm:^7.24.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.1"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d942e5852f100d0de5021c4d1fda9e30c28b94aa846e09588476dd82c058fb6869a30be0cf915362bf23b5f3504aa150ca3c3b0299dbd0a86b3b1f5f744c2333
+  checksum: 10/7f545c628993b527ae1cb028106168ec29873160a5d98aed947509b61e826fa52b6e2bd2c56504b4a5084555becc9841fa7842e61f822a050dd6ff5baff726ce
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3"
+"@babel/plugin-transform-shorthand-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326
+  checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-spread@npm:7.23.3"
+"@babel/plugin-transform-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-spread@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d
+  checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
+"@babel/plugin-transform-sticky-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949
+  checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-template-literals@npm:7.23.3"
+"@babel/plugin-transform-template-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2
+  checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
+"@babel/plugin-transform-typeof-symbol@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384
+  checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37
   languageName: node
   linkType: hard
 
@@ -1273,72 +1500,87 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
+"@babel/plugin-transform-typescript@npm:^7.24.1":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-typescript@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-typescript": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60
+  checksum: 10/e8d66fbafd6cbfeca2ebe77c4fc67537be9e01813f835ce097fa91329b0cd7ba587a9cf4c4a1df661cdde438741cb3c63d2ab95c97354eb89d7682a4d99bea5d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-escapes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225
+  checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a
+  checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef
+  checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.23.2":
-  version: 7.23.9
-  resolution: "@babel/preset-env@npm:7.23.9"
+"@babel/preset-env@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
+    "@babel/compat-data": "npm:^7.24.4"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-option": "npm:^7.23.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.23.3"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.23.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.1"
     "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
@@ -1350,63 +1592,63 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoping": "npm:^7.23.4"
-    "@babel/plugin-transform-class-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-class-static-block": "npm:^7.23.4"
-    "@babel/plugin-transform-classes": "npm:^7.23.8"
-    "@babel/plugin-transform-computed-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-destructuring": "npm:^7.23.3"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.23.4"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
-    "@babel/plugin-transform-for-of": "npm:^7.23.6"
-    "@babel/plugin-transform-function-name": "npm:^7.23.3"
-    "@babel/plugin-transform-json-strings": "npm:^7.23.4"
-    "@babel/plugin-transform-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-amd": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.23.3"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.24.4"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.24.4"
+    "@babel/plugin-transform-classes": "npm:^7.24.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-for-of": "npm:^7.24.1"
+    "@babel/plugin-transform-function-name": "npm:^7.24.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.24.1"
+    "@babel/plugin-transform-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.24.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
-    "@babel/plugin-transform-new-target": "npm:^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.23.4"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.23.4"
-    "@babel/plugin-transform-object-super": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.4"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
-    "@babel/plugin-transform-private-methods": "npm:^7.23.3"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4"
-    "@babel/plugin-transform-property-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-regenerator": "npm:^7.23.3"
-    "@babel/plugin-transform-reserved-words": "npm:^7.23.3"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-spread": "npm:^7.23.3"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-template-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3"
+    "@babel/plugin-transform-new-target": "npm:^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-object-super": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.24.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
-    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.4"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     core-js-compat: "npm:^3.31.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0214ac9434a2496eac7f56c0c91164421232ff2083a66e1ccab633ca91e262828e54a5cbdb9036e8fe53d53530b6597aa98c99de8ff07b5193ffd95f21dc9d2c
+  checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8
   languageName: node
   linkType: hard
 
@@ -1436,23 +1678,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.22.15":
-  version: 7.23.3
-  resolution: "@babel/preset-react@npm:7.23.3"
+"@babel/preset-react@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/preset-react@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-transform-react-display-name": "npm:^7.23.3"
-    "@babel/plugin-transform-react-jsx": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-transform-react-display-name": "npm:^7.24.1"
+    "@babel/plugin-transform-react-jsx": "npm:^7.23.4"
     "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5"
-    "@babel/plugin-transform-react-pure-annotations": "npm:^7.23.3"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/ef6aef131b2f36e2883e9da0d832903643cb3c9ad4f32e04fb3eecae59e4221d583139e8d8f973e25c28d15aafa6b3e60fe9f25c5fd09abd3e2df03b8637bdd2
+  checksum: 10/a796c609ace7d58a56b42b6630cdd9e1d896ce2f8b35331b9ea040eaaf3cc9aa99cd2614e379a27c10410f34e89355e2739c7097e8065ce5e40900a77b13d716
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.23.2":
+"@babel/preset-typescript@npm:^7.23.0":
   version: 7.23.3
   resolution: "@babel/preset-typescript@npm:7.23.3"
   dependencies:
@@ -1467,6 +1709,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-typescript@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/preset-typescript@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-validator-option": "npm:^7.23.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-typescript": "npm:^7.24.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/ba774bd427c9f376769ddbc2723f5801a6b30113a7c3aaa14c36215508e347a527fdae98cfc294f0ecb283d800ee0c1f74e66e38e84c9bc9ed2fe6ed50dcfaf8
+  languageName: node
+  linkType: hard
+
 "@babel/register@npm:^7.22.15":
   version: 7.23.7
   resolution: "@babel/register@npm:7.23.7"
@@ -1489,7 +1746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.23.9
   resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
@@ -1498,6 +1755,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/runtime@npm:7.24.4"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/8ec8ce2c145bc7e31dd39ab66df124f357f65c11489aefacb30f431bae913b9aaa66aa5efe5321ea2bf8878af3fcee338c87e7599519a952e3a6f83aa1b03308
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.15, @babel/template@npm:^7.23.9, @babel/template@npm:^7.3.3":
   version: 7.23.9
   resolution: "@babel/template@npm:7.23.9"
@@ -1509,7 +1775,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9":
+"@babel/template@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/template@npm:7.24.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.23.5"
+    "@babel/parser": "npm:^7.24.0"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/traverse@npm:7.23.9"
   dependencies:
@@ -1527,6 +1804,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/traverse@npm:7.24.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/generator": "npm:^7.24.1"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.23.9
   resolution: "@babel/types@npm:7.23.9"
@@ -1538,6 +1833,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/types@npm:7.24.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.23.4"
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/a0b4875ce2e132f9daff0d5b27c7f4c4fcc97f2b084bdc5834e92c9d32592778489029e65d99d00c406da612d87b72d7a236c0afccaa1435c028d0c94c9b6da4
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -2269,6 +2575,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  dependencies:
+    "@jridgewell/set-array": "npm:^1.2.1"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.2
   resolution: "@jridgewell/resolve-uri@npm:3.1.2"
@@ -2283,6 +2600,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/set-array@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@jridgewell/set-array@npm:1.2.1"
+  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+  languageName: node
+  linkType: hard
+
 "@jridgewell/source-map@npm:^0.3.3":
   version: 0.3.5
   resolution: "@jridgewell/source-map@npm:0.3.5"
@@ -2310,6 +2634,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+  version: 0.3.25
+  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
+  languageName: node
+  linkType: hard
+
 "@mdx-js/react@npm:^3.0.0":
   version: 3.0.1
   resolution: "@mdx-js/react@npm:3.0.1"
@@ -2403,129 +2737,386 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.1
+  resolution: "@npmcli/agent@npm:2.2.1"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.1"
+    lru-cache: "npm:^10.0.1"
+    socks-proxy-agent: "npm:^8.0.1"
+  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@npmcli/fs@npm:3.1.0"
+  dependencies:
+    semver: "npm:^7.3.5"
+  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
+  version: 0.5.11
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
+  dependencies:
+    ansi-html-community: "npm:^0.0.8"
+    common-path-prefix: "npm:^3.0.0"
+    core-js-pure: "npm:^3.23.3"
+    error-stack-parser: "npm:^2.0.6"
+    find-up: "npm:^5.0.0"
+    html-entities: "npm:^2.1.0"
+    loader-utils: "npm:^2.0.4"
+    schema-utils: "npm:^3.0.0"
+    source-map: "npm:^0.7.3"
+  peerDependencies:
+    "@types/webpack": 4.x || 5.x
+    react-refresh: ">=0.10.0 <1.0.0"
+    sockjs-client: ^1.4.0
+    type-fest: ">=0.17.0 <5.0.0"
+    webpack: ">=4.43.0 <6.0.0"
+    webpack-dev-server: 3.x || 4.x
+    webpack-hot-middleware: 2.x
+    webpack-plugin-serve: 0.x || 1.x
+  peerDependenciesMeta:
+    "@types/webpack":
+      optional: true
+    sockjs-client:
+      optional: true
+    type-fest:
+      optional: true
+    webpack-dev-server:
+      optional: true
+    webpack-hot-middleware:
+      optional: true
+    webpack-plugin-serve:
+      optional: true
+  checksum: 10/ee7eff63ef930c8ec37b341d12f180598a5173938a5b8d1d7c53306eab10b3f3f23adcba4824e5a93ddcd0cf185a90baa0b6f483f27a320dd86ad61941940eb6
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dialog@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-scope@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.stat": "npm:2.0.5"
-    run-parallel: "npm:^1.1.9"
-  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
-  languageName: node
-  linkType: hard
-
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
   dependencies:
-    "@nodelib/fs.scandir": "npm:2.1.5"
-    fastq: "npm:^1.6.0"
-  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "@npmcli/agent@npm:2.2.1"
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
-    agent-base: "npm:^7.1.0"
-    http-proxy-agent: "npm:^7.0.0"
-    https-proxy-agent: "npm:^7.0.1"
-    lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
   languageName: node
   linkType: hard
 
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
   languageName: node
   linkType: hard
 
-"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
-  version: 0.5.11
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
   dependencies:
-    ansi-html-community: "npm:^0.0.8"
-    common-path-prefix: "npm:^3.0.0"
-    core-js-pure: "npm:^3.23.3"
-    error-stack-parser: "npm:^2.0.6"
-    find-up: "npm:^5.0.0"
-    html-entities: "npm:^2.1.0"
-    loader-utils: "npm:^2.0.4"
-    schema-utils: "npm:^3.0.0"
-    source-map: "npm:^0.7.3"
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
-    "@types/webpack": 4.x || 5.x
-    react-refresh: ">=0.10.0 <1.0.0"
-    sockjs-client: ^1.4.0
-    type-fest: ">=0.17.0 <5.0.0"
-    webpack: ">=4.43.0 <6.0.0"
-    webpack-dev-server: 3.x || 4.x
-    webpack-hot-middleware: 2.x
-    webpack-plugin-serve: 0.x || 1.x
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
-    "@types/webpack":
-      optional: true
-    sockjs-client:
-      optional: true
-    type-fest:
-      optional: true
-    webpack-dev-server:
-      optional: true
-    webpack-hot-middleware:
-      optional: true
-    webpack-plugin-serve:
+    "@types/react":
       optional: true
-  checksum: 10/ee7eff63ef930c8ec37b341d12f180598a5173938a5b8d1d7c53306eab10b3f3f23adcba4824e5a93ddcd0cf185a90baa0b6f483f27a320dd86ad61941940eb6
+  checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@radix-ui/react-slot@npm:1.0.2"
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
-    "@radix-ui/react-compose-refs": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
+  checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
   languageName: node
   linkType: hard
 
@@ -2562,8 +3153,8 @@ __metadata:
   linkType: hard
 
 "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=6004d9&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=b9da55&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
@@ -2571,37 +3162,38 @@ __metadata:
     dequal: "npm:^2.0.2"
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
-  checksum: 10/c8bfd628f1ff4a5472b63b7126842eed94a7b8c93f65fee3bfff9a8db71ae45ea63ee7d656b42f29355729f787366e14d434abb75402645a5d0b80d48e1bbc90
+  checksum: 10/f0f0b606135e2aa8194151f1f5aa49a477310b47674be4278d1aa33883c3f6778ba7c9789d55eb803b58294a02a49baac817ebfb63c121b3868ee140a2d24abc
   languageName: node
   linkType: hard
 
 "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=445bce&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=a37c81&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/7f2c66b7516beeeb976d227f27f0cebd600ac5d3abada7d5e01c30d10cc053059f15b607cb78f1c2d03c82a8294fb61598cbca41c3c5f3cf432e79587d4d15a2
+  checksum: 10/e3302e7396d4d1d9e251132502a4da6974bb3389ed60caa490d06ee5c5068192c1db0d2ee8561bd7248af26173a5dfafa6d34df0f1d20aa7558a3ed7e69f7483
   languageName: node
   linkType: hard
 
 "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=784f9c&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=4832b7&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/blocks": "workspace:*"
+    dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/6e4db5b470f526bb357af93fd6757fe8d4976f4fdb1c3856b828f408780e27645038bdc70e318de40f8fc069a359d4d822ada860df8cffd41daf5506b5468642
+  checksum: 10/28b6062822a84710a5b3c20499e135f16b3557a46e95b4e34c2c73048a9bac716f831aea2726cc4c7c35019f080f8a71bf41c4399461e7eff2fa4e485c82afce
   languageName: node
   linkType: hard
 
 "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=9453ad&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=3bd541&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.12.3"
+    "@babel/core": "npm:^7.24.4"
     "@mdx-js/react": "npm:^3.0.0"
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2621,13 +3213,13 @@ __metadata:
     rehype-external-links: "npm:^3.0.0"
     rehype-slug: "npm:^6.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/ab4de80de2f39340299317bebaf82598557655052bc1e55bd7ffc31b6ab91a3605f734991666d0cf3b18f0d0c411e2fc117aec76bdfe197854f1085c1e9bde3d
+  checksum: 10/d378fa76af992a6db3e5bb868a8a3696a1346e189f33f1690bc38ef673637fff1228093d6140fad2a65eed33fcec29411eebd699f7190b284e5c0d6221f3bbd9
   languageName: node
   linkType: hard
 
 "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=80691b&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=0216a0&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -2643,22 +3235,22 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/0479f4d2f488ab30b371fd9f2bd5c12b7dcd029aac9a1f8f774701886d941b63c0ec4f50c221469ea220582ce4720d7386b9458cf15a29bf2c03eb51a6c70d13
+  checksum: 10/b323aaf95b279c5ebc47f42d4990d10dadabbe0b6a78b4141cea0b7160b8d923ccf0286a0c3be24b1f4184d6697da8e028d2de86d4092999ddfc392aa22c4851
   languageName: node
   linkType: hard
 
 "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=7ee0d6&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=66125f&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10/1e7db616fd4ddc6dd32583e6aff3df57d0ff001d2a5de8f990de53625d041b9f09bc6ec729accd0b528f24d54a954e10677bfbeeed07e938c00cbaed1d19c5b9
+  checksum: 10/8a4f45b46fa9d92da8a49508b812971fac787c461d02ac1fb8c9dec0540a746b03cc6aff90aad0e44ae37a3cd273232290c1305f8aa48180976ba34556a10206
   languageName: node
   linkType: hard
 
 "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=41e54e&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=6c0526&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/instrumenter": "workspace:*"
@@ -2666,55 +3258,55 @@ __metadata:
     "@storybook/types": "workspace:*"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
-  checksum: 10/064652b4c5ed667349beef06dae49684bd28bc743c109077d46e7070336e536e09b9a117bd3cf501c9e11244c699a5ef5b4ac5f576178a9a8daee5882dd5d04d
+  checksum: 10/15cace1941f8833e8f7876b6b0d64e644035e4c00fcf8312c712461d5747104f44157c62393ba80f774afdee89cda73b89f64573ae31289d7d77251b47a4d26c
   languageName: node
   linkType: hard
 
 "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=1bf2c0&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=4f0a87&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/dbb3076c99da811d94598070cb57ed19b2a00c875668fc8d586f93d59585b6f2485f04998f61294cd037b43f8d03f21b53d1918c73d1bb9c8652bf6aa6737530
+  checksum: 10/a5a45dd08c63228997c72c9507eaf2085599bda4affb970fbef9f83ffeefddf703280bd893c43f1e3822750f30a5537c38df97cd151119b9e29f6a3df0c98882
   languageName: node
   linkType: hard
 
 "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=2a387b&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=3a5f47&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/bc58cf5bb670333b33fa2c2414b17b0bf97ffdf92bafe89eef04f1965479f7833c388087ebb478f152780c9119f8795ae169125291419fd7e74d11cbb1410540
+  checksum: 10/f849097853eadc387dafa4e43f0568d95d66d1bcbd4052f31ecec3162b00dd9396052edfad31d7e1e37992d63b3161579a257ad6c63791292212aa164d32d11f
   languageName: node
   linkType: hard
 
 "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=dba398&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/14efee7b4f58d0ee846a71aa6d614a0927a80e32c90f677325e17d0d2402ed38effc226a69c9856073dbb809d84c4c7606c339f99be6b46a6a12e0f3ce2f075b
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=b6a54a&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/6c77dbacf71de4fbaa483d96c2204b972dc174f471ba0d329fcda297f776e5c4974a34a286fb5a6e2aac98742aac30076d41e3fc10aa3dc8ea93ebad02be55a7
   languageName: node
   linkType: hard
 
 "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=939ad5&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=37a9a0&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     memoizerific: "npm:^1.11.3"
-  checksum: 10/ab29c073f7d3ce1e9466672441885600429ebbba1742bc2eb0f8656853f25d9a0d86ff865f41a5b76f0809d6929a955cbc7dba716d3834887300fd3813bfa045
+  checksum: 10/7d9555343b3a6bffd174791510a7f859bc10c9a604390b8b8aa17ca10e545b8c74d7088555e5a7f32d31a9f0b894663cde38495781634094b7b1368861b5835c
   languageName: node
   linkType: hard
 
 "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=e528b8&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=dfb3e3&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -2735,20 +3327,20 @@ __metadata:
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 10/8c5b561b365792c9cb0fbd556c20a6a69ae3e894be43b9251bf131f5b4a542b2734c981d8164992ce0cf0cc70ee8643bcdb30a09d0860c7d1a8fccff3404f79e
+  checksum: 10/1b3d9215f8ce8118c5f91087c36b254d6c04c1edc3deca6f38d580536ba66030b4662b16dd8c739e6a826aa335381129d9a768a6bc3e30f1ce17175560fd8b1d
   languageName: node
   linkType: hard
 
 "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=cdb753&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=1e3595&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@storybook/core-common": "workspace:*"
@@ -2764,13 +3356,13 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     process: "npm:^0.11.10"
     util: "npm:^0.12.4"
-  checksum: 10/32bdfc42175480e59defece1f67634d40d2d039668c81e372736ac6990b2144cdd2676f9f9859250fbb5d7855cd12729f0107a64a07e32eb6a9704daf76d816b
+  checksum: 10/873e49d5c796256ae0167ca108bc32761c18cd7c608e3fc802419d2f0d80e4829fcd16f5862d74b1133d437de6582bc10b0a5c3fdc21c6ba173e29b46264b7fc
   languageName: node
   linkType: hard
 
 "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=097abc&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=0d7bde&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2809,29 +3401,29 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/82379d860d3065157ad2033724299128efa169fd831d1002b2aba10232e9ae8dd93a788aae0522b8ad0cb6472754e298568f44e341154b94530f16f6683cd475
+  checksum: 10/0eda4b592a443b46fc23b340d6dad854bb9ec9adab7558a143026df93adfe663b70eea4fcd529d6bf3908a95ca00235b25f245fbdbb8e171de76ed75f0aa10a1
   languageName: node
   linkType: hard
 
 "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=c002e8&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=73568e&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     telejson: "npm:^7.2.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/011d5c3631e39ecb2e0bee1d18c238d27a3b2523f674775ced4a187b589a3165504f2e685b77334347f01c415fb07b2ecf748ad0ad12c926b188a8450db6e5b2
+  checksum: 10/179e00e7e630cad7910ea5579bbb1fefd01e7a2901764dc70bd36385c40453c248447f507b41c6ad441e6abfe00071cd6ca6b92de441665edf33b27ba5949602
   languageName: node
   linkType: hard
 
 "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=4c4245&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=81176b&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.0"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -2869,27 +3461,27 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 10/6e3c6c9e15ddafb9444d51c973b5fa83b11d57943dd339cfaa5f51386b1590da12e43cc84f15707080d69cee3edbef79d9dac8d18a0ed4a9c950f180b52e239e
+  checksum: 10/22740bf20bde9cd2a4686e6d969802426946819f4b9e53e587627210817010a35f01cacfa65b940bde981b74397b61974a8f3ffba75ca1a0ba43798ed7c7d951
   languageName: node
   linkType: hard
 
 "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=3fcc66&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=e88f46&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10/b9659c0914a46c81a0c8b2ab88741832504b4d87da0e785219ea5182154690d5d37107b42923143f598f36bf263b15a6f4dfa14522bdcada8abd97a581981ca3
+  checksum: 10/105c257d54b938a087b0d281675c7fcf30f81bed65e9ec469c6cc0607459401e601c518df69c1c1e258c3bfc0e5dd2bfb87188e9802d26be0082a1a4872b09ec
   languageName: node
   linkType: hard
 
 "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=1c69c7&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=63aa89&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.4"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -2901,17 +3493,18 @@ __metadata:
     prettier: "npm:^3.1.1"
     recast: "npm:^0.23.5"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/7a45f976805757518ab87011b5708999e4c4692911cbdfa721f662167d61f8aff1a75ced263cc0842187cd16195a2a46816a638c4e89d878bd9af182fb0d4b95
+  checksum: 10/1df0e0956ebe11de735e79fba85160137e81cffb6fc0bf283ef944c3548bf346d359dc15b1efef8a43feb90ea2f3a08c11d9b569dad2b5dd50827d7b8174081a
   languageName: node
   linkType: hard
 
 "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=609416&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=ebb913&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
+    "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/theming": "workspace:*"
@@ -2919,15 +3512,15 @@ __metadata:
     memoizerific: "npm:^1.11.3"
     util-deprecate: "npm:^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
-  checksum: 10/adb48901ccd03c10b6c64b8b902372a8044355a2d4c5e3c396e1b2015c8cab610d04459fe8e1b603a0ef372f27ac68e0e6595c3b701e9c6488a47d1070642276
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+  checksum: 10/0ca50dee5300c7ee3e3dcf1254fbea295bed2073ac93d2fcc8f11e3e414c8df0aa52bcbb343aa4fe54aded249475614402224b30a32262382135a9d13a77d51c
   languageName: node
   linkType: hard
 
 "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=c9ae25&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=4b9205&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-events": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
@@ -2963,31 +3556,33 @@ __metadata:
   peerDependenciesMeta:
     prettier:
       optional: true
-  checksum: 10/55582fc9caefb8c87cf2367b64acecf11ac266fb0c28f26bdf4ca161f11ecfb1876cde9106f49e68ec112267c58624a21041c5c790bc275a213f1621e16fcc85
+  checksum: 10/7bcfd87d8c3aeed67e5a7b24195883082876293c21dfc557a0e6e79923dbc1319334d6ae17b68a0cdfd8851e807bf721a779a6d1bf3eeb447aad139c1a5270ef
   languageName: node
   linkType: hard
 
 "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=47f752&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=268cab&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
+    "@storybook/csf": "npm:^0.1.5"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/40f34bd3746cc94ecb5f8f3fcc516c9f7bd8fc12f48977fdf3987a0e9f0c5306235657c731d379b16f3de4fe0d53754b67196608009b06927d57eed8f44a89ae
+  checksum: 10/bc2e4e83c020265013ab285f519a192d2ab66c98bda3aea7b3526dbc65b786145f453ad1ffd8fdcf49f232303a49c8f9da7e0f2013fe98cff8d85c745da4f604
   languageName: node
   linkType: hard
 
 "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=d5e086&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=5e4c1b&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
-    "@babel/core": "npm:^7.23.9"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
     "@discoveryjs/json-ext": "npm:^0.5.3"
     "@storybook/builder-manager": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
@@ -2998,16 +3593,16 @@ __metadata:
     "@storybook/telemetry": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/detect-port": "npm:^1.3.0"
+    "@types/diff": "npm:^5.0.9"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
     "@types/semver": "npm:^7.3.4"
     better-opn: "npm:^3.0.2"
     chalk: "npm:^4.1.0"
-    cjs-module-lexer: "npm:^1.2.3"
     cli-table3: "npm:^0.6.1"
     compression: "npm:^1.7.4"
     detect-port: "npm:^1.3.0"
-    es-module-lexer: "npm:^1.5.0"
+    diff: "npm:^5.2.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
@@ -3025,47 +3620,47 @@ __metadata:
     util-deprecate: "npm:^1.0.2"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
-  checksum: 10/c1e7052671b91921fafaf7a2faccc0b7a80d870f44a8c36753b455f514952cd8b8b281e2a7486957ca32d2100d2143cc913b3e8542624c84074df92567903a76
+  checksum: 10/78fccaf27af7c3dd9101ccdadb1c6ea8dc8e05d1ea1a664b32981de3ad945370889321eda5fd4a0b9a93370e55225edd7a926f9b52922ee984afec393d49d8a4
   languageName: node
   linkType: hard
 
 "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=c7e54c&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=ae9af3&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/4bebf551445b0567fd2f47d5827839c6f8f0c8ffb4bb0968a4ffe20a3704a6cfe6928447b6bedbb3bcb95bd574f9a87184692d17e9f23eef16aebf2348ddd599
+  checksum: 10/48a490e3a38053fcce8a60caa0ef26b7586a40353fc05e3d3f7c6f4f701b836a43ab933f489c618e0c166ba11da267f6c0c8c605e7b22c45b878b10a89ea7253
   languageName: node
   linkType: hard
 
 "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=af3a0b&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=35e0eb&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/csf-tools": "workspace:*"
     unplugin: "npm:^1.3.1"
-  checksum: 10/675bedecfbd0d0deffa986ee402ef9aabc74ea3d91ee1c30d02d297ba3dc262bb148d59cfdcfe331ab920c1dde904df808c1f74f51a7feb46b90a7860ccd4ab9
+  checksum: 10/3b66e55217452cd0c5c65ce8360fa21a1a2a30d87eadcee94dff8c7f3d73e9e88747d3b8d5d31b4a59b23f3c843f7437d994451e785cb4d3238155e4bc34bd67
   languageName: node
   linkType: hard
 
 "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=672378&locator=portable-stories-nextjs%40workspace%3A."
-  dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.4"
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=01a92f&locator=portable-stories-nextjs%40workspace%3A."
+  dependencies:
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/types": "workspace:*"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.5"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/c3d29f831bfc4a1d404a25301140e5f9bb364e080dd10429e72f3576a3581005788c3ce5c7c50fd1ba012a3dd0f469880250872a799ba202edf3e441e2af8b57
+  checksum: 10/a9cd5fea8f214d5db6bd9d70259c986e44d926a7b46e3e174c7e99f176bf4a4ece8017d6f37542d029d648a7e21daa714dc89cabe16a6c06bbd3fe0522679ba7
   languageName: node
   linkType: hard
 
@@ -3078,12 +3673,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "@storybook/csf@npm:0.1.4"
+"@storybook/csf@npm:^0.1.5":
+  version: 0.1.7
+  resolution: "@storybook/csf@npm:0.1.7"
+  dependencies:
+    type-fest: "npm:^2.19.0"
+  checksum: 10/19dbd5c72a0c60e4b7cf0255fbbb74452172c03911d0236a0bd26c5e1d1453870800ebfbcd6afd455384fac30bbb5d261193ee2d455bd863344ceb96265139e3
+  languageName: node
+  linkType: hard
+
+"@storybook/csf@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "@storybook/csf@npm:0.1.6"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156
+  checksum: 10/0e5fa962eaa325e80755f22c28e9b3e37d94b173eb7862323a9b2d0e67041487e7989acc505ada29b8fd72855520720a20d3607184c817bbc7ef0d72a5d92eeb
   languageName: node
   linkType: hard
 
@@ -3095,8 +3699,8 @@ __metadata:
   linkType: hard
 
 "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=f77653&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=169213&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
@@ -3106,7 +3710,7 @@ __metadata:
     assert: "npm:^2.1.0"
     doctrine: "npm:^3.0.0"
     lodash: "npm:^4.17.21"
-  checksum: 10/55545067636d51223718c53d31f6fb7b9724793c4da7a8034517f1eb152c59799bcbf1da4a24ceb30ace46b074ad4d543d66aa4cbdb438f4160dd2f9769c03f0
+  checksum: 10/126fa8a296a7bb326dcac68d162d603d08ba9e6aecbe8bb8f19ba2153e1e725ed0a98dba720ec15dc5c6746d83ca7a15fc7a3d0095d3bbd8a6c7baec77d2aed4
   languageName: node
   linkType: hard
 
@@ -3128,8 +3732,8 @@ __metadata:
   linkType: hard
 
 "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=cdd3b4&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=8c71cc&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -3138,18 +3742,18 @@ __metadata:
     "@storybook/preview-api": "workspace:*"
     "@vitest/utils": "npm:^1.3.1"
     util: "npm:^0.12.4"
-  checksum: 10/040d6c9b45ba8a021deb572ae198e31d12a0bdce95846abaa6d603e7db6cfeb7c2e9f28d7fafdcc4b358a2c4e836436958fc92792388e6cc3adeffca978d9c46
+  checksum: 10/2fdf837a7af5a1798760da57ab179caa83a21e7571d2b6a0c9f0e210fbcc3ca94c6133de5f55332f26276f859073b085f6ebea00d5b0efdda08038370ac1ebd5
   languageName: node
   linkType: hard
 
 "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=70ba3e&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=0f951b&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -3161,36 +3765,35 @@ __metadata:
     store2: "npm:^2.14.2"
     telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/c5d0635ce2e725ee4640801afc1ca21120eb5af398f0a466f1bdfdb87dbbdc7d97ce3aabe9dcc53ee0b210cc4631d23ec01960cc72d6f768ee6657e3f2966095
+  checksum: 10/03d6853e0a6ef4ce7c46ca7836a10d046a32fa71b36f31009ca79972a4f70a925678b49e09319779a8897ffdf14c024e532e1f6c4c3ee8f63dd58a248806686f
   languageName: node
   linkType: hard
 
 "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=a2a1d4&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/315ddc6341701e89d0fb17b42acd32b754aafcf05b37b96b1202b58a415bc0b822601fd8d2fbfd4eaac9f76bda89af4041c555374ae12c6abac60cc3d486f813
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=f4d35d&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/ce5fefd50361b0ec21d9594431e01e79c92af18a55100a3eb8132508523ade5289b8d66f8bc553ddb87e00a326717a6081b442a5b3c1bbfb6dc6910cfce82738
   languageName: node
   linkType: hard
 
 "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=ecd7b3&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=9ef0b7&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.2"
+    "@babel/core": "npm:^7.24.4"
     "@babel/plugin-syntax-bigint": "npm:^7.8.3"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.22.5"
-    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.22.11"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.22.15"
-    "@babel/plugin-transform-runtime": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/preset-react": "npm:^7.22.15"
-    "@babel/preset-typescript": "npm:^7.23.2"
-    "@babel/runtime": "npm:^7.23.2"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-runtime": "npm:^7.24.3"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/preset-react": "npm:^7.24.1"
+    "@babel/preset-typescript": "npm:^7.24.1"
+    "@babel/runtime": "npm:^7.24.4"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
-    "@storybook/addon-actions": "workspace:*"
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
@@ -3198,6 +3801,7 @@ __metadata:
     "@storybook/preset-react-webpack": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/test": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -3223,8 +3827,8 @@ __metadata:
     tsconfig-paths-webpack-plugin: "npm:^4.0.1"
   peerDependencies:
     next: ^13.5.0 || ^14.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     webpack: ^5.0.0
   dependenciesMeta:
     sharp:
@@ -3234,20 +3838,20 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/891ddb3195346b52cd70bc7fa9abaf8c58eca580bd0d46414b1ae3ac9867792b3b806b7fc0f514b7e7ea777709fae57903463f9910fa4c4afff6da6b64487f31
+  checksum: 10/96391de73cb4e52ee40520f954685f730d914dd836869c03afb7c7281047fe1f1f22d5f72250ec893b6c2f55d2c9424a1c5dc8a3b02a938190135ac096d6e9c5
   languageName: node
   linkType: hard
 
 "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=d94edd&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/1095793116385c3d2247349869659cd7147094c2a77efa4cd925a051a0d03742563d74dd7cbc578e1de9a06d0637247a06bcafa665c43cb2f482240f3bb178af
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=1d7a14&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/8586f411d097587f2e25c1999ca9798b5ad8bf3790df2a461d71246f428bc4af757eb1e571820da3db13e89aa0dc2bdc8c614a98453fd55b56910465814e03e3
   languageName: node
   linkType: hard
 
 "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3d1792&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=1f22ff&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-webpack": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -3265,23 +3869,23 @@ __metadata:
     tsconfig-paths: "npm:^4.2.0"
     webpack: "npm:5"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/77a6a3b5ee2db73619642b72aa8976bf54cbc454c5aa781b6499bf55694b0f28fc4bed4f3e683d4e4964646ce793e5054a567d5d789ac5d5fd5d09794490b9a3
+  checksum: 10/b634714dac65c0899ca429b328e3a8930d2cc436a95fd7387f98ff511c5dedd8c371466a52b05b27f3be2fa73033ea0906923144313ec03a690af17669d3c6c8
   languageName: node
   linkType: hard
 
 "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=ad0fb2&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=6e5acf&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.4"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -3292,14 +3896,14 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10/b6da482ccf3c0a502876d3b662a641dad102166cc55816d4f7a0e05b9a10907255f77db13a418dc272912a59136e0ddac4c518653aaa6ee7f79387fd4008c4e9
+  checksum: 10/08f709f0b6ffe282122961b4f2b7fb885d8dc5dfe0d740495f03b5017469b61a8c6bc868a1a09d4994b711e5e5b47c725bc0c8e9d52fb87016ea867598a0c86f
   languageName: node
   linkType: hard
 
 "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=edab9e&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/96674966bbea60cff6399f3bc44fdcb57d765fae1d55b6c1eab0dfadc3a4c36ee55a26ba04762dab5ab0f57e86c5ac45e57bf90fa5a41e716f75877b4b3b617a
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=5d5460&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/bf442490e0d32f1c6db642fd38bd52a73dccabe09ddcb9e83cb9548dcd1ce789d1cab62ccf700670b0e91705d236cdbeea48db677cf45aac04d1f2c31614b130
   languageName: node
   linkType: hard
 
@@ -3322,18 +3926,18 @@ __metadata:
   linkType: hard
 
 "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=3e505c&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4e9dd0&locator=portable-stories-nextjs%40workspace%3A."
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/983e0f5f9dc3449173eb42e8a98a65fbac1247cf8b2f102b3438eec53ff4fdce51c84b0eb7aa7a34f002600e84a17c632397290e9614a8bb8d363fa0cb68a01a
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+  checksum: 10/1ee00bcb852ef2394d23ffb7de6d405f8068258bcba1b8219f8829d4617c3e413e27534cc8372320161819a99680c51acd698e080e1b424a9769dba287bff197
   languageName: node
   linkType: hard
 
 "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=197c45&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -3357,30 +3961,30 @@ __metadata:
     type-fest: "npm:~2.19"
     util-deprecate: "npm:^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
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4
+  checksum: 10/5025c15ece8c549033a2f9ab906d3c408eda9f2a52d0946fc382591ff52b438490b739dd878a4a34a7588fe074eec478e4731bc165ef1e3379e37e73c3767fae
   languageName: node
   linkType: hard
 
 "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=bd2ec4&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=835984&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     memoizerific: "npm:^1.11.3"
     qs: "npm:^6.10.0"
-  checksum: 10/226f011fb5068ed708650f9e6ff2cbf8fdf84dd7eee43dfdeb36c828aca0551a78f53f6e6fadf0c477a74b8f9c70a66c6c6ef637e5bf2684c4a8e46e74ba58ae
+  checksum: 10/1919deef969bb4ac7cb1c9f7cdead2b63060d3f9f3124b8193409caf00b82f9b40a8d489a7b0b005160d0992d2815189f300549acc1a9488c6c50d0c853c5a6a
   languageName: node
   linkType: hard
 
 "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=9296ee&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=f276b5&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -3390,13 +3994,13 @@ __metadata:
     fetch-retry: "npm:^5.0.2"
     fs-extra: "npm:^11.1.0"
     read-pkg-up: "npm:^7.0.1"
-  checksum: 10/0c7be274ef3ee1108857d012827ef3c0ceec404f11c4e3a7c2cadd69245737d8e46678ea30c581d2b52dbf0980f9893d4521f96330b335b702d07224c837f068
+  checksum: 10/25ef32776a17061b4dd372053b0c600b0e5e2830a001bd7e7d02ba499c171af424c726abdd84d250cdb3e6313bb4f7b66738b516e9f049abb1f78a62941d6ba3
   languageName: node
   linkType: hard
 
 "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=76eeb0&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=6d718b&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
@@ -3408,38 +4012,38 @@ __metadata:
     "@vitest/expect": "npm:1.3.1"
     "@vitest/spy": "npm:^1.3.1"
     util: "npm:^0.12.4"
-  checksum: 10/739ea1586f3925a7e791f397e42f9ae2c1994df173e200a757700c2039af2eae7ee36c8aad163d69a46c716ccec73b7a6930f8c2aaa05429de45f2638bc76054
+  checksum: 10/0d0f0047c94e680730b820024d88fc6235a0a1f1fe2211aa59ff6dfdb611ae3e128840f24b47f4e88dc4ebdcd4b32ce615fce6d996a7f35fa70a5bdf394ade85
   languageName: node
   linkType: hard
 
 "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=444382&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=98de3f&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
     "@storybook/client-logger": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 10/fce2b08b28299dab7ebb21b2e66153bfa1fa592f55bdf40893f34618fa95e89839b3acd752a62065278148886bc144c272b330285f555ebfebeaceb996456f56
+  checksum: 10/2d8082070902a20374b54d49290c74e86de894291b2a97a461ac3e66e6d4ed2aac1a129dd9aa263fe16080b357c2eadbde6ece788c597e4fca8cdd7913a0a04d
   languageName: node
   linkType: hard
 
 "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=40be7e&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=e7dca0&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@types/express": "npm:^4.7.0"
     file-system-cache: "npm:2.3.0"
-  checksum: 10/e05ca8e0de199b56817d274a3543fd2a18412cf574604c1dc2943dd77c1c5578e22b9704b005785922c32340fdb897cc536ccecbf5e02d61ef58d5d654fa97f2
+  checksum: 10/d957f4d6c50ca0643ccd10b401cf26264a7b79eceaa34be27d7be10917080afd14cdd65bb825d33a0ae8cc190923902c5429cff0f6aaeb9db673887a58cf010d
   languageName: node
   linkType: hard
 
@@ -3622,6 +4226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff@npm:^5.0.9":
+  version: 5.2.0
+  resolution: "@types/diff@npm:5.2.0"
+  checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/doctrine@npm:0.0.3"
@@ -4698,6 +5309,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -4868,39 +5488,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.8":
-  version: 0.4.8
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8"
+"babel-plugin-polyfill-corejs2@npm:^0.4.10":
+  version: 0.4.11
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/6b5a79bdc1c43edf857fd3a82966b3c7ff4a90eee00ca8d663e0a98304d6e285a05759d64a4dbc16e04a2a5ea1f248673d8bf789711be5e694e368f19884887c
+  checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0"
+"babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
-    core-js-compat: "npm:^3.34.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    core-js-compat: "npm:^3.36.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd
+  checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5"
+"babel-plugin-polyfill-regenerator@npm:^0.6.1":
+  version: 0.6.2
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6
+  checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f
   languageName: node
   linkType: hard
 
@@ -5167,7 +5787,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.10, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3":
+"browserslist@npm:^4.21.10, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0":
   version: 4.23.0
   resolution: "browserslist@npm:4.23.0"
   dependencies:
@@ -5318,14 +5938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001579":
-  version: 1.0.30001611
-  resolution: "caniuse-lite@npm:1.0.30001611"
-  checksum: 10/24710a9cc026e564508fad6905d93d2be14ff38af6e08dce651521e7f4e87b2d2863dd8976da5349173e0c10b47377634238890dc34aa6d44a4d0ca3b1f6e236
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001587":
+"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587":
   version: 1.0.30001589
   resolution: "caniuse-lite@npm:1.0.30001589"
   checksum: 10/5e1d2eb7c32d48c52204227bc1377f0f4c758ef889c53b9b479e28470e7f82eb1db5853e7754be9600ee662ae32a1d58e8bef0fde6edab06322ddbabfd9d212f
@@ -5768,7 +6381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
+"core-js-compat@npm:^3.31.0":
   version: 3.36.0
   resolution: "core-js-compat@npm:3.36.0"
   dependencies:
@@ -5777,6 +6390,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js-compat@npm:^3.36.1":
+  version: 3.37.0
+  resolution: "core-js-compat@npm:3.37.0"
+  dependencies:
+    browserslist: "npm:^4.23.0"
+  checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d
+  languageName: node
+  linkType: hard
+
 "core-js-pure@npm:^3.23.3":
   version: 3.36.0
   resolution: "core-js-pure@npm:3.36.0"
@@ -6239,6 +6861,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-package-manager@npm:^2.0.1":
   version: 2.0.1
   resolution: "detect-package-manager@npm:2.0.1"
@@ -6268,6 +6897,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "diff@npm:5.2.0"
+  checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d
+  languageName: node
+  linkType: hard
+
 "diffie-hellman@npm:^5.0.0":
   version: 5.0.3
   resolution: "diffie-hellman@npm:5.0.3"
@@ -7494,6 +8130,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-npm-tarball-url@npm:^2.0.3":
   version: 2.1.0
   resolution: "get-npm-tarball-url@npm:2.1.0"
@@ -8117,6 +8760,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -9432,7 +10084,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.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:
@@ -11209,6 +11861,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88
+  languageName: node
+  linkType: hard
+
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -12150,14 +12854,14 @@ __metadata:
   linkType: hard
 
 "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.7
-  resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f4ae08&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.8
+  resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=e998b7&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/cli": "workspace:*"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: 10/4975a0a1000ff520cc202c55d6ba047b5fb2512a91d86d3c92fb90a894f3c7e2f1f482069ff3e88f076cd0984d2839c8a9800aa372e126b8827ff3448231281c
+  checksum: 10/1c486636d26cfc07d62cc381665644c08af34d11eef5cb417a5e9dbe52242236ff4c94fa5dd68024508b4155baf691a1b82c3149fe98778c6e87cc3ba8c78198
   languageName: node
   linkType: hard
 
@@ -12682,7 +13386,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -12996,6 +13700,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "use-callback-ref@npm:1.3.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
index e56c0e31080a..0629b1e9f6ed 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
@@ -50,14 +50,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5":
+"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  languageName: node
+  linkType: hard
+
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/compat-data@npm:7.23.5"
   checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9":
+"@babel/compat-data@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/compat-data@npm:7.24.4"
+  checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/core@npm:7.23.9"
   dependencies:
@@ -80,7 +97,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2":
+"@babel/core@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
   dependencies:
@@ -92,6 +132,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -110,7 +162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/helper-compilation-targets@npm:7.23.6"
   dependencies:
@@ -142,6 +194,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -155,9 +226,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0"
+"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -166,7 +237,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03
+  checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff
   languageName: node
   linkType: hard
 
@@ -214,6 +285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.1":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
@@ -245,6 +325,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/helper-plugin-utils@npm:7.24.0"
+  checksum: 10/dc8c7af321baf7653d93315beffee1790eb2c464b4f529273a24c8743a3f3095bf3f2d11828cb2c52d56282ef43a4bdc67a79c9ab8dd845e35d01871f3f28a0e
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20"
@@ -271,6 +358,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-replace-supers@npm:7.24.1"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -341,6 +441,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helpers@npm:7.24.4"
+  dependencies:
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -352,6 +463,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/parser@npm:7.23.9"
@@ -361,39 +484,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
+"@babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/parser@npm:7.24.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232
+  checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2
+  checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548
+  checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa
   languageName: node
   linkType: hard
 
@@ -483,25 +627,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
+"@babel/plugin-syntax-import-assertions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7
+  checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
+"@babel/plugin-syntax-import-attributes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e
+  checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e
   languageName: node
   linkType: hard
 
@@ -649,67 +793,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3"
+"@babel/plugin-transform-arrow-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66
+  checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
+"@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0
+  checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c
+  checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020
+  checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+"@babel/plugin-transform-block-scoping@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b
+  checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
+"@babel/plugin-transform-class-properties@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
   dependencies:
@@ -721,116 +865,128 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
+"@babel/plugin-transform-class-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e
+  checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+"@babel/plugin-transform-classes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-classes@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23
+  checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
+"@babel/plugin-transform-computed-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/template": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/template": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad
+  checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-destructuring@npm:7.23.3"
+"@babel/plugin-transform-destructuring@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-destructuring@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed
+  checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
+"@babel/plugin-transform-dotall-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3
+  checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
+"@babel/plugin-transform-duplicate-keys@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16
+  checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
+"@babel/plugin-transform-dynamic-import@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845
+  checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1"
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66
+  checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
+"@babel/plugin-transform-export-namespace-from@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93
+  checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421
   languageName: node
   linkType: hard
 
@@ -846,86 +1002,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+"@babel/plugin-transform-for-of@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735
+  checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
+"@babel/plugin-transform-function-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6
+  checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
+"@babel/plugin-transform-json-strings@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de
+  checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-literals@npm:7.23.3"
+"@babel/plugin-transform-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed
+  checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
+  checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
+"@babel/plugin-transform-member-expression-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db
+  checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
+"@babel/plugin-transform-modules-amd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2
+  checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73
   languageName: node
   linkType: hard
 
@@ -942,29 +1098,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-systemjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0
+  checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
+"@babel/plugin-transform-modules-umd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5
+  checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083
   languageName: node
   linkType: hard
 
@@ -980,18 +1149,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
+"@babel/plugin-transform-new-target@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b
+  checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11":
   version: 7.23.4
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
   dependencies:
@@ -1003,58 +1172,69 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-numeric-separator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3
+  checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4"
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.3"
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/656f09c4ec629856e807d5b386559166ae417ff75943abce19656b2c6de5101dfd0aaf23f9074e854339370b4e09f57518d3202457046ee5b567ded531005479
+  checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-super@npm:7.23.3"
+"@babel/plugin-transform-object-super@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53
+  checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf
+  checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0":
   version: 7.23.4
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
   dependencies:
@@ -1067,18 +1247,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
+"@babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df
+  checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
+"@babel/plugin-transform-parameters@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-methods@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
   dependencies:
@@ -1090,28 +1283,40 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
+"@babel/plugin-transform-private-methods@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.24.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-property-in-object@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42
+  checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-property-literals@npm:7.23.3"
+"@babel/plugin-transform-property-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9
+  checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715
   languageName: node
   linkType: hard
 
@@ -1137,82 +1342,82 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
+"@babel/plugin-transform-regenerator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     regenerator-transform: "npm:^0.15.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6
+  checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
+"@babel/plugin-transform-reserved-words@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48
+  checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3"
+"@babel/plugin-transform-shorthand-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326
+  checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-spread@npm:7.23.3"
+"@babel/plugin-transform-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-spread@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d
+  checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
+"@babel/plugin-transform-sticky-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949
+  checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-template-literals@npm:7.23.3"
+"@babel/plugin-transform-template-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2
+  checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
+"@babel/plugin-transform-typeof-symbol@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384
+  checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37
   languageName: node
   linkType: hard
 
@@ -1230,72 +1435,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
+"@babel/plugin-transform-unicode-escapes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60
+  checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225
+  checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a
+  checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef
+  checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.23.2":
-  version: 7.23.9
-  resolution: "@babel/preset-env@npm:7.23.9"
+"@babel/preset-env@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
+    "@babel/compat-data": "npm:^7.24.4"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-option": "npm:^7.23.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.23.3"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.23.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.1"
     "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
@@ -1307,63 +1513,63 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoping": "npm:^7.23.4"
-    "@babel/plugin-transform-class-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-class-static-block": "npm:^7.23.4"
-    "@babel/plugin-transform-classes": "npm:^7.23.8"
-    "@babel/plugin-transform-computed-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-destructuring": "npm:^7.23.3"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.23.4"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
-    "@babel/plugin-transform-for-of": "npm:^7.23.6"
-    "@babel/plugin-transform-function-name": "npm:^7.23.3"
-    "@babel/plugin-transform-json-strings": "npm:^7.23.4"
-    "@babel/plugin-transform-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-amd": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.23.3"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.24.4"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.24.4"
+    "@babel/plugin-transform-classes": "npm:^7.24.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-for-of": "npm:^7.24.1"
+    "@babel/plugin-transform-function-name": "npm:^7.24.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.24.1"
+    "@babel/plugin-transform-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.24.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
-    "@babel/plugin-transform-new-target": "npm:^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.23.4"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.23.4"
-    "@babel/plugin-transform-object-super": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.4"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
-    "@babel/plugin-transform-private-methods": "npm:^7.23.3"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4"
-    "@babel/plugin-transform-property-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-regenerator": "npm:^7.23.3"
-    "@babel/plugin-transform-reserved-words": "npm:^7.23.3"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-spread": "npm:^7.23.3"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-template-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3"
+    "@babel/plugin-transform-new-target": "npm:^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-object-super": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.24.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
-    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.4"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     core-js-compat: "npm:^3.31.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0214ac9434a2496eac7f56c0c91164421232ff2083a66e1ccab633ca91e262828e54a5cbdb9036e8fe53d53530b6597aa98c99de8ff07b5193ffd95f21dc9d2c
+  checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8
   languageName: node
   linkType: hard
 
@@ -1450,7 +1656,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9":
+"@babel/template@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/template@npm:7.24.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.23.5"
+    "@babel/parser": "npm:^7.24.0"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9":
   version: 7.23.9
   resolution: "@babel/traverse@npm:7.23.9"
   dependencies:
@@ -1468,6 +1685,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/traverse@npm:7.24.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/generator": "npm:^7.24.1"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.23.9
   resolution: "@babel/types@npm:7.23.9"
@@ -1479,6 +1714,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.24.0":
+  version: 7.24.0
+  resolution: "@babel/types@npm:7.24.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.23.4"
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/a0b4875ce2e132f9daff0d5b27c7f4c4fcc97f2b084bdc5834e92c9d32592778489029e65d99d00c406da612d87b72d7a236c0afccaa1435c028d0c94c9b6da4
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -2250,6 +2496,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  dependencies:
+    "@jridgewell/set-array": "npm:^1.2.1"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2
+  languageName: node
+  linkType: hard
+
 "@jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.2
   resolution: "@jridgewell/resolve-uri@npm:3.1.2"
@@ -2264,6 +2521,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/set-array@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@jridgewell/set-array@npm:1.2.1"
+  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+  languageName: node
+  linkType: hard
+
 "@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.4.15
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
@@ -2281,138 +2545,405 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@mdx-js/react@npm:3.0.1"
+"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+  version: 0.3.25
+  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
+  languageName: node
+  linkType: hard
+
+"@mdx-js/react@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "@mdx-js/react@npm:3.0.1"
+  dependencies:
+    "@types/mdx": "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ">=16"
+    react: ">=16"
+  checksum: 10/d566407af11e76f498f8133fbfa8a9d8a2ad80dc7a66ca109d29fcb92e953a2d2d7aaedc0c28571d126f1967faeb126dd2e4ab4ea474c994bf5c76fa204c5997
+  languageName: node
+  linkType: hard
+
+"@ndelangen/get-tarball@npm:^3.0.7":
+  version: 3.0.9
+  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+  dependencies:
+    gunzip-maybe: "npm:^1.4.2"
+    pump: "npm:^3.0.0"
+    tar-fs: "npm:^2.1.1"
+  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.1
+  resolution: "@npmcli/agent@npm:2.2.1"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.1"
+    lru-cache: "npm:^10.0.1"
+    socks-proxy-agent: "npm:^8.0.1"
+  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@npmcli/fs@npm:3.1.0"
+  dependencies:
+    semver: "npm:^7.3.5"
+  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-core@npm:1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+  dependencies:
+    playwright: "npm:1.42.1"
+    playwright-core: "npm:1.42.1"
+    vite: "npm:^5.0.12"
+  bin:
+    playwright: cli.js
+  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-react@npm:^1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-react@npm:1.42.1"
+  dependencies:
+    "@playwright/experimental-ct-core": "npm:1.42.1"
+    "@vitejs/plugin-react": "npm:^4.2.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/ab9a6475c9466df397c57a65b44343b73caf115b21db2cadd1ab6057c9fef98f024b3caa459543a6686ea11cae3888f56eb40683744df237f5b30abf31d7cc35
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dialog@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
   dependencies:
-    "@types/mdx": "npm:^2.0.0"
+    "@babel/runtime": "npm:^7.13.10"
   peerDependencies:
-    "@types/react": ">=16"
-    react: ">=16"
-  checksum: 10/d566407af11e76f498f8133fbfa8a9d8a2ad80dc7a66ca109d29fcb92e953a2d2d7aaedc0c28571d126f1967faeb126dd2e4ab4ea474c994bf5c76fa204c5997
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
   languageName: node
   linkType: hard
 
-"@ndelangen/get-tarball@npm:^3.0.7":
-  version: 3.0.9
-  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+"@radix-ui/react-focus-scope@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
   dependencies:
-    gunzip-maybe: "npm:^1.4.2"
-    pump: "npm:^3.0.0"
-    tar-fs: "npm:^2.1.1"
-  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
   dependencies:
-    "@nodelib/fs.stat": "npm:2.0.5"
-    run-parallel: "npm:^1.1.9"
-  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
-  languageName: node
-  linkType: hard
-
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.scandir": "npm:2.1.5"
-    fastq: "npm:^1.6.0"
-  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "@npmcli/agent@npm:2.2.1"
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
   dependencies:
-    agent-base: "npm:^7.1.0"
-    http-proxy-agent: "npm:^7.0.0"
-    https-proxy-agent: "npm:^7.0.1"
-    lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f
   languageName: node
   linkType: hard
 
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-core@npm:1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
   dependencies:
-    playwright: "npm:1.42.1"
-    playwright-core: "npm:1.42.1"
-    vite: "npm:^5.0.12"
-  bin:
-    playwright: cli.js
-  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-react@npm:^1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-react@npm:1.42.1"
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
   dependencies:
-    "@playwright/experimental-ct-core": "npm:1.42.1"
-    "@vitejs/plugin-react": "npm:^4.2.1"
-  bin:
-    playwright: cli.js
-  checksum: 10/ab9a6475c9466df397c57a65b44343b73caf115b21db2cadd1ab6057c9fef98f024b3caa459543a6686ea11cae3888f56eb40683744df237f5b30abf31d7cc35
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@radix-ui/react-slot@npm:1.0.2"
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
-    "@radix-ui/react-compose-refs": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
+  checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
   languageName: node
   linkType: hard
 
@@ -2583,11 +3114,9 @@ __metadata:
   resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-react%40workspace%3A."
   dependencies:
     "@storybook/blocks": "workspace:*"
-    "@storybook/core-common": "workspace:*"
-    cjs-module-lexer: "npm:^1.2.3"
-    es-module-lexer: "npm:^1.5.0"
-    globby: "npm:^14.0.1"
+    dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
+    telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2596,7 +3125,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-react%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.12.3"
+    "@babel/core": "npm:^7.24.4"
     "@mdx-js/react": "npm:^3.0.0"
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2701,7 +3230,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -2805,8 +3334,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-react%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.0"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -2859,10 +3388,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-react%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -2881,9 +3410,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-react%40workspace%3A."
   dependencies:
+    "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/theming": "workspace:*"
@@ -2921,6 +3451,7 @@ __metadata:
     node-fetch: "npm:^2.0.0"
     picomatch: "npm:^2.3.0"
     pkg-dir: "npm:^5.0.0"
+    prettier-fallback: "npm:prettier@^3"
     pretty-hrtime: "npm:^1.0.3"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.3.7"
@@ -2928,6 +3459,11 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util: "npm:^0.12.4"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   languageName: node
   linkType: soft
 
@@ -2935,6 +3471,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-react%40workspace%3A."
   dependencies:
+    "@storybook/csf": "npm:^0.1.4"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2944,13 +3481,14 @@ __metadata:
   resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-react%40workspace%3A."
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
-    "@babel/core": "npm:^7.23.9"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
     "@discoveryjs/json-ext": "npm:^0.5.3"
     "@storybook/builder-manager": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
@@ -2961,6 +3499,7 @@ __metadata:
     "@storybook/telemetry": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/detect-port": "npm:^1.3.0"
+    "@types/diff": "npm:^5.0.9"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -2969,6 +3508,7 @@ __metadata:
     cli-table3: "npm:^0.6.1"
     compression: "npm:^1.7.4"
     detect-port: "npm:^1.3.0"
+    diff: "npm:^5.2.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
@@ -3002,11 +3542,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-react%40workspace%3A."
   dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/types": "workspace:*"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.5"
@@ -3023,12 +3563,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "@storybook/csf@npm:0.1.2"
+"@storybook/csf@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@storybook/csf@npm:0.1.4"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c
+  checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156
   languageName: node
   linkType: hard
 
@@ -3044,6 +3584,7 @@ __metadata:
   resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-react%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
+    "@storybook/core-events": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/doctrine": "npm:^0.0.3"
@@ -3091,7 +3632,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -3125,7 +3666,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -3248,7 +3789,6 @@ __metadata:
     "@testing-library/user-event": "npm:^14.5.2"
     "@vitest/expect": "npm:1.3.1"
     "@vitest/spy": "npm:^1.3.1"
-    chai: "npm:^4.4.1"
     util: "npm:^0.12.4"
   languageName: node
   linkType: soft
@@ -3587,6 +4127,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff@npm:^5.0.9":
+  version: 5.2.0
+  resolution: "@types/diff@npm:5.2.0"
+  checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/doctrine@npm:0.0.3"
@@ -4464,6 +5011,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -4653,39 +5209,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.8":
-  version: 0.4.8
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8"
+"babel-plugin-polyfill-corejs2@npm:^0.4.10":
+  version: 0.4.11
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/6b5a79bdc1c43edf857fd3a82966b3c7ff4a90eee00ca8d663e0a98304d6e285a05759d64a4dbc16e04a2a5ea1f248673d8bf789711be5e694e368f19884887c
+  checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0"
+"babel-plugin-polyfill-corejs3@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
-    core-js-compat: "npm:^3.34.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    core-js-compat: "npm:^3.36.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd
+  checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5"
+"babel-plugin-polyfill-regenerator@npm:^0.6.1":
+  version: 0.6.2
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6
+  checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f
   languageName: node
   linkType: hard
 
@@ -4867,7 +5423,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3":
+"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0":
   version: 4.23.0
   resolution: "browserslist@npm:4.23.0"
   dependencies:
@@ -5003,7 +5559,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^4.3.10, chai@npm:^4.4.1":
+"chai@npm:^4.3.10":
   version: 4.4.1
   resolution: "chai@npm:4.4.1"
   dependencies:
@@ -5121,7 +5677,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cjs-module-lexer@npm:^1.0.0, cjs-module-lexer@npm:^1.2.3":
+"cjs-module-lexer@npm:^1.0.0":
   version: 1.2.3
   resolution: "cjs-module-lexer@npm:1.2.3"
   checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c
@@ -5361,7 +5917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
+"core-js-compat@npm:^3.31.0":
   version: 3.36.0
   resolution: "core-js-compat@npm:3.36.0"
   dependencies:
@@ -5370,6 +5926,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js-compat@npm:^3.36.1":
+  version: 3.37.0
+  resolution: "core-js-compat@npm:3.37.0"
+  dependencies:
+    browserslist: "npm:^4.23.0"
+  checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d
+  languageName: node
+  linkType: hard
+
 "core-util-is@npm:1.0.2":
   version: 1.0.2
   resolution: "core-util-is@npm:1.0.2"
@@ -5746,6 +6311,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-package-manager@npm:^2.0.1":
   version: 2.0.1
   resolution: "detect-package-manager@npm:2.0.1"
@@ -5775,6 +6347,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "diff@npm:5.2.0"
+  checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -7030,6 +7609,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-npm-tarball-url@npm:^2.0.3":
   version: 2.1.0
   resolution: "get-npm-tarball-url@npm:2.1.0"
@@ -7616,6 +8202,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -8978,7 +9573,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.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:
@@ -10056,7 +10651,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1":
+"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1":
   version: 3.2.5
   resolution: "prettier@npm:3.2.5"
   bin:
@@ -10387,6 +10982,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88
+  languageName: node
+  linkType: hard
+
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -11625,7 +12272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -11938,6 +12585,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "use-callback-ref@npm:1.3.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
index 24ddbf299123..6f1ba695f773 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
@@ -50,6 +50,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/compat-data@npm:7.23.5"
@@ -57,7 +67,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.12.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9":
+"@babel/compat-data@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/compat-data@npm:7.24.4"
+  checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.23.0":
   version: 7.24.0
   resolution: "@babel/core@npm:7.24.0"
   dependencies:
@@ -80,7 +97,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6":
+"@babel/core@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
   dependencies:
@@ -92,6 +132,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -110,7 +162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/helper-compilation-targets@npm:7.23.6"
   dependencies:
@@ -142,6 +194,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -155,9 +226,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0"
+"@babel/helper-define-polyfill-provider@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -166,13 +237,13 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03
+  checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1"
+"@babel/helper-define-polyfill-provider@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -181,7 +252,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523
+  checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff
   languageName: node
   linkType: hard
 
@@ -229,6 +300,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.1":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
@@ -286,6 +366,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-replace-supers@npm:7.24.1"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -356,6 +449,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helpers@npm:7.24.4"
+  dependencies:
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -367,6 +471,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0":
   version: 7.24.0
   resolution: "@babel/parser@npm:7.24.0"
@@ -376,39 +492,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
+"@babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/parser@npm:7.24.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232
+  checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2
+  checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548
+  checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa
   languageName: node
   linkType: hard
 
@@ -487,25 +624,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
+"@babel/plugin-syntax-import-assertions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7
+  checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
+"@babel/plugin-syntax-import-attributes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e
+  checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e
   languageName: node
   linkType: hard
 
@@ -653,67 +790,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3"
+"@babel/plugin-transform-arrow-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66
+  checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
+"@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0
+  checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c
+  checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020
+  checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+"@babel/plugin-transform-block-scoping@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b
+  checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
+"@babel/plugin-transform-class-properties@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
   dependencies:
@@ -725,116 +862,128 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
+"@babel/plugin-transform-class-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e
+  checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+"@babel/plugin-transform-classes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-classes@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23
+  checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
+"@babel/plugin-transform-computed-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/template": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/template": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad
+  checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-destructuring@npm:7.23.3"
+"@babel/plugin-transform-destructuring@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-destructuring@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed
+  checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
+"@babel/plugin-transform-dotall-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3
+  checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
+"@babel/plugin-transform-duplicate-keys@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16
+  checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
+"@babel/plugin-transform-dynamic-import@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845
+  checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1"
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66
+  checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
+"@babel/plugin-transform-export-namespace-from@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93
+  checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421
   languageName: node
   linkType: hard
 
@@ -850,86 +999,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+"@babel/plugin-transform-for-of@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735
+  checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
+"@babel/plugin-transform-function-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6
+  checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
+"@babel/plugin-transform-json-strings@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de
+  checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-literals@npm:7.23.3"
+"@babel/plugin-transform-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed
+  checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
+  checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
+"@babel/plugin-transform-member-expression-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db
+  checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
+"@babel/plugin-transform-modules-amd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2
+  checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73
   languageName: node
   linkType: hard
 
@@ -946,29 +1095,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-systemjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0
+  checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
+"@babel/plugin-transform-modules-umd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5
+  checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083
   languageName: node
   linkType: hard
 
@@ -984,18 +1146,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
+"@babel/plugin-transform-new-target@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b
+  checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11":
   version: 7.23.4
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
   dependencies:
@@ -1007,58 +1169,69 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-numeric-separator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3
+  checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0"
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1dfafd9461723769b29f724fcbdca974c4280f68a9e03c8ff412643ffe88930755f093f9cbf919cdb6d0d53751614892dd2882bccad286e14e9e995c5a8242ed
+  checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-super@npm:7.23.3"
+"@babel/plugin-transform-object-super@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53
+  checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf
+  checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0":
   version: 7.23.4
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
   dependencies:
@@ -1071,18 +1244,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
+"@babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-parameters@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df
+  checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
+"@babel/plugin-transform-private-methods@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
   dependencies:
@@ -1094,107 +1280,119 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
+"@babel/plugin-transform-private-methods@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.24.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-property-in-object@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42
+  checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-property-literals@npm:7.23.3"
+"@babel/plugin-transform-property-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9
+  checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
+"@babel/plugin-transform-regenerator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     regenerator-transform: "npm:^0.15.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6
+  checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
+"@babel/plugin-transform-reserved-words@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48
+  checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3"
+"@babel/plugin-transform-shorthand-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326
+  checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-spread@npm:7.23.3"
+"@babel/plugin-transform-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-spread@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d
+  checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
+"@babel/plugin-transform-sticky-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949
+  checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-template-literals@npm:7.23.3"
+"@babel/plugin-transform-template-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2
+  checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
+"@babel/plugin-transform-typeof-symbol@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384
+  checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37
   languageName: node
   linkType: hard
 
@@ -1212,72 +1410,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
+"@babel/plugin-transform-unicode-escapes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60
+  checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225
+  checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a
+  checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef
+  checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.23.2":
-  version: 7.24.0
-  resolution: "@babel/preset-env@npm:7.24.0"
+"@babel/preset-env@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
+    "@babel/compat-data": "npm:^7.24.4"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-option": "npm:^7.23.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.23.3"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.23.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.1"
     "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
@@ -1289,63 +1488,63 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoping": "npm:^7.23.4"
-    "@babel/plugin-transform-class-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-class-static-block": "npm:^7.23.4"
-    "@babel/plugin-transform-classes": "npm:^7.23.8"
-    "@babel/plugin-transform-computed-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-destructuring": "npm:^7.23.3"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.23.4"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
-    "@babel/plugin-transform-for-of": "npm:^7.23.6"
-    "@babel/plugin-transform-function-name": "npm:^7.23.3"
-    "@babel/plugin-transform-json-strings": "npm:^7.23.4"
-    "@babel/plugin-transform-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-amd": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.23.3"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.24.4"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.24.4"
+    "@babel/plugin-transform-classes": "npm:^7.24.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-for-of": "npm:^7.24.1"
+    "@babel/plugin-transform-function-name": "npm:^7.24.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.24.1"
+    "@babel/plugin-transform-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.24.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
-    "@babel/plugin-transform-new-target": "npm:^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.23.4"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.0"
-    "@babel/plugin-transform-object-super": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.4"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
-    "@babel/plugin-transform-private-methods": "npm:^7.23.3"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4"
-    "@babel/plugin-transform-property-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-regenerator": "npm:^7.23.3"
-    "@babel/plugin-transform-reserved-words": "npm:^7.23.3"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-spread": "npm:^7.23.3"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-template-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3"
+    "@babel/plugin-transform-new-target": "npm:^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-object-super": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.24.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
-    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.4"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     core-js-compat: "npm:^3.31.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/88bca150a09e658124997178ee1ff375a9aceecfd70ec11c7ccc12e82f5be5f7ff2ddfefba5b10fb617891645f92949392b350509de9742d2aa138f42959e190
+  checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8
   languageName: node
   linkType: hard
 
@@ -1432,7 +1631,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.0":
+"@babel/traverse@npm:^7.24.0":
   version: 7.24.0
   resolution: "@babel/traverse@npm:7.24.0"
   dependencies:
@@ -1450,6 +1649,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/traverse@npm:7.24.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/generator": "npm:^7.24.1"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.24.0
   resolution: "@babel/types@npm:7.24.0"
@@ -1939,7 +2156,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24":
+"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -1961,126 +2178,383 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ndelangen/get-tarball@npm:^3.0.7":
-  version: 3.0.9
-  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+"@ndelangen/get-tarball@npm:^3.0.7":
+  version: 3.0.9
+  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+  dependencies:
+    gunzip-maybe: "npm:^1.4.2"
+    pump: "npm:^3.0.0"
+    tar-fs: "npm:^2.1.1"
+  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.1
+  resolution: "@npmcli/agent@npm:2.2.1"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.1"
+    lru-cache: "npm:^10.0.1"
+    socks-proxy-agent: "npm:^8.0.1"
+  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@npmcli/fs@npm:3.1.0"
+  dependencies:
+    semver: "npm:^7.3.5"
+  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-core@npm:1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+  dependencies:
+    playwright: "npm:1.42.1"
+    playwright-core: "npm:1.42.1"
+    vite: "npm:^5.0.12"
+  bin:
+    playwright: cli.js
+  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-svelte@npm:^1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-svelte@npm:1.42.1"
+  dependencies:
+    "@playwright/experimental-ct-core": "npm:1.42.1"
+    "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/444ef225523b6864b91b4568acf4fc8e6aa447efd29c1e824fbcbc56c1c5a23802dcb27a81cd0b1d99319db2c6bac475ba00aa3b18b12947d84691e20d9634b9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dialog@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
   dependencies:
-    gunzip-maybe: "npm:^1.4.2"
-    pump: "npm:^3.0.0"
-    tar-fs: "npm:^2.1.1"
-  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@radix-ui/react-focus-scope@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.stat": "npm:2.0.5"
-    run-parallel: "npm:^1.1.9"
-  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9
   languageName: node
   linkType: hard
 
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.scandir": "npm:2.1.5"
-    fastq: "npm:^1.6.0"
-  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "@npmcli/agent@npm:2.2.1"
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
   dependencies:
-    agent-base: "npm:^7.1.0"
-    http-proxy-agent: "npm:^7.0.0"
-    https-proxy-agent: "npm:^7.0.1"
-    lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f
   languageName: node
   linkType: hard
 
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-core@npm:1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
   dependencies:
-    playwright: "npm:1.42.1"
-    playwright-core: "npm:1.42.1"
-    vite: "npm:^5.0.12"
-  bin:
-    playwright: cli.js
-  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-svelte@npm:^1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-svelte@npm:1.42.1"
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
   dependencies:
-    "@playwright/experimental-ct-core": "npm:1.42.1"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
-  bin:
-    playwright: cli.js
-  checksum: 10/444ef225523b6864b91b4568acf4fc8e6aa447efd29c1e824fbcbc56c1c5a23802dcb27a81cd0b1d99319db2c6bac475ba00aa3b18b12947d84691e20d9634b9
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@radix-ui/react-slot@npm:1.0.2"
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
-    "@radix-ui/react-compose-refs": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
+  checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
   languageName: node
   linkType: hard
 
@@ -2217,11 +2691,9 @@ __metadata:
   resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
     "@storybook/blocks": "workspace:*"
-    "@storybook/core-common": "workspace:*"
-    cjs-module-lexer: "npm:^1.2.3"
-    es-module-lexer: "npm:^1.5.0"
-    globby: "npm:^14.0.1"
+    dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
+    telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2230,7 +2702,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.12.3"
+    "@babel/core": "npm:^7.24.4"
     "@mdx-js/react": "npm:^3.0.0"
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2335,7 +2807,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -2439,8 +2911,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.0"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -2493,10 +2965,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -2515,9 +2987,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
+    "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/theming": "workspace:*"
@@ -2555,6 +3028,7 @@ __metadata:
     node-fetch: "npm:^2.0.0"
     picomatch: "npm:^2.3.0"
     pkg-dir: "npm:^5.0.0"
+    prettier-fallback: "npm:prettier@^3"
     pretty-hrtime: "npm:^1.0.3"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.3.7"
@@ -2562,6 +3036,11 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util: "npm:^0.12.4"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   languageName: node
   linkType: soft
 
@@ -2569,6 +3048,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
+    "@storybook/csf": "npm:^0.1.4"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2578,13 +3058,14 @@ __metadata:
   resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
-    "@babel/core": "npm:^7.23.9"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
     "@discoveryjs/json-ext": "npm:^0.5.3"
     "@storybook/builder-manager": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
@@ -2595,6 +3076,7 @@ __metadata:
     "@storybook/telemetry": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/detect-port": "npm:^1.3.0"
+    "@types/diff": "npm:^5.0.9"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -2603,6 +3085,7 @@ __metadata:
     cli-table3: "npm:^0.6.1"
     compression: "npm:^1.7.4"
     detect-port: "npm:^1.3.0"
+    diff: "npm:^5.2.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
@@ -2636,11 +3119,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/types": "workspace:*"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.5"
@@ -2648,12 +3131,12 @@ __metadata:
   languageName: node
   linkType: soft
 
-"@storybook/csf@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "@storybook/csf@npm:0.1.2"
+"@storybook/csf@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@storybook/csf@npm:0.1.4"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c
+  checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156
   languageName: node
   linkType: hard
 
@@ -2669,6 +3152,7 @@ __metadata:
   resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-svelte%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
+    "@storybook/core-events": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/doctrine": "npm:^0.0.3"
@@ -2716,7 +3200,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -2750,7 +3234,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -2853,7 +3337,6 @@ __metadata:
     "@testing-library/user-event": "npm:^14.5.2"
     "@vitest/expect": "npm:1.3.1"
     "@vitest/spy": "npm:^1.3.1"
-    chai: "npm:^4.4.1"
     util: "npm:^0.12.4"
   languageName: node
   linkType: soft
@@ -3036,6 +3519,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff@npm:^5.0.9":
+  version: 5.2.0
+  resolution: "@types/diff@npm:5.2.0"
+  checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/doctrine@npm:0.0.3"
@@ -3547,6 +4037,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -3703,39 +4202,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.8":
-  version: 0.4.10
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.10"
+"babel-plugin-polyfill-corejs2@npm:^0.4.10":
+  version: 0.4.11
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/9fb5e59a3235eba66fb05060b2a3ecd6923084f100df7526ab74b6272347d7adcf99e17366b82df36e592cde4e82fdb7ae24346a990eced76c7d504cac243400
+  checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0"
+"babel-plugin-polyfill-corejs3@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
-    core-js-compat: "npm:^3.34.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    core-js-compat: "npm:^3.36.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd
+  checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5"
+"babel-plugin-polyfill-regenerator@npm:^0.6.1":
+  version: 0.6.2
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6
+  checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f
   languageName: node
   linkType: hard
 
@@ -3883,7 +4382,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3":
+"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0":
   version: 4.23.0
   resolution: "browserslist@npm:4.23.0"
   dependencies:
@@ -4003,7 +4502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^4.3.10, chai@npm:^4.4.1":
+"chai@npm:^4.3.10":
   version: 4.4.1
   resolution: "chai@npm:4.4.1"
   dependencies:
@@ -4114,13 +4613,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cjs-module-lexer@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "cjs-module-lexer@npm:1.2.3"
-  checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -4342,7 +4834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
+"core-js-compat@npm:^3.31.0":
   version: 3.36.0
   resolution: "core-js-compat@npm:3.36.0"
   dependencies:
@@ -4351,6 +4843,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js-compat@npm:^3.36.1":
+  version: 3.37.0
+  resolution: "core-js-compat@npm:3.37.0"
+  dependencies:
+    browserslist: "npm:^4.23.0"
+  checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d
+  languageName: node
+  linkType: hard
+
 "core-util-is@npm:1.0.2":
   version: 1.0.2
   resolution: "core-util-is@npm:1.0.2"
@@ -4686,6 +5187,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-package-manager@npm:^2.0.1":
   version: 2.0.1
   resolution: "detect-package-manager@npm:2.0.1"
@@ -4715,6 +5223,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "diff@npm:5.2.0"
+  checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -5934,6 +6449,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-npm-tarball-url@npm:^2.0.3":
   version: 2.1.0
   resolution: "get-npm-tarball-url@npm:2.1.0"
@@ -6451,6 +6973,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -7297,7 +7828,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -8392,7 +8923,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1":
+"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1":
   version: 3.2.5
   resolution: "prettier@npm:3.2.5"
   bin:
@@ -8650,6 +9181,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88
+  languageName: node
+  linkType: hard
+
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -9958,7 +10541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -10260,6 +10843,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "use-callback-ref@npm:1.3.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
index bab162b80aac..ea28f0f35a1b 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
@@ -50,6 +50,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/compat-data@npm:7.23.5"
@@ -57,7 +67,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.12.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9":
+"@babel/compat-data@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/compat-data@npm:7.24.4"
+  checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.23.0":
   version: 7.24.0
   resolution: "@babel/core@npm:7.24.0"
   dependencies:
@@ -80,7 +97,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6":
+"@babel/core@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helpers": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/generator@npm:7.23.6"
   dependencies:
@@ -92,6 +132,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/generator@npm:7.24.4"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -110,7 +162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6":
   version: 7.23.6
   resolution: "@babel/helper-compilation-targets@npm:7.23.6"
   dependencies:
@@ -142,6 +194,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
@@ -155,9 +226,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0"
+"@babel/helper-define-polyfill-provider@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -166,13 +237,13 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03
+  checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1"
+"@babel/helper-define-polyfill-provider@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -181,7 +252,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523
+  checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff
   languageName: node
   linkType: hard
 
@@ -229,6 +300,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.24.1":
+  version: 7.24.3
+  resolution: "@babel/helper-module-imports@npm:7.24.3"
+  dependencies:
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-transforms@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/helper-module-transforms@npm:7.23.3"
@@ -286,6 +366,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/helper-replace-supers@npm:7.24.1"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-member-expression-to-functions": "npm:^7.23.0"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -356,6 +449,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/helpers@npm:7.24.4"
+  dependencies:
+    "@babel/template": "npm:^7.24.0"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+  checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -367,6 +471,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
   version: 7.24.0
   resolution: "@babel/parser@npm:7.24.0"
@@ -376,39 +492,60 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
+"@babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/parser@npm:7.24.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232
+  checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.3"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.13.0
-  checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2
+  checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7":
-  version: 7.23.7
-  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7"
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548
+  checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa
   languageName: node
   linkType: hard
 
@@ -487,25 +624,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3"
+"@babel/plugin-syntax-import-assertions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7
+  checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
+"@babel/plugin-syntax-import-attributes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e
+  checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e
   languageName: node
   linkType: hard
 
@@ -653,67 +790,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3"
+"@babel/plugin-transform-arrow-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66
+  checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9"
+"@babel/plugin-transform-async-generator-functions@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3"
   dependencies:
     "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0
+  checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
+"@babel/plugin-transform-async-to-generator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c
+  checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
+"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020
+  checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4"
+"@babel/plugin-transform-block-scoping@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b
+  checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3":
+"@babel/plugin-transform-class-properties@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
   dependencies:
@@ -725,116 +862,128 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4"
+"@babel/plugin-transform-class-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-class-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.4"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.12.0
-  checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e
+  checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8":
-  version: 7.23.8
-  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+"@babel/plugin-transform-classes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-classes@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-environment-visitor": "npm:^7.22.20"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
     globals: "npm:^11.1.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23
+  checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
+"@babel/plugin-transform-computed-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/template": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/template": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad
+  checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-destructuring@npm:7.23.3"
+"@babel/plugin-transform-destructuring@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-destructuring@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed
+  checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
+"@babel/plugin-transform-dotall-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3
+  checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
+"@babel/plugin-transform-duplicate-keys@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16
+  checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4"
+"@babel/plugin-transform-dynamic-import@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845
+  checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
+"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1"
   dependencies:
     "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66
+  checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4"
+"@babel/plugin-transform-export-namespace-from@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93
+  checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421
   languageName: node
   linkType: hard
 
@@ -850,86 +999,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+"@babel/plugin-transform-for-of@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-for-of@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735
+  checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
+"@babel/plugin-transform-function-name@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-function-name@npm:7.24.1"
   dependencies:
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6
+  checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-json-strings@npm:7.23.4"
+"@babel/plugin-transform-json-strings@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-json-strings@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de
+  checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-literals@npm:7.23.3"
+"@babel/plugin-transform-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed
+  checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4"
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5
+  checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
+"@babel/plugin-transform-member-expression-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db
+  checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-amd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
+"@babel/plugin-transform-modules-amd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2
+  checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73
   languageName: node
   linkType: hard
 
@@ -946,29 +1095,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9":
-  version: 7.23.9
-  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9"
+"@babel/plugin-transform-modules-commonjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.3"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-systemjs@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1"
   dependencies:
     "@babel/helper-hoist-variables": "npm:^7.22.5"
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-identifier": "npm:^7.22.20"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0
+  checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
+"@babel/plugin-transform-modules-umd@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1"
   dependencies:
     "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5
+  checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083
   languageName: node
   linkType: hard
 
@@ -984,18 +1146,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
+"@babel/plugin-transform-new-target@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-new-target@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b
+  checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11":
   version: 7.23.4
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4"
   dependencies:
@@ -1007,58 +1169,69 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4"
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-numeric-separator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3
+  checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.24.0":
-  version: 7.24.0
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0"
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/1dfafd9461723769b29f724fcbdca974c4280f68a9e03c8ff412643ffe88930755f093f9cbf919cdb6d0d53751614892dd2882bccad286e14e9e995c5a8242ed
+  checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-object-super@npm:7.23.3"
+"@babel/plugin-transform-object-super@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-object-super@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-replace-supers": "npm:^7.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53
+  checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4"
+"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf
+  checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4":
+"@babel/plugin-transform-optional-chaining@npm:^7.23.0":
   version: 7.23.4
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4"
   dependencies:
@@ -1071,18 +1244,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
+"@babel/plugin-transform-optional-chaining@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-parameters@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-parameters@npm:7.24.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df
+  checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3":
+"@babel/plugin-transform-private-methods@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
   dependencies:
@@ -1094,107 +1280,119 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4":
-  version: 7.23.4
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4"
+"@babel/plugin-transform-private-methods@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-methods@npm:7.24.1"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-private-property-in-object@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.24.1"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42
+  checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-property-literals@npm:7.23.3"
+"@babel/plugin-transform-property-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-property-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9
+  checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-regenerator@npm:7.23.3"
+"@babel/plugin-transform-regenerator@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-regenerator@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     regenerator-transform: "npm:^0.15.2"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6
+  checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
+"@babel/plugin-transform-reserved-words@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48
+  checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3"
+"@babel/plugin-transform-shorthand-properties@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326
+  checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-spread@npm:7.23.3"
+"@babel/plugin-transform-spread@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-spread@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d
+  checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
+"@babel/plugin-transform-sticky-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949
+  checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-template-literals@npm:7.23.3"
+"@babel/plugin-transform-template-literals@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-template-literals@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2
+  checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
+"@babel/plugin-transform-typeof-symbol@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384
+  checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37
   languageName: node
   linkType: hard
 
@@ -1212,72 +1410,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
+"@babel/plugin-transform-unicode-escapes@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60
+  checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225
+  checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a
+  checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1"
   dependencies:
     "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15"
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef
+  checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.23.2":
-  version: 7.24.0
-  resolution: "@babel/preset-env@npm:7.24.0"
+"@babel/preset-env@npm:^7.24.4":
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
   dependencies:
-    "@babel/compat-data": "npm:^7.23.5"
+    "@babel/compat-data": "npm:^7.24.4"
     "@babel/helper-compilation-targets": "npm:^7.23.6"
     "@babel/helper-plugin-utils": "npm:^7.24.0"
     "@babel/helper-validator-option": "npm:^7.23.5"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1"
     "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
     "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
     "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
     "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
-    "@babel/plugin-syntax-import-assertions": "npm:^7.23.3"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.23.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.24.1"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.1"
     "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
     "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
@@ -1289,63 +1488,63 @@ __metadata:
     "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
     "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
-    "@babel/plugin-transform-arrow-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3"
-    "@babel/plugin-transform-block-scoping": "npm:^7.23.4"
-    "@babel/plugin-transform-class-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-class-static-block": "npm:^7.23.4"
-    "@babel/plugin-transform-classes": "npm:^7.23.8"
-    "@babel/plugin-transform-computed-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-destructuring": "npm:^7.23.3"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.23.4"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
-    "@babel/plugin-transform-for-of": "npm:^7.23.6"
-    "@babel/plugin-transform-function-name": "npm:^7.23.3"
-    "@babel/plugin-transform-json-strings": "npm:^7.23.4"
-    "@babel/plugin-transform-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-amd": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9"
-    "@babel/plugin-transform-modules-umd": "npm:^7.23.3"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1"
+    "@babel/plugin-transform-block-scoping": "npm:^7.24.4"
+    "@babel/plugin-transform-class-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-class-static-block": "npm:^7.24.4"
+    "@babel/plugin-transform-classes": "npm:^7.24.1"
+    "@babel/plugin-transform-computed-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-destructuring": "npm:^7.24.1"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.24.1"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1"
+    "@babel/plugin-transform-for-of": "npm:^7.24.1"
+    "@babel/plugin-transform-function-name": "npm:^7.24.1"
+    "@babel/plugin-transform-json-strings": "npm:^7.24.1"
+    "@babel/plugin-transform-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-amd": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1"
+    "@babel/plugin-transform-modules-umd": "npm:^7.24.1"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
-    "@babel/plugin-transform-new-target": "npm:^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.23.4"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.0"
-    "@babel/plugin-transform-object-super": "npm:^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.23.4"
-    "@babel/plugin-transform-parameters": "npm:^7.23.3"
-    "@babel/plugin-transform-private-methods": "npm:^7.23.3"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4"
-    "@babel/plugin-transform-property-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-regenerator": "npm:^7.23.3"
-    "@babel/plugin-transform-reserved-words": "npm:^7.23.3"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3"
-    "@babel/plugin-transform-spread": "npm:^7.23.3"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-template-literals": "npm:^7.23.3"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.23.3"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3"
+    "@babel/plugin-transform-new-target": "npm:^7.24.1"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.24.1"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-object-super": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.24.1"
+    "@babel/plugin-transform-parameters": "npm:^7.24.1"
+    "@babel/plugin-transform-private-methods": "npm:^7.24.1"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1"
+    "@babel/plugin-transform-property-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-regenerator": "npm:^7.24.1"
+    "@babel/plugin-transform-reserved-words": "npm:^7.24.1"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1"
+    "@babel/plugin-transform-spread": "npm:^7.24.1"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-template-literals": "npm:^7.24.1"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.24.1"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2: "npm:^0.4.8"
-    babel-plugin-polyfill-corejs3: "npm:^0.9.0"
-    babel-plugin-polyfill-regenerator: "npm:^0.5.5"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.10"
+    babel-plugin-polyfill-corejs3: "npm:^0.10.4"
+    babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     core-js-compat: "npm:^3.31.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10/88bca150a09e658124997178ee1ff375a9aceecfd70ec11c7ccc12e82f5be5f7ff2ddfefba5b10fb617891645f92949392b350509de9742d2aa138f42959e190
+  checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8
   languageName: node
   linkType: hard
 
@@ -1432,7 +1631,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.0":
+"@babel/traverse@npm:^7.24.0":
   version: 7.24.0
   resolution: "@babel/traverse@npm:7.24.0"
   dependencies:
@@ -1450,6 +1649,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.24.1":
+  version: 7.24.1
+  resolution: "@babel/traverse@npm:7.24.1"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/generator": "npm:^7.24.1"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6":
   version: 7.24.0
   resolution: "@babel/types@npm:7.24.0"
@@ -1971,7 +2188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.24":
+"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -1993,126 +2210,383 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ndelangen/get-tarball@npm:^3.0.7":
-  version: 3.0.9
-  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+"@ndelangen/get-tarball@npm:^3.0.7":
+  version: 3.0.9
+  resolution: "@ndelangen/get-tarball@npm:3.0.9"
+  dependencies:
+    gunzip-maybe: "npm:^1.4.2"
+    pump: "npm:^3.0.0"
+    tar-fs: "npm:^2.1.1"
+  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.1
+  resolution: "@npmcli/agent@npm:2.2.1"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.1"
+    lru-cache: "npm:^10.0.1"
+    socks-proxy-agent: "npm:^8.0.1"
+  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@npmcli/fs@npm:3.1.0"
+  dependencies:
+    semver: "npm:^7.3.5"
+  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-core@npm:1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+  dependencies:
+    playwright: "npm:1.42.1"
+    playwright-core: "npm:1.42.1"
+    vite: "npm:^5.0.12"
+  bin:
+    playwright: cli.js
+  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-vue@npm:^1.42.1":
+  version: 1.42.1
+  resolution: "@playwright/experimental-ct-vue@npm:1.42.1"
+  dependencies:
+    "@playwright/experimental-ct-core": "npm:1.42.1"
+    "@vitejs/plugin-vue": "npm:^4.2.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/c9511f965cd44999697d30065647df79bb352e7b5f670decdaf1f9b6f1928b22ce5d399a9acffabce66c14c97cee7ced0d94c5cc748e5a53b3934bfe127e4fea
+  languageName: node
+  linkType: hard
+
+"@radix-ui/primitive@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/primitive@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-compose-refs@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-context@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-context@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dialog@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dialog@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-dismissable-layer@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+    "@radix-ui/react-use-escape-keydown": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-focus-guards@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
   dependencies:
-    gunzip-maybe: "npm:^1.4.2"
-    pump: "npm:^3.0.0"
-    tar-fs: "npm:^2.1.1"
-  checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7
   languageName: node
   linkType: hard
 
-"@nodelib/fs.scandir@npm:2.1.5":
-  version: 2.1.5
-  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+"@radix-ui/react-focus-scope@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.stat": "npm:2.0.5"
-    run-parallel: "npm:^1.1.9"
-  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9
   languageName: node
   linkType: hard
 
-"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
-  version: 2.0.5
-  resolution: "@nodelib/fs.stat@npm:2.0.5"
-  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+"@radix-ui/react-id@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-id@npm:1.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
-  version: 1.2.8
-  resolution: "@nodelib/fs.walk@npm:1.2.8"
+"@radix-ui/react-portal@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@radix-ui/react-portal@npm:1.0.4"
   dependencies:
-    "@nodelib/fs.scandir": "npm:2.1.5"
-    fastq: "npm:^1.6.0"
-  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^2.0.0":
-  version: 2.2.1
-  resolution: "@npmcli/agent@npm:2.2.1"
+"@radix-ui/react-presence@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-presence@npm:1.0.1"
   dependencies:
-    agent-base: "npm:^7.1.0"
-    http-proxy-agent: "npm:^7.0.0"
-    https-proxy-agent: "npm:^7.0.1"
-    lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.1"
-  checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-use-layout-effect": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+"@radix-ui/react-primitive@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-slot": "npm:1.0.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f
   languageName: node
   linkType: hard
 
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@radix-ui/react-slot@npm:1.0.2"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-core@npm:1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-core@npm:1.42.1"
+"@radix-ui/react-use-callback-ref@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
   dependencies:
-    playwright: "npm:1.42.1"
-    playwright-core: "npm:1.42.1"
-    vite: "npm:^5.0.12"
-  bin:
-    playwright: cli.js
-  checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d
+    "@babel/runtime": "npm:^7.13.10"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c
   languageName: node
   linkType: hard
 
-"@playwright/experimental-ct-vue@npm:^1.42.1":
-  version: 1.42.1
-  resolution: "@playwright/experimental-ct-vue@npm:1.42.1"
+"@radix-ui/react-use-controllable-state@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
   dependencies:
-    "@playwright/experimental-ct-core": "npm:1.42.1"
-    "@vitejs/plugin-vue": "npm:^4.2.1"
-  bin:
-    playwright: cli.js
-  checksum: 10/c9511f965cd44999697d30065647df79bb352e7b5f670decdaf1f9b6f1928b22ce5d399a9acffabce66c14c97cee7ced0d94c5cc748e5a53b3934bfe127e4fea
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
+"@radix-ui/react-use-escape-keydown@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/react-use-callback-ref": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8
+  checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@radix-ui/react-slot@npm:1.0.2"
+"@radix-ui/react-use-layout-effect@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
   dependencies:
     "@babel/runtime": "npm:^7.13.10"
-    "@radix-ui/react-compose-refs": "npm:1.0.1"
   peerDependencies:
     "@types/react": "*"
     react: ^16.8 || ^17.0 || ^18.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887
+  checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5
   languageName: node
   linkType: hard
 
@@ -2249,11 +2723,9 @@ __metadata:
   resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
     "@storybook/blocks": "workspace:*"
-    "@storybook/core-common": "workspace:*"
-    cjs-module-lexer: "npm:^1.2.3"
-    es-module-lexer: "npm:^1.5.0"
-    globby: "npm:^14.0.1"
+    dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
+    telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2262,7 +2734,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.12.3"
+    "@babel/core": "npm:^7.24.4"
     "@mdx-js/react": "npm:^3.0.0"
     "@storybook/blocks": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2367,7 +2839,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -2471,8 +2943,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.0"
-    "@babel/types": "npm:^7.23.0"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
     "@storybook/codemod": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -2525,10 +2997,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
-    "@babel/core": "npm:^7.23.2"
-    "@babel/preset-env": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/preset-env": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -2547,9 +3019,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
+    "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/theming": "workspace:*"
@@ -2587,6 +3060,7 @@ __metadata:
     node-fetch: "npm:^2.0.0"
     picomatch: "npm:^2.3.0"
     pkg-dir: "npm:^5.0.0"
+    prettier-fallback: "npm:prettier@^3"
     pretty-hrtime: "npm:^1.0.3"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.3.7"
@@ -2594,6 +3068,11 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util: "npm:^0.12.4"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   languageName: node
   linkType: soft
 
@@ -2601,6 +3080,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
+    "@storybook/csf": "npm:^0.1.4"
     ts-dedent: "npm:^2.0.0"
   languageName: node
   linkType: soft
@@ -2610,13 +3090,14 @@ __metadata:
   resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
-    "@babel/core": "npm:^7.23.9"
+    "@babel/core": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
     "@discoveryjs/json-ext": "npm:^0.5.3"
     "@storybook/builder-manager": "workspace:*"
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
@@ -2627,6 +3108,7 @@ __metadata:
     "@storybook/telemetry": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/detect-port": "npm:^1.3.0"
+    "@types/diff": "npm:^5.0.9"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
     "@types/semver": "npm:^7.3.4"
@@ -2635,6 +3117,7 @@ __metadata:
     cli-table3: "npm:^0.6.1"
     compression: "npm:^1.7.4"
     detect-port: "npm:^1.3.0"
+    diff: "npm:^5.2.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
@@ -2668,11 +3151,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
+    "@babel/generator": "npm:^7.24.4"
+    "@babel/parser": "npm:^7.24.4"
+    "@babel/traverse": "npm:^7.24.1"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/types": "workspace:*"
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.5"
@@ -2689,12 +3172,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "@storybook/csf@npm:0.1.2"
+"@storybook/csf@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "@storybook/csf@npm:0.1.4"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c
+  checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156
   languageName: node
   linkType: hard
 
@@ -2710,6 +3193,7 @@ __metadata:
   resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-vue3%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
+    "@storybook/core-events": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/doctrine": "npm:^0.0.3"
@@ -2757,7 +3241,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -2791,7 +3275,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/csf": "npm:^0.1.4"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -2858,7 +3342,6 @@ __metadata:
     "@testing-library/user-event": "npm:^14.5.2"
     "@vitest/expect": "npm:1.3.1"
     "@vitest/spy": "npm:^1.3.1"
-    chai: "npm:^4.4.1"
     util: "npm:^0.12.4"
   languageName: node
   linkType: soft
@@ -3027,6 +3510,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/diff@npm:^5.0.9":
+  version: 5.2.0
+  resolution: "@types/diff@npm:5.2.0"
+  checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.3":
   version: 0.0.3
   resolution: "@types/doctrine@npm:0.0.3"
@@ -3894,6 +4384,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.1":
+  version: 1.2.4
+  resolution: "aria-hidden@npm:1.2.4"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -4055,39 +4554,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs2@npm:^0.4.8":
-  version: 0.4.10
-  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.10"
+"babel-plugin-polyfill-corejs2@npm:^0.4.10":
+  version: 0.4.11
+  resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11"
   dependencies:
     "@babel/compat-data": "npm:^7.22.6"
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/9fb5e59a3235eba66fb05060b2a3ecd6923084f100df7526ab74b6272347d7adcf99e17366b82df36e592cde4e82fdb7ae24346a990eced76c7d504cac243400
+  checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0"
+"babel-plugin-polyfill-corejs3@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
-    core-js-compat: "npm:^3.34.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.1"
+    core-js-compat: "npm:^3.36.1"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd
+  checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-regenerator@npm:^0.5.5":
-  version: 0.5.5
-  resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5"
+"babel-plugin-polyfill-regenerator@npm:^0.6.1":
+  version: 0.6.2
+  resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2"
   dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.5.0"
+    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6
+  checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f
   languageName: node
   linkType: hard
 
@@ -4244,7 +4743,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3":
+"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0":
   version: 4.23.0
   resolution: "browserslist@npm:4.23.0"
   dependencies:
@@ -4357,7 +4856,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^4.3.10, chai@npm:^4.4.1":
+"chai@npm:^4.3.10":
   version: 4.4.1
   resolution: "chai@npm:4.4.1"
   dependencies:
@@ -4477,13 +4976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cjs-module-lexer@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "cjs-module-lexer@npm:1.2.3"
-  checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -4709,7 +5201,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
+"core-js-compat@npm:^3.31.0":
   version: 3.36.0
   resolution: "core-js-compat@npm:3.36.0"
   dependencies:
@@ -4718,6 +5210,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"core-js-compat@npm:^3.36.1":
+  version: 3.37.0
+  resolution: "core-js-compat@npm:3.37.0"
+  dependencies:
+    browserslist: "npm:^4.23.0"
+  checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d
+  languageName: node
+  linkType: hard
+
 "core-util-is@npm:1.0.2":
   version: 1.0.2
   resolution: "core-util-is@npm:1.0.2"
@@ -5017,6 +5518,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-node-es@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "detect-node-es@npm:1.1.0"
+  checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449
+  languageName: node
+  linkType: hard
+
 "detect-package-manager@npm:^2.0.1":
   version: 2.0.1
   resolution: "detect-package-manager@npm:2.0.1"
@@ -5046,6 +5554,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "diff@npm:5.2.0"
+  checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d
+  languageName: node
+  linkType: hard
+
 "dir-glob@npm:^3.0.1":
   version: 3.0.1
   resolution: "dir-glob@npm:3.0.1"
@@ -6216,6 +6731,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-nonce@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "get-nonce@npm:1.0.1"
+  checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868
+  languageName: node
+  linkType: hard
+
 "get-npm-tarball-url@npm:^2.0.3":
   version: 2.1.0
   resolution: "get-npm-tarball-url@npm:2.1.0"
@@ -6728,6 +7250,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -7520,7 +8051,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -8557,7 +9088,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1":
+"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1":
   version: 3.2.5
   resolution: "prettier@npm:3.2.5"
   bin:
@@ -8944,6 +9475,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll-bar@npm:^2.3.3":
+  version: 2.3.6
+  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  dependencies:
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  languageName: node
+  linkType: hard
+
+"react-remove-scroll@npm:2.5.5":
+  version: 2.5.5
+  resolution: "react-remove-scroll@npm:2.5.5"
+  dependencies:
+    react-remove-scroll-bar: "npm:^2.3.3"
+    react-style-singleton: "npm:^2.2.1"
+    tslib: "npm:^2.1.0"
+    use-callback-ref: "npm:^1.3.0"
+    use-sidecar: "npm:^1.1.2"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88
+  languageName: node
+  linkType: hard
+
+"react-style-singleton@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "react-style-singleton@npm:2.2.1"
+  dependencies:
+    get-nonce: "npm:^1.0.0"
+    invariant: "npm:^2.2.4"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -10045,7 +10628,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -10358,6 +10941,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-callback-ref@npm:^1.3.0":
+  version: 1.3.2
+  resolution: "use-callback-ref@npm:1.3.2"
+  dependencies:
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  languageName: node
+  linkType: hard
+
+"use-sidecar@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "use-sidecar@npm:1.1.2"
+  dependencies:
+    detect-node-es: "npm:^1.1.0"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"