diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 3317e750e0c5..a57524a04ebb 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -1,4 +1,5 @@
 34e364a0ca1d93555d36a7367d78e8e229493de8
 c0896915fb7fb9a8dd416b9aebca17abd909d1c1
 a41c227037e7e7249b8b376f838f4f8bcc3e3e59
-13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
\ No newline at end of file
+13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
+0a4522a3f84773f39daec4820c49b8a92e9f9d11
\ No newline at end of file
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
deleted file mode 100644
index 1a1c6b59a4a2..000000000000
--- a/.github/workflows/scorecards.yml
+++ /dev/null
@@ -1,72 +0,0 @@
-# This workflow uses actions that are not certified by GitHub. They are provided
-# by a third-party and are governed by separate terms of service, privacy
-# policy, and support documentation.
-
-name: Scorecards supply-chain security
-on:
-  # For Branch-Protection check. Only the default branch is supported. See
-  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#branch-protection
-  branch_protection_rule:
-  # To guarantee Maintained check is occasionally updated. See
-  # https://github.com/ossf/scorecard/blob/main/docs/checks.md#maintained
-  schedule:
-    - cron: '31 16 * * 5'
-  push:
-    branches: [ "next" ]
-
-# Declare default permissions as read only.
-permissions: read-all
-
-jobs:
-  analysis:
-    name: Scorecards analysis
-    runs-on: ubuntu-latest
-    permissions:
-      # Needed to upload the results to code-scanning dashboard.
-      security-events: write
-      # Needed to publish results and get a badge (see publish_results below).
-      id-token: write
-      # Uncomment the permissions below if installing in a private repository.
-      # contents: read
-      # actions: read
-
-    steps:
-      - name: "Checkout code"
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-        with:
-          persist-credentials: false
-
-      - name: "Run analysis"
-        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # v2.0.6
-        with:
-          results_file: results.sarif
-          results_format: sarif
-          # (Optional) Read-only PAT token. Uncomment the `repo_token` line below if:
-          # - you want to enable the Branch-Protection check on a *public* repository, or
-          # - you are installing Scorecards on a *private* repository
-          # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action#authentication-with-pat.
-          # repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}
-
-          # Public repositories:
-          #   - Publish results to OpenSSF REST API for easy access by consumers
-          #   - Allows the repository to include the Scorecard badge.
-          #   - See https://github.com/ossf/scorecard-action#publishing-results.
-          # For private repositories:
-          #   - `publish_results` will always be set to `false`, regardless
-          #     of the value entered here.
-          publish_results: true
-
-      # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
-      # format to the repository Actions tab.
-      - name: "Upload artifact"
-        uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
-        with:
-          name: SARIF file
-          path: results.sarif
-          retention-days: 5
-
-      # Upload the results to GitHub's code scanning dashboard.
-      - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@807578363a7869ca324a79039e6db9c843e0e100 # v2.1.27
-        with:
-          sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 444fe7ae0bea..bdf5324fe23d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 8.2.7
+
+- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+
 ## 8.2.6
 
 - CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index a5ab53b9e199..6180d4046fb2 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,12 @@
+## 8.3.0-alpha.4
+
+- CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+- Core: Split Storybook CLI  - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
+- Fix: Invariant failed: Expected package.json#version to be defined in the "undefined" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!
+- Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!
+- UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!
+
 ## 8.3.0-alpha.3
 
 - Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!
diff --git a/MIGRATION.md b/MIGRATION.md
index 3dd1311dd620..dcb75d359224 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1632,7 +1632,7 @@ export const Primary = {
 
 ## From version 6.5.x to 7.0.0
 
-A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`.
+A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@7 upgrade` or `pnpx dlx storybook@7 upgrade`.
 
 ### 7.0 breaking changes
 
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index 7c4f74c8c2ef..6a1f51f62f7c 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -68,6 +68,10 @@ const config: StorybookConfig = {
       directory: '../addons/toolbars/template/stories',
       titlePrefix: 'addons/toolbars',
     },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
     {
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-themes',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
@@ -119,7 +124,6 @@ const config: StorybookConfig = {
   },
   features: {
     viewportStoryGlobals: true,
-    themesStoryGlobals: true,
     backgroundsStoryGlobals: true,
   },
   viteFinal: (viteConfig, { configType }) =>
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index c80bdcea2937..548f29473efc 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -12,16 +12,17 @@ import {
 } from 'storybook/internal/theming';
 import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
 import type { PreviewWeb } from 'storybook/internal/preview-api';
-import type { ReactRenderer } from '@storybook/react';
+import type { ReactRenderer, Decorator } from '@storybook/react';
 import type { Channel } from 'storybook/internal/channels';
 
 import { DocsContext } from '@storybook/blocks';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 
 const { document } = global;
 
-const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
+const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
   {
     position: 'absolute',
     top: 0,
@@ -31,8 +32,10 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
     height: '100vh',
     bottom: 0,
     overflow: 'auto',
-    padding: 10,
   },
+  ({ layout }) => ({
+    padding: layout === 'fullscreen' ? 0 : '1rem',
+  }),
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
@@ -49,14 +52,17 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
         }
 );
 
-const ThemeStack = styled.div(
+const ThemeStack = styled.div<{ layout: string }>(
   {
     position: 'relative',
-    minHeight: 'calc(50vh - 15px)',
+    flex: 1,
   },
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
+  }),
+  ({ layout }) => ({
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   })
 );
 
@@ -80,6 +86,25 @@ const PlayFnNotice = styled.div(
   })
 );
 
+const StackContainer = ({ children, layout }) => (
+  <div
+    style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      // margin: layout === 'fullscreen' ? 0 : '-1rem',
+    }}
+  >
+    <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
+    {layout === 'fullscreen' ? null : (
+      <style
+        dangerouslySetInnerHTML={{ __html: 'html, body { padding: 0!important; margin: 0; }' }}
+      />
+    )}
+    {children}
+  </div>
+);
+
 const ThemedSetRoot = () => {
   const theme = useTheme();
 
@@ -159,10 +184,20 @@ export const decorators = [
   /**
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */
-  (StoryFn, { globals, parameters, playFunction, args }) => {
-    const defaultTheme =
-      isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light';
-    const theme = globals.theme || parameters.theme || defaultTheme;
+  (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
+    let theme = globals.sb_theme;
+    let showPlayFnNotice = false;
+
+    // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
+    // but this is acceptable, I guess
+    // we need to ensure only a single rendering in chromatic
+    // a more 'correct' approach would be to set a specific theme global on every story that has a playFunction
+    if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
+      theme = 'light';
+      showPlayFnNotice = true;
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
+      theme = 'stacked';
+    }
 
     switch (theme) {
       case 'side-by-side': {
@@ -172,12 +207,12 @@ export const decorators = [
               <Global styles={createReset} />
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.light)}>
-              <ThemeBlock side="left" data-side="left">
+              <ThemeBlock side="left" data-side="left" layout={parameters.layout}>
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeBlock side="right" data-side="right">
+              <ThemeBlock side="right" data-side="right" layout={parameters.layout}>
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
@@ -190,16 +225,18 @@ export const decorators = [
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
             </ThemeProvider>
-            <ThemeProvider theme={convert(themes.light)}>
-              <ThemeStack data-side="left">
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
-            <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeStack data-side="right">
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
+            <StackContainer layout={parameters.layout}>
+              <ThemeProvider theme={convert(themes.light)}>
+                <ThemeStack data-side="left" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+              <ThemeProvider theme={convert(themes.dark)}>
+                <ThemeStack data-side="right" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+            </StackContainer>
           </Fragment>
         );
       }
@@ -209,7 +246,7 @@ export const decorators = [
           <ThemeProvider theme={convert(themes[theme])}>
             <Global styles={createReset} />
             <ThemedSetRoot />
-            {!parameters.theme && isChromatic() && playFunction && (
+            {showPlayFnNotice && (
               <>
                 <PlayFnNotice>
                   <span>
@@ -233,7 +270,7 @@ export const decorators = [
    *
    * If parameters.withRawArg is not set, this decorator will do nothing
    */
-  (StoryFn, { parameters, args, hooks }) => {
+  (StoryFn, { parameters, args }) => {
     const [, updateArgs] = useArgs();
     if (!parameters.withRawArg) {
       return <StoryFn />;
@@ -246,6 +283,7 @@ export const decorators = [
             ...args,
             onChange: (newValue) => {
               updateArgs({ [parameters.withRawArg]: newValue });
+              // @ts-expect-error onChange is not a valid arg
               args.onChange?.(newValue);
             },
           }}
@@ -257,7 +295,7 @@ export const decorators = [
       </>
     );
   },
-];
+] satisfies Decorator[];
 
 export const parameters = {
   options: {
@@ -295,4 +333,22 @@ export const parameters = {
       'slategray',
     ],
   },
+  viewport: {
+    options: MINIMAL_VIEWPORTS,
+  },
+  themes: {
+    disable: true,
+  },
+  backgrounds: {
+    options: {
+      light: { name: 'light', value: '#edecec' },
+      dark: { name: 'dark', value: '#262424' },
+      blue: { name: 'blue', value: '#1b1a2c' },
+    },
+    grid: {
+      cellSize: 15,
+      cellAmount: 10,
+      opacity: 0.4,
+    },
+  },
 };
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 7f5ec2166e1d..abde37a1235c 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -80,7 +80,7 @@
       "./src/manager.tsx"
     ],
     "previewEntries": [
-      "./src/preview.tsx"
+      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx
new file mode 100644
index 000000000000..e214780714e4
--- /dev/null
+++ b/code/addons/backgrounds/src/components/Tool.tsx
@@ -0,0 +1,145 @@
+import React, { useState, memo, Fragment, useCallback } from 'react';
+
+import { useGlobals, useParameter } from 'storybook/internal/manager-api';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+
+import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
+import { PARAM_KEY as KEY } from '../constants';
+import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
+
+type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
+
+const emptyBackgroundMap: BackgroundMap = {};
+
+export const BackgroundTool = memo(function BackgroundSelector() {
+  const config = useParameter<Config>(KEY);
+  const [globals, updateGlobals, storyGlobals] = useGlobals();
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  const { options = emptyBackgroundMap, disable = true } = config || {};
+  if (disable) {
+    return null;
+  }
+
+  const data = globals[KEY] || {};
+  const backgroundName: string = data.value;
+  const isGridActive = data.grid || false;
+
+  const item = options[backgroundName];
+  const isLocked = !!storyGlobals?.[KEY];
+  const length = Object.keys(options).length;
+
+  return (
+    <Pure
+      {...{
+        length,
+        backgroundMap: options,
+        item,
+        updateGlobals,
+        backgroundName,
+        setIsTooltipVisible,
+        isLocked,
+        isGridActive,
+        isTooltipVisible,
+      }}
+    />
+  );
+});
+
+interface PureProps {
+  length: number;
+  backgroundMap: BackgroundMap;
+  item: Background | undefined;
+  updateGlobals: ReturnType<typeof useGlobals>['1'];
+  backgroundName: string | undefined;
+  setIsTooltipVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  isLocked: boolean;
+  isGridActive: boolean;
+  isTooltipVisible: boolean;
+}
+
+const Pure = memo(function PureTool(props: PureProps) {
+  const {
+    item,
+    length,
+    updateGlobals,
+    setIsTooltipVisible,
+    backgroundMap,
+    backgroundName,
+    isLocked,
+    isGridActive: isGrid,
+    isTooltipVisible,
+  } = props;
+
+  const update = useCallback(
+    (input: GlobalStateUpdate) => {
+      updateGlobals({
+        [KEY]: input,
+      });
+    },
+    [updateGlobals]
+  );
+
+  return (
+    <Fragment>
+      <IconButton
+        key="grid"
+        active={isGrid}
+        disabled={isLocked}
+        title="Apply a grid to the preview"
+        onClick={() => update({ value: backgroundName, grid: !isGrid })}
+      >
+        <GridIcon />
+      </IconButton>
+
+      {length > 0 ? (
+        <WithTooltip
+          key="background"
+          placement="top"
+          closeOnOutsideClick
+          tooltip={({ onHide }) => {
+            return (
+              <TooltipLinkList
+                links={[
+                  ...(!!item
+                    ? [
+                        {
+                          id: 'reset',
+                          title: 'Reset background',
+                          icon: <RefreshIcon />,
+                          onClick: () => {
+                            update({ value: undefined, grid: isGrid });
+                            onHide();
+                          },
+                        },
+                      ]
+                    : []),
+                  ...Object.entries(backgroundMap).map<Link>(([k, value]) => ({
+                    id: k,
+                    title: value.name,
+                    icon: <CircleIcon color={value?.value || 'grey'} />,
+                    active: k === backgroundName,
+                    onClick: () => {
+                      update({ value: k, grid: isGrid });
+                      onHide();
+                    },
+                  })),
+                ]}
+              />
+            );
+          }}
+          onVisibleChange={setIsTooltipVisible}
+        >
+          <IconButton
+            disabled={isLocked}
+            key="background"
+            title="Change the background of the preview"
+            active={!!item || isTooltipVisible}
+          >
+            <PhotoIcon />
+          </IconButton>
+        </WithTooltip>
+      ) : null}
+    </Fragment>
+  );
+});
diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts
new file mode 100644
index 000000000000..bdee2f2ea19b
--- /dev/null
+++ b/code/addons/backgrounds/src/decorator.ts
@@ -0,0 +1,96 @@
+import { useEffect } from 'storybook/internal/preview-api';
+import type {
+  Renderer,
+  PartialStoryFn as StoryFunction,
+  StoryContext,
+} from 'storybook/internal/types';
+
+import { PARAM_KEY as KEY } from './constants';
+import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from './utils';
+import type { Config, GridConfig } from './types';
+
+const defaultGrid: GridConfig = {
+  cellSize: 100,
+  cellAmount: 10,
+  opacity: 0.8,
+};
+
+const BG_SELECTOR_BASE = `addon-backgrounds`;
+const GRID_SELECTOR_BASE = 'addon-backgrounds-grid';
+
+const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
+
+export const withBackgroundAndGrid = (
+  StoryFn: StoryFunction<Renderer>,
+  context: StoryContext<Renderer>
+) => {
+  const { globals, parameters, viewMode, id } = context;
+  const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config;
+  const data = globals[KEY] || {};
+  const backgroundName: string | undefined = data.value;
+
+  const item = backgroundName ? options[backgroundName] : undefined;
+  const value = item?.value || 'transparent';
+
+  const showGrid = data.grid || false;
+  const shownBackground = !!item && !disable;
+
+  const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
+  const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
+
+  const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
+  const defaultOffset = viewMode === 'docs' ? 20 : isLayoutPadded ? 16 : 0;
+  const { cellAmount, cellSize, opacity, offsetX = defaultOffset, offsetY = defaultOffset } = grid;
+
+  const backgroundSelectorId =
+    viewMode === 'docs' ? `${BG_SELECTOR_BASE}-docs-${id}` : `${BG_SELECTOR_BASE}-color`;
+  const backgroundTarget = viewMode === 'docs' ? id : null;
+
+  useEffect(() => {
+    const backgroundStyles = `
+    ${backgroundSelector} {
+      background: ${value} !important;
+      ${transitionStyle}
+      }`;
+
+    if (!shownBackground) {
+      clearStyles(backgroundSelectorId);
+      return;
+    }
+
+    addBackgroundStyle(backgroundSelectorId, backgroundStyles, backgroundTarget);
+  }, [backgroundSelector, backgroundSelectorId, backgroundTarget, shownBackground, value]);
+
+  const gridSelectorId =
+    viewMode === 'docs' ? `${GRID_SELECTOR_BASE}-docs-${id}` : `${GRID_SELECTOR_BASE}`;
+  useEffect(() => {
+    if (!showGrid) {
+      clearStyles(gridSelectorId);
+      return;
+    }
+    const gridSize = [
+      `${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
+      `${cellSize * cellAmount}px ${cellSize * cellAmount}px`,
+      `${cellSize}px ${cellSize}px`,
+      `${cellSize}px ${cellSize}px`,
+    ].join(', ');
+
+    const gridStyles = `
+        ${gridSelector} {
+          background-size: ${gridSize} !important;
+          background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+          background-blend-mode: difference !important;
+          background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+           linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px),
+           linear-gradient(90deg, rgba(130, 130, 130, ${
+             opacity / 2
+           }) 1px, transparent 1px) !important;
+        }
+      `;
+
+    addGridStyle(gridSelectorId, gridStyles);
+  }, [cellAmount, cellSize, gridSelector, gridSelectorId, showGrid, offsetX, offsetY, opacity]);
+
+  return StoryFn();
+};
diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx
similarity index 63%
rename from code/addons/backgrounds/src/containers/BackgroundSelector.tsx
rename to code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx
index 640b3856557a..dcc8ffb8e658 100644
--- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx
@@ -1,5 +1,5 @@
-import type { FC } from 'react';
-import React, { useState, Fragment, useCallback, useMemo, memo } from 'react';
+import type { FC, ReactElement } from 'react';
+import React, { useState, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';
 
 import { useParameter, useGlobals } from 'storybook/internal/manager-api';
@@ -8,14 +8,29 @@ import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/com
 
 import { PhotoIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components/ColorIcon';
-import type {
-  BackgroundSelectorItem,
-  Background,
-  BackgroundsParameter,
-  GlobalState,
-} from '../types';
-import { getBackgroundColorByName } from '../helpers';
+import { ColorIcon } from './ColorIcon';
+import type { Background } from '../types';
+import { getBackgroundColorByName } from './getBackgroundColorByName';
+
+export interface DeprecatedGlobalState {
+  name: string | undefined;
+  selected: string | undefined;
+}
+
+export interface BackgroundsParameter {
+  default?: string | null;
+  disable?: boolean;
+  values: Background[];
+}
+
+export interface BackgroundSelectorItem {
+  id: string;
+  title: string;
+  onClick: () => void;
+  value: string;
+  active: boolean;
+  right?: ReactElement;
+}
 
 const createBackgroundSelectorItem = memoize(1000)(
   (
@@ -62,7 +77,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
   values: [],
 };
 
-export const BackgroundSelector: FC = memo(function BackgroundSelector() {
+export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() {
   const backgroundsConfig = useParameter<BackgroundsParameter>(
     BACKGROUNDS_PARAM_KEY,
     DEFAULT_BACKGROUNDS_CONFIG
@@ -98,36 +113,34 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
   }
 
   return (
-    <Fragment>
-      <WithTooltip
-        placement="top"
-        closeOnOutsideClick
-        tooltip={({ onHide }) => {
-          return (
-            <TooltipLinkList
-              links={getDisplayedItems(
-                backgroundsConfig.values,
-                selectedBackgroundColor,
-                ({ selected }: GlobalState) => {
-                  if (selectedBackgroundColor !== selected) {
-                    onBackgroundChange(selected);
-                  }
-                  onHide();
+    <WithTooltip
+      placement="top"
+      closeOnOutsideClick
+      tooltip={({ onHide }) => {
+        return (
+          <TooltipLinkList
+            links={getDisplayedItems(
+              backgroundsConfig.values,
+              selectedBackgroundColor,
+              ({ selected }: DeprecatedGlobalState) => {
+                if (selectedBackgroundColor !== selected) {
+                  onBackgroundChange(selected);
                 }
-              )}
-            />
-          );
-        }}
-        onVisibleChange={setIsTooltipVisible}
+                onHide();
+              }
+            )}
+          />
+        );
+      }}
+      onVisibleChange={setIsTooltipVisible}
+    >
+      <IconButton
+        key="background"
+        title="Change the background of the preview"
+        active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
       >
-        <IconButton
-          key="background"
-          title="Change the background of the preview"
-          active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
-        >
-          <PhotoIcon />
-        </IconButton>
-      </WithTooltip>
-    </Fragment>
+        <PhotoIcon />
+      </IconButton>
+    </WithTooltip>
   );
 });
diff --git a/code/addons/backgrounds/src/components/ColorIcon.tsx b/code/addons/backgrounds/src/legacy/ColorIcon.tsx
similarity index 100%
rename from code/addons/backgrounds/src/components/ColorIcon.tsx
rename to code/addons/backgrounds/src/legacy/ColorIcon.tsx
diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx
similarity index 93%
rename from code/addons/backgrounds/src/containers/GridSelector.tsx
rename to code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx
index 796c281c0f43..e061fd4f2311 100644
--- a/code/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx
@@ -7,7 +7,7 @@ import { IconButton } from 'storybook/internal/components';
 import { GridIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const GridSelector: FC = memo(function GridSelector() {
+export const GridToolLegacy: FC = memo(function GridSelector() {
   const [globals, updateGlobals] = useGlobals();
 
   const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {
diff --git a/code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts b/code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts
new file mode 100644
index 000000000000..95b5296752c1
--- /dev/null
+++ b/code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts
@@ -0,0 +1,39 @@
+import { dedent } from 'ts-dedent';
+import { logger } from 'storybook/internal/client-logger';
+import type { Background } from '../types';
+
+export const getBackgroundColorByName = (
+  currentSelectedValue: string,
+  backgrounds: Background[] = [],
+  defaultName: string | null | undefined
+): string => {
+  if (currentSelectedValue === 'transparent') {
+    return 'transparent';
+  }
+
+  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
+    return currentSelectedValue;
+  }
+
+  if (currentSelectedValue) {
+    return currentSelectedValue;
+  }
+
+  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
+  if (defaultBackground) {
+    return defaultBackground.value;
+  }
+
+  if (defaultName) {
+    const availableColors = backgrounds.map((background) => background.name).join(', ');
+    logger.warn(
+      dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `
+    );
+  }
+
+  return 'transparent';
+};
diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts
similarity index 92%
rename from code/addons/backgrounds/src/decorators/withBackground.ts
rename to code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts
index 1cdbf499db84..ba649a0a1d36 100644
--- a/code/addons/backgrounds/src/decorators/withBackground.ts
+++ b/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts
@@ -6,12 +6,8 @@ import type {
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import {
-  clearStyles,
-  addBackgroundStyle,
-  getBackgroundColorByName,
-  isReduceMotionEnabled,
-} from '../helpers';
+import { clearStyles, addBackgroundStyle, isReduceMotionEnabled } from '../utils';
+import { getBackgroundColorByName } from './getBackgroundColorByName';
 
 export const withBackground = (
   StoryFn: StoryFunction<Renderer>,
diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/legacy/withGridLegacy.ts
similarity index 97%
rename from code/addons/backgrounds/src/decorators/withGrid.ts
rename to code/addons/backgrounds/src/legacy/withGridLegacy.ts
index 70cc47cf48bd..801a1962d926 100644
--- a/code/addons/backgrounds/src/decorators/withGrid.ts
+++ b/code/addons/backgrounds/src/legacy/withGridLegacy.ts
@@ -5,7 +5,7 @@ import type {
   StoryContext,
 } from 'storybook/internal/types';
 
-import { clearStyles, addGridStyle } from '../helpers';
+import { clearStyles, addGridStyle } from '../utils';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
 export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
diff --git a/code/addons/backgrounds/src/manager.tsx b/code/addons/backgrounds/src/manager.tsx
index d6f3b855506d..3f8ab23da58d 100644
--- a/code/addons/backgrounds/src/manager.tsx
+++ b/code/addons/backgrounds/src/manager.tsx
@@ -2,19 +2,23 @@ import React, { Fragment } from 'react';
 import { addons, types } from 'storybook/internal/manager-api';
 
 import { ADDON_ID } from './constants';
-import { BackgroundSelector } from './containers/BackgroundSelector';
-import { GridSelector } from './containers/GridSelector';
+import { BackgroundToolLegacy } from './legacy/BackgroundSelectorLegacy';
+import { GridToolLegacy } from './legacy/GridSelectorLegacy';
+import { BackgroundTool } from './components/Tool';
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
     match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
-    render: () => (
-      <Fragment>
-        <BackgroundSelector />
-        <GridSelector />
-      </Fragment>
-    ),
+    render: () =>
+      FEATURES?.backgroundsStoryGlobals ? (
+        <BackgroundTool />
+      ) : (
+        <Fragment>
+          <BackgroundToolLegacy />
+          <GridToolLegacy />
+        </Fragment>
+      ),
   });
 });
diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts
new file mode 100644
index 000000000000..dad8dad077bb
--- /dev/null
+++ b/code/addons/backgrounds/src/preview.ts
@@ -0,0 +1,41 @@
+import type { Addon_DecoratorFunction } from 'storybook/internal/types';
+import { withBackground } from './legacy/withBackgroundLegacy';
+import { withGrid } from './legacy/withGridLegacy';
+import { PARAM_KEY as KEY } from './constants';
+import { withBackgroundAndGrid } from './decorator';
+import type { Config, GlobalState } from './types';
+
+export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals
+  ? [withBackgroundAndGrid]
+  : [withGrid, withBackground];
+
+export const parameters = {
+  [KEY]: {
+    grid: {
+      cellSize: 20,
+      opacity: 0.5,
+      cellAmount: 5,
+    },
+    disable: false,
+    ...(FEATURES?.backgroundsStoryGlobals
+      ? {
+          options: {
+            light: { name: 'light', value: '#F8F8F8' },
+            dark: { name: 'dark', value: '#333' },
+          },
+        }
+      : {
+          // TODO: remove in 9.0
+          values: [
+            { name: 'light', value: '#F8F8F8' },
+            { name: 'dark', value: '#333333' },
+          ],
+        }),
+  } satisfies Partial<Config>,
+};
+
+const modern: Record<string, GlobalState> = {
+  [KEY]: { value: undefined, grid: false },
+};
+
+export const initialGlobals = FEATURES?.backgroundsStoryGlobals ? modern : { [KEY]: null };
diff --git a/code/addons/backgrounds/src/preview.tsx b/code/addons/backgrounds/src/preview.tsx
deleted file mode 100644
index b28c5539ecff..000000000000
--- a/code/addons/backgrounds/src/preview.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Addon_DecoratorFunction } from 'storybook/internal/types';
-import { withBackground } from './decorators/withBackground';
-import { withGrid } from './decorators/withGrid';
-import { PARAM_KEY } from './constants';
-
-export const decorators: Addon_DecoratorFunction[] = [withGrid, withBackground];
-export const parameters = {
-  [PARAM_KEY]: {
-    grid: {
-      cellSize: 20,
-      opacity: 0.5,
-      cellAmount: 5,
-    },
-    values: [
-      { name: 'light', value: '#F8F8F8' },
-      { name: 'dark', value: '#333333' },
-    ],
-  },
-};
-
-export const initialGlobals = {
-  [PARAM_KEY]: null as any,
-};
diff --git a/code/addons/backgrounds/src/types.ts b/code/addons/backgrounds/src/types.ts
new file mode 100644
index 000000000000..8f6c66b20a85
--- /dev/null
+++ b/code/addons/backgrounds/src/types.ts
@@ -0,0 +1,23 @@
+export interface Background {
+  name: string;
+  value: string;
+}
+
+export type BackgroundMap = Record<string, Background>;
+
+export interface GridConfig {
+  cellAmount: number;
+  cellSize: number;
+  opacity: number;
+  offsetX?: number;
+  offsetY?: number;
+}
+
+export interface Config {
+  options: BackgroundMap;
+  disable: boolean;
+  grid: GridConfig;
+}
+
+export type GlobalState = { value: string | undefined; grid: boolean };
+export type GlobalStateUpdate = Partial<GlobalState>;
diff --git a/code/addons/backgrounds/src/types/index.ts b/code/addons/backgrounds/src/types/index.ts
deleted file mode 100644
index 1439f4cd1329..000000000000
--- a/code/addons/backgrounds/src/types/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ReactElement } from 'react';
-
-export interface GlobalState {
-  name: string | undefined;
-  selected: string | undefined;
-}
-
-export interface BackgroundSelectorItem {
-  id: string;
-  title: string;
-  onClick: () => void;
-  value: string;
-  active: boolean;
-  right?: ReactElement;
-}
-
-export interface Background {
-  name: string;
-  value: string;
-}
-
-export interface BackgroundsParameter {
-  default?: string | null;
-  disable?: boolean;
-  values: Background[];
-}
-
-export interface BackgroundsConfig {
-  backgrounds: Background[] | null;
-  selectedBackgroundName: string | null;
-  defaultBackgroundName: string | null;
-  disable: boolean;
-}
diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts
index bfd9e55123ff..22eb9c03a481 100644
--- a/code/addons/backgrounds/src/typings.d.ts
+++ b/code/addons/backgrounds/src/typings.d.ts
@@ -1 +1 @@
-declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;
+declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features'];
diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/utils.ts
similarity index 60%
rename from code/addons/backgrounds/src/helpers/index.ts
rename to code/addons/backgrounds/src/utils.ts
index 7670784449cd..1487e21a345d 100644
--- a/code/addons/backgrounds/src/helpers/index.ts
+++ b/code/addons/backgrounds/src/utils.ts
@@ -1,47 +1,10 @@
 import { global } from '@storybook/global';
-import { dedent } from 'ts-dedent';
-
-import { logger } from 'storybook/internal/client-logger';
-
-import type { Background } from '../types';
 
 const { document, window } = global;
 
 export const isReduceMotionEnabled = () => {
-  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-  return prefersReduceMotion.matches;
-};
-
-export const getBackgroundColorByName = (
-  currentSelectedValue: string,
-  backgrounds: Background[] = [],
-  defaultName: string | null | undefined
-): string => {
-  if (currentSelectedValue === 'transparent') {
-    return 'transparent';
-  }
-
-  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
-    return currentSelectedValue;
-  }
-
-  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
-  if (defaultBackground) {
-    return defaultBackground.value;
-  }
-
-  if (defaultName) {
-    const availableColors = backgrounds.map((background) => background.name).join(', ');
-    logger.warn(
-      dedent`
-        Backgrounds Addon: could not find the default color "${defaultName}".
-        These are the available colors for your story based on your configuration:
-        ${availableColors}.
-      `
-    );
-  }
-
-  return 'transparent';
+  const prefersReduceMotion = window?.matchMedia('(prefers-reduced-motion: reduce)');
+  return !!prefersReduceMotion?.matches;
 };
 
 export const clearStyles = (selector: string | string[]) => {
diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts
new file mode 100644
index 000000000000..ff6d407a6bef
--- /dev/null
+++ b/code/addons/backgrounds/template/stories/globals.stories.ts
@@ -0,0 +1,98 @@
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the background',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    backgrounds: {
+      options: {
+        red: { name: 'light', value: 'red' },
+        darker: { name: 'darker', value: '#000' },
+      },
+    },
+  },
+};
+
+export const Set = {
+  globals: {
+    backgrounds: { value: 'red' },
+  },
+};
+
+export const SetAndCustom = {
+  parameters: {
+    backgrounds: {
+      options: {
+        pink: { value: '#F99CB4', name: 'pink' },
+      },
+    },
+  },
+  globals: {
+    backgrounds: { value: 'pink' },
+  },
+};
+
+export const UnsetCustom = {
+  parameters: {
+    backgrounds: {
+      options: {
+        pink: { value: '#Ff5CB7', name: 'hot pink' },
+      },
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    backgrounds: {
+      disable: true,
+    },
+  },
+};
+
+export const Grid = {
+  globals: {
+    backgrounds: { grid: true },
+  },
+};
+
+export const GridAndBackground = {
+  globals: {
+    backgrounds: { grid: true, value: 'darker' },
+  },
+};
+
+export const GridConfig = {
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 100,
+        cellAmount: 10,
+        opacity: 0.8,
+      },
+    },
+  },
+  globals: {
+    backgrounds: { grid: true, value: 'light' },
+  },
+};
+
+export const GridOffset = {
+  parameters: {
+    backgrounds: {
+      grid: {
+        cellSize: 100,
+        cellAmount: 10,
+        opacity: 0.8,
+        offsetX: 50,
+        offsetY: 50,
+      },
+    },
+  },
+  globals: {
+    backgrounds: { grid: true, value: 'light' },
+  },
+};
diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts
deleted file mode 100644
index 361c18752ebb..000000000000
--- a/code/addons/backgrounds/template/stories/grid.stories.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-export default {
-  component: globalThis.Components.Button,
-  args: {
-    label: 'Click Me!',
-  },
-  parameters: {
-    backgrounds: {
-      grid: {
-        cellSize: 10,
-        cellAmount: 4,
-        opacity: 0.2,
-      },
-    },
-    chromatic: { disable: true },
-  },
-};
-
-export const Basic = {
-  parameters: {},
-};
-
-export const Custom = {
-  parameters: {
-    backgrounds: {
-      grid: {
-        cellSize: 100,
-        cellAmount: 10,
-        opacity: 0.8,
-      },
-    },
-  },
-};
-
-// Grid should have an offset of 0 when in fullscreen
-export const Fullscreen = {
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Disabled = {
-  parameters: {
-    backgrounds: {
-      grid: {
-        disable: true,
-      },
-    },
-  },
-};
diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts
index e6085424b99e..16f8b13d66c5 100644
--- a/code/addons/backgrounds/template/stories/parameters.stories.ts
+++ b/code/addons/backgrounds/template/stories/parameters.stories.ts
@@ -1,5 +1,11 @@
 import { global as globalThis } from '@storybook/global';
 
+// these stories only work with `backgroundsStoryGlobals` set to false
+// because the `default` prop is dropped and because, `values` changed to `options` and is now an object
+
+const img =
+  'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K';
+
 const COLORS = [
   { name: 'red', value: '#FB001D' },
   { name: 'orange', value: '#FB8118' },
@@ -10,9 +16,9 @@ const COLORS = [
 ];
 
 export default {
-  component: globalThis.Components.Button,
+  component: globalThis.Components.Pre,
   args: {
-    label: 'Click Me!',
+    text: 'Testing the background',
   },
   parameters: {
     backgrounds: {
@@ -22,10 +28,6 @@ export default {
   },
 };
 
-export const Basic = {
-  parameters: {},
-};
-
 export const Default = {
   parameters: {
     backgrounds: {
@@ -37,7 +39,7 @@ export const Default = {
 export const StorySpecific = {
   parameters: {
     backgrounds: {
-      default: 'white',
+      default: 'pink',
       values: [
         { name: 'white', value: '#F9F5F1' },
         { name: 'pink', value: '#F99CB4' },
@@ -63,9 +65,6 @@ export const Gradient = {
   },
 };
 
-const img =
-  'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K';
-
 export const Image = {
   parameters: {
     backgrounds: {
diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts
index 32f795b63f16..ed3c51d8ba8e 100644
--- a/code/addons/controls/template/stories/conditional.stories.ts
+++ b/code/addons/controls/template/stories/conditional.stories.ts
@@ -54,9 +54,9 @@ export const ToggleExpandCollapse = {
 
 export const GlobalBased = {
   argTypes: {
-    ifThemeExists: { control: 'text', if: { global: 'theme' } },
-    ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } },
-    ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } },
-    ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } },
+    ifThemeExists: { control: 'text', if: { global: 'sb_theme' } },
+    ifThemeNotExists: { control: 'text', if: { global: 'sb_theme', exists: false } },
+    ifLightTheme: { control: 'text', if: { global: 'sb_theme', eq: 'light' } },
+    ifNotLightTheme: { control: 'text', if: { global: 'sb_theme', neq: 'light' } },
   },
 };
diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx
index 4486c83ff664..98f579090986 100644
--- a/code/addons/interactions/src/components/Interaction.stories.tsx
+++ b/code/addons/interactions/src/components/Interaction.stories.tsx
@@ -54,10 +54,7 @@ export const Disabled: Story = {
 
 export const Hovered: Story = {
   ...Done,
-  parameters: {
-    // Set light theme to avoid stacked theme in chromatic
-    theme: 'light',
-  },
+  globals: { sb_theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));
diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
index 8f0e48faab58..9105ea7f2a3a 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
@@ -33,10 +33,7 @@ const meta = {
       </StyledWrapper>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-    theme: 'light', // stacked will break interactions
-  },
+  parameters: { layout: 'fullscreen' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
@@ -60,35 +57,35 @@ export const Passing: Story = {
   args: {
     interactions: getInteractions(CallStates.DONE),
   },
-};
-Passing.play = async ({ args, canvasElement }) => {
-  if (isChromatic()) return;
-  const canvas = within(canvasElement);
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to start'));
-    await expect(args.controls.start).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go back'));
-    await expect(args.controls.back).toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go forward'));
-    await expect(args.controls.next).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Go to end'));
-    await expect(args.controls.end).not.toHaveBeenCalled();
-  });
-
-  await waitFor(async () => {
-    await userEvent.click(canvas.getByLabelText('Rerun'));
-    await expect(args.controls.rerun).toHaveBeenCalled();
-  });
+  play: async ({ args, canvasElement }) => {
+    if (isChromatic()) return;
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to start'));
+      await expect(args.controls.start).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go back'));
+      await expect(args.controls.back).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go forward'));
+      await expect(args.controls.next).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to end'));
+      await expect(args.controls.end).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Rerun'));
+      await expect(args.controls.rerun).toHaveBeenCalled();
+    });
+  },
 };
 
 export const Paused: Story = {
diff --git a/code/addons/interactions/src/components/Subnav.stories.tsx b/code/addons/interactions/src/components/Subnav.stories.tsx
index 02515ea13f7a..bdaa5fae2831 100644
--- a/code/addons/interactions/src/components/Subnav.stories.tsx
+++ b/code/addons/interactions/src/components/Subnav.stories.tsx
@@ -1,10 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { CallStates } from '@storybook/instrumenter';
 import { Subnav } from './Subnav';
+import { parameters } from '../preview';
 
 export default {
   title: 'Subnav',
   component: Subnav,
+  parameters: {
+    layout: 'fullscreen',
+  },
   args: {
     controls: {
       start: action('start'),
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index cf6e34eddf2c..459471817711 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -14,6 +14,9 @@ export default {
   args: {
     onSuccess: fn(),
   },
+  globals: {
+    sb_theme: 'light',
+  },
 };
 
 export const Validation = {
diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
index 0daa0850584b..0f8409ad792a 100644
--- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts
+++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
@@ -5,6 +5,7 @@ export default {
   component: globalThis.Components.Button,
   args: {
     label: 'Button',
+    // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error
   },
   argTypes: {
     onClick: { type: 'function' },
diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
index c529f8a60258..0c71eb3ce159 100644
--- a/code/addons/themes/README.md
+++ b/code/addons/themes/README.md
@@ -45,11 +45,8 @@ import { Button } from './Button';
 export default {
   title: 'Example/Button',
   component: Button,
-  parameters: {
-    themes: {
-      themeOverride: 'light', // component level override
-    },
-  },
+  // meta level override
+  globals: { theme: 'dark' },
 };
 
 export const Primary = {
@@ -64,10 +61,7 @@ export const PrimaryDark = {
     primary: true,
     label: 'Button',
   },
-  parameters: {
-    themes: {
-      themeOverride: 'dark', // Story level override
-    },
-  },
+  // story level override
+  globals: { theme: 'dark' },
 };
 ```
diff --git a/code/addons/themes/src/constants.ts b/code/addons/themes/src/constants.ts
index 677c9499a7b4..654cc57ea893 100644
--- a/code/addons/themes/src/constants.ts
+++ b/code/addons/themes/src/constants.ts
@@ -15,6 +15,7 @@ export const DEFAULT_ADDON_STATE: ThemeAddonState = {
 
 export interface ThemeParameters {
   themeOverride?: string;
+  disable?: boolean;
 }
 
 export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {};
diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx
index b8ebe8c89810..4bc56202f038 100644
--- a/code/addons/themes/src/decorators/class-name.decorator.tsx
+++ b/code/addons/themes/src/decorators/class-name.decorator.tsx
@@ -14,7 +14,7 @@ const DEFAULT_ELEMENT_SELECTOR = 'html';
 const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean);
 
 // TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. <Story extends (...args: any[]) => any>
-export const withThemeByClassName = <TRenderer extends Renderer = any>({
+export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   themes,
   defaultTheme,
   parentSelector = DEFAULT_ELEMENT_SELECTOR,
@@ -47,7 +47,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = any>({
       if (newThemeClasses.length > 0) {
         parentElement.classList.add(...newThemeClasses);
       }
-    }, [themeOverride, selected, parentSelector]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };
diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
index dee9988ec7d0..05ad62792e7c 100644
--- a/code/addons/themes/src/decorators/data-attribute.decorator.tsx
+++ b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
@@ -31,7 +31,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
       if (parentElement) {
         parentElement.setAttribute(attributeName, themes[themeKey]);
       }
-    }, [themeOverride, selected, parentSelector, attributeName]);
+    }, [themeOverride, selected]);
 
     return storyFn();
   };
diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
index 09eb5824c488..f8b477810035 100644
--- a/code/addons/themes/src/decorators/provider.decorator.tsx
+++ b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -38,7 +38,7 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
       const pairs = Object.entries(themes);
 
       return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName];
-    }, [themes, selected, themeOverride]);
+    }, [selected, themeOverride]);
 
     if (!Provider) {
       return (
diff --git a/code/addons/themes/src/preview.tsx b/code/addons/themes/src/preview.tsx
index 28c52bdbb57a..6f4a444e7f7c 100644
--- a/code/addons/themes/src/preview.tsx
+++ b/code/addons/themes/src/preview.tsx
@@ -1,7 +1,6 @@
 import type { Renderer, ProjectAnnotations } from 'storybook/internal/types';
-import { GLOBAL_KEY } from './constants';
+import { GLOBAL_KEY as KEY } from './constants';
 
-export const globals: ProjectAnnotations<Renderer>['globals'] = {
-  // Required to make sure SB picks this up from URL params
-  [GLOBAL_KEY]: '',
+export const initialGlobals: ProjectAnnotations<Renderer>['initialGlobals'] = {
+  [KEY]: '',
 };
diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx
index bbc836177ea0..d57b9ce1e5e8 100644
--- a/code/addons/themes/src/theme-switcher.tsx
+++ b/code/addons/themes/src/theme-switcher.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React from 'react';
 import {
   useAddonState,
   useChannel,
@@ -17,6 +17,7 @@ import {
   THEMING_EVENTS,
   DEFAULT_ADDON_STATE,
   DEFAULT_THEME_PARAMETERS,
+  GLOBAL_KEY as KEY,
 } from './constants';
 
 const IconButtonLabel = styled.div(({ theme }) => ({
@@ -27,11 +28,11 @@ const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesL
 const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2;
 
 export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
-  const { themeOverride } = useParameter<ThemeParameters>(
+  const { themeOverride, disable } = useParameter<ThemeParameters>(
     PARAM_KEY,
     DEFAULT_THEME_PARAMETERS
   ) as ThemeParameters;
-  const [{ theme: selected }, updateGlobals] = useGlobals();
+  const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals();
 
   const channel = addons.getChannel();
   const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES);
@@ -45,6 +46,8 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     initializeThemeState
   );
 
+  const isLocked = KEY in storyGlobals || !!themeOverride;
+
   useChannel({
     [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => {
       updateState((state) => ({
@@ -55,21 +58,24 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
     },
   });
 
-  const label = useMemo(() => {
-    if (themeOverride) {
-      return <>Story override</>;
-    }
-
-    const themeName = selected || themeDefault;
+  const themeName = selected || themeDefault;
+  let label = '';
+  if (isLocked) {
+    label = 'Story override';
+  } else if (themeName) {
+    label = `${themeName} theme`;
+  }
 
-    return themeName && <>{`${themeName} theme`}</>;
-  }, [themeOverride, themeDefault, selected]);
+  if (disable) {
+    return null;
+  }
 
   if (hasTwoThemes(themesList)) {
     const currentTheme = selected || themeDefault;
     const alternateTheme = themesList.find((theme) => theme !== currentTheme);
     return (
       <IconButton
+        disabled={isLocked}
         key={THEME_SWITCHER_ID}
         active={!themeOverride}
         title="Theme"
@@ -78,40 +84,43 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() {
         }}
       >
         <PaintBrushIcon />
-        {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        {label ? <IconButtonLabel>{label}</IconButtonLabel> : null}
       </IconButton>
     );
   }
 
   if (hasMultipleThemes(themesList)) {
     return (
-      <Fragment>
-        <WithTooltip
-          placement="top"
-          trigger="click"
-          closeOnOutsideClick
-          tooltip={({ onHide }) => {
-            return (
-              <TooltipLinkList
-                links={themesList.map((theme) => ({
-                  id: theme,
-                  title: theme,
-                  active: selected === theme,
-                  onClick: () => {
-                    updateGlobals({ theme });
-                    onHide();
-                  },
-                }))}
-              />
-            );
-          }}
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        closeOnOutsideClick
+        tooltip={({ onHide }) => {
+          return (
+            <TooltipLinkList
+              links={themesList.map((theme) => ({
+                id: theme,
+                title: theme,
+                active: selected === theme,
+                onClick: () => {
+                  updateGlobals({ theme });
+                  onHide();
+                },
+              }))}
+            />
+          );
+        }}
+      >
+        <IconButton
+          key={THEME_SWITCHER_ID}
+          active={!themeOverride}
+          title="Theme"
+          disabled={isLocked}
         >
-          <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-            <PaintBrushIcon />
-            {label && <IconButtonLabel>{label}</IconButtonLabel>}
-          </IconButton>
-        </WithTooltip>
-      </Fragment>
+          <PaintBrushIcon />
+          {label && <IconButtonLabel>{label}</IconButtonLabel>}
+        </IconButton>
+      </WithTooltip>
     );
   }
 
diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts
new file mode 100644
index 000000000000..aba8f17d0e79
--- /dev/null
+++ b/code/addons/themes/template/stories/decorators.stories.ts
@@ -0,0 +1,96 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  withThemeByClassName,
+  withThemeByDataAttribute,
+  withThemeFromJSXProvider,
+} from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  globals: {
+    sb_theme: 'light',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const WithThemeByClassName = {
+  globals: {},
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeByDataAttribute = {
+  globals: {},
+  decorators: [
+    withThemeByDataAttribute({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const WithThemeFromJSXProvider = {
+  globals: {},
+  decorators: [
+    withThemeFromJSXProvider({
+      defaultTheme: 'a',
+      themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } },
+      Provider: ({ theme, children }: any) => {
+        // this is not was a normal provider looks like obviously, but this needs to work in non-react as well
+        // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here
+        setTimeout(() => {
+          const element = globalThis.document.querySelector('#storybook-root > *');
+          element?.classList.remove('theme-a', 'theme-b');
+          element?.classList.add(theme.custom);
+        }, 16);
+        return children;
+      },
+    }),
+  ],
+};
diff --git a/code/addons/themes/template/stories/globals.stories.ts b/code/addons/themes/template/stories/globals.stories.ts
new file mode 100644
index 000000000000..3d193d1fa71a
--- /dev/null
+++ b/code/addons/themes/template/stories/globals.stories.ts
@@ -0,0 +1,63 @@
+import { global as globalThis } from '@storybook/global';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  globals: {
+    sb_theme: 'light',
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const SetGlobal = {
+  globals: {
+    theme: 'b',
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
diff --git a/code/addons/themes/template/stories/parameters.stories.ts b/code/addons/themes/template/stories/parameters.stories.ts
new file mode 100644
index 000000000000..f2906696859f
--- /dev/null
+++ b/code/addons/themes/template/stories/parameters.stories.ts
@@ -0,0 +1,80 @@
+import { global as globalThis } from '@storybook/global';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { useEffect } from 'storybook/internal/preview-api';
+
+const cleanup = () => {
+  const existing = globalThis.document.querySelector('style[data-theme-css]');
+  if (existing) {
+    existing.remove();
+  }
+};
+
+const addStyleSheetDecorator = (storyFn: any) => {
+  useEffect(() => {
+    cleanup();
+
+    const sheet = globalThis.document.createElement('style');
+    sheet.setAttribute('data-theme-css', '');
+    sheet.textContent = `
+      [data-theme="theme-a"], .theme-a {
+        background-color: white;
+        color: black;
+      }
+      [data-theme="theme-b"], .theme-b {
+        background-color: black;
+        color: white;
+      }
+    `;
+
+    globalThis.document.body.appendChild(sheet);
+
+    return cleanup;
+  });
+
+  return storyFn();
+};
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the themes',
+  },
+  globals: {
+    sb_theme: 'light',
+  },
+  parameters: {
+    chromatic: { disable: true },
+    themes: { disable: false },
+  },
+  decorators: [addStyleSheetDecorator],
+};
+
+export const SetOverride = {
+  parameters: {
+    themes: {
+      themeOverride: 'b',
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
+
+export const Disabled = {
+  parameters: {
+    themes: {
+      disable: true,
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      defaultTheme: 'a',
+      themes: { a: 'theme-a', b: 'theme-b' },
+      parentSelector: '#storybook-root > *',
+    }),
+  ],
+};
diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
index 684c92214f3c..bc093fabfade 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx
@@ -4,6 +4,7 @@ import { Icons, IconButton, type IconsProps } from 'storybook/internal/component
 
 interface ToolbarMenuButtonProps {
   active: boolean;
+  disabled?: boolean;
   title: string;
   icon?: IconsProps['icon'];
   description: string;
@@ -16,13 +17,19 @@ interface ToolbarMenuButtonProps {
 
 export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
   active,
+  disabled,
   title,
   icon,
   description,
   onClick,
 }) => {
   return (
-    <IconButton active={active} title={description} onClick={onClick}>
+    <IconButton
+      active={active}
+      title={description}
+      disabled={disabled}
+      onClick={disabled ? () => {} : onClick}
+    >
       {icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
       {title ? `\xa0${title}` : null}
     </IconButton>
diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx
index 607d23ec8823..b54f0df44e59 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx
@@ -18,11 +18,12 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
     description,
     toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle },
   }) => {
-    const [globals, updateGlobals] = useGlobals();
+    const [globals, updateGlobals, storyGlobals] = useGlobals();
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
     const currentValue = globals[id];
     const hasGlobalValue = !!currentValue;
+    const isOverridden = id in storyGlobals;
     let icon = _icon;
     let title = _title;
 
@@ -42,7 +43,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       (value: string | undefined) => {
         updateGlobals({ [id]: value });
       },
-      [currentValue, updateGlobals]
+      [id, updateGlobals]
     );
 
     return (
@@ -64,6 +65,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
               const listItem = ToolbarMenuListItem({
                 ...item,
                 currentValue,
+                disabled: isOverridden,
                 onClick: () => {
                   handleItemClick(item.value);
                   onHide();
@@ -77,12 +79,15 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
         closeOnOutsideClick
         onVisibleChange={setIsTooltipVisible}
       >
-        <ToolbarMenuButton
-          active={isTooltipVisible || hasGlobalValue}
-          description={description || ''}
-          icon={icon}
-          title={title || ''}
-        />
+        {
+          <ToolbarMenuButton
+            active={isTooltipVisible || hasGlobalValue}
+            disabled={isOverridden}
+            description={description || ''}
+            icon={icon}
+            title={title || ''}
+          />
+        }
       </WithTooltip>
     );
   }
diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
index a56f415b2d6d..39fa7df5dace 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
@@ -6,6 +6,7 @@ import type { ToolbarItem } from '../types';
 export type ToolbarMenuListItemProps = {
   currentValue: string;
   onClick: () => void;
+  disabled?: boolean;
 } & ToolbarItem;
 
 export const ToolbarMenuListItem = ({
@@ -15,6 +16,7 @@ export const ToolbarMenuListItem = ({
   icon,
   hideIcon,
   onClick,
+  disabled,
   currentValue,
 }: ToolbarMenuListItemProps) => {
   const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
@@ -24,7 +26,7 @@ export const ToolbarMenuListItem = ({
     active: currentValue === value,
     right,
     title,
-    icon,
+    disabled,
     onClick,
   };
 
diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts
index c82a6f8264d4..dd5b52ddece0 100644
--- a/code/addons/toolbars/template/stories/globals.stories.ts
+++ b/code/addons/toolbars/template/stories/globals.stories.ts
@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
+import type { DecoratorFunction } from 'storybook/internal/types';
 
 const greetingForLocale = (locale: string) => {
   switch (locale) {
@@ -20,14 +20,33 @@ const greetingForLocale = (locale: string) => {
 export default {
   component: globalThis.Components.Pre,
   decorators: [
-    (storyFn: PartialStoryFn, { globals }: StoryContext) => {
+    (storyFn, { globals }) => {
       const object = {
         ...globals,
         caption: `Locale is '${globals.locale}', so I say: ${greetingForLocale(globals.locale)}`,
       };
       return storyFn({ args: { object } });
     },
-  ],
+  ] satisfies DecoratorFunction[],
 };
 
 export const Basic = {};
+
+export const OverrideLocale = {
+  globals: {
+    locale: 'kr',
+  },
+};
+
+export const OverrideTheme = {
+  globals: {
+    sb_theme: 'dark',
+  },
+};
+
+export const OverrideBoth = {
+  globals: {
+    locale: 'kr',
+    sb_theme: 'dark',
+  },
+};
diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts
index c37009553346..fe2f2531df93 100644
--- a/code/addons/toolbars/template/stories/preview.ts
+++ b/code/addons/toolbars/template/stories/preview.ts
@@ -1,5 +1,5 @@
 export const globalTypes = {
-  theme: {
+  sb_theme: {
     name: 'Theme',
     description: 'Global theme for components',
     toolbar: {
@@ -42,3 +42,8 @@ export const globalTypes = {
     },
   },
 };
+
+export const initialGlobals = {
+  sb_theme: 'light',
+  locale: 'en',
+};
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 203cccc16fda..2ef52480c45a 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -69,7 +69,6 @@
   },
   "bundler": {
     "exportEntries": [
-      "./src/models/index.ts",
       "./src/index.ts"
     ],
     "managerEntries": [
diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
deleted file mode 100644
index ff2bfd3d155c..000000000000
--- a/code/addons/viewport/src/Tool.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import type { ReactNode, FC } from 'react';
-import React, { useState, Fragment, useEffect, useRef, memo } from 'react';
-import memoize from 'memoizerific';
-
-import { styled, Global, type Theme, withTheme } from 'storybook/internal/theming';
-
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
-
-import { useStorybookApi, useParameter, useGlobals } from 'storybook/internal/manager-api';
-import { GrowIcon, TransferIcon } from '@storybook/icons';
-import { registerShortcuts } from './shortcuts';
-import { PARAM_KEY } from './constants';
-import { MINIMAL_VIEWPORTS } from './defaults';
-import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models';
-
-interface ViewportItem {
-  id: string;
-  title: string;
-  styles: Styles;
-  type: 'desktop' | 'mobile' | 'tablet' | 'other';
-  default?: boolean;
-}
-
-const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [
-  ...baseViewports,
-  ...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })),
-]);
-
-const responsiveViewport: ViewportItem = {
-  id: 'reset',
-  title: 'Reset viewport',
-  styles: null,
-  type: 'other',
-};
-
-const baseViewports: ViewportItem[] = [responsiveViewport];
-
-const toLinks = memoize(50)((
-  list: ViewportItem[],
-  active: LinkBase,
-  updateGlobals,
-  close
-): Link[] => {
-  return list
-    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
-    .map((i) => {
-      return {
-        ...i,
-        onClick: () => {
-          updateGlobals({ viewport: i.id });
-          close();
-        },
-      };
-    });
-});
-
-interface LinkBase {
-  id: string;
-  title: string;
-  right?: ReactNode;
-  type: 'desktop' | 'mobile' | 'tablet' | 'other';
-  styles: ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
-}
-
-interface Link extends LinkBase {
-  onClick: () => void;
-}
-
-const flip = ({ width, height, ...styles }: ViewportStyles) => ({
-  ...styles,
-  height: width,
-  width: height,
-});
-
-const ActiveViewportSize = styled.div(() => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-}));
-
-const ActiveViewportLabel = styled.div(({ theme }) => ({
-  display: 'inline-block',
-  textDecoration: 'none',
-  padding: 10,
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '1',
-  height: 40,
-  border: 'none',
-  borderTop: '3px solid transparent',
-  borderBottom: '3px solid transparent',
-  background: 'transparent',
-}));
-
-const IconButtonWithLabel = styled(IconButton)(() => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-}));
-
-const IconButtonLabel = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
-  marginLeft: 10,
-}));
-
-const getStyles = (
-  prevStyles: ViewportStyles | undefined,
-  styles: Styles,
-  isRotated: boolean
-): ViewportStyles | undefined => {
-  if (styles === null) {
-    return undefined;
-  }
-
-  const result = typeof styles === 'function' ? styles(prevStyles) : styles;
-  return isRotated ? flip(result) : result;
-};
-
-export const ViewportTool: FC = memo(
-  withTheme(({ theme }: { theme: Theme }) => {
-    const [globals, updateGlobals] = useGlobals();
-
-    const {
-      viewports = MINIMAL_VIEWPORTS,
-      defaultOrientation,
-      defaultViewport,
-      disable,
-    } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
-
-    const list = toList(viewports);
-    const api = useStorybookApi();
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-
-    if (defaultViewport && !list.find((i) => i.id === defaultViewport)) {
-      console.warn(
-        `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
-      );
-    }
-
-    useEffect(() => {
-      registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
-    }, [viewports, globals, globals.viewport, updateGlobals, api]);
-
-    useEffect(() => {
-      const defaultRotated = defaultOrientation === 'landscape';
-
-      if (
-        (defaultViewport && globals.viewport !== defaultViewport) ||
-        (defaultOrientation && globals.viewportRotated !== defaultRotated)
-      ) {
-        updateGlobals({
-          viewport: defaultViewport,
-          viewportRotated: defaultRotated,
-        });
-      }
-      // NOTE: we don't want to re-run this effect when `globals` changes
-      // due to https://github.com/storybookjs/storybook/issues/26334
-      //
-      // Also, this *will* rerun every time you change story as the parameter is briefly `undefined`.
-      // This behaviour is intentional, if a bit of a happy accident in implementation.
-      //
-      // Ultimately this process of "locking in" a parameter value should be
-      // replaced by https://github.com/storybookjs/storybook/discussions/23347
-      // or something similar.
-      //
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultOrientation, defaultViewport, updateGlobals]);
-
-    const item =
-      list.find((i) => i.id === globals.viewport) ||
-      list.find((i) => i.id === defaultViewport) ||
-      list.find((i) => i.default) ||
-      responsiveViewport;
-
-    const ref = useRef<ViewportStyles>();
-
-    const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
-
-    useEffect(() => {
-      ref.current = styles;
-    }, [item]);
-
-    if (disable || Object.entries(viewports).length === 0) {
-      return null;
-    }
-
-    return (
-      <Fragment>
-        <WithTooltip
-          placement="top"
-          tooltip={({ onHide }) => (
-            <TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
-          )}
-          closeOnOutsideClick
-          onVisibleChange={setIsTooltipVisible}
-        >
-          <IconButtonWithLabel
-            key="viewport"
-            title="Change the size of the preview"
-            active={isTooltipVisible || !!styles}
-            onDoubleClick={() => {
-              updateGlobals({ viewport: responsiveViewport.id });
-            }}
-          >
-            <GrowIcon />
-            {styles ? (
-              <IconButtonLabel>
-                {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
-              </IconButtonLabel>
-            ) : null}
-          </IconButtonWithLabel>
-        </WithTooltip>
-
-        {styles ? (
-          <ActiveViewportSize>
-            <Global
-              styles={{
-                [`iframe[data-is-storybook="true"]`]: {
-                  ...(styles || {
-                    width: '100%',
-                    height: '100%',
-                  }),
-                },
-              }}
-            />
-            <ActiveViewportLabel title="Viewport width">
-              {styles.width.replace('px', '')}
-            </ActiveViewportLabel>
-            <IconButton
-              key="viewport-rotate"
-              title="Rotate viewport"
-              onClick={() => {
-                updateGlobals({ viewportRotated: !globals.viewportRotated });
-              }}
-            >
-              <TransferIcon />
-            </IconButton>
-            <ActiveViewportLabel title="Viewport height">
-              {styles.height.replace('px', '')}
-            </ActiveViewportLabel>
-          </ActiveViewportSize>
-        ) : null}
-      </Fragment>
-    );
-  })
-);
diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx
new file mode 100644
index 000000000000..8ee3c3bfb966
--- /dev/null
+++ b/code/addons/viewport/src/components/Tool.tsx
@@ -0,0 +1,196 @@
+import React, { useState, Fragment, useEffect, type FC, useCallback } from 'react';
+
+import { Global } from 'storybook/internal/theming';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+import { useGlobals, type API, useParameter } from 'storybook/internal/manager-api';
+
+import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons';
+import { PARAM_KEY as KEY } from '../constants';
+import { registerShortcuts } from '../shortcuts';
+import {
+  IconButtonWithLabel,
+  IconButtonLabel,
+  ActiveViewportSize,
+  ActiveViewportLabel,
+  iconsMap,
+  emptyViewportMap,
+} from '../utils';
+import { responsiveViewport } from '../responsiveViewport';
+import type { Config, Viewport, ViewportMap, GlobalState, GlobalStateUpdate } from '../types';
+
+interface PureProps {
+  item: Viewport;
+  updateGlobals: ReturnType<typeof useGlobals>['1'];
+  setIsTooltipVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  viewportMap: ViewportMap;
+  viewportName: any;
+  isLocked: boolean;
+  isActive: boolean;
+  isRotated: any;
+  width: string;
+  height: string;
+}
+
+type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
+
+export const ViewportTool: FC<{ api: API }> = ({ api }) => {
+  const config = useParameter<Config>(KEY);
+  const [globals, updateGlobals, storyGlobals] = useGlobals();
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  const { options = emptyViewportMap, disable } = config || {};
+  const data = globals?.[KEY] || {};
+  const viewportName: string = data.value;
+  const isRotated: boolean = data.isRotated;
+
+  const item = options[viewportName] || responsiveViewport;
+  const isActive = isTooltipVisible || item !== responsiveViewport;
+  const isLocked = KEY in storyGlobals;
+
+  const length = Object.keys(options).length;
+
+  useEffect(() => {
+    registerShortcuts(api, viewportName, updateGlobals, Object.keys(options));
+  }, [options, viewportName, updateGlobals, api]);
+
+  if (item.styles === null || !options || length < 1) {
+    return null;
+  }
+
+  if (typeof item.styles === 'function') {
+    console.warn(
+      'Addon Viewport no longer supports dynamic styles using a function, use css calc() instead'
+    );
+    return null;
+  }
+
+  const width = isRotated ? item.styles.height : item.styles.width;
+  const height = isRotated ? item.styles.width : item.styles.height;
+
+  if (disable) {
+    return null;
+  }
+
+  return (
+    <Pure
+      {...{
+        item,
+        updateGlobals,
+        viewportMap: options,
+        viewportName,
+        isRotated,
+        setIsTooltipVisible,
+        isLocked,
+        isActive,
+        width,
+        height,
+      }}
+    />
+  );
+};
+
+const Pure = React.memo(function PureTool(props: PureProps) {
+  const {
+    item,
+    viewportMap,
+    viewportName,
+    isRotated,
+    updateGlobals,
+    setIsTooltipVisible,
+    isLocked,
+    isActive,
+    width,
+    height,
+  } = props;
+
+  const update = useCallback(
+    (input: GlobalStateUpdate) => updateGlobals({ [KEY]: input }),
+    [updateGlobals]
+  );
+
+  return (
+    <Fragment>
+      <WithTooltip
+        placement="bottom"
+        tooltip={({ onHide }) => (
+          <TooltipLinkList
+            links={[
+              ...(length > 0 && item !== responsiveViewport
+                ? [
+                    {
+                      id: 'reset',
+                      title: 'Reset viewport',
+                      icon: <RefreshIcon />,
+                      onClick: () => {
+                        update({ value: undefined, isRotated: false });
+                        onHide();
+                      },
+                    },
+                  ]
+                : []),
+              ...Object.entries(viewportMap).map<Link>(([k, value]) => ({
+                id: k,
+                title: value.name,
+                icon: iconsMap[value.type],
+                active: k === viewportName,
+                onClick: () => {
+                  update({ value: k, isRotated: false });
+                  onHide();
+                },
+              })),
+            ]}
+          />
+        )}
+        closeOnOutsideClick
+        onVisibleChange={setIsTooltipVisible}
+      >
+        <IconButtonWithLabel
+          disabled={isLocked}
+          key="viewport"
+          title="Change the size of the preview"
+          active={isActive}
+          onDoubleClick={() => {
+            update({ value: undefined, isRotated: false });
+          }}
+        >
+          <GrowIcon />
+          {item !== responsiveViewport ? (
+            <IconButtonLabel>
+              {item.name} {isRotated ? `(L)` : `(P)`}
+            </IconButtonLabel>
+          ) : null}
+        </IconButtonWithLabel>
+      </WithTooltip>
+
+      <Global
+        styles={{
+          [`iframe[data-is-storybook="true"]`]: { width, height },
+        }}
+      />
+
+      {item !== responsiveViewport ? (
+        <ActiveViewportSize>
+          <ActiveViewportLabel title="Viewport width">
+            {width.replace('px', '')}
+          </ActiveViewportLabel>
+          {!isLocked ? (
+            <IconButton
+              key="viewport-rotate"
+              title="Rotate viewport"
+              onClick={() => {
+                update({ value: viewportName, isRotated: !isRotated });
+              }}
+            >
+              <TransferIcon />
+            </IconButton>
+          ) : (
+            '/'
+          )}
+          <ActiveViewportLabel title="Viewport height">
+            {height.replace('px', '')}
+          </ActiveViewportLabel>
+        </ActiveViewportSize>
+      ) : null}
+    </Fragment>
+  );
+});
diff --git a/code/addons/viewport/src/defaults.ts b/code/addons/viewport/src/defaults.ts
index fdc6246eb897..4190ccb7f3cc 100644
--- a/code/addons/viewport/src/defaults.ts
+++ b/code/addons/viewport/src/defaults.ts
@@ -1,4 +1,4 @@
-import type { ViewportMap } from './models';
+import type { ViewportMap } from './types';
 
 export const INITIAL_VIEWPORTS: ViewportMap = {
   iphone5: {
diff --git a/code/addons/viewport/src/index.ts b/code/addons/viewport/src/index.ts
index 79e0216d7923..fac593a2f2dd 100644
--- a/code/addons/viewport/src/index.ts
+++ b/code/addons/viewport/src/index.ts
@@ -1,2 +1,2 @@
 export * from './defaults';
-export type * from './models';
+export type * from './types';
diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx
new file mode 100644
index 000000000000..c3eb3f59f7ae
--- /dev/null
+++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx
@@ -0,0 +1,243 @@
+import type { ReactNode, FC } from 'react';
+import React, { useState, Fragment, useEffect, useRef, memo } from 'react';
+import memoize from 'memoizerific';
+
+import { styled, Global } from 'storybook/internal/theming';
+
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+
+import { useStorybookApi, useParameter, useGlobals } from 'storybook/internal/manager-api';
+import { GrowIcon, TransferIcon } from '@storybook/icons';
+import { registerShortcuts } from '../shortcuts';
+import { PARAM_KEY } from '../constants';
+import { MINIMAL_VIEWPORTS } from '../defaults';
+import type { ViewportMap, ViewportStyles, Styles } from '../types';
+import type { ViewportAddonParameter } from './ViewportAddonParameter';
+
+interface ViewportItem {
+  id: string;
+  title: string;
+  styles: Styles;
+  type: 'desktop' | 'mobile' | 'tablet' | 'other';
+  default?: boolean;
+}
+
+const toList = memoize(50)((items: ViewportMap): ViewportItem[] => [
+  ...baseViewports,
+  ...Object.entries(items).map(([id, { name, ...rest }]) => ({ ...rest, id, title: name })),
+]);
+
+const responsiveViewport: ViewportItem = {
+  id: 'reset',
+  title: 'Reset viewport',
+  styles: null,
+  type: 'other',
+};
+
+const baseViewports: ViewportItem[] = [responsiveViewport];
+
+const toLinks = memoize(50)((
+  list: ViewportItem[],
+  active: LinkBase,
+  updateGlobals,
+  close
+): Link[] => {
+  return list
+    .filter((i) => i.id !== responsiveViewport.id || active.id !== i.id)
+    .map((i) => {
+      return {
+        ...i,
+        onClick: () => {
+          updateGlobals({ viewport: i.id });
+          close();
+        },
+      };
+    });
+});
+
+interface LinkBase {
+  id: string;
+  title: string;
+  right?: ReactNode;
+  type: 'desktop' | 'mobile' | 'tablet' | 'other';
+  styles: ViewportStyles | ((s: ViewportStyles) => ViewportStyles) | null;
+}
+
+interface Link extends LinkBase {
+  onClick: () => void;
+}
+
+const flip = ({ width, height, ...styles }: ViewportStyles) => ({
+  ...styles,
+  height: width,
+  width: height,
+});
+
+const ActiveViewportSize = styled.div(() => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+}));
+
+const ActiveViewportLabel = styled.div(({ theme }) => ({
+  display: 'inline-block',
+  textDecoration: 'none',
+  padding: 10,
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '1',
+  height: 40,
+  border: 'none',
+  borderTop: '3px solid transparent',
+  borderBottom: '3px solid transparent',
+  background: 'transparent',
+}));
+
+const IconButtonWithLabel = styled(IconButton)(() => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+}));
+
+const IconButtonLabel = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  marginLeft: 10,
+}));
+
+const getStyles = (
+  prevStyles: ViewportStyles | undefined,
+  styles: Styles,
+  isRotated: boolean
+): ViewportStyles | undefined => {
+  if (styles === null) {
+    return undefined;
+  }
+
+  const result = typeof styles === 'function' ? styles(prevStyles) : styles;
+  return isRotated ? flip(result) : result;
+};
+
+export const ViewportToolLegacy: FC = memo(function Tool() {
+  const [globals, updateGlobals] = useGlobals();
+
+  const {
+    viewports = MINIMAL_VIEWPORTS,
+    defaultOrientation,
+    defaultViewport,
+    disable,
+  } = useParameter<ViewportAddonParameter>(PARAM_KEY, {});
+
+  const list = toList(viewports);
+  const api = useStorybookApi();
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+  if (defaultViewport && !list.find((i) => i.id === defaultViewport)) {
+    console.warn(
+      `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`
+    );
+  }
+
+  useEffect(() => {
+    registerShortcuts(api, globals, updateGlobals, Object.keys(viewports));
+  }, [viewports, globals, globals.viewport, updateGlobals, api]);
+
+  useEffect(() => {
+    const defaultRotated = defaultOrientation === 'landscape';
+
+    if (
+      (defaultViewport && globals.viewport !== defaultViewport) ||
+      (defaultOrientation && globals.viewportRotated !== defaultRotated)
+    ) {
+      updateGlobals({
+        viewport: defaultViewport,
+        viewportRotated: defaultRotated,
+      });
+    }
+    // NOTE: we don't want to re-run this effect when `globals` changes
+    // due to https://github.com/storybookjs/storybook/issues/26334
+    //
+    // Also, this *will* rerun every time you change story as the parameter is briefly `undefined`.
+    // This behavior is intentional, if a bit of a happy accident in implementation.
+    //
+    // Ultimately this process of "locking in" a parameter value should be
+    // replaced by https://github.com/storybookjs/storybook/discussions/23347
+    // or something similar.
+    //
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultOrientation, defaultViewport, updateGlobals]);
+
+  const item =
+    list.find((i) => i.id === globals.viewport) ||
+    list.find((i) => i.id === defaultViewport) ||
+    list.find((i) => i.default) ||
+    responsiveViewport;
+
+  const ref = useRef<ViewportStyles>();
+
+  const styles = getStyles(ref.current, item.styles, globals.viewportRotated);
+
+  useEffect(() => {
+    ref.current = styles;
+  }, [item]);
+
+  if (disable || Object.entries(viewports).length === 0) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <WithTooltip
+        placement="top"
+        tooltip={({ onHide }) => (
+          <TooltipLinkList links={toLinks(list, item, updateGlobals, onHide)} />
+        )}
+        closeOnOutsideClick
+        onVisibleChange={setIsTooltipVisible}
+      >
+        <IconButtonWithLabel
+          key="viewport"
+          title="Change the size of the preview"
+          active={isTooltipVisible || !!styles}
+          onDoubleClick={() => {
+            updateGlobals({ viewport: responsiveViewport.id });
+          }}
+        >
+          <GrowIcon />
+          {styles ? (
+            <IconButtonLabel>
+              {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`}
+            </IconButtonLabel>
+          ) : null}
+        </IconButtonWithLabel>
+      </WithTooltip>
+
+      {styles ? (
+        <ActiveViewportSize>
+          <Global
+            styles={{
+              [`iframe[data-is-storybook="true"]`]: {
+                ...(styles || {
+                  width: '100%',
+                  height: '100%',
+                }),
+              },
+            }}
+          />
+          <ActiveViewportLabel title="Viewport width">
+            {styles.width.replace('px', '')}
+          </ActiveViewportLabel>
+          <IconButton
+            key="viewport-rotate"
+            title="Rotate viewport"
+            onClick={() => {
+              updateGlobals({ viewportRotated: !globals.viewportRotated });
+            }}
+          >
+            <TransferIcon />
+          </IconButton>
+          <ActiveViewportLabel title="Viewport height">
+            {styles.height.replace('px', '')}
+          </ActiveViewportLabel>
+        </ActiveViewportSize>
+      ) : null}
+    </Fragment>
+  );
+});
diff --git a/code/addons/viewport/src/models/ViewportAddonParameter.ts b/code/addons/viewport/src/legacy/ViewportAddonParameter.ts
similarity index 71%
rename from code/addons/viewport/src/models/ViewportAddonParameter.ts
rename to code/addons/viewport/src/legacy/ViewportAddonParameter.ts
index 875ca46fbc7d..1d68f691f90b 100644
--- a/code/addons/viewport/src/models/ViewportAddonParameter.ts
+++ b/code/addons/viewport/src/legacy/ViewportAddonParameter.ts
@@ -1,5 +1,6 @@
-import type { ViewportMap } from './Viewport';
+import type { ViewportMap } from '../types';
 
+// TODO: remove at 9.0
 export interface ViewportAddonParameter {
   disable?: boolean;
   defaultOrientation?: 'portrait' | 'landscape';
diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx
index ee597958c1e6..e7425aff76d3 100644
--- a/code/addons/viewport/src/manager.tsx
+++ b/code/addons/viewport/src/manager.tsx
@@ -3,13 +3,15 @@ import { addons, types } from 'storybook/internal/manager-api';
 
 import { ADDON_ID } from './constants';
 
-import { ViewportTool } from './Tool';
+import { ViewportToolLegacy } from './legacy/ToolLegacy';
+import { ViewportTool } from './components/Tool';
 
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, (api) => {
   addons.add(ADDON_ID, {
     title: 'viewport / media-queries',
     type: types.TOOL,
     match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
-    render: () => <ViewportTool />,
+    render: () =>
+      FEATURES?.viewportStoryGlobals ? <ViewportTool api={api} /> : <ViewportToolLegacy />,
   });
 });
diff --git a/code/addons/viewport/src/models/Viewport.ts b/code/addons/viewport/src/models/Viewport.ts
deleted file mode 100644
index 7b3c98e069c9..000000000000
--- a/code/addons/viewport/src/models/Viewport.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
-
-export interface Viewport {
-  name: string;
-  styles: Styles;
-  type: 'desktop' | 'mobile' | 'tablet' | 'other';
-}
-
-export interface ViewportStyles {
-  height: string;
-  width: string;
-}
-
-export interface ViewportMap {
-  [key: string]: Viewport;
-}
diff --git a/code/addons/viewport/src/models/index.ts b/code/addons/viewport/src/models/index.ts
deleted file mode 100644
index 7eb7ed1a6942..000000000000
--- a/code/addons/viewport/src/models/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type * from './Viewport';
-export type * from './ViewportAddonParameter';
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
index a429414748df..a59790415d2f 100644
--- a/code/addons/viewport/src/preview.ts
+++ b/code/addons/viewport/src/preview.ts
@@ -1 +1,11 @@
-export const initialGlobals = { viewport: 'reset', viewportRotated: false };
+import { PARAM_KEY as KEY } from './constants';
+import type { GlobalState } from './types';
+
+const modern: Record<string, GlobalState> = {
+  [KEY]: { value: undefined, isRotated: false },
+};
+
+// TODO: remove in 9.0
+const legacy = { viewport: 'reset', viewportRotated: false };
+
+export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
diff --git a/code/addons/viewport/src/responsiveViewport.tsx b/code/addons/viewport/src/responsiveViewport.tsx
new file mode 100644
index 000000000000..ce108cf07d9a
--- /dev/null
+++ b/code/addons/viewport/src/responsiveViewport.tsx
@@ -0,0 +1,10 @@
+import type { Viewport } from './types';
+
+export const responsiveViewport: Viewport = {
+  name: 'Reset viewport',
+  styles: {
+    height: '100%',
+    width: '100%',
+  },
+  type: 'desktop',
+};
diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts
index b8869f48327c..f53d460b81bd 100644
--- a/code/addons/viewport/src/shortcuts.ts
+++ b/code/addons/viewport/src/shortcuts.ts
@@ -21,7 +21,7 @@ const getPreviousViewport = (viewportsKeys: string[], current: string): string =
 
 export const registerShortcuts = async (
   api: API,
-  globals: any,
+  viewport: any,
   updateGlobals: any,
   viewportsKeys: string[]
 ) => {
@@ -31,7 +31,7 @@ export const registerShortcuts = async (
     actionName: 'previous',
     action: () => {
       updateGlobals({
-        viewport: getPreviousViewport(viewportsKeys, globals.viewport),
+        viewport: getPreviousViewport(viewportsKeys, viewport),
       });
     },
   });
@@ -42,7 +42,7 @@ export const registerShortcuts = async (
     actionName: 'next',
     action: () => {
       updateGlobals({
-        viewport: getNextViewport(viewportsKeys, globals.viewport),
+        viewport: getNextViewport(viewportsKeys, viewport),
       });
     },
   });
diff --git a/code/addons/viewport/src/types.ts b/code/addons/viewport/src/types.ts
new file mode 100644
index 000000000000..33f186c2c3c1
--- /dev/null
+++ b/code/addons/viewport/src/types.ts
@@ -0,0 +1,28 @@
+// TODO: remove the function type from styles in 9.0
+export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
+
+export interface Viewport {
+  name: string;
+  styles: Styles;
+  type: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+export interface ModernViewport {
+  name: string;
+  styles: ViewportStyles;
+  type: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+
+export interface ViewportStyles {
+  height: string;
+  width: string;
+}
+
+export type ViewportMap = Record<string, Viewport>;
+
+export interface Config {
+  options: Record<string, ModernViewport>;
+  disable: boolean;
+}
+
+export type GlobalState = { value: string | undefined; isRotated: boolean };
+export type GlobalStateUpdate = Partial<GlobalState>;
diff --git a/code/addons/viewport/src/typings.d.ts b/code/addons/viewport/src/typings.d.ts
new file mode 100644
index 000000000000..22eb9c03a481
--- /dev/null
+++ b/code/addons/viewport/src/typings.d.ts
@@ -0,0 +1 @@
+declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features'];
diff --git a/code/addons/viewport/src/utils.tsx b/code/addons/viewport/src/utils.tsx
new file mode 100644
index 000000000000..be4f3cb16096
--- /dev/null
+++ b/code/addons/viewport/src/utils.tsx
@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+
+import { styled } from 'storybook/internal/theming';
+import { IconButton } from 'storybook/internal/components';
+
+import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons';
+import type { Viewport, ViewportMap } from './types';
+
+export const ActiveViewportSize = styled.div(() => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+}));
+
+export const ActiveViewportLabel = styled.div(({ theme }) => ({
+  display: 'inline-block',
+  textDecoration: 'none',
+  padding: 10,
+  fontWeight: theme.typography.weight.bold,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '1',
+  height: 40,
+  border: 'none',
+  borderTop: '3px solid transparent',
+  borderBottom: '3px solid transparent',
+  background: 'transparent',
+}));
+
+export const IconButtonWithLabel = styled(IconButton)(() => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+}));
+
+export const IconButtonLabel = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  marginLeft: 10,
+}));
+
+export const iconsMap: Record<Viewport['type'], React.ReactNode> = {
+  desktop: <BrowserIcon />,
+  mobile: <MobileIcon />,
+  tablet: <TabletIcon />,
+  other: <Fragment />,
+};
+
+export const emptyViewportMap: ViewportMap = {};
diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts
new file mode 100644
index 000000000000..621bf0b02c62
--- /dev/null
+++ b/code/addons/viewport/template/stories/globals.stories.ts
@@ -0,0 +1,61 @@
+import { global as globalThis } from '@storybook/global';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const first = Object.keys(MINIMAL_VIEWPORTS)[0];
+
+export default {
+  component: globalThis.Components.Pre,
+  args: {
+    text: 'Testing the viewport',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export const Unset = {
+  globals: {},
+};
+
+export const Selected = {
+  globals: {
+    viewport: {
+      value: first,
+      isRotated: false,
+    },
+  },
+};
+
+export const Orientation = {
+  globals: {
+    viewport: {
+      value: first,
+      isRotated: true,
+    },
+  },
+};
+
+export const Invalid = {
+  globals: {
+    viewport: {
+      value: 'phone',
+      isRotated: false,
+    },
+  },
+};
+
+export const NoRationDefined = {
+  globals: {
+    viewport: {
+      value: first,
+    },
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    viewport: {
+      disable: true,
+    },
+  },
+};
diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts
index 4aba0bd2970a..f98de1eda0c4 100644
--- a/code/addons/viewport/template/stories/parameters.stories.ts
+++ b/code/addons/viewport/template/stories/parameters.stories.ts
@@ -1,6 +1,11 @@
 import { global as globalThis } from '@storybook/global';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
+// these stories only work with `viewportStoryGlobals` set to false
+// because the `default` prop is dropped and because, `values` changed to `options` and is now an object
+
+const first = Object.keys(MINIMAL_VIEWPORTS)[0];
+
 export default {
   component: globalThis.Components.Button,
   args: {
@@ -21,7 +26,7 @@ export const Basic = {
 export const Selected = {
   parameters: {
     viewport: {
-      defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0],
+      defaultViewport: first,
     },
   },
 };
@@ -29,7 +34,7 @@ export const Selected = {
 export const Orientation = {
   parameters: {
     viewport: {
-      defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0],
+      defaultViewport: first,
       defaultOrientation: 'landscape',
     },
   },
diff --git a/code/core/package.json b/code/core/package.json
index 0f84c7d2e674..cfac682c85a1 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -152,6 +152,16 @@
       "import": "./dist/preview/globals.js",
       "require": "./dist/preview/globals.cjs"
     },
+    "./cli": {
+      "types": "./dist/cli/index.d.ts",
+      "import": "./dist/cli/index.js",
+      "require": "./dist/cli/index.cjs"
+    },
+    "./cli/bin": {
+      "types": "./dist/cli/bin/index.d.ts",
+      "import": "./dist/cli/bin/index.js",
+      "require": "./dist/cli/bin/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs",
@@ -239,6 +249,12 @@
       ],
       "preview/globals": [
         "./dist/preview/globals.d.ts"
+      ],
+      "cli": [
+        "./dist/cli/index.d.ts"
+      ],
+      "cli/bin": [
+        "./dist/cli/bin/index.d.ts"
       ]
     }
   },
@@ -262,7 +278,7 @@
     "express": "^4.19.2",
     "process": "^0.11.10",
     "recast": "^0.23.5",
-    "util": "^0.12.4",
+    "semver": "^7.6.2",
     "ws": "^8.2.3"
   },
   "devDependencies": {
@@ -280,7 +296,7 @@
     "@emotion/styled": "^11.11.0",
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@ndelangen/fs-extra-unified": "^1.0.3",
+    "@ndelangen/get-tarball": "^3.0.7",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
@@ -304,10 +320,11 @@
     "@types/picomatch": "^2.3.0",
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.0",
+    "@types/prompts": "^2.0.9",
     "@types/qs": "^6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/react-transition-group": "^4",
-    "@types/semver": "^7.3.4",
+    "@types/semver": "^7.5.8",
     "@types/ws": "^8",
     "@vitest/utils": "^1.3.1",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -323,6 +340,7 @@
     "chai": "^4.4.1",
     "chalk": "^5.3.0",
     "cli-table3": "^0.6.1",
+    "commander": "^6.2.1",
     "comment-parser": "^1.4.1",
     "compression": "^1.7.4",
     "copy-to-clipboard": "^3.3.1",
@@ -330,6 +348,7 @@
     "css": "^3.0.0",
     "deep-object-diff": "^1.1.0",
     "dequal": "^2.0.2",
+    "detect-indent": "^7.0.1",
     "detect-package-manager": "^3.0.2",
     "detect-port": "^1.3.0",
     "diff": "^5.2.0",
@@ -347,12 +366,14 @@
     "flush-promises": "^1.0.2",
     "fs-extra": "^11.1.0",
     "fuse.js": "^3.6.1",
+    "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",
     "globby": "^14.0.1",
     "handlebars": "^4.7.7",
     "js-yaml": "^4.1.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "lazy-universal-dotenv": "^4.0.0",
+    "leven": "^4.0.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.5",
     "memoizerific": "^1.11.3",
@@ -378,9 +399,9 @@
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
     "resolve-from": "^5.0.0",
-    "semver": "^7.3.7",
     "slash": "^5.0.0",
     "store2": "^2.14.2",
+    "strip-json-comments": "^5.0.1",
     "telejson": "^7.2.0",
     "tiny-invariant": "^1.3.1",
     "tinyspy": "^2.2.0",
diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts
index a618dac3b623..a7062abf9a6c 100644
--- a/code/core/scripts/entries.ts
+++ b/code/core/scripts/entries.ts
@@ -36,6 +36,8 @@ export const getEntries = (cwd: string) => {
     define('src/manager/globals-module-info.ts', ['node'], true),
     define('src/manager/globals.ts', ['node'], true),
     define('src/preview/globals.ts', ['node'], true),
+    define('src/cli/index.ts', ['node'], true),
+    define('src/cli/bin/index.ts', ['node'], true),
   ];
 };
 
diff --git a/code/lib/cli/src/NpmOptions.ts b/code/core/src/cli/NpmOptions.ts
similarity index 100%
rename from code/lib/cli/src/NpmOptions.ts
rename to code/core/src/cli/NpmOptions.ts
diff --git a/code/lib/cli/src/generators/ANGULAR/helpers.ts b/code/core/src/cli/angular/helpers.ts
similarity index 98%
rename from code/lib/cli/src/generators/ANGULAR/helpers.ts
rename to code/core/src/cli/angular/helpers.ts
index d4ab56b67a62..9d651fa60cae 100644
--- a/code/lib/cli/src/generators/ANGULAR/helpers.ts
+++ b/code/core/src/cli/angular/helpers.ts
@@ -2,7 +2,7 @@ import fs from 'fs';
 import { join } from 'path';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
-import { MissingAngularJsonError } from 'storybook/internal/server-errors';
+import { MissingAngularJsonError } from '@storybook/core/server-errors';
 import boxen from 'boxen';
 import { logger } from '@storybook/core/node-logger';
 
diff --git a/code/core/src/cli/bin/index.ts b/code/core/src/cli/bin/index.ts
new file mode 100644
index 000000000000..512dc963924b
--- /dev/null
+++ b/code/core/src/cli/bin/index.ts
@@ -0,0 +1,143 @@
+import program from 'commander';
+import chalk from 'chalk';
+import leven from 'leven';
+import { findPackageSync } from 'fd-package-json';
+import invariant from 'tiny-invariant';
+
+import { logger } from '@storybook/core/node-logger';
+import { addToGlobalContext } from '@storybook/core/telemetry';
+import { parseList, getEnvConfig, versions } from '@storybook/core/common';
+
+import { dev } from '../dev';
+import { build } from '../build';
+
+addToGlobalContext('cliVersion', versions.storybook);
+
+const pkg = findPackageSync(__dirname);
+invariant(pkg, 'Failed to find the closest package.json file.');
+const consoleLogger = console;
+
+const command = (name: string) =>
+  program
+    .command(name)
+    .option(
+      '--disable-telemetry',
+      'Disable sending telemetry data',
+      // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+      process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+    )
+    .option('--debug', 'Get more logs in debug mode', false)
+    .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data');
+
+command('dev')
+  .option('-p, --port <number>', 'Port to run Storybook', (str) => parseInt(str, 10))
+  .option('-h, --host <string>', 'Host to run Storybook')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option(
+    '--https',
+    'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
+  )
+  .option(
+    '--ssl-ca <ca>',
+    'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
+    parseList
+  )
+  .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
+  .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
+  .option('--smoke-test', 'Exit after successful start')
+  .option('--ci', "CI mode (skip interactive prompts, don't open browser)")
+  .option('--no-open', 'Do not open Storybook automatically in the browser')
+  .option('--loglevel <level>', 'Control level of logging during build')
+  .option('--quiet', 'Suppress verbose build output')
+  .option('--no-version-updates', 'Suppress update check', true)
+  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+  .option(
+    '--webpack-stats-json [directory]',
+    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
+  )
+  .option('--stats-json [directory]', 'Write stats JSON to disk')
+  .option(
+    '--preview-url <string>',
+    'Disables the default storybook preview and lets your use your own'
+  )
+  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
+  .option('--docs', 'Build a documentation-only site using addon-docs')
+  .option('--exact-port', 'Exit early if the desired port is not available')
+  .option(
+    '--initial-path [path]',
+    'URL path to be appended when visiting Storybook for the first time'
+  )
+  .action(async (options) => {
+    logger.setLevel(program.loglevel);
+    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
+
+    // The key is the field created in `options` variable for
+    // each command line argument. Value is the env variable.
+    getEnvConfig(options, {
+      port: 'SBCONFIG_PORT',
+      host: 'SBCONFIG_HOSTNAME',
+      staticDir: 'SBCONFIG_STATIC_DIR',
+      configDir: 'SBCONFIG_CONFIG_DIR',
+      ci: 'CI',
+    });
+
+    if (parseInt(`${options.port}`, 10)) {
+      options.port = parseInt(`${options.port}`, 10);
+    }
+
+    await dev({ ...options, packageJson: pkg }).catch(() => process.exit(1));
+  });
+
+command('build')
+  .option('-o, --output-dir <dir-name>', 'Directory where to store built files')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
+  .option('--quiet', 'Suppress verbose build output')
+  .option('--loglevel <level>', 'Control level of logging during build')
+  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+  .option(
+    '--webpack-stats-json [directory]',
+    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
+  )
+  .option('--stats-json [directory]', 'Write stats JSON to disk')
+  .option(
+    '--preview-url <string>',
+    'Disables the default storybook preview and lets your use your own'
+  )
+  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
+  .option('--docs', 'Build a documentation-only site using addon-docs')
+  .option('--test', 'Build stories optimized for testing purposes.')
+  .action(async (options) => {
+    process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+    logger.setLevel(program.loglevel);
+    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
+
+    // The key is the field created in `options` variable for
+    // each command line argument. Value is the env variable.
+    getEnvConfig(options, {
+      staticDir: 'SBCONFIG_STATIC_DIR',
+      outputDir: 'SBCONFIG_OUTPUT_DIR',
+      configDir: 'SBCONFIG_CONFIG_DIR',
+    });
+
+    await build({
+      ...options,
+      packageJson: pkg,
+      test: !!options.test || process.env.SB_TESTBUILD === 'true',
+    }).catch(() => process.exit(1));
+  });
+
+program.on('command:*', ([invalidCmd]) => {
+  consoleLogger.error(
+    ' Invalid command: %s.\n See --help for a list of available commands.',
+    invalidCmd
+  );
+  // eslint-disable-next-line no-underscore-dangle
+  const availableCommands = program.commands.map((cmd) => cmd._name);
+  const suggestion = availableCommands.find((cmd) => leven(cmd, invalidCmd) < 3);
+  if (suggestion) {
+    consoleLogger.info(`\n Did you mean ${suggestion}?`);
+  }
+  process.exit(1);
+});
+
+program.usage('<command> [options]').version(String(pkg.version)).parse(process.argv);
diff --git a/code/lib/cli/src/build.ts b/code/core/src/cli/build.ts
similarity index 100%
rename from code/lib/cli/src/build.ts
rename to code/core/src/cli/build.ts
diff --git a/code/lib/cli/src/detect.test.ts b/code/core/src/cli/detect.test.ts
similarity index 100%
rename from code/lib/cli/src/detect.test.ts
rename to code/core/src/cli/detect.test.ts
diff --git a/code/lib/cli/src/detect.ts b/code/core/src/cli/detect.ts
similarity index 97%
rename from code/lib/cli/src/detect.ts
rename to code/core/src/cli/detect.ts
index 440336f74bb8..83b90237aa9b 100644
--- a/code/lib/cli/src/detect.ts
+++ b/code/core/src/cli/detect.ts
@@ -1,5 +1,5 @@
 import * as fs from 'fs';
-import findUp from 'find-up';
+import { findUpSync } from 'find-up';
 import semver from 'semver';
 import { logger } from '@storybook/core/node-logger';
 
@@ -110,8 +110,8 @@ export function detectFrameworkPreset(
  * @returns CoreBuilder
  */
 export async function detectBuilder(packageManager: JsPackageManager, projectType: ProjectType) {
-  const viteConfig = findUp.sync(viteConfigFiles);
-  const webpackConfig = findUp.sync(webpackConfigFiles);
+  const viteConfig = findUpSync(viteConfigFiles);
+  const webpackConfig = findUpSync(webpackConfigFiles);
   const dependencies = await packageManager.getAllDependencies();
 
   if (viteConfig || (dependencies.vite && dependencies.webpack === undefined)) {
@@ -161,7 +161,7 @@ export function isStorybookInstantiated(configDir = resolve(process.cwd(), '.sto
 }
 
 export async function detectPnp() {
-  return !!findUp.sync(['.pnp.js', '.pnp.cjs']);
+  return !!findUpSync(['.pnp.js', '.pnp.cjs']);
 }
 
 export async function detectLanguage(packageManager: JsPackageManager) {
diff --git a/code/lib/cli/src/dev.ts b/code/core/src/cli/dev.ts
similarity index 100%
rename from code/lib/cli/src/dev.ts
rename to code/core/src/cli/dev.ts
diff --git a/code/lib/cli/src/dirs.ts b/code/core/src/cli/dirs.ts
similarity index 88%
rename from code/lib/cli/src/dirs.ts
rename to code/core/src/cli/dirs.ts
index 32f31f6ecadb..88515e6b6683 100644
--- a/code/lib/cli/src/dirs.ts
+++ b/code/core/src/cli/dirs.ts
@@ -7,16 +7,11 @@ import invariant from 'tiny-invariant';
 import { externalFrameworks } from './project_types';
 import type { SupportedRenderers } from './project_types';
 import type { JsPackageManager } from '@storybook/core/common';
-import { versions } from '@storybook/core/common';
+import { temporaryDirectory, versions } from '@storybook/core/common';
 import type { SupportedFrameworks } from '@storybook/core/types';
 
-export function getCliDir() {
-  return dirname(require.resolve('storybook/package.json'));
-}
-
 const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
-  const { temporaryDirectory } = await import('tempy');
-  const tempDirectory = temporaryDirectory();
+  const tempDirectory = await temporaryDirectory();
   const name = request as keyof typeof versions;
 
   // FIXME: this might not be the right version for community packages
diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts b/code/core/src/cli/eslintPlugin.test.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts
rename to code/core/src/cli/eslintPlugin.test.ts
diff --git a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
rename to code/core/src/cli/eslintPlugin.ts
index 8544b64be5b0..75fcaa96bb4c 100644
--- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -7,6 +7,7 @@ import chalk from 'chalk';
 import { readConfig, writeConfig } from '@storybook/core/csf-tools';
 import type { JsPackageManager } from '@storybook/core/common';
 import { paddedLog } from '@storybook/core/common';
+import fs from 'node:fs';
 
 export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs', 'json'];
 const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml'];
@@ -14,7 +15,7 @@ const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml'];
 export const findEslintFile = () => {
   const filePrefix = '.eslintrc';
   const unsupportedExtension = UNSUPPORTED_ESLINT_EXTENSIONS.find((ext: string) =>
-    fse.existsSync(`${filePrefix}.${ext}`)
+    fs.existsSync(`${filePrefix}.${ext}`)
   );
 
   if (unsupportedExtension) {
@@ -22,7 +23,7 @@ export const findEslintFile = () => {
   }
 
   const extension = SUPPORTED_ESLINT_EXTENSIONS.find((ext: string) =>
-    fse.existsSync(`${filePrefix}.${ext}`)
+    fs.existsSync(`${filePrefix}.${ext}`)
   );
   return extension ? `${filePrefix}.${extension}` : null;
 };
diff --git a/code/lib/cli/src/helpers.test.ts b/code/core/src/cli/helpers.test.ts
similarity index 97%
rename from code/lib/cli/src/helpers.test.ts
rename to code/core/src/cli/helpers.test.ts
index 1edbf8a0adb7..9464c8551a9f 100644
--- a/code/lib/cli/src/helpers.test.ts
+++ b/code/core/src/cli/helpers.test.ts
@@ -38,7 +38,6 @@ vi.mock('fs', async (importOriginal) => {
 vi.mock('./dirs', () => ({
   getRendererDir: (_: JsPackageManager, renderer: string) =>
     normalizePath(`@storybook/${renderer}`),
-  getCliDir: () => normalizePath('storybook'),
 }));
 
 vi.mock('fs-extra', async (importOriginal) => {
@@ -123,11 +122,12 @@ describe('Helpers', () => {
         renderer: 'react',
         language,
         packageManager: packageManagerMock,
+        commonAssetsDir: normalizePath('create-storybook/rendererAssets/common'),
       });
 
       expect(fse.copy).toHaveBeenNthCalledWith(
         1,
-        normalizePath('storybook/rendererAssets/common'),
+        normalizePath('create-storybook/rendererAssets/common'),
         './stories',
         expect.anything()
       );
diff --git a/code/lib/cli/src/helpers.ts b/code/core/src/cli/helpers.ts
similarity index 95%
rename from code/lib/cli/src/helpers.ts
rename to code/core/src/cli/helpers.ts
index f2256e11c2b8..e0af5f76af9f 100644
--- a/code/lib/cli/src/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@@ -5,9 +5,9 @@ import path, { join } from 'path';
 import { coerce, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 
-import findUp from 'find-up';
+import { findUpSync } from 'find-up';
 import invariant from 'tiny-invariant';
-import { getCliDir, getRendererDir } from './dirs';
+import { getRendererDir } from './dirs';
 import {
   type JsPackageManager,
   type PackageJson,
@@ -15,8 +15,7 @@ import {
   frameworkToRenderer as CoreFrameworkToRenderer,
 } from '@storybook/core/common';
 import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/types';
-import { CoreBuilder } from './project_types';
-import { SupportedLanguage } from './project_types';
+import { CoreBuilder, SupportedLanguage } from './project_types';
 import { versions as storybookMonorepoPackages } from '@storybook/core/common';
 
 const logger = console;
@@ -128,7 +127,7 @@ type CopyTemplateFilesOptions = {
   packageManager: JsPackageManager;
   renderer: SupportedFrameworks | SupportedRenderers;
   language: SupportedLanguage;
-  includeCommonAssets?: boolean;
+  commonAssetsDir?: string;
   destination?: string;
 };
 
@@ -164,7 +163,7 @@ export async function copyTemplateFiles({
   renderer,
   language,
   destination,
-  includeCommonAssets = true,
+  commonAssetsDir,
 }: CopyTemplateFilesOptions) {
   const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
@@ -213,14 +212,14 @@ export async function copyTemplateFiles({
   };
 
   const destinationPath = destination ?? (await targetPath());
-  if (includeCommonAssets) {
-    await fse.copy(join(getCliDir(), 'rendererAssets', 'common'), destinationPath, {
+  if (commonAssetsDir) {
+    await fse.copy(commonAssetsDir, destinationPath, {
       overwrite: true,
     });
   }
   await fse.copy(await templatePath(), destinationPath, { overwrite: true });
 
-  if (includeCommonAssets) {
+  if (commonAssetsDir) {
     let rendererType = frameworkToRenderer[renderer] || 'react';
     // This is only used for docs links and the docs site uses `vue` for both `vue` & `vue3` renderers
     if (rendererType === 'vue3') rendererType = 'vue';
@@ -260,7 +259,7 @@ export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAnd
 }
 
 export async function isNxProject() {
-  return findUp.sync('nx.json');
+  return findUpSync('nx.json');
 }
 
 export function coerceSemver(version: string) {
diff --git a/code/core/src/cli/index.ts b/code/core/src/cli/index.ts
new file mode 100644
index 000000000000..c99751ac2c1b
--- /dev/null
+++ b/code/core/src/cli/index.ts
@@ -0,0 +1,7 @@
+export * from './detect';
+export * from './helpers';
+export * from './angular/helpers';
+export * from './dirs';
+export * from './project_types';
+export * from './NpmOptions';
+export * from './eslintPlugin';
diff --git a/code/lib/cli/src/project_types.test.ts b/code/core/src/cli/project_types.test.ts
similarity index 100%
rename from code/lib/cli/src/project_types.test.ts
rename to code/core/src/cli/project_types.test.ts
diff --git a/code/lib/cli/src/project_types.ts b/code/core/src/cli/project_types.ts
similarity index 100%
rename from code/lib/cli/src/project_types.ts
rename to code/core/src/cli/project_types.ts
diff --git a/code/core/src/common/js-package-manager/NPMProxy.ts b/code/core/src/common/js-package-manager/NPMProxy.ts
index d4d711915925..3cdadeb17ff3 100644
--- a/code/core/src/common/js-package-manager/NPMProxy.ts
+++ b/code/core/src/common/js-package-manager/NPMProxy.ts
@@ -1,4 +1,4 @@
-import sort from 'semver/functions/sort';
+import sort from 'semver/functions/sort.js';
 import { platform } from 'os';
 import dedent from 'ts-dedent';
 import { findUpSync } from 'find-up';
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 6d3f434c87c9..652310bf87b3 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -3,7 +3,7 @@ import dedent from 'ts-dedent';
 import { existsSync, readFileSync } from 'node:fs';
 import { findUpSync } from 'find-up';
 import path from 'node:path';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts
index 44a8f0ca3d45..a6387bc34176 100644
--- a/code/core/src/common/js-package-manager/Yarn1Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn1Proxy.ts
@@ -2,7 +2,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import dedent from 'ts-dedent';
 import { findUpSync } from 'find-up';
 import path from 'node:path';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';
diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
index 317a56b40090..05156d146130 100644
--- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
@@ -4,7 +4,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
 import { PosixFS, VirtualFS, ZipOpenFS } from '@yarnpkg/fslib';
 import { getLibzipSync } from '@yarnpkg/libzip';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index 192f2dbea6fc..9f3f0bae9b18 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -62,6 +62,7 @@ export default {
   '@storybook/cli': '8.3.0-alpha.3',
   '@storybook/codemod': '8.3.0-alpha.3',
   '@storybook/core-webpack': '8.3.0-alpha.3',
+  'create-storybook': '8.3.0-alpha.3',
   '@storybook/csf-plugin': '8.3.0-alpha.3',
   '@storybook/instrumenter': '8.3.0-alpha.3',
   '@storybook/react-dom-shim': '8.3.0-alpha.3',
diff --git a/code/core/src/components/components/Colors/SideBySide.tsx b/code/core/src/components/brand/SideBySide.tsx
similarity index 100%
rename from code/core/src/components/components/Colors/SideBySide.tsx
rename to code/core/src/components/brand/SideBySide.tsx
diff --git a/code/core/src/components/components/brand/StorybookIcon.stories.tsx b/code/core/src/components/brand/StorybookIcon.stories.tsx
similarity index 100%
rename from code/core/src/components/components/brand/StorybookIcon.stories.tsx
rename to code/core/src/components/brand/StorybookIcon.stories.tsx
diff --git a/code/core/src/components/components/brand/StorybookIcon.tsx b/code/core/src/components/brand/StorybookIcon.tsx
similarity index 100%
rename from code/core/src/components/components/brand/StorybookIcon.tsx
rename to code/core/src/components/brand/StorybookIcon.tsx
diff --git a/code/core/src/components/components/brand/StorybookLogo.stories.tsx b/code/core/src/components/brand/StorybookLogo.stories.tsx
similarity index 100%
rename from code/core/src/components/components/brand/StorybookLogo.stories.tsx
rename to code/core/src/components/brand/StorybookLogo.stories.tsx
diff --git a/code/core/src/components/components/brand/StorybookLogo.tsx b/code/core/src/components/brand/StorybookLogo.tsx
similarity index 100%
rename from code/core/src/components/components/brand/StorybookLogo.tsx
rename to code/core/src/components/brand/StorybookLogo.tsx
diff --git a/code/core/src/components/components/Colors/colorpalette.mdx b/code/core/src/components/brand/colorpalette.mdx
similarity index 100%
rename from code/core/src/components/components/Colors/colorpalette.mdx
rename to code/core/src/components/brand/colorpalette.mdx
diff --git a/code/core/src/components/components/typography/typography.mdx b/code/core/src/components/brand/typography.mdx
similarity index 100%
rename from code/core/src/components/components/typography/typography.mdx
rename to code/core/src/components/brand/typography.mdx
diff --git a/code/core/src/components/components/Button/Button.deprecated.stories.tsx b/code/core/src/components/components/Button/Button.deprecated.stories.tsx
index 10362221ce2a..009ea9627ab5 100644
--- a/code/core/src/components/components/Button/Button.deprecated.stories.tsx
+++ b/code/core/src/components/components/Button/Button.deprecated.stories.tsx
@@ -5,7 +5,7 @@ import { Button } from './Button';
 import { Form } from '../form';
 
 const meta: Meta<typeof Button> = {
-  title: 'Button/Deprecated',
+  title: 'Button (Deprecated)',
   component: Button,
   tags: ['autodocs'],
 };
diff --git a/code/core/src/components/components/icon/icon.stories.tsx b/code/core/src/components/components/icon/icon.stories.tsx
index 64ecbd21be18..929319b346a7 100644
--- a/code/core/src/components/components/icon/icon.stories.tsx
+++ b/code/core/src/components/components/icon/icon.stories.tsx
@@ -55,6 +55,7 @@ const Header = styled.h2`
 `;
 
 export default {
+  title: 'Icons (deprecated)',
   component: Icons,
   argTypes: {
     color: { control: 'color' },
diff --git a/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx b/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx
index 2501eb5f7c0b..e03fa329532b 100644
--- a/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx
+++ b/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx
@@ -5,6 +5,7 @@ import { Link } from '@storybook/core/components';
 import type { Meta, StoryObj } from '@storybook/react';
 
 export default {
+  title: 'TabContentEmpty',
   component: EmptyTabContent,
   parameters: {
     layout: 'centered',
diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx
index f19922a91ef8..1958c3e18555 100644
--- a/code/core/src/components/components/tabs/tabs.stories.tsx
+++ b/code/core/src/components/components/tabs/tabs.stories.tsx
@@ -101,7 +101,6 @@ const content = Object.entries(panels).map(([k, v]) => (
 ));
 
 export default {
-  title: 'Tabs',
   args: {
     menuName: 'Addons',
   },
@@ -178,12 +177,11 @@ const customViewports = {
 export const StatefulDynamicWithOpenTooltip = {
   parameters: {
     viewport: {
-      defaultViewport: 'sized',
       viewports: customViewports,
     },
-    theme: 'light',
     chromatic: { viewports: [380] },
   },
+  globals: { sb_theme: 'light', viewport: 'sized' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/code/core/src/components/index.ts b/code/core/src/components/index.ts
index febbe94778e8..ad14eb46e728 100644
--- a/code/core/src/components/index.ts
+++ b/code/core/src/components/index.ts
@@ -76,8 +76,8 @@ export { AddonPanel } from './components/addon-panel/addon-panel';
 export type { IconsProps } from './components/icon/icon';
 export { Icons, Symbols } from './components/icon/icon';
 export { icons } from './components/icon/icon';
-export { StorybookLogo } from './components/brand/StorybookLogo';
-export { StorybookIcon } from './components/brand/StorybookIcon';
+export { StorybookLogo } from './brand/StorybookLogo';
+export { StorybookIcon } from './brand/StorybookIcon';
 
 // Loader
 export { Loader } from './components/Loader/Loader';
diff --git a/code/core/src/core-server/standalone.ts b/code/core/src/core-server/standalone.ts
index 354a1852f54d..72a98d617112 100644
--- a/code/core/src/core-server/standalone.ts
+++ b/code/core/src/core-server/standalone.ts
@@ -4,7 +4,8 @@ import { dirname } from 'node:path';
 
 async function build(options: any = {}, frameworkOptions: any = {}) {
   const { mode = 'dev' } = options;
-  const packageJson = dirname(require.resolve('@storybook/core/package.json'));
+  const packageJsonDir = dirname(require.resolve('@storybook/core/package.json'));
+  const packageJson = JSON.parse(require('fs').readFileSync(`${packageJsonDir}/package.json`));
 
   const commonOptions = {
     ...options,
diff --git a/code/core/src/core-server/utils/warnOnIncompatibleAddons.ts b/code/core/src/core-server/utils/warnOnIncompatibleAddons.ts
index df43ed0d7738..a921f4ba3645 100644
--- a/code/core/src/core-server/utils/warnOnIncompatibleAddons.ts
+++ b/code/core/src/core-server/utils/warnOnIncompatibleAddons.ts
@@ -2,7 +2,7 @@ import { logger } from '@storybook/core/node-logger';
 import {
   getIncompatibleStorybookPackages,
   getIncompatiblePackagesSummary,
-} from '../../../../lib/cli/src/doctor/getIncompatibleStorybookPackages';
+} from '../../../../lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages';
 
 export const warnOnIncompatibleAddons = async (currentStorybookVersion: string) => {
   const incompatiblePackagesList = await getIncompatibleStorybookPackages({
diff --git a/code/core/src/manager-api/modules/globals.ts b/code/core/src/manager-api/modules/globals.ts
index f66f0599e3dc..cd990975ad10 100644
--- a/code/core/src/manager-api/modules/globals.ts
+++ b/code/core/src/manager-api/modules/globals.ts
@@ -1,7 +1,12 @@
 import { SET_GLOBALS, UPDATE_GLOBALS, GLOBALS_UPDATED } from '@storybook/core/core-events';
 import { logger } from '@storybook/core/client-logger';
 import { dequal as deepEqual } from 'dequal';
-import type { SetGlobalsPayload, Globals, GlobalTypes } from '@storybook/core/types';
+import type {
+  SetGlobalsPayload,
+  Globals,
+  GlobalTypes,
+  GlobalsUpdatedPayload,
+} from '@storybook/core/types';
 
 import type { ModuleFn } from '../lib/types';
 
@@ -9,23 +14,34 @@ import { getEventMetadata } from '../lib/events';
 
 export interface SubState {
   globals?: Globals;
+  userGlobals?: Globals;
+  storyGlobals?: Globals;
   globalTypes?: GlobalTypes;
 }
 
 export interface SubAPI {
   /**
-   * Returns the current global data object.
-   * @returns {Globals} The current global data object.
+   * Returns the current globals, which is the user globals overlaid with the story globals
+   * @returns {Globals} The current globals.
    */
   getGlobals: () => Globals;
   /**
-   * Returns the current global types object.
-   * @returns {GlobalTypes} The current global types object.
+   * Returns the current globals, as set by the user (a story may have override values)
+   * @returns {Globals} The current user globals.
    */
+  getUserGlobals: () => Globals /**
+  /**
+   * Returns the current globals, as set by the story
+   * @returns {Globals} The current story globals.
+   */;
+  getStoryGlobals: () => Globals /**
+   * Returns the globalTypes, as defined at the project level.
+   * @returns {GlobalTypes} The globalTypes.
+   */;
   getGlobalTypes: () => GlobalTypes;
   /**
-   * Updates the current global data object with the provided new global data object.
-   * @param {Globals} newGlobals - The new global data object to update with.
+   * Updates the current globals with the provided new globals.
+   * @param {Globals} newGlobals - The new globals to update with.
    * @returns {void}
    */
   updateGlobals: (newGlobals: Globals) => void;
@@ -36,6 +52,12 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI, provider }) =
     getGlobals() {
       return store.getState().globals as Globals;
     },
+    getUserGlobals() {
+      return store.getState().userGlobals as Globals;
+    },
+    getStoryGlobals() {
+      return store.getState().storyGlobals as Globals;
+    },
     getGlobalTypes() {
       return store.getState().globalTypes as GlobalTypes;
     },
@@ -52,22 +74,45 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI, provider }) =
 
   const state: SubState = {
     globals: {},
+    userGlobals: {},
+    storyGlobals: {},
     globalTypes: {},
   };
-  const updateGlobals = (globals: Globals) => {
-    const currentGlobals = store.getState()?.globals;
+  const updateGlobals = ({
+    globals,
+    storyGlobals,
+    userGlobals,
+  }: {
+    globals: Globals;
+    storyGlobals: Globals;
+    userGlobals: Globals;
+  }) => {
+    const {
+      globals: currentGlobals,
+      userGlobals: currentUserGlobals,
+      storyGlobals: currentStoryGlobals,
+    } = store.getState();
     if (!deepEqual(globals, currentGlobals)) {
       store.setState({ globals });
     }
+    if (!deepEqual(userGlobals, currentUserGlobals)) {
+      store.setState({ userGlobals });
+    }
+    if (!deepEqual(storyGlobals, currentStoryGlobals)) {
+      store.setState({ storyGlobals });
+    }
   };
 
   provider.channel?.on(
     GLOBALS_UPDATED,
-    function handleGlobalsUpdated(this: any, { globals }: { globals: Globals }) {
+    function handleGlobalsUpdated(
+      this: any,
+      { globals, storyGlobals, userGlobals }: GlobalsUpdatedPayload
+    ) {
       const { ref } = getEventMetadata(this, fullAPI)!;
 
       if (!ref) {
-        updateGlobals(globals);
+        updateGlobals({ globals, storyGlobals, userGlobals });
       } else {
         logger.warn(
           'received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.'
@@ -79,16 +124,18 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI, provider }) =
   // Emitted by the preview on initialization
   provider.channel?.on(
     SET_GLOBALS,
-    function handleSetStories(this: any, { globals, globalTypes }: SetGlobalsPayload) {
+    function handleSetGlobals(this: any, { globals, globalTypes }: SetGlobalsPayload) {
       const { ref } = getEventMetadata(this, fullAPI)!;
       const currentGlobals = store.getState()?.globals;
 
       if (!ref) {
-        store.setState({ globals, globalTypes });
+        store.setState({ globals, userGlobals: globals, globalTypes });
       } else if (Object.keys(globals).length > 0) {
         logger.warn('received globals from a non-local ref. This is not currently supported.');
       }
 
+      // If we have stored globals different to what the preview just inited with,
+      // we should update it to those values
       if (
         currentGlobals &&
         Object.keys(currentGlobals).length !== 0 &&
diff --git a/code/core/src/manager-api/modules/shortcuts.ts b/code/core/src/manager-api/modules/shortcuts.ts
index 1d4708425c92..e65a7767faa9 100644
--- a/code/core/src/manager-api/modules/shortcuts.ts
+++ b/code/core/src/manager-api/modules/shortcuts.ts
@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { global } from '@storybook/global';
-import { FORCE_REMOUNT, PREVIEW_KEYDOWN } from '@storybook/core/core-events';
+import {
+  FORCE_REMOUNT,
+  PREVIEW_KEYDOWN,
+  STORIES_COLLAPSE_ALL,
+  STORIES_EXPAND_ALL,
+} from '@storybook/core/core-events';
 
 import type { ModuleFn } from '../lib/types';
 
@@ -356,11 +361,11 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
           break;
         }
         case 'collapseAll': {
-          fullAPI.collapseAll();
+          fullAPI.emit(STORIES_COLLAPSE_ALL);
           break;
         }
         case 'expandAll': {
-          fullAPI.expandAll();
+          fullAPI.emit(STORIES_EXPAND_ALL);
           break;
         }
         case 'remount': {
diff --git a/code/core/src/manager-api/modules/url.ts b/code/core/src/manager-api/modules/url.ts
index 2ad7a340839d..d69e194a6947 100644
--- a/code/core/src/manager-api/modules/url.ts
+++ b/code/core/src/manager-api/modules/url.ts
@@ -234,9 +234,9 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
     }
   });
 
-  provider.channel?.on(GLOBALS_UPDATED, ({ globals, initialGlobals }: any) => {
+  provider.channel?.on(GLOBALS_UPDATED, ({ userGlobals, initialGlobals }: any) => {
     const { path, queryParams } = api.getUrlState();
-    const globalsString = buildArgsParam(initialGlobals, globals);
+    const globalsString = buildArgsParam(initialGlobals, userGlobals);
     navigateTo(path, { ...queryParams, globals: globalsString }, { replace: true });
     api.setQueryParams({ globals: globalsString });
   });
diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index e77e2eef9bc1..8d23d1d8fcd2 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -28,6 +28,7 @@ import type {
   API_StoryEntry,
   Parameters,
   StoryId,
+  Globals,
 } from '@storybook/core/types';
 
 import {
@@ -498,9 +499,14 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[])
   return [args!, updateArgs, resetArgs, initialArgs!];
 }
 
-export function useGlobals(): [Args, (newGlobals: Args) => void] {
+export function useGlobals(): [
+  globals: Globals,
+  updateGlobals: (newGlobals: Globals) => void,
+  storyGlobals: Globals,
+  userGlobals: Globals,
+] {
   const api = useStorybookApi();
-  return [api.getGlobals(), api.updateGlobals];
+  return [api.getGlobals(), api.updateGlobals, api.getStoryGlobals(), api.getUserGlobals()];
 }
 
 export function useGlobalTypes(): ArgTypes {
diff --git a/code/core/src/manager-api/tests/globals.test.ts b/code/core/src/manager-api/tests/globals.test.ts
index 48ad8b854179..52f3fa379472 100644
--- a/code/core/src/manager-api/tests/globals.test.ts
+++ b/code/core/src/manager-api/tests/globals.test.ts
@@ -14,6 +14,7 @@ import { init as initModule } from '../modules/globals';
 import type { ModuleArgs } from '../lib/types';
 
 import { getEventMetadata as _getEventData } from '../lib/events';
+import type { GlobalsUpdatedPayload, SetGlobalsPayload } from '@storybook/core/types';
 
 const getEventMetadata = vi.mocked(_getEventData, true);
 const logger = vi.mocked(_logger, true);
@@ -41,6 +42,8 @@ describe('globals API', () => {
     const { state } = initModule({ store, provider: { channel } } as unknown as ModuleArgs);
 
     expect(state).toEqual({
+      userGlobals: {},
+      storyGlobals: {},
       globals: {},
       globalTypes: {},
     });
@@ -58,11 +61,45 @@ describe('globals API', () => {
     channel.emit(SET_GLOBALS, {
       globals: { a: 'b' },
       globalTypes: { a: { type: { name: 'string' } } },
+    } satisfies SetGlobalsPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: { a: 'b' },
+      storyGlobals: {},
+      globals: { a: 'b' },
+      globalTypes: { a: { type: { name: 'string' } } },
     });
+  });
+
+  it('emits UPDATE_GLOBALS if retains a globals value different to what recieves on SET_GLOBALS', () => {
+    const channel = new EventEmitter();
+    const listener = vi.fn();
+    channel.on(UPDATE_GLOBALS, listener);
+
+    const store = createMockStore();
+    const { state } = initModule({
+      store,
+      provider: { channel },
+    } as unknown as ModuleArgs);
+    store.setState({
+      ...state,
+      globals: { a: 'c' },
+    });
+
+    channel.emit(SET_GLOBALS, {
+      globals: { a: 'b' },
+      globalTypes: { a: { type: { name: 'string' } } },
+    } satisfies SetGlobalsPayload);
     expect(store.getState()).toEqual({
+      userGlobals: { a: 'b' },
+      storyGlobals: {},
       globals: { a: 'b' },
       globalTypes: { a: { type: { name: 'string' } } },
     });
+
+    expect(listener).toHaveBeenCalledWith({
+      globals: { a: 'c' },
+      options: { target: 'storybook-preview-iframe' },
+    });
   });
 
   it('ignores SET_STORIES from other refs', () => {
@@ -78,7 +115,12 @@ describe('globals API', () => {
 
     getEventMetadata.mockReturnValueOnce({ sourceType: 'external', ref: { id: 'ref' } } as any);
     channel.emit(SET_STORIES, { globals: { a: 'b' } });
-    expect(store.getState()).toEqual({ globals: {}, globalTypes: {} });
+    expect(store.getState()).toEqual({
+      userGlobals: {},
+      storyGlobals: {},
+      globals: {},
+      globalTypes: {},
+    });
   });
 
   it('ignores SET_GLOBALS from other refs', () => {
@@ -96,8 +138,13 @@ describe('globals API', () => {
     channel.emit(SET_GLOBALS, {
       globals: { a: 'b' },
       globalTypes: { a: { type: { name: 'string' } } },
+    } satisfies SetGlobalsPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: {},
+      storyGlobals: {},
+      globals: {},
+      globalTypes: {},
     });
-    expect(store.getState()).toEqual({ globals: {}, globalTypes: {} });
   });
 
   it('updates the state when the preview emits GLOBALS_UPDATED', () => {
@@ -111,15 +158,45 @@ describe('globals API', () => {
     } as unknown as ModuleArgs);
     store.setState(state);
 
-    channel.emit(GLOBALS_UPDATED, { globals: { a: 'b' } });
-    expect(store.getState()).toEqual({ globals: { a: 'b' }, globalTypes: {} });
+    channel.emit(GLOBALS_UPDATED, {
+      initialGlobals: { a: 'b' },
+      userGlobals: { a: 'b' },
+      storyGlobals: {},
+      globals: { a: 'b' },
+    } satisfies GlobalsUpdatedPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: { a: 'b' },
+      storyGlobals: {},
+      globals: { a: 'b' },
+      globalTypes: {},
+    });
 
-    channel.emit(GLOBALS_UPDATED, { globals: { a: 'c' } });
-    expect(store.getState()).toEqual({ globals: { a: 'c' }, globalTypes: {} });
+    channel.emit(GLOBALS_UPDATED, {
+      initialGlobals: { a: 'b' },
+      userGlobals: { a: 'c' },
+      storyGlobals: {},
+      globals: { a: 'c' },
+    } satisfies GlobalsUpdatedPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: { a: 'c' },
+      storyGlobals: {},
+      globals: { a: 'c' },
+      globalTypes: {},
+    });
 
-    // SHOULD NOT merge global args
-    channel.emit(GLOBALS_UPDATED, { globals: { d: 'e' } });
-    expect(store.getState()).toEqual({ globals: { d: 'e' }, globalTypes: {} });
+    // SHOULD NOT merge globals
+    channel.emit(GLOBALS_UPDATED, {
+      initialGlobals: { a: 'b' },
+      userGlobals: { d: 'e' },
+      storyGlobals: {},
+      globals: { d: 'e' },
+    } satisfies GlobalsUpdatedPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: { d: 'e' },
+      storyGlobals: {},
+      globals: { d: 'e' },
+      globalTypes: {},
+    });
   });
 
   it('ignores GLOBALS_UPDATED from other refs', () => {
@@ -135,8 +212,18 @@ describe('globals API', () => {
 
     getEventMetadata.mockReturnValueOnce({ sourceType: 'external', ref: { id: 'ref' } } as any);
     logger.warn.mockClear();
-    channel.emit(GLOBALS_UPDATED, { globals: { a: 'b' } });
-    expect(store.getState()).toEqual({ globals: {}, globalTypes: {} });
+    channel.emit(GLOBALS_UPDATED, {
+      initialGlobals: { a: 'b' },
+      userGlobals: { a: 'b' },
+      storyGlobals: {},
+      globals: { a: 'b' },
+    } satisfies GlobalsUpdatedPayload);
+    expect(store.getState()).toEqual({
+      userGlobals: {},
+      storyGlobals: {},
+      globals: {},
+      globalTypes: {},
+    });
     expect(logger.warn).toHaveBeenCalled();
   });
 
diff --git a/code/core/src/manager-api/tests/url.test.js b/code/core/src/manager-api/tests/url.test.js
index 53946d7ab6b9..a4a9de83ba75 100644
--- a/code/core/src/manager-api/tests/url.test.js
+++ b/code/core/src/manager-api/tests/url.test.js
@@ -178,7 +178,12 @@ describe('initModule', () => {
     const channel = new EventEmitter();
     initURL({ store, provider: { channel }, state: { location: {} }, navigate, fullAPI });
 
-    channel.emit(GLOBALS_UPDATED, { globals: { a: 2 }, initialGlobals: { a: 1, b: 1 } });
+    channel.emit(GLOBALS_UPDATED, {
+      userGlobals: { a: 2 },
+      storyGlobals: {},
+      globals: { a: 2 },
+      initialGlobals: { a: 1, b: 1 },
+    });
     expect(navigate).toHaveBeenCalledWith(
       '/story/test--story&globals=a:2;b:!undefined',
       expect.objectContaining({ replace: true })
@@ -200,7 +205,7 @@ describe('initModule', () => {
       }),
     });
 
-    channel.emit(GLOBALS_UPDATED, { globals: { g: 2 } });
+    channel.emit(GLOBALS_UPDATED, { userGlobals: { g: 2 }, storyGlobals: {}, globals: { g: 2 } });
     expect(navigate).toHaveBeenCalledWith(
       '/story/test--story&full=1&globals=g:2',
       expect.objectContaining({ replace: true })
diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx
index 53f8e54b0d15..8282d8434587 100644
--- a/code/core/src/manager/components/layout/Layout.stories.tsx
+++ b/code/core/src/manager/components/layout/Layout.stories.tsx
@@ -63,10 +63,8 @@ const meta = {
     setManagerLayoutState: fn(),
     hasTab: false,
   },
-  parameters: {
-    theme: 'light',
-    layout: 'fullscreen',
-  },
+  globals: { sb_theme: 'light' },
+  parameters: { layout: 'fullscreen' },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
     (storyFn) => (
@@ -97,7 +95,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Desktop: Story = {};
 export const Dark: Story = {
-  parameters: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 export const DesktopHorizontal: Story = {
   args: {
@@ -127,10 +125,7 @@ export const Mobile = {
 };
 export const MobileDark = {
   ...Mobile,
-  parameters: {
-    ...Mobile.parameters,
-    theme: 'dark',
-  },
+  globals: { sb_theme: 'dark' },
 };
 
 export const MobileDocs = {
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
index 465db469cde9..e552171cca4b 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx
@@ -19,9 +19,9 @@ const OpenAboutHelper = ({ children }: { children: any }) => {
 const meta = {
   component: MobileAbout,
   title: 'Mobile/About',
+  globals: { sb_theme: 'light' },
   parameters: {
     layout: 'fullscreen',
-    theme: 'light',
     viewport: {
       defaultViewport: 'mobile1',
     },
@@ -56,7 +56,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 export const Dark: Story = {
-  parameters: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 
 export const Closed: Story = {
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index b67bf15a3e62..552556add58c 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -69,7 +69,6 @@ const meta = {
   ],
   parameters: {
     layout: 'fullscreen',
-    theme: 'light',
     viewport: {
       defaultViewport: 'mobile1',
     },
@@ -86,9 +85,12 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  globals: { sb_theme: 'light' },
+};
 export const Dark: Story = {
-  parameters: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
+  parameters: { chromatic: { disable: true } },
 };
 
 export const LongStoryName: Story = {
diff --git a/code/core/src/manager/components/preview/Iframe.stories.tsx b/code/core/src/manager/components/preview/Iframe.stories.tsx
index 8f542b029270..84367478c4ec 100644
--- a/code/core/src/manager/components/preview/Iframe.stories.tsx
+++ b/code/core/src/manager/components/preview/Iframe.stories.tsx
@@ -20,9 +20,9 @@ export default {
         },
       },
     },
-    theme: 'light',
     chromatic: { viewports: [700] },
   },
+  globals: { sb_theme: 'light' },
 };
 
 const style: CSSProperties = {
@@ -50,7 +50,7 @@ export const WorkingDocs = () => (
     active
     id="iframe"
     title="Missing"
-    src="/iframe.html?id=components-colorpalette--docs"
+    src="/iframe.html?id=brand-colorpalette--docs"
     allowFullScreen
     style={style}
     scale={1.0}
@@ -60,17 +60,23 @@ WorkingStory.parameters = {
   chromatic: { disable: true },
 };
 
-export const MissingStory = () => (
-  <IFrame
-    active
-    id="iframe"
-    title="Missing"
-    src="/iframe.html?id=missing"
-    allowFullScreen
-    style={style}
-    scale={1.0}
-  />
-);
+export const MissingStory = {
+  render: () => (
+    <IFrame
+      active
+      id="iframe"
+      title="Missing"
+      src="/iframe.html?id=missing"
+      allowFullScreen
+      style={style}
+      scale={1.0}
+    />
+  ),
+  parameters: {
+    // Raise the threshold to ignore monospace font inconsistencies
+    chromatic: { diffThreshold: 0.65 },
+  },
+};
 
 export const PreparingStory = () => (
   <IFrame
diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
index a430bb2bb4f0..9cf8c887397f 100644
--- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
@@ -9,7 +9,8 @@ import { IconSymbols } from './IconSymbols';
 export default {
   component: Explorer,
   title: 'Sidebar/Explorer',
-  parameters: { layout: 'fullscreen', theme: 'side-by-side' },
+  globals: { sb_theme: 'side-by-side' },
+  parameters: { layout: 'fullscreen' },
   decorators: [
     RefStories.default.decorators[0],
     (storyFn: any) => (
diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
index e419bd2b57ab..8d6d2b7e9c3a 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
@@ -14,31 +14,30 @@ const meta = {
     onOpenChange: fn(),
     setFileSearchQuery: fn(),
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
   // This decorator is used to show the modal in the side by side view
   decorators: [
     (Story, context) => {
       const [container, setContainer] = useState<HTMLElement | null>(null);
 
-      if (context.globals.theme === 'side-by-side') {
-        return (
-          <div
-            ref={(element) => {
-              setContainer(element);
-            }}
-            style={{
-              width: '100%',
-              height: '100%',
-              minHeight: '600px',
-              transform: 'translateZ(0)',
-            }}
-          >
-            {/* @ts-expect-error (non strict) */}
-            {Story({ args: { ...context.args, container } })}
-          </div>
-        );
-      }
-
-      return Story();
+      return (
+        <div
+          ref={(element) => {
+            setContainer(element);
+          }}
+          style={{
+            width: '100%',
+            height: '100%',
+            minHeight: '600px',
+            transform: 'translateZ(0)',
+          }}
+        >
+          {/* @ts-expect-error (non strict) */}
+          {Story({ args: { ...context.args, container } })}
+        </div>
+      );
     },
   ],
 } satisfies Meta<typeof FileSearchModal>;
diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx
index 067b6207112e..0308cae7dd50 100644
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: 'Sidebar/Heading',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
@@ -229,6 +230,7 @@ export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
     extra: [],
     isLoading: false,
   },
+  globals: { sb_theme: 'light' },
   parameters: { layout: 'padded', chromatic: { delay: 300 } },
   play: () => {
     // focus each instance for chromatic/storybook's stacked theme
diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx
index 2e83d1f78dd3..e4873e751b05 100644
--- a/code/core/src/manager/components/sidebar/Menu.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx
@@ -22,6 +22,7 @@ const meta = {
   args: {
     menu: fakemenu,
   },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [(storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>],
 } satisfies Meta<typeof SidebarMenu>;
 export default meta;
@@ -47,6 +48,7 @@ const DoubleThemeRenderingHack = styled.div({
 });
 
 export const Expanded: Story = {
+  globals: { sb_theme: 'light' },
   render: () => {
     const menu = useMenu(
       { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx
index 9018d5208df0..6b89f1b13a57 100644
--- a/code/core/src/manager/components/sidebar/Refs.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Sidebar/Refs',
   excludeStories: /.*Data$/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
diff --git a/code/core/src/manager/components/sidebar/Search.stories.tsx b/code/core/src/manager/components/sidebar/Search.stories.tsx
index c34f6e56f5c8..8de58e633373 100644
--- a/code/core/src/manager/components/sidebar/Search.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Search.stories.tsx
@@ -24,6 +24,7 @@ const meta = {
   component: Search,
   title: 'Sidebar/Search',
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <div style={{ padding: 20, maxWidth: '230px' }}>
diff --git a/code/core/src/manager/components/sidebar/SearchResults.stories.tsx b/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
index a732a676a5d1..c45473a9c3d3 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Sidebar/SearchResults',
   includeStories: /^[A-Z]/,
   parameters: { layout: 'fullscreen' },
+  globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
       <div style={{ padding: '0 20px', maxWidth: '230px' }}>
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index b954cefc84c2..3179587c2123 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -73,6 +73,7 @@ const meta = {
       </ManagerContext.Provider>
     ),
   ],
+  globals: { sb_theme: 'side-by-side' },
 } satisfies Meta<typeof Sidebar>;
 
 export default meta;
@@ -208,6 +209,14 @@ export const StatusesOpen: Story = {
 export const Searching: Story = {
   ...StatusesOpen,
   parameters: { chromatic: { delay: 2200 } },
+  globals: { sb_theme: 'light' },
+  decorators: [
+    (StoryFn) => (
+      <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+        <StoryFn />
+      </div>
+    ),
+  ],
   play: async ({ canvasElement, step }) => {
     await step('wait 2000ms', () => wait(2000));
     const canvas = await within(canvasElement);
@@ -273,12 +282,21 @@ export const Scrolled: Story = {
   args: {
     storyId: 'group-1--child-b1',
   },
+  globals: { sb_theme: 'light' },
+  decorators: [
+    (StoryFn) => (
+      <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+        <StoryFn />
+      </div>
+    ),
+  ],
+
   render: (args) => {
     const [, setState] = React.useState(0);
     return (
       <>
         <button
-          style={{ position: 'absolute', zIndex: 10 }}
+          style={{ position: 'absolute', zIndex: 10, bottom: 0, right: 0 }}
           onClick={() => setState(() => Math.random())}
         >
           Change state
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index b25e9878cc8a..ab965dfb7d51 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -9,26 +9,26 @@ import { Tree } from './Tree';
 import { index } from './mockdata.large';
 import { DEFAULT_REF_ID } from './Sidebar';
 
-const customViewports = {
-  sized: {
-    name: 'Sized',
-    styles: {
-      width: '380px',
-      height: '90%',
-    },
-  },
-};
-
 const meta = {
   component: Tree,
   title: 'Sidebar/Tree',
   excludeStories: /.*Data$/,
+  globals: {
+    sb_theme: 'light',
+    viewport: { value: 'sized' },
+  },
   parameters: {
     layout: 'fullscreen',
-    theme: 'light',
     viewport: {
-      defaultViewport: 'sized',
-      viewports: customViewports,
+      options: {
+        sized: {
+          name: 'Sized',
+          styles: {
+            width: '380px',
+            height: '90%',
+          },
+        },
+      },
     },
     chromatic: { viewports: [380] },
   },
@@ -64,7 +64,7 @@ export const Full: Story = {
 };
 export const Dark: Story = {
   ...Full,
-  parameters: { theme: 'dark' },
+  globals: { sb_theme: 'dark' },
 };
 
 export const SingleStoryComponents: Story = {
@@ -206,11 +206,6 @@ export const SkipToCanvasLinkFocused: Story = {
   ...DocsOnlySingleStoryComponents,
   parameters: {
     chromatic: { disable: true },
-    viewport: {
-      defaultViewport: 'sized',
-      viewports: customViewports,
-      defaultOrientation: 'landscape',
-    },
   },
   play: async ({ canvasElement }) => {
     const screen = await within(canvasElement);
diff --git a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
index cf636c64b48e..b78a9b704773 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.stories.tsx
@@ -7,7 +7,8 @@ import { IconSymbols } from './IconSymbols';
 
 export default {
   title: 'Sidebar/TreeNode',
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'padded' },
+  globals: { sb_theme: 'side-by-side' },
   component: StoryNode,
   decorators: [
     (StoryFn: any) => (
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index 02c28ca994ac..ce1cce434226 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -6,6 +6,7 @@ import type { API, State } from '@storybook/core/manager-api';
 import { shortcutToHumanString } from '@storybook/core/manager-api';
 import { styled, useTheme } from '@storybook/core/theming';
 import { CheckIcon, InfoIcon, ShareAltIcon, WandIcon } from '@storybook/icons';
+import { STORIES_COLLAPSE_ALL } from '@storybook/core/core-events';
 
 const focusableUIElements = {
   storySearchField: 'storybook-explorer-searchfield',
@@ -222,7 +223,7 @@ export const useMenu = (
     () => ({
       id: 'collapse',
       title: 'Collapse all',
-      onClick: () => api.collapseAll(),
+      onClick: () => api.emit(STORIES_COLLAPSE_ALL),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.collapseAll} /> : null,
     }),
     [api, enableShortcuts, shortcutKeys]
diff --git a/code/core/src/preview-api/Errors.stories.tsx b/code/core/src/preview-api/Errors.stories.tsx
index c358c9eca1a2..231905e9bca5 100644
--- a/code/core/src/preview-api/Errors.stories.tsx
+++ b/code/core/src/preview-api/Errors.stories.tsx
@@ -39,8 +39,8 @@ export default {
   component: Component,
   parameters: {
     layout: 'fullscreen',
-    theme: 'light',
   },
+  globals: { sb_theme: 'light' },
   title: 'Errors',
   args: {
     id: 'sb-errordisplay',
diff --git a/code/core/src/preview-api/modules/preview-web/Preview.tsx b/code/core/src/preview-api/modules/preview-web/Preview.tsx
index 23b2bb7f1de6..681d0c47c935 100644
--- a/code/core/src/preview-api/modules/preview-web/Preview.tsx
+++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx
@@ -35,6 +35,7 @@ import type {
   StoryId,
   StoryRenderOptions,
   SetGlobalsPayload,
+  GlobalsUpdatedPayload,
 } from '@storybook/core/types';
 import {
   CalledPreviewMethodBeforeInitializationError,
@@ -102,7 +103,7 @@ export class Preview<TRenderer extends Renderer> {
   // Create a proxy object for `__STORYBOOK_STORY_STORE__` and `__STORYBOOK_PREVIEW__.storyStore`
   // That proxies through to the store once ready, and errors beforehand. This means we can set
   // `__STORYBOOK_STORY_STORE__ = __STORYBOOK_PREVIEW__.storyStore` without having to wait, and
-  // simiarly integrators can access the `storyStore` on the preview at any time, although
+  // similarly integrators can access the `storyStore` on the preview at any time, although
   // it is considered deprecated and we will no longer allow access in 9.0
   get storyStore() {
     return new Proxy(
@@ -117,7 +118,7 @@ export class Preview<TRenderer extends Renderer> {
           throw new StoryStoreAccessedBeforeInitializationError();
         },
       }
-    );
+    ) as StoryStore<TRenderer>;
   }
 
   // INITIALIZATION
@@ -222,7 +223,7 @@ export class Preview<TRenderer extends Renderer> {
       throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'emitGlobals' });
 
     const payload: SetGlobalsPayload = {
-      globals: this.storyStoreValue.globals.get() || {},
+      globals: this.storyStoreValue.userGlobals.get() || {},
       globalTypes: this.storyStoreValue.projectAnnotations.globalTypes || {},
     };
     this.channel.emit(SET_GLOBALS, payload);
@@ -290,17 +291,44 @@ export class Preview<TRenderer extends Renderer> {
     await this.storyStoreValue.onStoriesChanged({ importFn, storyIndex });
   }
 
-  async onUpdateGlobals({ globals }: { globals: Globals }) {
-    if (!this.storyStoreValue)
+  async onUpdateGlobals({
+    globals: updatedGlobals,
+    currentStory,
+  }: {
+    globals: Globals;
+    currentStory?: PreparedStory<TRenderer>;
+  }) {
+    if (!this.storyStoreValue) {
+      await this.storeInitializationPromise;
+    }
+    if (!this.storyStoreValue) {
       throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onUpdateGlobals' });
-    this.storyStoreValue.globals.update(globals);
+    }
 
-    await Promise.all(this.storyRenders.map((r) => r.rerender()));
+    this.storyStoreValue.userGlobals.update(updatedGlobals);
+
+    if (currentStory) {
+      const { initialGlobals, storyGlobals, userGlobals, globals } =
+        this.storyStoreValue.getStoryContext(currentStory);
+      this.channel.emit(GLOBALS_UPDATED, {
+        initialGlobals,
+        userGlobals,
+        storyGlobals,
+        globals,
+      } satisfies GlobalsUpdatedPayload);
+    } else {
+      // If there is no known selected story (e.g. if we are in docs mode), the userGlobals
+      // are not overridden.
+      const { initialGlobals, globals } = this.storyStoreValue.userGlobals;
+      this.channel.emit(GLOBALS_UPDATED, {
+        initialGlobals,
+        userGlobals: globals,
+        storyGlobals: {},
+        globals,
+      } satisfies GlobalsUpdatedPayload);
+    }
 
-    this.channel.emit(GLOBALS_UPDATED, {
-      globals: this.storyStoreValue.globals.get(),
-      initialGlobals: this.storyStoreValue.globals.initialGlobals,
-    });
+    await Promise.all(this.storyRenders.map((r) => r.rerender()));
   }
 
   async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index c0862f643683..ae11cb3f7221 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -162,12 +162,17 @@ describe('PreviewWeb', () => {
 
       const preview = await createAndRenderPreview();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.globals.get()).toEqual({ a: 'c' });
+      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
     });
 
     it('emits the SET_GLOBALS event', async () => {
       await createAndRenderPreview();
 
+      expect(mockChannel.emit.mock.calls[0][1]).toMatchObject({
+        globals: { a: 'b' },
+        globalTypes: {},
+      });
+
       expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
         globals: { a: 'b' },
         globalTypes: {},
@@ -227,7 +232,7 @@ describe('PreviewWeb', () => {
       });
       await preview.ready();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.globals.get()).toEqual({ a: 'b' });
+      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
     });
   });
 
@@ -428,6 +433,43 @@ describe('PreviewWeb', () => {
         });
       });
 
+      it('emits GLOBALS_UPDATED with initial global values', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview();
+
+        await waitForEvents([GLOBALS_UPDATED]);
+        expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+          initialGlobals: { a: 'b' },
+          userGlobals: { a: 'b' },
+          storyGlobals: {},
+          globals: { a: 'b' },
+        });
+      });
+
+      describe('if the story sets globals', () => {
+        it('emits GLOBALS_UPDATED with overridden storyGlobals', async () => {
+          document.location.search = '?id=component-one--a';
+          const newImportFn = vi.fn(async (path) => {
+            if (path === './src/ComponentOne.stories.js') {
+              return {
+                ...componentOneExports,
+                a: { ...componentOneExports.a, globals: { a: 'c' } },
+              };
+            }
+            return importFn(path);
+          });
+          await createAndRenderPreview({ importFn: newImportFn });
+
+          await waitForEvents([GLOBALS_UPDATED]);
+          expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+            initialGlobals: { a: 'b' },
+            userGlobals: { a: 'b' },
+            storyGlobals: { a: 'c' },
+            globals: { a: 'c' },
+          });
+        });
+      });
+
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -772,8 +814,64 @@ describe('PreviewWeb', () => {
 
       await waitForEvents([GLOBALS_UPDATED]);
       expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
-        globals: { a: 'c' },
         initialGlobals: { a: 'b' },
+        userGlobals: { a: 'c' },
+        storyGlobals: {},
+        globals: { a: 'c' },
+      });
+    });
+
+    describe('if the story sets globals', () => {
+      const newImportFn = vi.fn(async (path) => {
+        if (path === './src/ComponentOne.stories.js') {
+          return {
+            ...componentOneExports,
+            a: { ...componentOneExports.a, globals: { a: 'c' } },
+          };
+        }
+        return importFn(path);
+      });
+
+      const newGetProjectAnnotations = vi.fn(
+        () => ({ ...projectAnnotations, initialGlobals: { a: 'b', c: 'd' } }) as any
+      );
+
+      it('allows changes to globals the story did not set', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview({
+          importFn: newImportFn,
+          getProjectAnnotations: newGetProjectAnnotations,
+        });
+
+        mockChannel.emit.mockClear();
+        emitter.emit(UPDATE_GLOBALS, { globals: { c: 'e' } });
+
+        await waitForEvents([GLOBALS_UPDATED]);
+        expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+          initialGlobals: { a: 'b', c: 'd' },
+          userGlobals: { a: 'b', c: 'e' },
+          storyGlobals: { a: 'c' },
+          globals: { a: 'c', c: 'e' },
+        });
+      });
+
+      it('does not allow changes to globals the story sets', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview({
+          importFn: newImportFn,
+          getProjectAnnotations: newGetProjectAnnotations,
+        });
+
+        mockChannel.emit.mockClear();
+        emitter.emit(UPDATE_GLOBALS, { globals: { a: 'e' } });
+
+        await waitForEvents([GLOBALS_UPDATED]);
+        expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+          initialGlobals: { a: 'b', c: 'd' },
+          userGlobals: { a: 'e', c: 'd' },
+          storyGlobals: { a: 'c' },
+          globals: { a: 'c', c: 'd' },
+        });
       });
     });
 
@@ -783,7 +881,7 @@ describe('PreviewWeb', () => {
 
       emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.globals.get()).toEqual({ a: 'b' });
+      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
     });
 
     it('passes globals in context to renderToCanvas', async () => {
@@ -1951,6 +2049,57 @@ describe('PreviewWeb', () => {
         });
       });
 
+      it('emits GLOBALS_UPDATED with initial global values', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview();
+
+        mockChannel.emit.mockClear();
+        emitter.emit(SET_CURRENT_STORY, {
+          storyId: 'component-one--b',
+          viewMode: 'story',
+        });
+        await waitForSetCurrentStory();
+
+        await waitForEvents([GLOBALS_UPDATED]);
+        expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+          initialGlobals: { a: 'b' },
+          userGlobals: { a: 'b' },
+          storyGlobals: {},
+          globals: { a: 'b' },
+        });
+      });
+
+      describe('if the story sets globals', () => {
+        it('emits GLOBALS_UPDATED with overridden storyGlobals', async () => {
+          document.location.search = '?id=component-one--a';
+          const newImportFn = vi.fn(async (path) => {
+            if (path === './src/ComponentOne.stories.js') {
+              return {
+                ...componentOneExports,
+                b: { ...componentOneExports.b, globals: { a: 'c' } },
+              };
+            }
+            return importFn(path);
+          });
+
+          await createAndRenderPreview({ importFn: newImportFn });
+          mockChannel.emit.mockClear();
+          emitter.emit(SET_CURRENT_STORY, {
+            storyId: 'component-one--b',
+            viewMode: 'story',
+          });
+          await waitForSetCurrentStory();
+
+          await waitForEvents([GLOBALS_UPDATED]);
+          expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, {
+            initialGlobals: { a: 'b' },
+            userGlobals: { a: 'b' },
+            storyGlobals: { a: 'c' },
+            globals: { a: 'c' },
+          });
+        });
+      });
+
       it('applies loaders with story context', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -3350,7 +3499,7 @@ describe('PreviewWeb', () => {
         preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
         await waitForRender();
 
-        expect((preview.storyStore as StoryStore<Renderer>)!.globals.get()).toEqual({ a: 'c' });
+        expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
       });
     });
 
@@ -3399,7 +3548,9 @@ describe('PreviewWeb', () => {
       preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
       await waitForRender();
 
-      expect((preview.storyStore as StoryStore<Renderer>)!.globals.get()).toEqual({ a: 'edited' });
+      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'edited',
+      });
     });
 
     it('emits SET_GLOBALS with new values', async () => {
@@ -3657,6 +3808,7 @@ describe('PreviewWeb', () => {
               "fileName": "./src/ComponentOne.stories.js",
             },
             "story": "A",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -3707,6 +3859,7 @@ describe('PreviewWeb', () => {
               "fileName": "./src/ComponentOne.stories.js",
             },
             "story": "B",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -3735,6 +3888,7 @@ describe('PreviewWeb', () => {
             },
             "playFunction": undefined,
             "story": "E",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -3773,6 +3927,7 @@ describe('PreviewWeb', () => {
             },
             "playFunction": undefined,
             "story": "C",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
index 09b890ffafa1..9bed42b07ea6 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
@@ -2,6 +2,7 @@ import invariant from 'tiny-invariant';
 import {
   CURRENT_STORY_WAS_SET,
   DOCS_PREPARED,
+  GLOBALS_UPDATED,
   PRELOAD_ENTRIES,
   PREVIEW_KEYDOWN,
   SET_CURRENT_STORY,
@@ -112,7 +113,7 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
 
     const { globals } = this.selectionStore.selectionSpecifier || {};
     if (globals) {
-      this.storyStoreValue.globals.updateFromPersisted(globals);
+      this.storyStoreValue.userGlobals.updateFromPersisted(globals);
     }
     this.emitGlobals();
   }
@@ -229,7 +230,9 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
   }
 
   async onUpdateGlobals({ globals }: { globals: Globals }) {
-    super.onUpdateGlobals({ globals });
+    const currentStory =
+      (this.currentRender instanceof StoryRender && this.currentRender.story) || undefined;
+    super.onUpdateGlobals({ globals, currentStory });
     if (
       this.currentRender instanceof MdxDocsRender ||
       this.currentRender instanceof CsfDocsRender
@@ -377,8 +380,16 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
 
     if (isStoryRender(render)) {
       invariant(!!render.story);
-      const { parameters, initialArgs, argTypes, unmappedArgs } =
-        this.storyStoreValue.getStoryContext(render.story);
+      const {
+        parameters,
+        initialArgs,
+        argTypes,
+        unmappedArgs,
+        initialGlobals,
+        userGlobals,
+        storyGlobals,
+        globals,
+      } = this.storyStoreValue.getStoryContext(render.story);
 
       this.channel.emit(STORY_PREPARED, {
         id: storyId,
@@ -387,10 +398,23 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
         argTypes,
         args: unmappedArgs,
       });
+      // We need to update globals whenever we go in or out of an overridden story.
+      // As an optimization we could check if that's the case, but it seems complex and error-prone
+      this.channel.emit(GLOBALS_UPDATED, { userGlobals, storyGlobals, globals, initialGlobals });
     } else {
       // Default to the project parameters for MDX docs
       let { parameters } = this.storyStoreValue.projectAnnotations;
 
+      // We need to update globals whenever we go in or out of an overridden story.
+      // As an optimization we could check if that's the case, but it seems complex and error-prone
+      const { initialGlobals, globals } = this.storyStoreValue.userGlobals;
+      this.channel.emit(GLOBALS_UPDATED, {
+        globals,
+        initialGlobals,
+        storyGlobals: {},
+        userGlobals: globals,
+      });
+
       if (isCsfDocsRender(render) || render.entry.tags?.includes(ATTACHED_MDX_TAG)) {
         if (!render.csfFiles) throw new MdxFileWithNoCsfReferencesError({ storyId });
         ({ parameters } = this.storyStoreValue.preparedMetaFromCSFFile({
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 874c52b11ad7..5f4503877fc2 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -72,7 +72,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     private renderToScreen: RenderToCanvas<TRenderer>,
     private callbacks: RenderContextCallbacks<TRenderer> & { showStoryDuringRender?: () => void },
     public id: StoryId,
-    public viewMode: StoryContext['viewMode'],
+    public viewMode: StoryContext<TRenderer>['viewMode'],
     public renderOptions: StoryRenderOptions = { autoplay: true, forceInitialArgs: false },
     story?: PreparedStory<TRenderer>
   ) {
diff --git a/code/core/src/preview-api/modules/preview-web/render/mount-utils.ts b/code/core/src/preview-api/modules/preview-web/render/mount-utils.ts
index 14b97055700f..2fa13f6e6340 100644
--- a/code/core/src/preview-api/modules/preview-web/render/mount-utils.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/mount-utils.ts
@@ -1,6 +1,6 @@
 // Inspired by Vitest fixture implementation:
 // https://github.com/vitest-dev/vitest/blob/200a4349a2f85686bc7005dce686d9d1b48b84d2/packages/runner/src/fixture.ts
-import { type PreparedStory, type Renderer } from '@storybook/types';
+import { type PreparedStory, type Renderer } from '@storybook/core/types';
 
 export function mountDestructured<TRenderer extends Renderer>(
   playFunction: PreparedStory<TRenderer>['playFunction']
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index 92f8988d47a3..abb6c158c76e 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -313,6 +313,7 @@ describe('StoryStore', () => {
             "playFunction": undefined,
             "renderToCanvas": undefined,
             "story": "A",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -374,7 +375,7 @@ describe('StoryStore', () => {
       const story = await store.loadStory({ storyId: 'component-one--a' });
 
       store.args.update(story.id, { foo: 'bar' });
-      store.globals!.update({ a: 'c' });
+      store.userGlobals!.update({ a: 'c' });
 
       expect(store.getStoryContext(story)).toMatchObject({
         args: { foo: 'bar' },
@@ -482,6 +483,7 @@ describe('StoryStore', () => {
             "playFunction": undefined,
             "renderToCanvas": undefined,
             "story": "A",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -524,6 +526,7 @@ describe('StoryStore', () => {
             "playFunction": undefined,
             "renderToCanvas": undefined,
             "story": "B",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -566,6 +569,7 @@ describe('StoryStore', () => {
             "playFunction": undefined,
             "renderToCanvas": undefined,
             "story": "C",
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -680,6 +684,7 @@ describe('StoryStore', () => {
             "runStep": [Function],
             "story": "A",
             "storyFn": [Function],
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -732,6 +737,7 @@ describe('StoryStore', () => {
             "runStep": [Function],
             "story": "B",
             "storyFn": [Function],
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -784,6 +790,7 @@ describe('StoryStore', () => {
             "runStep": [Function],
             "story": "C",
             "storyFn": [Function],
+            "storyGlobals": {},
             "subcomponents": undefined,
             "tags": [
               "dev",
@@ -849,6 +856,7 @@ describe('StoryStore', () => {
               "playFunction": undefined,
               "renderToCanvas": undefined,
               "story": "A",
+              "storyGlobals": {},
               "subcomponents": undefined,
               "tags": [
                 "dev",
@@ -891,6 +899,7 @@ describe('StoryStore', () => {
               "playFunction": undefined,
               "renderToCanvas": undefined,
               "story": "B",
+              "storyGlobals": {},
               "subcomponents": undefined,
               "tags": [
                 "dev",
@@ -933,6 +942,7 @@ describe('StoryStore', () => {
               "playFunction": undefined,
               "renderToCanvas": undefined,
               "story": "C",
+              "storyGlobals": {},
               "subcomponents": undefined,
               "tags": [
                 "dev",
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 0e9935762248..c5414d7956cf 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -54,7 +54,7 @@ export class StoryStore<TRenderer extends Renderer> {
 
   projectAnnotations: NormalizedProjectAnnotations<TRenderer>;
 
-  globals: GlobalsStore;
+  userGlobals: GlobalsStore;
 
   args: ArgsStore;
 
@@ -83,7 +83,7 @@ export class StoryStore<TRenderer extends Renderer> {
     const { initialGlobals, globalTypes } = this.projectAnnotations;
 
     this.args = new ArgsStore();
-    this.globals = new GlobalsStore({ globals: initialGlobals, globalTypes });
+    this.userGlobals = new GlobalsStore({ globals: initialGlobals, globalTypes });
     this.hooks = {};
     this.cleanupCallbacks = {};
 
@@ -99,7 +99,7 @@ export class StoryStore<TRenderer extends Renderer> {
     // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
     const { initialGlobals, globalTypes } = projectAnnotations;
-    this.globals.set({ globals: initialGlobals, globalTypes });
+    this.userGlobals.set({ globals: initialGlobals, globalTypes });
   }
 
   // This means that one of the CSF files has changed.
@@ -230,10 +230,18 @@ export class StoryStore<TRenderer extends Renderer> {
   // A prepared story does not include args, globals or hooks. These are stored in the story store
   // and updated separtely to the (immutable) story.
   getStoryContext(story: PreparedStory<TRenderer>, { forceInitialArgs = false } = {}) {
+    const userGlobals = this.userGlobals.get();
+    const { initialGlobals } = this.userGlobals;
     return prepareContext({
       ...story,
       args: forceInitialArgs ? story.initialArgs : this.args.get(story.id),
-      globals: this.globals.get(),
+      initialGlobals,
+      globalTypes: this.projectAnnotations.globalTypes,
+      userGlobals,
+      globals: {
+        ...userGlobals,
+        ...story.storyGlobals,
+      },
       hooks: this.hooks[story.id] as unknown,
     });
   }
@@ -287,6 +295,7 @@ export class StoryStore<TRenderer extends Renderer> {
     );
   }
 
+  // TODO: Remove in 9.0
   getSetStoriesPayload() {
     const stories = this.extract({ includeDocsOnly: true });
 
@@ -300,13 +309,14 @@ export class StoryStore<TRenderer extends Renderer> {
 
     return {
       v: 2,
-      globals: this.globals.get(),
+      globals: this.userGlobals.get(),
       globalParameters: {},
       kindParameters,
       stories,
     };
   }
 
+  // TODO: Remove in 9.0
   // NOTE: this is legacy `stories.json` data for the `extract` script.
   // It is used to allow v7 Storybooks to be composed in v6 Storybooks, which expect a
   // `stories.json` file with legacy fields (`kind` etc).
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
index f7eb258b9d37..a8dc553cf0e0 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
@@ -55,6 +55,7 @@ describe('normalizeStory', () => {
           "args": {},
           "beforeEach": [],
           "decorators": [],
+          "globals": {},
           "id": "title--story-export",
           "loaders": [],
           "moduleExport": [Function],
@@ -125,6 +126,7 @@ describe('normalizeStory', () => {
             "args": {},
             "beforeEach": [],
             "decorators": [],
+            "globals": {},
             "id": "title--story-export",
             "loaders": [],
             "moduleExport": {},
@@ -164,6 +166,7 @@ describe('normalizeStory', () => {
             "decorators": [
               [Function],
             ],
+            "globals": {},
             "id": "title--story-export",
             "loaders": [
               [Function],
@@ -221,6 +224,7 @@ describe('normalizeStory', () => {
               [Function],
               [Function],
             ],
+            "globals": {},
             "id": "title--story-export",
             "loaders": [
               [Function],
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index e0e53fe0e1bf..d4c710b2eb03 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -57,7 +57,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.beforeEach),
     ...normalizeArrays(story?.beforeEach),
   ];
-  const { render, play, tags = [] } = storyObject;
+  const { render, play, tags = [], globals = {} } = storyObject;
 
   // eslint-disable-next-line no-underscore-dangle
   const id = parameters.__id || toId(meta.id, exportName);
@@ -72,6 +72,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     argTypes: normalizeInputTypes(argTypes),
     loaders,
     beforeEach,
+    globals,
     ...(render && { render }),
     ...(userStoryFn && { userStoryFn }),
     ...(play && { play }),
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
index 080a741677a5..c13f9c931487 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
@@ -9,6 +9,7 @@ import type {
 import { composeStory, composeStories, setProjectAnnotations } from './portable-stories';
 import * as defaultExportAnnotations from './__mocks__/defaultExportAnnotations.mockfile';
 import * as namedExportAnnotations from './__mocks__/namedExportAnnotations.mockfile';
+import type { ProjectAnnotations } from '@storybook/csf';
 
 type StoriesModule = Store_CSFExports & Record<string, any>;
 
@@ -127,7 +128,7 @@ describe('composeStory', () => {
         return context.canvas;
       },
     });
-    await composedStory.play({ canvasElement: null });
+    await composedStory.play?.({ canvasElement: null });
     expect(spy).toHaveBeenCalledWith(
       expect.objectContaining({
         args: {
@@ -163,6 +164,48 @@ describe('composeStory', () => {
     );
   });
 
+  it('should merge globals with correct precedence in all combinations', async () => {
+    const renderSpy = vi.fn();
+    const storyAnnotations = { render: renderSpy };
+    const metaAnnotations: Meta = { globals: { language: 'de' } };
+    const projectAnnotations: ProjectAnnotations = { initialGlobals: { language: 'nl' } };
+
+    const storyPrecedence = composeStory(
+      { ...storyAnnotations, globals: { language: 'pt' } },
+      metaAnnotations,
+      projectAnnotations
+    );
+    storyPrecedence();
+    expect(renderSpy.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ globals: { language: 'pt' } })
+    );
+
+    renderSpy.mockClear();
+
+    const metaPrecedence = composeStory(storyAnnotations, metaAnnotations, projectAnnotations);
+    metaPrecedence();
+    expect(renderSpy.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ globals: { language: 'de' } })
+    );
+
+    renderSpy.mockClear();
+
+    const projectPrecedence = composeStory(storyAnnotations, {}, projectAnnotations);
+    projectPrecedence();
+    expect(renderSpy.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ globals: { language: 'nl' } })
+    );
+
+    renderSpy.mockClear();
+
+    setProjectAnnotations({ initialGlobals: { language: 'be' } });
+    const setProjectAnnotationsPrecedence = composeStory(storyAnnotations, {}, {});
+    setProjectAnnotationsPrecedence();
+    expect(renderSpy.mock.calls[0][1]).toEqual(
+      expect.objectContaining({ globals: { language: 'be' } })
+    );
+  });
+
   it('should call and compose loaders data', async () => {
     const loadSpy = vi.fn();
     const args = { story: 'story' };
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 37893aa4c035..bd18285d456d 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -89,25 +89,8 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     normalizedComponentAnnotations
   );
 
-  // TODO: Remove this in 9.0
-  // We can only use the renderToCanvas definition of the default config when testingLibraryRender is set
-  // This makes sure, that when the user doesn't do this, and doesn't provide its own renderToCanvas definition,
-  // we fall back to the < 8.1 behavior of the play function.
-
-  const fallback =
-    defaultConfig &&
-    !globalProjectAnnotations?.testingLibraryRender &&
-    !projectAnnotations?.testingLibraryRender;
-
   const normalizedProjectAnnotations = normalizeProjectAnnotations<TRenderer>(
-    composeConfigs([
-      {
-        ...defaultConfig,
-        renderToCanvas: fallback ? undefined : defaultConfig?.renderToCanvas,
-      },
-      globalProjectAnnotations,
-      projectAnnotations ?? {},
-    ])
+    composeConfigs([defaultConfig ?? {}, globalProjectAnnotations, projectAnnotations ?? {}])
   );
 
   const story = prepareStory<TRenderer>(
@@ -122,16 +105,19 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     const context: StoryContext<TRenderer> = prepareContext({
       hooks: new HooksContext(),
       globals: {
+        // TODO: remove loading from globalTypes in 9.0
         ...globalsFromGlobalTypes,
         ...normalizedProjectAnnotations.initialGlobals,
+        ...story.storyGlobals,
       },
       args: { ...story.initialArgs },
       viewMode: 'story',
       loaded: {},
       abortSignal: new AbortController().signal,
       step: (label, play) => story.runStep(label, play, context),
-      canvasElement: globalThis?.document?.body,
+      canvasElement: null!,
       canvas: {} as Canvas,
+      globalTypes: normalizedProjectAnnotations.globalTypes,
       ...story,
       context: null!,
       mount: null!,
@@ -149,6 +135,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
             id: story.id,
             name: story.name,
             tags: story.tags,
+            showMain: () => {},
             showError: (error) => {},
             showException: (error) => {},
             forceRemount: true,
@@ -171,28 +158,23 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   let loadedContext: StoryContext<TRenderer> | undefined;
 
-  // TODO: Remove in 9.0
-  const backwardsCompatiblePlay = async (
-    extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>
-  ) => {
+  const play = async (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
     const context = initializeContext();
+    context.canvasElement ??= globalThis?.document?.body;
     if (loadedContext) {
       context.loaded = loadedContext.loaded;
     }
     Object.assign(context, extraContext);
     return story.playFunction!(context);
   };
-  const newPlay = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
+
+  const run = (extraContext?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => {
     const context = initializeContext();
     Object.assign(context, extraContext);
-    return playStory(story, context);
+    return runStory(story, context);
   };
-  const playFunction =
-    !story.renderToCanvas && story.playFunction
-      ? backwardsCompatiblePlay
-      : !story.renderToCanvas && !story.playFunction
-        ? undefined
-        : newPlay;
+
+  const playFunction = story.playFunction ? play : undefined;
 
   const composedStory: ComposedStoryFn<TRenderer, Partial<TArgs>> = Object.assign(
     function storyFn(extraArgs?: Partial<TArgs>) {
@@ -226,6 +208,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       play: playFunction!,
+      run,
       tags: story.tags,
     }
   );
@@ -325,13 +308,24 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
 
 // TODO At some point this function should live in prepareStory and become the core of StoryRender.render as well.
 // Will make a follow up PR for that
-async function playStory<TRenderer extends Renderer>(
+async function runStory<TRenderer extends Renderer>(
   story: PreparedStory<TRenderer>,
   context: StoryContext<TRenderer>
 ) {
   for (const callback of [...cleanups].reverse()) await callback();
   cleanups.length = 0;
 
+  if (!context.canvasElement) {
+    const container = document.createElement('div');
+    globalThis?.document?.body?.appendChild(container);
+    context.canvasElement = container;
+    cleanups.push(() => {
+      if (globalThis?.document?.body?.contains(container)) {
+        globalThis?.document?.body?.removeChild(container);
+      }
+    });
+  }
+
   context.loaded = await story.applyLoaders(context);
   if (context.abortSignal.aborted) return;
 
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
index a89359f944f5..e9fd7f3228be 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
@@ -60,6 +60,7 @@ const addExtraContext = (
     step: vi.fn(),
     context: null! as StoryContext,
     canvas: null!,
+    globalTypes: {},
   };
   extraContext.context = extraContext;
   return extraContext;
@@ -359,6 +360,37 @@ describe('prepareStory', () => {
     });
   });
 
+  describe('globals => storyGlobals', () => {
+    it('are combined in the right order', () => {
+      const { storyGlobals } = prepareStory(
+        {
+          id,
+          name,
+          globals: {
+            a: 'a-story',
+            b: 'b-story',
+          },
+          moduleExport,
+        },
+        {
+          id,
+          title,
+          globals: {
+            a: 'a-component',
+            c: 'c-component',
+          },
+        },
+        { render }
+      );
+
+      expect(storyGlobals).toEqual({
+        a: 'a-story',
+        b: 'b-story',
+        c: 'c-component',
+      });
+    });
+  });
+
   describe('applyLoaders', () => {
     const abortSignal = new AbortController().signal;
     it('awaits the result of a loader', async () => {
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index 79b7a5355a76..77bbb4f26759 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -3,6 +3,7 @@ import { global } from '@storybook/global';
 import type {
   Args,
   ArgsStoryFn,
+  Globals,
   Parameters,
   PreparedMeta,
   PreparedStory,
@@ -114,7 +115,7 @@ export function prepareStory<TRenderer extends Renderer>(
     throw new NoRenderFunctionError({ id });
   }
 
-  const defaultMount = (context: StoryContext) => {
+  const defaultMount = (context: StoryContext<TRenderer>) => {
     return async () => {
       await context.renderToCanvas();
       return context.canvas;
@@ -130,6 +131,7 @@ export function prepareStory<TRenderer extends Renderer>(
   const testingLibraryRender = projectAnnotations.testingLibraryRender;
 
   return {
+    storyGlobals: {},
     ...partialAnnotations,
     moduleExport,
     id,
@@ -213,7 +215,12 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
     ...storyAnnotations?.args,
   } as Args;
 
-  const contextForEnhancers: StoryContextForEnhancers<TRenderer> = {
+  const storyGlobals: Globals = {
+    ...componentAnnotations.globals,
+    ...storyAnnotations?.globals,
+  };
+
+  const contextForEnhancers: StoryContextForEnhancers<TRenderer> & { storyGlobals: Globals } = {
     componentId: componentAnnotations.id,
     title: componentAnnotations.title,
     kind: componentAnnotations.title, // Back compat
@@ -227,6 +234,7 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
     parameters,
     initialArgs: passedArgs,
     argTypes: passedArgTypes,
+    storyGlobals,
   };
 
   contextForEnhancers.argTypes = argTypesEnhancers.reduce(
diff --git a/code/core/src/types/modules/channelApi.ts b/code/core/src/types/modules/channelApi.ts
index b58129999e21..6c4f160a0831 100644
--- a/code/core/src/types/modules/channelApi.ts
+++ b/code/core/src/types/modules/channelApi.ts
@@ -52,10 +52,18 @@ export type SetStoriesPayload =
     } & Record<string, never>);
 
 export interface SetGlobalsPayload {
+  // userGlobals
   globals: Globals;
   globalTypes: GlobalTypes;
 }
 
+export interface GlobalsUpdatedPayload {
+  initialGlobals: Globals;
+  userGlobals: Globals;
+  storyGlobals: Globals;
+  globals: Globals;
+}
+
 export interface StoryPreparedPayload {
   id: StoryId;
   parameters: Parameters;
diff --git a/code/core/src/types/modules/composedStory.ts b/code/core/src/types/modules/composedStory.ts
index c3c613ec6b1d..ade2c302a999 100644
--- a/code/core/src/types/modules/composedStory.ts
+++ b/code/core/src/types/modules/composedStory.ts
@@ -44,7 +44,8 @@ export type ComposedStoryFn<
 > = PartialArgsStoryFn<TRenderer, TArgs> & {
   args: TArgs;
   id: StoryId;
-  play: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  play?: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
+  run: (context?: Partial<StoryContext<TRenderer, Partial<TArgs>>>) => Promise<void>;
   load: () => Promise<void>;
   storyName: string;
   parameters: Parameters;
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index d994449a2e72..e7ee49c67109 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -375,6 +375,15 @@ export interface StorybookConfigRaw {
      * Enable asynchronous component rendering in React renderer
      */
     experimentalRSC?: boolean;
+
+    /**
+     * use globals & globalTypes for configuring the viewport addon
+     */
+    viewportStoryGlobals?: boolean;
+    /**
+     * use globals & globalTypes for configuring the backgrounds addon
+     */
+    backgroundsStoryGlobals?: boolean;
   };
 
   build?: TestBuildConfig;
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index afe3edf6c6b0..2cbd803e5637 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -6,6 +6,7 @@ import type {
   CleanupCallback,
   StepRunner,
   Canvas,
+  Globals,
   BeforeAll,
 } from '@storybook/csf';
 
@@ -114,6 +115,7 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     testingLibraryRender?: (...args: never[]) => unknown;
     renderToCanvas?: ProjectAnnotations<TRenderer>['renderToCanvas'];
     usesMount: boolean;
+    storyGlobals: Globals;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<
diff --git a/code/core/template/stories/globals.stories.ts b/code/core/template/stories/globals.stories.ts
index 1176ffeb9c99..788e4dd53bd7 100644
--- a/code/core/template/stories/globals.stories.ts
+++ b/code/core/template/stories/globals.stories.ts
@@ -4,6 +4,10 @@ import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,
+  tags: ['autodocs'],
+  globals: {
+    baz: 'bazComponentValue',
+  },
 };
 
 export const Inheritance = {
@@ -16,6 +20,7 @@ export const Inheritance = {
     await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
       foo: 'fooValue',
       bar: 'barDefaultValue',
+      baz: 'bazComponentValue',
     });
   },
 };
@@ -40,3 +45,41 @@ export const Events = {
     await within(canvasElement).findByText('fooValue');
   },
 };
+
+export const Overrides1 = {
+  // Compose all the globals into `object`, so the pre component only needs a single prop
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: context.globals } }),
+  ],
+  globals: {
+    foo: 'fooOverridden1',
+    baz: 'bazOverridden1',
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      foo: 'fooOverridden1',
+      bar: 'barDefaultValue',
+      baz: 'bazOverridden1',
+    });
+  },
+};
+
+export const Overrides2 = {
+  // Compose all the globals into `object`, so the pre component only needs a single prop
+  decorators: [
+    (storyFn: PartialStoryFn, context: StoryContext) =>
+      storyFn({ args: { object: context.globals } }),
+  ],
+  globals: {
+    foo: 'fooOverridden2',
+    baz: 'bazOverridden2',
+  },
+  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
+      foo: 'fooOverridden2',
+      bar: 'barDefaultValue',
+      baz: 'bazOverridden2',
+    });
+  },
+};
diff --git a/code/core/template/stories/preview.ts b/code/core/template/stories/preview.ts
index 85ed96d67755..a70f24a9b73b 100644
--- a/code/core/template/stories/preview.ts
+++ b/code/core/template/stories/preview.ts
@@ -40,6 +40,7 @@ export const decorators = [
 
 export const initialGlobals = {
   foo: 'fooValue',
+  baz: 'bazValue',
 };
 
 export const globalTypes = {
diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts
new file mode 100644
index 000000000000..b642ebca7967
--- /dev/null
+++ b/code/e2e-tests/addon-toolbars.spec.ts
@@ -0,0 +1,36 @@
+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('addon-toolbars', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('should have locale button in the toolbar', async ({ page }) => {
+    const sbPage = new SbPage(page);
+
+    // Click on viewport button and select spanish
+    await sbPage.navigateToStory('addons/toolbars/globals', 'basic');
+    await sbPage.selectToolbar('[title="Internationalization locale"]', '#list-item-es');
+
+    // Check that spanish is selected
+    await expect(sbPage.previewRoot()).toContainText('Hola');
+  });
+
+  test('locale button should be disabled for story that overrides locale global', async ({
+    page,
+  }) => {
+    const sbPage = new SbPage(page);
+
+    // Click on viewport button and select spanish
+    await sbPage.navigateToStory('addons/toolbars/globals', 'override-locale');
+    await expect(sbPage.previewRoot()).toContainText('안녕하세요');
+    const button = await sbPage.page.locator('[title="Internationalization locale"]');
+
+    await expect(await button.getAttribute('disabled')).toBe('');
+  });
+});
diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts
index 5ef2a975b4ea..7131e764e635 100644
--- a/code/e2e-tests/manager.spec.ts
+++ b/code/e2e-tests/manager.spec.ts
@@ -189,6 +189,7 @@ test.describe('Manager UI', () => {
   });
 
   test.describe('Mobile', () => {
+    test.describe.configure({ retries: 3 });
     // TODO: remove this when SSV6 templates have been removed
     // Some assertions in these tests are not compatible with SSV6
     // GIven that SSV6 will be removed before the new mobile UI released, it doesn't make sense to fix them
@@ -200,10 +201,11 @@ test.describe('Manager UI', () => {
     test('Navigate to story', async ({ page }) => {
       const sbPage = new SbPage(page);
 
+      const closeNavigationButton = await sbPage.page.locator('[title="Close navigation menu"]');
       const mobileNavigationHeading = await sbPage.page.locator('[title="Open navigation menu"]');
 
       // navigation menu is closed
-      await expect(mobileNavigationHeading).toHaveText('Configure your project/Docs');
+      await expect(closeNavigationButton).not.toBeVisible();
       await expect(sbPage.page.locator('#storybook-explorer-menu')).not.toBeVisible();
 
       // open navigation menu
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index fae5d359a6a7..02ecc753b5f5 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -95,6 +95,17 @@ export class SbPage {
       };
       window.sessionStorage.setItem('@storybook/manager/store', JSON.stringify(storeState));
     }, {});
+
+    // disable all transitions to avoid flakiness
+    await this.page.addStyleTag({
+      content: `
+            *,
+            *::before,
+            *::after {
+              transition: none !important;
+            }
+          `,
+    });
     const root = this.previewRoot();
     const docsLoadingPage = root.locator('.sb-preparing-docs');
     const storyLoadingPage = root.locator('.sb-preparing-story');
diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts
index 2a1559456e1b..f7133806e3df 100644
--- a/code/frameworks/angular/src/client/decorators.test.ts
+++ b/code/frameworks/angular/src/client/decorators.test.ts
@@ -18,6 +18,8 @@ const defaultContext: Addon_StoryContext<AngularRenderer> = {
   args: {},
   argTypes: {},
   globals: {},
+  globalTypes: {},
+  storyGlobals: {},
   hooks: {},
   loaded: {},
   originalStoryFn: vi.fn(),
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index 11bba5843353..71bb347eac71 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,7 +1,7 @@
 import { Args, Meta, componentWrapperDecorator } from '@storybook/angular';
 
 export const Base = (args: Args) => ({
-  template: 'Change theme with the brush in toolbar',
+  template: 'Change sb_theme with the brush in toolbar',
   props: {
     ...args,
   },
@@ -14,7 +14,7 @@ export default {
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
 
-      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
+      ({ globals }) => ({ myTheme: `${globals['sb_theme']}-theme` })
     ),
   ],
 } as Meta;
diff --git a/code/frameworks/nextjs/src/portable-stories.ts b/code/frameworks/nextjs/src/portable-stories.ts
index bc00b0ba9f18..e682a103ef24 100644
--- a/code/frameworks/nextjs/src/portable-stories.ts
+++ b/code/frameworks/nextjs/src/portable-stories.ts
@@ -16,6 +16,7 @@ import type {
 
 // ! ATTENTION: This needs to be a relative import so it gets prebundled. This is to avoid ESM issues in Nextjs + Jest setups
 import { INTERNAL_DEFAULT_PROJECT_ANNOTATIONS as reactAnnotations } from '../../../renderers/react/src/portable-stories';
+import * as rscAnnotations from '../../../renderers/react/src/entry-preview-rsc';
 import * as nextJsAnnotations from './preview';
 
 import type { ReactRenderer, Meta } from '@storybook/react';
@@ -46,6 +47,7 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 const defaultProjectAnnotations: ProjectAnnotations<ReactRenderer> = composeConfigs([
   reactAnnotations,
+  rscAnnotations,
   nextJsAnnotations,
 ]);
 
diff --git a/code/lib/blocks/src/blocks/Anchor.stories.tsx b/code/lib/blocks/src/blocks/Anchor.stories.tsx
index bc940993573e..75051f1760be 100644
--- a/code/lib/blocks/src/blocks/Anchor.stories.tsx
+++ b/code/lib/blocks/src/blocks/Anchor.stories.tsx
@@ -4,6 +4,7 @@ import { Anchor } from './Anchor';
 const meta = {
   component: Anchor,
   parameters: {
+    layout: 'fullscreen',
     docsStyles: true,
   },
 } as Meta<typeof Anchor>;
diff --git a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
index 39d4a1c66b9c..30e5386a1ffd 100644
--- a/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
+++ b/code/lib/blocks/src/blocks/ArgTypes.stories.tsx
@@ -11,6 +11,7 @@ const meta: Meta<typeof ArgTypes> = {
   title: 'Blocks/ArgTypes',
   component: ArgTypes,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/ArgTypesParameters.stories',
       '../examples/ArgTypesWithSubcomponentsParameters.stories',
diff --git a/code/lib/blocks/src/blocks/Canvas.stories.tsx b/code/lib/blocks/src/blocks/Canvas.stories.tsx
index ac32440ba608..4319ef5a0653 100644
--- a/code/lib/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/lib/blocks/src/blocks/Canvas.stories.tsx
@@ -10,6 +10,7 @@ import * as SourceParameterStories from '../examples/SourceParameters.stories';
 const meta: Meta<typeof Canvas> = {
   component: Canvas,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/Button.stories',
       '../examples/CanvasParameters.stories',
diff --git a/code/lib/blocks/src/blocks/Controls.stories.tsx b/code/lib/blocks/src/blocks/Controls.stories.tsx
index b004b08bd614..6d39ab537b89 100644
--- a/code/lib/blocks/src/blocks/Controls.stories.tsx
+++ b/code/lib/blocks/src/blocks/Controls.stories.tsx
@@ -11,6 +11,7 @@ import * as EmptyArgTypesStories from '../examples/EmptyArgTypes.stories';
 const meta = {
   component: Controls,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: [
       '../examples/ControlsParameters.stories',
       '../examples/EmptyArgTypes.stories',
diff --git a/code/lib/blocks/src/blocks/Description.stories.tsx b/code/lib/blocks/src/blocks/Description.stories.tsx
index d57d808ff554..ee9922b43074 100644
--- a/code/lib/blocks/src/blocks/Description.stories.tsx
+++ b/code/lib/blocks/src/blocks/Description.stories.tsx
@@ -10,6 +10,7 @@ import * as ButtonStoriesWithMetaDescriptionAsBoth from '../examples/ButtonWithM
 const meta: Meta<typeof Description> = {
   component: Description,
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
     },
diff --git a/code/lib/blocks/src/blocks/DocsPage.stories.tsx b/code/lib/blocks/src/blocks/DocsPage.stories.tsx
index c52674e31c41..6812f7b70586 100644
--- a/code/lib/blocks/src/blocks/DocsPage.stories.tsx
+++ b/code/lib/blocks/src/blocks/DocsPage.stories.tsx
@@ -4,6 +4,7 @@ import { DocsPage } from './DocsPage';
 const meta = {
   component: DocsPage,
   parameters: {
+    layout: 'fullscreen',
     docsStyles: true,
     chromatic: {
       disableSnapshot: true,
diff --git a/code/lib/blocks/src/blocks/Markdown.stories.tsx b/code/lib/blocks/src/blocks/Markdown.stories.tsx
index 69cc118fd6d1..4a4d1bc80d19 100644
--- a/code/lib/blocks/src/blocks/Markdown.stories.tsx
+++ b/code/lib/blocks/src/blocks/Markdown.stories.tsx
@@ -5,7 +5,10 @@ import mdContent from '../examples/Markdown-content.md?raw';
 
 export default {
   component: MarkdownComponent,
-  parameters: { docsStyles: true },
+  parameters: {
+    layout: 'fullscreen',
+    docsStyles: true,
+  },
 };
 
 export const Markdown = {
diff --git a/code/lib/blocks/src/blocks/Primary.stories.tsx b/code/lib/blocks/src/blocks/Primary.stories.tsx
index 4412881fd702..7640be8399dd 100644
--- a/code/lib/blocks/src/blocks/Primary.stories.tsx
+++ b/code/lib/blocks/src/blocks/Primary.stories.tsx
@@ -6,6 +6,7 @@ import * as StoriesParametersStories from '../examples/StoriesParameters.stories
 const meta = {
   component: Primary,
   parameters: {
+    layout: 'fullscreen',
     // workaround for https://github.com/storybookjs/storybook/issues/20505
     docs: { source: { type: 'code' } },
     docsStyles: true,
diff --git a/code/lib/blocks/src/blocks/Source.stories.tsx b/code/lib/blocks/src/blocks/Source.stories.tsx
index 70d85b9d40bd..5ecd69b92fb1 100644
--- a/code/lib/blocks/src/blocks/Source.stories.tsx
+++ b/code/lib/blocks/src/blocks/Source.stories.tsx
@@ -10,6 +10,7 @@ import { argsHash, SourceContext } from './SourceContainer';
 const meta: Meta<typeof Source> = {
   component: Source,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/SourceParameters.stories'],
     snippets: {
       'storybook-blocks-examples-stories-for-the-source-block--no-parameters': {
diff --git a/code/lib/blocks/src/blocks/Stories.stories.tsx b/code/lib/blocks/src/blocks/Stories.stories.tsx
index 0c91aec638e6..77b2285a8a5a 100644
--- a/code/lib/blocks/src/blocks/Stories.stories.tsx
+++ b/code/lib/blocks/src/blocks/Stories.stories.tsx
@@ -3,7 +3,10 @@ import { Stories } from './Stories';
 
 const meta = {
   component: Stories,
-  parameters: { docsStyles: true },
+  parameters: {
+    layout: 'fullscreen',
+    docsStyles: true,
+  },
 } satisfies Meta<typeof Stories>;
 
 export default meta;
diff --git a/code/lib/blocks/src/blocks/Story.stories.tsx b/code/lib/blocks/src/blocks/Story.stories.tsx
index 27d0770395a2..9bf42b26ad46 100644
--- a/code/lib/blocks/src/blocks/Story.stories.tsx
+++ b/code/lib/blocks/src/blocks/Story.stories.tsx
@@ -10,6 +10,7 @@ import * as StoryParametersStories from '../examples/StoryParameters.stories';
 const meta: Meta<typeof StoryBlock> = {
   component: StoryBlock,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'],
     docsStyles: true,
   },
diff --git a/code/lib/blocks/src/blocks/Subtitle.stories.tsx b/code/lib/blocks/src/blocks/Subtitle.stories.tsx
index 77accb6d447a..bd38129c5757 100644
--- a/code/lib/blocks/src/blocks/Subtitle.stories.tsx
+++ b/code/lib/blocks/src/blocks/Subtitle.stories.tsx
@@ -9,6 +9,7 @@ import * as ButtonStoriesWithMetaSubtitleAsDocsSubtitle from '../examples/Button
 const meta: Meta<typeof Subtitle> = {
   component: Subtitle,
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
       hideNoControlsWarning: true,
diff --git a/code/lib/blocks/src/blocks/Title.stories.tsx b/code/lib/blocks/src/blocks/Title.stories.tsx
index a75b6ef72d98..9ac72a10a737 100644
--- a/code/lib/blocks/src/blocks/Title.stories.tsx
+++ b/code/lib/blocks/src/blocks/Title.stories.tsx
@@ -6,6 +6,7 @@ const meta: Meta<typeof Title> = {
   component: Title,
   title: 'Blocks/Title',
   parameters: {
+    layout: 'fullscreen',
     controls: {
       include: [],
       hideNoControlsWarning: true,
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx b/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
index 439d27363ad4..54d929d0a24f 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgRow.stories.tsx
@@ -6,6 +6,7 @@ import { TableWrapper } from './ArgsTable';
 export default {
   component: ArgRow,
   title: 'Components/ArgsTable/ArgRow',
+
   decorators: [
     (getStory: any) => (
       <ResetWrapper>
diff --git a/code/lib/blocks/src/components/Story.stories.tsx b/code/lib/blocks/src/components/Story.stories.tsx
index 564fe2bc7ff2..c77cb20708fa 100644
--- a/code/lib/blocks/src/components/Story.stories.tsx
+++ b/code/lib/blocks/src/components/Story.stories.tsx
@@ -29,8 +29,10 @@ const meta: Meta<ExtendedStoryProps> = {
   // @ts-expect-error getting too complex with props
   component: StoryComponent,
   parameters: {
+    layout: 'fullscreen',
     relativeCsfPaths: ['../examples/Button.stories'],
   },
+  globals: { sb_theme: 'light' },
   args: {
     height: '100px',
     primary: false,
@@ -48,7 +50,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Loading = () => <StorySkeleton />;
+export const Loading = {
+  globals: { sb_theme: 'side-by-side' },
+  render: () => <StorySkeleton />,
+};
 
 export const Inline: Story = {
   args: {
diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx
index 597f5240ebfc..71678472a9e7 100644
--- a/code/lib/blocks/src/examples/Button.stories.tsx
+++ b/code/lib/blocks/src/examples/Button.stories.tsx
@@ -11,9 +11,9 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  // Stop *this* story from being stacked in Chromatic
+  globals: { sb_theme: 'default' },
   parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
     // these are to test the deprecated features of the Description block
     notes: 'These are notes for the Button stories',
     info: 'This is info for the Button stories',
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
index d7da0af416c1..38c70ac80a86 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx
@@ -13,9 +13,9 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  // Stop *this* story from being stacked in Chromatic
+  globals: { sb_theme: 'default' },
   parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
     docs: {
       description: {
         component: `
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
index 152e5a886077..3060eb59cbfc 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx
@@ -12,10 +12,8 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-  parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
-  },
+  // Stop *this* story from being stacked in Chromatic
+  globals: { sb_theme: 'light' },
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
index 68fe7b3ecc2c..e4de6047b668 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx
@@ -7,9 +7,8 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  globals: { sb_theme: 'light' },
   parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
     docs: {
       description: {
         component: `
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
index 5b4235c07c57..04a6cec92d54 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx
@@ -7,9 +7,8 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  globals: { sb_theme: 'light' },
   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: {
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
index 57a106340421..11ee4d719169 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx
@@ -7,9 +7,8 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  globals: { sb_theme: 'light' },
   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',
   },
diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
index 3df3110baf6c..a36e8ce3bbcb 100644
--- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
+++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx
@@ -7,9 +7,8 @@ const meta = {
   argTypes: {
     backgroundColor: { control: 'color' },
   },
+  globals: { sb_theme: 'light' },
   parameters: {
-    // Stop *this* story from being stacked in Chromatic
-    theme: 'default',
     docs: {
       subtitle: 'This subtitle is set in parameters.docs.subtitle',
     },
diff --git a/code/lib/blocks/src/examples/StoryParameters.stories.tsx b/code/lib/blocks/src/examples/StoryParameters.stories.tsx
index 6bf3d81592a4..62f5c545df9e 100644
--- a/code/lib/blocks/src/examples/StoryParameters.stories.tsx
+++ b/code/lib/blocks/src/examples/StoryParameters.stories.tsx
@@ -4,8 +4,7 @@ import { SimpleSizeTest } from './SimpleSizeTest';
 const meta = {
   title: 'examples/Stories for the Story Block',
   component: SimpleSizeTest,
-  // Stop *this* story from being stacked in Chromatic (we want the caller to stack though)
-  parameters: { theme: 'default' },
+  globals: { sb_theme: 'light' },
 } satisfies Meta<typeof SimpleSizeTest>;
 export default meta;
 
diff --git a/code/lib/cli-storybook/.eslintrc.cjs b/code/lib/cli-storybook/.eslintrc.cjs
new file mode 100644
index 000000000000..a2dae9fc88d3
--- /dev/null
+++ b/code/lib/cli-storybook/.eslintrc.cjs
@@ -0,0 +1,36 @@
+const ignore = 0;
+
+module.exports = {
+  overrides: [
+    {
+      files: 'templates/**/*',
+      env: {
+        browser: true,
+      },
+      rules: {
+        'react/no-this-in-sfc': ignore,
+        'import/no-unresolved': ignore,
+        'react/react-in-jsx-scope': ignore,
+        'import/no-extraneous-dependencies': ignore,
+        'global-require': ignore,
+        'no-redeclare': ignore,
+        'react/prop-types': ignore,
+      },
+    },
+    {
+      files: 'rendererAssets/**/*',
+      env: {
+        browser: true,
+      },
+      rules: {
+        'jsx-a11y/anchor-is-valid': ignore,
+        'import/no-unresolved': ignore,
+        'react/prop-types': ignore,
+        'react/react-in-jsx-scope': ignore,
+        'import/no-extraneous-dependencies': ignore,
+        'import/extensions': ignore,
+        'import/named': ignore,
+      },
+    },
+  ],
+};
diff --git a/code/lib/cli-storybook/README.md b/code/lib/cli-storybook/README.md
index f31715566811..6e3183109f1a 100644
--- a/code/lib/cli-storybook/README.md
+++ b/code/lib/cli-storybook/README.md
@@ -1,3 +1,49 @@
-# Storybook CLI
+# Storybook
 
-This is a wrapper for <https://www.npmjs.com/package/@storybook/cli>
+## CLI
+
+Storybook CLI (_Command Line Interface_) is the easiest way to add [Storybook](https://github.com/storybookjs/storybook) to your project.
+
+![Screenshot](docs/getstorybook.png)
+
+Go to your project and run:
+
+```sh
+cd my-app
+npx storybook@latest init
+```
+
+In addition to `init`, the CLI also has other commands:
+
+- `add` - add an addon and register it
+- `info` - print out system information for bug reports
+- `upgrade` - upgrade to the latest version of Storybook (or a specific version)
+- `migrate` - run codemods to migrate your code
+
+See the command-line help with `-h` (including other useful commands) for details.
+
+## Core APIs
+
+This package has multiple sub-exports to can be used to gain access to storybook's APIs.
+
+### `storybook/components`
+
+This export contains a list of components very useful for building out addons.
+We recommend addon-authors to use these components to ensure a consistent look and feel, and to reduce the amount of code they need to write.
+
+### `storybook/theming`
+
+This export exposes a few utility functions to help writing components that automatically adapt to the current theme.
+Useful for addon authors who want to make their addons theme-aware.
+
+### `storybook/preview-api`
+
+This export contains the API that is available in the preview iframe.
+
+### `storybook/manager-api`
+
+This export contains the API that is available in the manager iframe.
+
+### `storybook/types`
+
+This export exposes a lot of TypeScript interfaces used throughout storybook, including for storybook configuration, addons etc.
diff --git a/code/lib/cli-storybook/bin/index.cjs b/code/lib/cli-storybook/bin/index.cjs
new file mode 100755
index 000000000000..ce13973e4eb9
--- /dev/null
+++ b/code/lib/cli-storybook/bin/index.cjs
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+const majorNodeVersion = parseInt(process.versions.node, 10);
+if (majorNodeVersion < 18) {
+  console.error('To run Storybook you need to have Node.js 18 or higher');
+  process.exit(1);
+}
+
+// The Storybook CLI has a catch block for all of its commands, but if an error
+// occurs before the command even runs, for instance, if an import fails, then
+// such error will fall under the uncaughtException handler.
+// This is the earliest moment we can catch such errors.
+process.once('uncaughtException', (error) => {
+  if (error.message.includes('string-width')) {
+    console.error(
+      [
+        '🔴 Error: It looks like you are having a known issue with package hoisting.',
+        'Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092\n\n',
+      ].join('\n')
+    );
+  }
+
+  throw error;
+});
+
+require('../dist/bin/index.cjs');
diff --git a/code/lib/cli-storybook/index.js b/code/lib/cli-storybook/index.js
deleted file mode 100755
index 7cb4855dc32f..000000000000
--- a/code/lib/cli-storybook/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('storybook/bin/index.cjs');
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index b4bb73aee593..c66a3418b25e 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -19,15 +19,66 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "bin": {
-    "sb": "./index.js",
-    "storybook": "./index.js"
+  "author": "Storybook Team",
+  "type": "module",
+  "exports": {
+    "./bin/index.cjs": {
+      "node": "./bin/index.cjs",
+      "require": "./bin/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "bin": "./bin/index.cjs",
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "README.md",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "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/bundle.ts"
   },
   "dependencies": {
-    "storybook": "workspace:*"
+    "@babel/core": "^7.24.4",
+    "@babel/types": "^7.24.0",
+    "@storybook/codemod": "workspace:*",
+    "@types/semver": "^7.3.4",
+    "chalk": "^4.1.0",
+    "commander": "^6.2.1",
+    "create-storybook": "workspace:*",
+    "cross-spawn": "^7.0.3",
+    "envinfo": "^7.7.3",
+    "fd-package-json": "^1.2.0",
+    "find-up": "^5.0.0",
+    "fs-extra": "^11.1.0",
+    "giget": "^1.0.0",
+    "globby": "^14.0.1",
+    "jscodeshift": "^0.15.1",
+    "leven": "^3.1.0",
+    "prompts": "^2.4.0",
+    "semver": "^7.3.7",
+    "storybook": "workspace:*",
+    "tiny-invariant": "^1.3.1",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "^6.0.2",
+    "@types/prompts": "^2.0.9",
+    "boxen": "^7.1.1",
+    "slash": "^5.0.0",
+    "strip-ansi": "^7.1.0",
+    "typescript": "^5.3.2"
   },
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/bin/index.ts"
+    ],
+    "platform": "node"
+  },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
 }
diff --git a/code/lib/cli-storybook/project.json b/code/lib/cli-storybook/project.json
index 1327b61e5ba4..229b547bb854 100644
--- a/code/lib/cli-storybook/project.json
+++ b/code/lib/cli-storybook/project.json
@@ -2,5 +2,7 @@
   "name": "cli-storybook",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
-  "targets": {}
+  "targets": {
+    "build": {}
+  }
 }
diff --git a/code/lib/cli/src/add.test.ts b/code/lib/cli-storybook/src/add.test.ts
similarity index 98%
rename from code/lib/cli/src/add.test.ts
rename to code/lib/cli-storybook/src/add.test.ts
index fc0f0c5105ab..c2436982c521 100644
--- a/code/lib/cli/src/add.test.ts
+++ b/code/lib/cli-storybook/src/add.test.ts
@@ -25,7 +25,7 @@ const MockedConsole = {
   error: vi.fn(),
 } as any as Console;
 
-vi.mock('@storybook/core/csf-tools', () => {
+vi.mock('storybook/internal/csf-tools', () => {
   return {
     readConfig: vi.fn(() => MockedConfig),
     writeConfig: vi.fn(),
@@ -34,7 +34,7 @@ vi.mock('@storybook/core/csf-tools', () => {
 vi.mock('./postinstallAddon', () => {
   return MockedPostInstall;
 });
-vi.mock('@storybook/core/common', () => {
+vi.mock('storybook/internal/common', () => {
   return {
     getStorybookInfo: vi.fn(() => ({ mainConfig: {}, configDir: '' })),
     serverRequire: vi.fn(() => ({})),
diff --git a/code/lib/cli/src/add.ts b/code/lib/cli-storybook/src/add.ts
similarity index 97%
rename from code/lib/cli/src/add.ts
rename to code/lib/cli-storybook/src/add.ts
index 14994d62afcf..11a14d8e0dfb 100644
--- a/code/lib/cli/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -5,8 +5,8 @@ import {
   getCoercedStorybookVersion,
   type PackageManagerName,
   versions,
-} from '@storybook/core/common';
-import { readConfig, writeConfig } from '@storybook/core/csf-tools';
+} from 'storybook/internal/common';
+import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import { isAbsolute, join } from 'path';
 import SemVer from 'semver';
 import { dedent } from 'ts-dedent';
diff --git a/code/lib/cli/src/autoblock/block-dependencies-versions.ts b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts
similarity index 100%
rename from code/lib/cli/src/autoblock/block-dependencies-versions.ts
rename to code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts
diff --git a/code/lib/cli/src/autoblock/block-node-version.ts b/code/lib/cli-storybook/src/autoblock/block-node-version.ts
similarity index 100%
rename from code/lib/cli/src/autoblock/block-node-version.ts
rename to code/lib/cli-storybook/src/autoblock/block-node-version.ts
diff --git a/code/lib/cli/src/autoblock/block-storystorev6.ts b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
similarity index 94%
rename from code/lib/cli/src/autoblock/block-storystorev6.ts
rename to code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
index 819d2adb8dcc..261b3dd0e5fd 100644
--- a/code/lib/cli/src/autoblock/block-storystorev6.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
@@ -1,6 +1,6 @@
 import { createBlocker } from './types';
 import { dedent } from 'ts-dedent';
-import type { StorybookConfigRaw } from '@storybook/core/types';
+import type { StorybookConfigRaw } from 'storybook/internal/types';
 import chalk from 'chalk';
 
 export const blocker = createBlocker({
diff --git a/code/lib/cli/src/autoblock/index.test.ts b/code/lib/cli-storybook/src/autoblock/index.test.ts
similarity index 94%
rename from code/lib/cli/src/autoblock/index.test.ts
rename to code/lib/cli-storybook/src/autoblock/index.test.ts
index a59263b8491d..8a7361f451ce 100644
--- a/code/lib/cli/src/autoblock/index.test.ts
+++ b/code/lib/cli-storybook/src/autoblock/index.test.ts
@@ -1,8 +1,8 @@
 import { expect, test, vi } from 'vitest';
 import { autoblock } from './index';
-import { JsPackageManagerFactory } from '@storybook/core/common';
+import { JsPackageManagerFactory } from 'storybook/internal/common';
 import { createBlocker } from './types';
-import { logger as loggerRaw } from '@storybook/core/node-logger';
+import { logger as loggerRaw } from 'storybook/internal/node-logger';
 import stripAnsi from 'strip-ansi';
 
 vi.mock('node:fs/promises', async (importOriginal) => ({
@@ -12,7 +12,7 @@ vi.mock('node:fs/promises', async (importOriginal) => ({
 vi.mock('boxen', () => ({
   default: vi.fn((x) => x),
 }));
-vi.mock('@storybook/core/node-logger', () => ({
+vi.mock('storybook/internal/node-logger', () => ({
   logger: {
     info: vi.fn(),
     line: vi.fn(),
diff --git a/code/lib/cli/src/autoblock/index.ts b/code/lib/cli-storybook/src/autoblock/index.ts
similarity index 97%
rename from code/lib/cli/src/autoblock/index.ts
rename to code/lib/cli-storybook/src/autoblock/index.ts
index 961de58dca25..adb2232932c4 100644
--- a/code/lib/cli/src/autoblock/index.ts
+++ b/code/lib/cli-storybook/src/autoblock/index.ts
@@ -1,5 +1,5 @@
 import type { AutoblockOptions, Blocker } from './types';
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 import chalk from 'chalk';
 import boxen from 'boxen';
 
diff --git a/code/lib/cli/src/autoblock/types.ts b/code/lib/cli-storybook/src/autoblock/types.ts
similarity index 84%
rename from code/lib/cli/src/autoblock/types.ts
rename to code/lib/cli-storybook/src/autoblock/types.ts
index a3e7fe12da36..916af12818b8 100644
--- a/code/lib/cli/src/autoblock/types.ts
+++ b/code/lib/cli-storybook/src/autoblock/types.ts
@@ -1,5 +1,5 @@
-import type { JsPackageManager, PackageJson } from '@storybook/core/common';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { JsPackageManager, PackageJson } from 'storybook/internal/common';
+import type { StorybookConfig } from 'storybook/internal/types';
 
 export interface AutoblockOptions {
   packageManager: JsPackageManager;
diff --git a/code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/__test__/main-config-with-wrappers.js
rename to code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js
diff --git a/code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/__test__/main-config-without-wrappers.js
rename to code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
diff --git a/code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.test.ts
similarity index 88%
rename from code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.test.ts
index 88ce6039e8b9..ec54fe573286 100644
--- a/code/lib/cli/src/automigrate/fixes/addon-postcss.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.test.ts
@@ -1,6 +1,6 @@
 import { addonPostCSS } from './addon-postcss';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { expect, describe, it } from 'vitest';
 
 const checkAddonPostCSS = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/addon-postcss.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/addon-postcss.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts
diff --git a/code/lib/cli/src/automigrate/fixes/addons-api.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.test.ts
similarity index 89%
rename from code/lib/cli/src/automigrate/fixes/addons-api.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/addons-api.test.ts
index 0709a27dbfcb..3aebd02efd0f 100644
--- a/code/lib/cli/src/automigrate/fixes/addons-api.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.test.ts
@@ -1,6 +1,6 @@
 import { addonsAPI } from './addons-api';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { expect, describe, it } from 'vitest';
 
 const checkAddonsAPI = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/addons-api.ts b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/addons-api.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.test.ts
similarity index 85%
rename from code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.test.ts
index 6ecf6a6a12de..f48c01bdd5bd 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.test.ts
@@ -1,9 +1,8 @@
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
-import * as helpers from '../../helpers';
-import * as angularHelpers from '../../generators/ANGULAR/helpers';
+import * as helpers from 'storybook/internal/cli';
 
 const checkAngularBuilders = async ({
   packageManager,
@@ -19,13 +18,9 @@ const checkAngularBuilders = async ({
   });
 };
 
-vi.mock('../../helpers', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../helpers')>()),
+vi.mock('storybook/internal/cli', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('storybook/internal/cli')>()),
   isNxProject: vi.fn(),
-}));
-
-vi.mock('../../generators/ANGULAR/helpers', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../generators/ANGULAR/helpers')>()),
   AngularJSON: vi.fn(),
 }));
 
@@ -100,7 +95,7 @@ describe('is not Nx project', () => {
       describe('has one Storybook builder defined', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: true,
@@ -121,7 +116,7 @@ describe('is not Nx project', () => {
       describe('has one project', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: false,
@@ -146,7 +141,7 @@ describe('is not Nx project', () => {
       describe('has multiple projects without root project defined', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: false,
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
similarity index 94%
rename from code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
index 3f72411be011..e9a728d4ac83 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
@@ -2,8 +2,7 @@ import { dedent } from 'ts-dedent';
 import semver from 'semver';
 import chalk from 'chalk';
 import type { Fix } from '../types';
-import { isNxProject } from '../../helpers';
-import { AngularJSON } from '../../generators/ANGULAR/helpers';
+import { isNxProject, AngularJSON } from 'storybook/internal/cli';
 import { getFrameworkPackageName } from '../helpers/mainConfigFile';
 
 interface AngularBuildersMultiprojectRunOptions {}
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.test.ts
similarity index 84%
rename from code/lib/cli/src/automigrate/fixes/angular-builders.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/angular-builders.test.ts
index 689e0ea24dff..a1dc26f8cb3b 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.test.ts
@@ -1,9 +1,8 @@
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { angularBuilders } from './angular-builders';
-import * as helpers from '../../helpers';
-import * as angularHelpers from '../../generators/ANGULAR/helpers';
-import type { JsPackageManager } from '@storybook/core/common';
+import * as helpers from 'storybook/internal/cli';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 const checkAngularBuilders = async ({
   packageManager,
@@ -21,13 +20,9 @@ const checkAngularBuilders = async ({
   });
 };
 
-vi.mock('../../helpers', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../helpers')>()),
+vi.mock('storybook/internal/cli', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('storybook/internal/cli')>()),
   isNxProject: vi.fn(),
-}));
-
-vi.mock('../../generators/ANGULAR/helpers', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../generators/ANGULAR/helpers')>()),
   AngularJSON: vi.fn(),
 }));
 
@@ -85,7 +80,7 @@ describe('is not Nx project', () => {
       describe('has one Storybook builder defined', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: true,
@@ -106,7 +101,7 @@ describe('is not Nx project', () => {
       describe('has multiple projects without root project defined', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: false,
@@ -132,7 +127,7 @@ describe('is not Nx project', () => {
       describe('has one project', () => {
         beforeEach(() => {
           // Mock AngularJSON.constructor
-          vi.mocked(angularHelpers.AngularJSON).mockImplementation(
+          vi.mocked(helpers.AngularJSON).mockImplementation(
             () =>
               ({
                 hasStorybookBuilder: false,
diff --git a/code/lib/cli/src/automigrate/fixes/angular-builders.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
similarity index 92%
rename from code/lib/cli/src/automigrate/fixes/angular-builders.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
index e1cc9f5d953a..583ce3a20457 100644
--- a/code/lib/cli/src/automigrate/fixes/angular-builders.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
@@ -1,11 +1,10 @@
 import { dedent } from 'ts-dedent';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import chalk from 'chalk';
 import prompts from 'prompts';
 import type { Fix } from '../types';
-import { isNxProject } from '../../helpers';
-import { AngularJSON } from '../../generators/ANGULAR/helpers';
-import type { JsPackageManager } from '@storybook/core/common';
+import { isNxProject, AngularJSON } from 'storybook/internal/cli';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { getFrameworkPackageName } from '../helpers/mainConfigFile';
 
 interface AngularBuildersRunOptions {
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
index 799fb14c40f6..144679757e2f 100644
--- a/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { autodocsTags } from './autodocs-tags';
 
 const check = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
index b2c83ee23eea..cff6f104ac58 100644
--- a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
@@ -1,7 +1,7 @@
 import { dedent } from 'ts-dedent';
 import chalk from 'chalk';
-import type { DocsOptions } from '@storybook/core/types';
-import { readConfig, writeConfig } from '@storybook/core/csf-tools';
+import type { DocsOptions } from 'storybook/internal/types';
+import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
 
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-true.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
similarity index 94%
rename from code/lib/cli/src/automigrate/fixes/autodocs-true.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
index 246cb8e00a50..427a12111fb2 100644
--- a/code/lib/cli/src/automigrate/fixes/autodocs-true.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
@@ -1,5 +1,5 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfigRaw, PackageJson } from '@storybook/core/types';
+import type { StorybookConfigRaw, PackageJson } from 'storybook/internal/types';
 import { makePackageManager } from '../helpers/testing-helpers';
 import { autodocsTrue } from './autodocs-true';
 
diff --git a/code/lib/cli/src/automigrate/fixes/autodocs-true.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/autodocs-true.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
diff --git a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.test.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/fixes/builder-vite.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/builder-vite.test.ts
index 48b48b43de55..4c15622d2212 100644
--- a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.test.ts
@@ -1,5 +1,5 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfigRaw, PackageJson } from '@storybook/core/types';
+import type { StorybookConfigRaw, PackageJson } from 'storybook/internal/types';
 import { makePackageManager } from '../helpers/testing-helpers';
 import { builderVite } from './builder-vite';
 
diff --git a/code/lib/cli/src/automigrate/fixes/builder-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
similarity index 93%
rename from code/lib/cli/src/automigrate/fixes/builder-vite.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
index 5170bb6ff077..f6daefed62ec 100644
--- a/code/lib/cli/src/automigrate/fixes/builder-vite.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
@@ -1,12 +1,12 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 
-import { writeConfig } from '@storybook/core/csf-tools';
+import { writeConfig } from 'storybook/internal/csf-tools';
 
 import type { Fix } from '../types';
-import type { PackageJson } from '@storybook/core/types';
+import type { PackageJson } from 'storybook/internal/types';
 import { updateMainConfig } from '../helpers/mainConfigFile';
-import { getStorybookVersionSpecifier } from '../../helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 
 const logger = console;
 
diff --git a/code/lib/cli/src/automigrate/fixes/cra5.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/cra5.test.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/cra5.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/cra5.test.ts
index 5b7ad1efa9dd..5acfb4b59d2b 100644
--- a/code/lib/cli/src/automigrate/fixes/cra5.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/cra5.test.ts
@@ -1,6 +1,6 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfigRaw } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfigRaw } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { cra5 } from './cra5';
 
 const checkCra5 = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/cra5.ts b/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/cra5.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/cra5.ts
diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.test.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.test.ts
index 7677dccccb47..28dadb9a9cbf 100644
--- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.test.ts
@@ -2,11 +2,13 @@
 import { describe, it, expect, vi } from 'vitest';
 import { dedent } from 'ts-dedent';
 import * as fsExtra from 'fs-extra';
-import type { PackageJson } from '@storybook/core/common';
+import type { PackageJson } from 'storybook/internal/common';
 import { eslintPlugin } from './eslint-plugin';
 import { makePackageManager } from '../helpers/testing-helpers';
+import * as fs from 'node:fs';
 
 vi.mock('fs-extra', async () => import('../../../../../__mocks__/fs-extra'));
+vi.mock('fs');
 
 const checkEslint = async ({
   packageJson,
@@ -39,6 +41,7 @@ const checkEslint = async ({
       }
     `),
   });
+  vi.mocked(fs).existsSync.mockImplementation(() => true);
   return eslintPlugin.check({
     packageManager: makePackageManager(packageJson),
     mainConfig: {} as any,
diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
index de81e08008d8..4eb2d09cbcc9 100644
--- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
@@ -6,7 +6,7 @@ import {
   extractEslintInfo,
   findEslintFile,
   SUPPORTED_ESLINT_EXTENSIONS,
-} from '../helpers/eslintPlugin';
+} from 'storybook/internal/cli';
 
 import type { Fix } from '../types';
 
diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/index.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/index.ts
diff --git a/code/lib/cli/src/automigrate/fixes/initial-globals.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.test.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/initial-globals.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/initial-globals.test.ts
diff --git a/code/lib/cli/src/automigrate/fixes/initial-globals.ts b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
similarity index 92%
rename from code/lib/cli/src/automigrate/fixes/initial-globals.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
index 0e1e71867350..b629bccaa6b1 100644
--- a/code/lib/cli/src/automigrate/fixes/initial-globals.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
@@ -2,8 +2,8 @@ import { dedent } from 'ts-dedent';
 import chalk from 'chalk';
 import { readFile, writeFile } from 'fs-extra';
 import type { Expression } from '@babel/types';
-import type { ConfigFile } from '@storybook/core/csf-tools';
-import { loadConfig, formatConfig } from '@storybook/core/csf-tools';
+import type { ConfigFile } from 'storybook/internal/csf-tools';
+import { loadConfig, formatConfig } from 'storybook/internal/csf-tools';
 import type { Fix } from '../types';
 
 const MIGRATION =
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.test.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/mdx-1-to-3.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.test.ts
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.test.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.test.ts
index 45b504ea01e2..5c00a0ce70d2 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, vi, it } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { mdxgfm } from './mdx-gfm';
 
 vi.mock('globby', () => ({
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
index 6ddb801156ff..d65159dede4c 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
@@ -1,10 +1,10 @@
 import { dedent } from 'ts-dedent';
 import { join } from 'path';
 import slash from 'slash';
-import { commonGlobOptions } from '@storybook/core/common';
+import { commonGlobOptions } from 'storybook/internal/common';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
-import { getStorybookVersionSpecifier } from '../../helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 
 const logger = console;
 
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.test.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.test.ts
index 2bf27c5eba2e..03cfa2f941b5 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.test.ts
@@ -1,6 +1,6 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
 
-import type { StorybookConfigRaw, PackageJson } from '@storybook/core/types';
+import type { StorybookConfigRaw, PackageJson } from 'storybook/internal/types';
 import { ansiRegex } from '../helpers/cleanLog';
 import { makePackageManager } from '../helpers/testing-helpers';
 import type { BareMdxStoriesGlobRunOptions } from './mdx-to-csf';
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
similarity index 99%
rename from code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
index 230167d6d32c..dfffb66f21ef 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-to-csf.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
@@ -1,6 +1,6 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
-import type { StoriesEntry } from '@storybook/core/types';
+import type { StoriesEntry } from 'storybook/internal/types';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
 import { runCodemod } from '@storybook/codemod';
diff --git a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts
similarity index 91%
rename from code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts
index 52f0e42d8ff0..14b07e905dee 100644
--- a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.test.ts
@@ -9,9 +9,11 @@ vi.mock('globby', () => ({
   globby: vi.fn().mockResolvedValue(['.storybook/manager.ts', 'path/to/file.stories.tsx']),
 }));
 
-vi.mock('node:fs/promises', () => ({
-  __esModule: true,
-  readFile: vi.fn().mockResolvedValue(`
+vi.mock('node:fs/promises', async (importOriginal) => {
+  const original = (await importOriginal()) as typeof import('node:fs/promises');
+  return {
+    ...original,
+    readFile: vi.fn().mockResolvedValue(`
     // these are NOT installed, will be reported
     import { someFunction } from '@storybook/preview-api';
     import { anotherFunction } from '@storybook/manager-api';
@@ -19,7 +21,8 @@ vi.mock('node:fs/promises', () => ({
     // this IS installed, will not be reported
     import { yetAnotherFunction } from '@storybook/theming';
   `),
-}));
+  };
+});
 
 vi.mock('../../helpers', () => ({
   getStorybookVersionSpecifier: vi.fn().mockReturnValue('^8.1.10'),
@@ -111,12 +114,12 @@ describe('missingStorybookDependencies', () => {
       expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith(
         1,
         { installAsDevDependencies: true },
-        ['@storybook/preview-api@8.1.10', '@storybook/manager-api@8.1.10']
+        ['@storybook/preview-api@8.1.0', '@storybook/manager-api@8.1.0']
       );
       expect(mockPackageManager.addDependencies).toHaveBeenNthCalledWith(
         2,
         { installAsDevDependencies: true, skipInstall: true, packageJson: expect.anything() },
-        ['@storybook/preview-api@^8.1.10', '@storybook/manager-api@^8.1.10']
+        ['@storybook/preview-api@8.1.0', '@storybook/manager-api@8.1.0']
       );
     });
   });
diff --git a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
index cdc9bf0fe505..0907339f90d6 100644
--- a/code/lib/cli/src/automigrate/fixes/missing-storybook-dependencies.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
@@ -3,7 +3,7 @@ import { readFile } from 'node:fs/promises';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
-import { getStorybookVersionSpecifier } from '../../helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import type { InstallationMetadata, JsPackageManager } from '@storybook/core/common';
 
 const logger = console;
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.test.ts
similarity index 99%
rename from code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.test.ts
index f1f260230306..50e67cc402e6 100644
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.test.ts
@@ -1,9 +1,9 @@
 import { describe, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import * as findUp from 'find-up';
 import * as rendererHelpers from '../helpers/detectRenderer';
 import { newFrameworks } from './new-frameworks';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 vi.mock('find-up');
 vi.mock('../helpers/detectRenderer', async (importOriginal) => ({
diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/new-frameworks.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
index f8beb1cdd89d..f96ff7bd5e10 100644
--- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
@@ -1,12 +1,12 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import semver from 'semver';
-import { frameworkPackages, rendererPackages } from '@storybook/core/common';
+import { frameworkPackages, rendererPackages } from 'storybook/internal/common';
 
-import type { Preset } from '@storybook/core/types';
+import type { Preset } from 'storybook/internal/types';
 import invariant from 'tiny-invariant';
 import type { Fix } from '../types';
-import { getStorybookVersionSpecifier } from '../../helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import {
   getNextjsAddonOptions,
   detectBuilderInfo,
diff --git a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/prompt-remove-react.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
index 363917ff68c0..bbfbbf7ea4c3 100644
--- a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
@@ -1,8 +1,8 @@
 import { vi, describe, it, expect } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { glob } from 'glob';
 import { removeReactDependency } from './prompt-remove-react';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 const check = async ({
   packageManagerContent,
diff --git a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts b/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.ts
diff --git a/code/lib/cli/src/automigrate/fixes/react-docgen.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/react-docgen.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/react-docgen.test.ts
index 98f90c0ea3ef..be963b347d98 100644
--- a/code/lib/cli/src/automigrate/fixes/react-docgen.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { reactDocgen } from './react-docgen';
 
 const check = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/react-docgen.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/react-docgen.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts
diff --git a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
index 5c0fd4447d04..fc2e4087e72e 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-argtypes-regex.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
@@ -2,7 +2,7 @@ import type { Fix } from '../types';
 import * as fs from 'node:fs/promises';
 import * as babel from '@babel/core';
 import type { BabelFile, NodePath } from '@babel/core';
-import { babelParse } from '@storybook/core/csf-tools';
+import { babelParse } from 'storybook/internal/csf-tools';
 import { dedent } from 'ts-dedent';
 import chalk from 'chalk';
 
diff --git a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.test.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.test.ts
index fad5cf017903..20c94de4f2bb 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.test.ts
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from 'vitest';
 
 import path from 'path';
 import * as fsExtra from 'fs-extra';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { RemovedAPIs, removedGlobalClientAPIs as migration } from './remove-global-client-apis';
 
 vi.mock('fs-extra', async () => import('../../../../../__mocks__/fs-extra'));
diff --git a/code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/remove-global-client-apis.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts
diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.test.ts
similarity index 92%
rename from code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.test.ts
index 5613f5d0e06e..7f95a5f05494 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.test.ts
@@ -1,7 +1,7 @@
 import { expect, it } from 'vitest';
 
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { removeJestTestingLibrary } from './remove-jest-testing-library';
 import ansiRegex from 'ansi-regex';
 
diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
index ef8c610749d4..15ae8d08f01a 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import type { Fix } from '../types';
-import { getStorybookVersionSpecifier } from '../../helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import { runCodemod } from '@storybook/codemod';
 import prompts from 'prompts';
 
diff --git a/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
index dc26e16e34de..b19147feaec1 100644
--- a/code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
@@ -1,6 +1,6 @@
 import { dedent } from 'ts-dedent';
 
-import { writeConfig } from '@storybook/core/csf-tools';
+import { writeConfig } from 'storybook/internal/csf-tools';
 
 import type { Fix } from '../types';
 import { updateMainConfig } from '../helpers/mainConfigFile';
diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/sb-binary.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/sb-binary.test.ts
index 34df12d717b6..7341656b34db 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-binary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { sbBinary } from './sb-binary';
 
 const checkStorybookBinary = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/sb-binary.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
similarity index 94%
rename from code/lib/cli/src/automigrate/fixes/sb-binary.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
index 798655f1e28a..80fd840cc0af 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-binary.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
@@ -1,8 +1,8 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import type { Fix } from '../types';
-import { getStorybookVersionSpecifier } from '../../helpers';
-import type { PackageJsonWithDepsAndDevDeps } from '@storybook/core/common';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
+import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common';
 
 interface SbBinaryRunOptions {
   storybookVersion: string;
diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.test.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.test.ts
index 7ac9abae66ae..d9e8f5cfa3d6 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.test.ts
@@ -1,5 +1,5 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { getStorybookScripts, sbScripts } from './sb-scripts';
 
 const checkSbScripts = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/sb-scripts.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
index c9a941de206f..91892957b62c 100644
--- a/code/lib/cli/src/automigrate/fixes/sb-scripts.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
@@ -1,9 +1,9 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import semver from 'semver';
-import type { PackageJson } from '@storybook/core/types';
+import type { PackageJson } from 'storybook/internal/types';
 import type { Fix } from '../types';
-import type { PackageJsonWithDepsAndDevDeps } from '@storybook/core/common';
+import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common';
 
 interface SbScriptsRunOptions {
   storybookScripts: Record<string, { before: string; after: string }>;
diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.test.ts
similarity index 91%
rename from code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.test.ts
index 2f1b0e84e03a..860687d12eef 100644
--- a/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.test.ts
@@ -1,8 +1,8 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
 
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { storyshotsMigration } from './storyshots-migration';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 const check = async ({
   packageManager,
diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/storyshots-migration.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts
diff --git a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts
index cc3671f86c6d..1a5d4182d97e 100644
--- a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.test.ts
@@ -1,6 +1,6 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import * as docsUtils from '../../doctor/getIncompatibleStorybookPackages';
 
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
diff --git a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
index 5f9daef551b5..bfcba9f4eacc 100644
--- a/code/lib/cli/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
@@ -1,8 +1,8 @@
 import { dedent } from 'ts-dedent';
 import { cyan, yellow } from 'chalk';
 import { gt } from 'semver';
-import type { JsPackageManager } from '@storybook/core/common';
-import { isCorePackage } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
+import { isCorePackage } from 'storybook/internal/common';
 import type { Fix } from '../types';
 import { getIncompatibleStorybookPackages } from '../../doctor/getIncompatibleStorybookPackages';
 
diff --git a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/vite-config-file.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
index a842331eb731..4dfde34c6d0c 100644
--- a/code/lib/cli/src/automigrate/fixes/vite-config-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
@@ -2,8 +2,8 @@ import { dedent } from 'ts-dedent';
 import type { Fix } from '../types';
 import findUp from 'find-up';
 import { getFrameworkPackageName } from '../helpers/mainConfigFile';
-import { frameworkToRenderer } from '../../helpers';
-import { frameworkPackages } from '@storybook/core/common';
+import { frameworkToRenderer } from 'storybook/internal/cli';
+import { frameworkPackages } from 'storybook/internal/common';
 import path from 'path';
 
 interface ViteConfigFileRunOptions {
diff --git a/code/lib/cli/src/automigrate/fixes/vta.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vta.test.ts
similarity index 94%
rename from code/lib/cli/src/automigrate/fixes/vta.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/vta.test.ts
index ce8a3118b061..4a919db21686 100644
--- a/code/lib/cli/src/automigrate/fixes/vta.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vta.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
+import type { StorybookConfig } from 'storybook/internal/types';
 import { vta } from './vta';
 
 const check = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli-storybook/src/automigrate/fixes/vta.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/vta.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/vta.ts
diff --git a/code/lib/cli/src/automigrate/fixes/vue3.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vue3.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/vue3.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/vue3.test.ts
index cb8b2819969a..bdd7382beacb 100644
--- a/code/lib/cli/src/automigrate/fixes/vue3.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vue3.test.ts
@@ -1,6 +1,6 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { vue3 } from './vue3';
 
 const checkVue3 = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/vue3.ts b/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/vue3.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/vue3.ts
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
index e457ccfcc5ba..bd258e10112b 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
@@ -1,8 +1,8 @@
 import { vi, describe, it, expect } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { webpack5CompilerSetup } from './webpack5-compiler-setup';
-import { CoreWebpackCompilers } from '../../project_types';
+import { CoreWebpackCompilers } from 'storybook/internal/cli';
 
 const check = async ({
   packageManager,
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
index 3b18ded9fbb3..ec466fd5fa62 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
@@ -1,6 +1,6 @@
 import prompts from 'prompts';
-import type { SupportedFrameworks } from '@storybook/core/types';
-import { frameworkPackages } from '@storybook/core/common';
+import type { SupportedFrameworks } from 'storybook/internal/types';
+import { frameworkPackages } from 'storybook/internal/common';
 import type { Fix } from '../types';
 import {
   getAddonNames,
@@ -9,13 +9,13 @@ import {
   getFrameworkPackageName,
   updateMainConfig,
 } from '../helpers/mainConfigFile';
-import { frameworkToDefaultBuilder } from '../../helpers';
+import { frameworkToDefaultBuilder } from 'storybook/internal/cli';
 import {
   CoreBuilder,
   CoreWebpackCompilers,
   builderNameToCoreBuilder,
   compilerNameToCoreCompiler,
-} from '../../project_types';
+} from 'storybook/internal/cli';
 import { dedent } from 'ts-dedent';
 import chalk from 'chalk';
 import { add } from '../../add';
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/fixes/webpack5.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/webpack5.test.ts
index 0155d9cdf9e7..fe4343aaf6c7 100644
--- a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.test.ts
@@ -1,6 +1,6 @@
 import { describe, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfig } from '@storybook/core/types';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { StorybookConfig } from 'storybook/internal/types';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { webpack5 } from './webpack5';
 
 const checkWebpack5 = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/fixes/webpack5.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts
diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts
index d7c50e804da2..5199cc54ce3a 100644
--- a/code/lib/cli/src/automigrate/fixes/wrap-require-utils.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require-utils.ts
@@ -1,5 +1,5 @@
 import * as t from '@babel/types';
-import type { ConfigFile } from '@storybook/core/csf-tools';
+import type { ConfigFile } from 'storybook/internal/csf-tools';
 
 const defaultRequireWrapperName = 'getAbsolutePath';
 
diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.test.ts
similarity index 92%
rename from code/lib/cli/src/automigrate/fixes/wrap-require.test.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/wrap-require.test.ts
index d35afeaf0e97..b1be414b4c0f 100644
--- a/code/lib/cli/src/automigrate/fixes/wrap-require.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.test.ts
@@ -1,10 +1,10 @@
 import type { MockInstance } from 'vitest';
 import { describe, it, expect, vi } from 'vitest';
 import { wrapRequire } from './wrap-require';
-import * as detect from '../../detect';
+import * as detect from 'storybook/internal/cli';
 
-vi.mock('../../detect', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('../../detect')>()),
+vi.mock('storybook/internal/cli', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('storybook/internal/cli')>()),
   detectPnp: vi.fn(),
 }));
 
diff --git a/code/lib/cli/src/automigrate/fixes/wrap-require.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/fixes/wrap-require.ts
rename to code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
index 0334d4b82f33..30d62b89edd7 100644
--- a/code/lib/cli/src/automigrate/fixes/wrap-require.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
@@ -1,8 +1,8 @@
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
-import { readConfig } from '@storybook/core/csf-tools';
+import { readConfig } from 'storybook/internal/csf-tools';
 import type { Fix } from '../types';
-import { detectPnp } from '../../detect';
+import { detectPnp } from 'storybook/internal/cli';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import {
   getFieldsForRequireWrapper,
diff --git a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.test.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.test.ts
index 240e6c4d6386..ad0bbad0a8f9 100644
--- a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.test.ts
@@ -1,6 +1,6 @@
 import type { MockInstance } from 'vitest';
 import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
-import type { StorybookConfigRaw } from '@storybook/core/types';
+import type { StorybookConfigRaw } from 'storybook/internal/types';
 import { checkWebpack5Builder } from './checkWebpack5Builder';
 import { getBuilderPackageName } from './mainConfigFile';
 
diff --git a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
similarity index 94%
rename from code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
index fccb7df3dd4b..ad906629e73d 100644
--- a/code/lib/cli/src/automigrate/helpers/checkWebpack5Builder.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
-import type { StorybookConfigRaw } from '@storybook/core/types';
+import type { StorybookConfigRaw } from 'storybook/internal/types';
 import { getBuilderPackageName } from './mainConfigFile';
 
 const logger = console;
diff --git a/code/lib/cli/src/automigrate/helpers/cleanLog.ts b/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/helpers/cleanLog.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts
diff --git a/code/lib/cli/src/automigrate/helpers/detectRenderer.ts b/code/lib/cli-storybook/src/automigrate/helpers/detectRenderer.ts
similarity index 90%
rename from code/lib/cli/src/automigrate/helpers/detectRenderer.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/detectRenderer.ts
index 72b6e9b1bdc8..a1f4e7349bd9 100644
--- a/code/lib/cli/src/automigrate/helpers/detectRenderer.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/detectRenderer.ts
@@ -1,5 +1,5 @@
-import type { PackageJson } from '@storybook/core/types';
-import { rendererPackages } from '@storybook/core/common';
+import type { PackageJson } from 'storybook/internal/types';
+import { rendererPackages } from 'storybook/internal/common';
 import prompts from 'prompts';
 
 export const detectRenderer = async (packageJson: PackageJson) => {
diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
index 437c38086fc6..99e225011329 100644
--- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
@@ -1,7 +1,7 @@
 import { describe, expect, vi, it } from 'vitest';
 import { getMigrationSummary } from './getMigrationSummary';
 import { FixStatus } from '../types';
-import type { InstallationMetadata } from '@storybook/core/common';
+import type { InstallationMetadata } from 'storybook/internal/common';
 
 vi.mock('boxen', () => ({
   default: vi.fn((str, { title = '' }) => `${title}\n\n${str.replace(/\x1b\[[0-9;]*[mG]/g, '')}`),
@@ -26,7 +26,7 @@ describe('getMigrationSummary', () => {
   const installationMetadata: InstallationMetadata = {
     duplicatedDependencies: {
       '@storybook/instrumenter': ['6.0.0', '7.1.0'],
-      '@storybook/core/common': ['6.0.0', '7.1.0'],
+      'storybook/internal/common': ['6.0.0', '7.1.0'],
       '@storybook/addon-essentials': ['7.0.0', '7.1.0'],
     },
     dependencies: {},
diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
similarity index 97%
rename from code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
index 84a8e431cc83..1e5f119901e1 100644
--- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import boxen from 'boxen';
 import { dedent } from 'ts-dedent';
-import { type InstallationMetadata } from '@storybook/core/common';
+import { type InstallationMetadata } from 'storybook/internal/common';
 import type { FixSummary } from '../types';
 import { FixStatus } from '../types';
 
diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.test.ts
similarity index 100%
rename from code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.test.ts
diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
similarity index 93%
rename from code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
index 05ef4e8aad47..cc58c742a2f3 100644
--- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
@@ -5,16 +5,16 @@ import {
   frameworkPackages,
   builderPackages,
   extractProperFrameworkName,
-} from '@storybook/core/common';
-import type { StorybookConfigRaw, StorybookConfig } from '@storybook/core/types';
-import type { ConfigFile } from '@storybook/core/csf-tools';
-import { readConfig, writeConfig as writeConfigFile } from '@storybook/core/csf-tools';
+} from 'storybook/internal/common';
+import type { StorybookConfigRaw, StorybookConfig } from 'storybook/internal/types';
+import type { ConfigFile } from 'storybook/internal/csf-tools';
+import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools';
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import path from 'path';
-import type { JsPackageManager } from '@storybook/core/common';
-import { getCoercedStorybookVersion } from '@storybook/core/common';
-import { frameworkToRenderer } from '../../helpers';
+import type { JsPackageManager } from 'storybook/internal/common';
+import { getCoercedStorybookVersion } from 'storybook/internal/common';
+import { frameworkToRenderer } from 'storybook/internal/cli';
 
 const logger = console;
 
diff --git a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.test.ts
similarity index 99%
rename from code/lib/cli/src/automigrate/helpers/new-frameworks-utils.test.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.test.ts
index 090f4da1a8d2..421797768ea9 100644
--- a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.test.ts
@@ -4,7 +4,7 @@ import {
   detectBuilderInfo as _getBuilderInfo,
   getNextjsAddonOptions,
 } from './new-frameworks-utils';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 vi.mock('find-up');
 
diff --git a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
index d4d6c832eb66..379fe508b3a0 100644
--- a/code/lib/cli/src/automigrate/helpers/new-frameworks-utils.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
@@ -1,7 +1,7 @@
-import { frameworkPackages } from '@storybook/core/common';
-import type { Preset, StorybookConfigRaw } from '@storybook/core/types';
+import { frameworkPackages } from 'storybook/internal/common';
+import type { Preset, StorybookConfigRaw } from 'storybook/internal/types';
 import findUp from 'find-up';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 import { getBuilderPackageName, getFrameworkPackageName } from './mainConfigFile';
 
 const logger = console;
diff --git a/code/lib/cli/src/automigrate/helpers/testing-helpers.ts b/code/lib/cli-storybook/src/automigrate/helpers/testing-helpers.ts
similarity index 74%
rename from code/lib/cli/src/automigrate/helpers/testing-helpers.ts
rename to code/lib/cli-storybook/src/automigrate/helpers/testing-helpers.ts
index fd9745555de9..557a8ec721d9 100644
--- a/code/lib/cli/src/automigrate/helpers/testing-helpers.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/testing-helpers.ts
@@ -1,13 +1,13 @@
 import { vi } from 'vitest';
-import type { JsPackageManager, PackageJson } from '@storybook/core/common';
+import type { JsPackageManager, PackageJson } from 'storybook/internal/common';
 
 vi.mock('./mainConfigFile', async (importOriginal) => ({
   ...(await importOriginal<typeof import('./mainConfigFile')>()),
   getStorybookData: vi.fn(),
 }));
 
-vi.mock('@storybook/core/common', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('@storybook/core/common')>()),
+vi.mock('storybook/internal/common', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('storybook/internal/common')>()),
   loadMainConfig: vi.fn(),
 }));
 
diff --git a/code/lib/cli/src/automigrate/index.test.ts b/code/lib/cli-storybook/src/automigrate/index.test.ts
similarity index 96%
rename from code/lib/cli/src/automigrate/index.test.ts
rename to code/lib/cli-storybook/src/automigrate/index.test.ts
index 7e5c7dacfb94..5b2d831312b6 100644
--- a/code/lib/cli/src/automigrate/index.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/index.test.ts
@@ -37,8 +37,8 @@ const coreCommonMock = vi.hoisted(() => {
   };
 });
 
-vi.mock('@storybook/core/common', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('@storybook/core/common')>()),
+vi.mock('storybook/internal/common', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('storybook/internal/common')>()),
   loadMainConfig: coreCommonMock.loadMainConfig,
 }));
 
diff --git a/code/lib/cli/src/automigrate/index.ts b/code/lib/cli-storybook/src/automigrate/index.ts
similarity index 98%
rename from code/lib/cli/src/automigrate/index.ts
rename to code/lib/cli-storybook/src/automigrate/index.ts
index 809b14995350..29af9a9142d1 100644
--- a/code/lib/cli/src/automigrate/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/index.ts
@@ -11,7 +11,8 @@ import {
   type JsPackageManager,
   getCoercedStorybookVersion,
   getStorybookInfo,
-} from '@storybook/core/common';
+  temporaryFile,
+} from 'storybook/internal/common';
 
 import type {
   Fix,
@@ -40,8 +41,7 @@ const originalStdOutWrite = process.stdout.write.bind(process.stdout);
 const originalStdErrWrite = process.stderr.write.bind(process.stdout);
 
 const augmentLogsToFile = async () => {
-  const { temporaryFile } = await import('tempy');
-  TEMP_LOG_FILE_PATH = temporaryFile({ name: LOG_FILE_NAME });
+  TEMP_LOG_FILE_PATH = await temporaryFile({ name: LOG_FILE_NAME });
   const logStream = createWriteStream(TEMP_LOG_FILE_PATH);
 
   process.stdout.write = (d: string) => {
diff --git a/code/lib/cli/src/automigrate/types.ts b/code/lib/cli-storybook/src/automigrate/types.ts
similarity index 95%
rename from code/lib/cli/src/automigrate/types.ts
rename to code/lib/cli-storybook/src/automigrate/types.ts
index 8d08dd656b58..bf71f316a105 100644
--- a/code/lib/cli/src/automigrate/types.ts
+++ b/code/lib/cli-storybook/src/automigrate/types.ts
@@ -1,5 +1,5 @@
-import type { JsPackageManager, PackageManagerName } from '@storybook/core/common';
-import type { StorybookConfigRaw } from '@storybook/core/types';
+import type { JsPackageManager, PackageManagerName } from 'storybook/internal/common';
+import type { StorybookConfigRaw } from 'storybook/internal/types';
 
 export interface CheckOptions {
   packageManager: JsPackageManager;
diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli-storybook/src/bin/index.ts
similarity index 53%
rename from code/lib/cli/src/generate.ts
rename to code/lib/cli-storybook/src/bin/index.ts
index a73f1889a35c..ab7a7f2adc22 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli-storybook/src/bin/index.ts
@@ -5,28 +5,22 @@ import leven from 'leven';
 import { findPackageSync } from 'fd-package-json';
 import invariant from 'tiny-invariant';
 
-import { logger } from '@storybook/core/node-logger';
-import { addToGlobalContext, telemetry } from '@storybook/core/telemetry';
+import { logger } from 'storybook/internal/node-logger';
+import { addToGlobalContext, telemetry } from 'storybook/internal/telemetry';
 import {
-  parseList,
-  getEnvConfig,
   JsPackageManagerFactory,
   versions,
   removeAddon as remove,
-} from '@storybook/core/common';
-import { withTelemetry } from '@storybook/core/core-server';
+} from 'storybook/internal/common';
+import { withTelemetry } from 'storybook/internal/core-server';
 
-import type { CommandOptions } from './generators/types';
-import { initiate } from './initiate';
-import { add } from './add';
-import { migrate } from './migrate';
-import { upgrade, type UpgradeOptions } from './upgrade';
-import { sandbox } from './sandbox';
-import { link } from './link';
-import { doAutomigrate } from './automigrate';
-import { dev } from './dev';
-import { build } from './build';
-import { doctor } from './doctor';
+import { add } from '../add';
+import { migrate } from '../migrate';
+import { upgrade, type UpgradeOptions } from '../upgrade';
+import { sandbox } from '../sandbox';
+import { link } from '../link';
+import { doAutomigrate } from '../automigrate';
+import { doctor } from '../doctor';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
@@ -46,32 +40,6 @@ const command = (name: string) =>
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data');
 
-command('init')
-  .description('Initialize Storybook into your project.')
-  .option('-f --force', 'Force add Storybook')
-  .option('-s --skip-install', 'Skip installing deps')
-  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
-  .option('--use-pnp', 'Enable pnp mode for Yarn 2+')
-  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
-  .option('-t --type <type>', 'Add Storybook for a specific project type')
-  .option('-y --yes', 'Answer yes to all prompts')
-  .option('-b --builder <webpack5 | vite>', '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));
-  });
-
 command('add <addon>')
   .description('Add an addon to your Storybook')
   .option(
@@ -213,103 +181,6 @@ command('doctor')
     });
   });
 
-command('dev')
-  .option('-p, --port <number>', 'Port to run Storybook', (str) => parseInt(str, 10))
-  .option('-h, --host <string>', 'Host to run Storybook')
-  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
-  .option(
-    '--https',
-    'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
-  )
-  .option(
-    '--ssl-ca <ca>',
-    'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
-    parseList
-  )
-  .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
-  .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
-  .option('--smoke-test', 'Exit after successful start')
-  .option('--ci', "CI mode (skip interactive prompts, don't open browser)")
-  .option('--no-open', 'Do not open Storybook automatically in the browser')
-  .option('--loglevel <level>', 'Control level of logging during build')
-  .option('--quiet', 'Suppress verbose build output')
-  .option('--no-version-updates', 'Suppress update check', true)
-  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
-  .option(
-    '--webpack-stats-json [directory]',
-    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
-  )
-  .option('--stats-json [directory]', 'Write stats JSON to disk')
-  .option(
-    '--preview-url <string>',
-    'Disables the default storybook preview and lets your use your own'
-  )
-  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
-  .option('--docs', 'Build a documentation-only site using addon-docs')
-  .option('--exact-port', 'Exit early if the desired port is not available')
-  .option(
-    '--initial-path [path]',
-    'URL path to be appended when visiting Storybook for the first time'
-  )
-  .action(async (options) => {
-    logger.setLevel(program.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
-
-    // The key is the field created in `options` variable for
-    // each command line argument. Value is the env variable.
-    getEnvConfig(options, {
-      port: 'SBCONFIG_PORT',
-      host: 'SBCONFIG_HOSTNAME',
-      staticDir: 'SBCONFIG_STATIC_DIR',
-      configDir: 'SBCONFIG_CONFIG_DIR',
-      ci: 'CI',
-    });
-
-    if (parseInt(`${options.port}`, 10)) {
-      options.port = parseInt(`${options.port}`, 10);
-    }
-
-    await dev({ ...options, packageJson: pkg }).catch(() => process.exit(1));
-  });
-
-command('build')
-  .option('-o, --output-dir <dir-name>', 'Directory where to store built files')
-  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
-  .option('--quiet', 'Suppress verbose build output')
-  .option('--loglevel <level>', 'Control level of logging during build')
-  .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
-  .option(
-    '--webpack-stats-json [directory]',
-    'Write Webpack stats JSON to disk (synonym for `--stats-json`)'
-  )
-  .option('--stats-json [directory]', 'Write stats JSON to disk')
-  .option(
-    '--preview-url <string>',
-    'Disables the default storybook preview and lets your use your own'
-  )
-  .option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
-  .option('--docs', 'Build a documentation-only site using addon-docs')
-  .option('--test', 'Build stories optimized for testing purposes.')
-  .action(async (options) => {
-    process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-    logger.setLevel(program.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
-
-    // The key is the field created in `options` variable for
-    // each command line argument. Value is the env variable.
-    getEnvConfig(options, {
-      staticDir: 'SBCONFIG_STATIC_DIR',
-      outputDir: 'SBCONFIG_OUTPUT_DIR',
-      configDir: 'SBCONFIG_CONFIG_DIR',
-    });
-
-    await build({
-      ...options,
-      packageJson: pkg,
-      test: !!options.test || process.env.SB_TESTBUILD === 'true',
-    }).catch(() => process.exit(1));
-  });
-
 program.on('command:*', ([invalidCmd]) => {
   consoleLogger.error(
     ' Invalid command: %s.\n See --help for a list of available commands.',
diff --git a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
similarity index 95%
rename from code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts
rename to code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
index ecdf7e3f725a..82ac60d04217 100644
--- a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts
+++ b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
@@ -1,6 +1,6 @@
 import chalk from 'chalk';
-import { frameworkPackages, rendererPackages } from '@storybook/core/common';
-import type { InstallationMetadata } from '@storybook/core/common';
+import { frameworkPackages, rendererPackages } from 'storybook/internal/common';
+import type { InstallationMetadata } from 'storybook/internal/common';
 import { hasMultipleVersions } from './hasMultipleVersions';
 
 export const messageDivider = '\n\n';
diff --git a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
similarity index 97%
rename from code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts
rename to code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
index d6e0ffa4592b..a75041d3d747 100644
--- a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.test.ts
+++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
@@ -5,7 +5,7 @@ import {
   getIncompatiblePackagesSummary,
   checkPackageCompatibility,
 } from './getIncompatibleStorybookPackages';
-import type { JsPackageManager } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 vi.mock('chalk', () => {
   return {
@@ -61,7 +61,7 @@ describe('checkPackageCompatibility', () => {
       name: packageName,
       version: '1.0.0',
       dependencies: {
-        '@storybook/core/common': '8.0.0',
+        'storybook/internal/common': '8.0.0',
       },
     });
     const result = await checkPackageCompatibility(packageName, {
diff --git a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
similarity index 96%
rename from code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts
rename to code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
index 5d6e91cf3167..bafd5e6895e0 100644
--- a/code/lib/cli/src/doctor/getIncompatibleStorybookPackages.ts
+++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
@@ -1,8 +1,11 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
 import chalk from 'chalk';
 import semver from 'semver';
-import type { JsPackageManager } from '@storybook/core/common';
-import { JsPackageManagerFactory, versions as storybookCorePackages } from '@storybook/core/common';
+import type { JsPackageManager } from 'storybook/internal/common';
+import {
+  JsPackageManagerFactory,
+  versions as storybookCorePackages,
+} from 'storybook/internal/common';
 
 export type AnalysedPackage = {
   packageName: string;
diff --git a/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
similarity index 97%
rename from code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts
rename to code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
index c74267a5e646..4477bb517e55 100644
--- a/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts
+++ b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import semver from 'semver';
-import { frameworkPackages, versions as storybookCorePackages } from '@storybook/core/common';
-import type { InstallationMetadata } from '@storybook/core/common';
+import { frameworkPackages, versions as storybookCorePackages } from 'storybook/internal/common';
+import type { InstallationMetadata } from 'storybook/internal/common';
 
 function getPrimaryVersion(name: string | undefined, installationMetadata?: InstallationMetadata) {
   if (!name) {
diff --git a/code/lib/cli/src/doctor/hasMultipleVersions.ts b/code/lib/cli-storybook/src/doctor/hasMultipleVersions.ts
similarity index 100%
rename from code/lib/cli/src/doctor/hasMultipleVersions.ts
rename to code/lib/cli-storybook/src/doctor/hasMultipleVersions.ts
diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli-storybook/src/doctor/index.ts
similarity index 95%
rename from code/lib/cli/src/doctor/index.ts
rename to code/lib/cli-storybook/src/doctor/index.ts
index 0e2f0747aa7a..17db9ba2ed26 100644
--- a/code/lib/cli/src/doctor/index.ts
+++ b/code/lib/cli-storybook/src/doctor/index.ts
@@ -4,8 +4,8 @@ import { createWriteStream, move, remove } from 'fs-extra';
 import { dedent } from 'ts-dedent';
 import { join } from 'path';
 
-import { JsPackageManagerFactory } from '@storybook/core/common';
-import type { PackageManagerName } from '@storybook/core/common';
+import { JsPackageManagerFactory, temporaryFile } from 'storybook/internal/common';
+import type { PackageManagerName } from 'storybook/internal/common';
 import { getStorybookData } from '../automigrate/helpers/mainConfigFile';
 import { cleanLog } from '../automigrate/helpers/cleanLog';
 import { getMismatchingVersionsWarnings } from './getMismatchingVersionsWarning';
@@ -24,8 +24,7 @@ const originalStdOutWrite = process.stdout.write.bind(process.stdout);
 const originalStdErrWrite = process.stderr.write.bind(process.stdout);
 
 const augmentLogsToFile = async () => {
-  const { temporaryFile } = await import('tempy');
-  TEMP_LOG_FILE_PATH = temporaryFile({ name: LOG_FILE_NAME });
+  TEMP_LOG_FILE_PATH = await temporaryFile({ name: LOG_FILE_NAME });
   const logStream = createWriteStream(TEMP_LOG_FILE_PATH);
 
   process.stdout.write = (d: string) => {
diff --git a/code/lib/cli/src/doctor/utils.ts b/code/lib/cli-storybook/src/doctor/utils.ts
similarity index 100%
rename from code/lib/cli/src/doctor/utils.ts
rename to code/lib/cli-storybook/src/doctor/utils.ts
diff --git a/code/lib/cli-storybook/src/index.ts b/code/lib/cli-storybook/src/index.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/code/lib/cli/src/link.ts b/code/lib/cli-storybook/src/link.ts
similarity index 98%
rename from code/lib/cli/src/link.ts
rename to code/lib/cli-storybook/src/link.ts
index e691aed49c30..d9e112957300 100644
--- a/code/lib/cli/src/link.ts
+++ b/code/lib/cli-storybook/src/link.ts
@@ -1,7 +1,7 @@
 import fse from 'fs-extra';
 import path from 'path';
 import { sync as spawnSync, spawn as spawnAsync } from 'cross-spawn';
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 import chalk from 'chalk';
 
 type ExecOptions = Parameters<typeof spawnAsync>[2];
diff --git a/code/lib/cli/src/migrate.ts b/code/lib/cli-storybook/src/migrate.ts
similarity index 95%
rename from code/lib/cli/src/migrate.ts
rename to code/lib/cli-storybook/src/migrate.ts
index afcb851dd228..36b72ed86b90 100644
--- a/code/lib/cli/src/migrate.ts
+++ b/code/lib/cli-storybook/src/migrate.ts
@@ -3,11 +3,11 @@ import {
   JsPackageManagerFactory,
   getCoercedStorybookVersion,
   getStorybookInfo,
-} from '@storybook/core/common';
+} from 'storybook/internal/common';
 
 import { runFixes } from './automigrate';
 import { mdxToCSF } from './automigrate/fixes/mdx-to-csf';
-import { getStorybookVersionSpecifier } from './helpers';
+import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 
 const logger = console;
 
diff --git a/code/lib/cli/src/postinstallAddon.ts b/code/lib/cli-storybook/src/postinstallAddon.ts
similarity index 100%
rename from code/lib/cli/src/postinstallAddon.ts
rename to code/lib/cli-storybook/src/postinstallAddon.ts
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
similarity index 99%
rename from code/lib/cli/src/sandbox-templates.ts
rename to code/lib/cli-storybook/src/sandbox-templates.ts
index e7a55f4ba360..532b20efb936 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -1,5 +1,5 @@
-import type { StoriesEntry, StorybookConfigRaw } from '@storybook/core/types';
-import type { ConfigFile } from '@storybook/core/csf-tools';
+import type { StoriesEntry, StorybookConfigRaw } from 'storybook/internal/types';
+import type { ConfigFile } from 'storybook/internal/csf-tools';
 
 export type SkippableTask =
   | 'smoke-test'
diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli-storybook/src/sandbox.ts
similarity index 97%
rename from code/lib/cli/src/sandbox.ts
rename to code/lib/cli-storybook/src/sandbox.ts
index 25f712ada798..72a6f9edf333 100644
--- a/code/lib/cli/src/sandbox.ts
+++ b/code/lib/cli-storybook/src/sandbox.ts
@@ -10,10 +10,10 @@ import invariant from 'tiny-invariant';
 import { lt, prerelease } from 'semver';
 import type { Template, TemplateKey } from './sandbox-templates';
 import { allTemplates as TEMPLATES } from './sandbox-templates';
-import type { PackageManagerName } from '@storybook/core/common';
-import { JsPackageManagerFactory } from '@storybook/core/common';
-import { versions } from '@storybook/core/common';
-import { doInitiate } from './initiate';
+import type { PackageManagerName } from 'storybook/internal/common';
+import { JsPackageManagerFactory } from 'storybook/internal/common';
+import { versions } from 'storybook/internal/common';
+import { initiate } from 'create-storybook';
 
 const logger = console;
 
@@ -222,7 +222,7 @@ export const sandbox = async ({
         const before = process.cwd();
         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({
+        await initiate({
           dev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANBOX !== 'true',
           ...options,
         });
diff --git a/code/lib/cli/src/typings.d.ts b/code/lib/cli-storybook/src/typings.d.ts
similarity index 100%
rename from code/lib/cli/src/typings.d.ts
rename to code/lib/cli-storybook/src/typings.d.ts
diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli-storybook/src/upgrade.test.ts
similarity index 93%
rename from code/lib/cli/src/upgrade.test.ts
rename to code/lib/cli-storybook/src/upgrade.test.ts
index 7c64dc748393..7bf478d184fd 100644
--- a/code/lib/cli/src/upgrade.test.ts
+++ b/code/lib/cli-storybook/src/upgrade.test.ts
@@ -1,13 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
-import * as sbcc from '@storybook/core/common';
+import * as sbcc from 'storybook/internal/common';
 import { UpgradeStorybookToLowerVersionError } from 'storybook/internal/server-errors';
 import { doUpgrade, getStorybookVersion } from './upgrade';
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 
 const findInstallationsMock = vi.fn<string[], Promise<sbcc.InstallationMetadata | undefined>>();
 
-vi.mock('@storybook/core/telemetry');
-vi.mock('@storybook/core/common', async (importOriginal) => {
+vi.mock('storybook/internal/telemetry');
+vi.mock('storybook/internal/common', async (importOriginal) => {
   const originalModule = (await importOriginal()) as typeof sbcc;
   return {
     ...originalModule,
diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts
similarity index 96%
rename from code/lib/cli/src/upgrade.ts
rename to code/lib/cli-storybook/src/upgrade.ts
index 30866dac64ba..8b1bc007add2 100644
--- a/code/lib/cli/src/upgrade.ts
+++ b/code/lib/cli-storybook/src/upgrade.ts
@@ -1,7 +1,7 @@
 import { sync as spawnSync } from 'cross-spawn';
 import { telemetry } from 'storybook/internal/telemetry';
-import semver, { eq, lt, prerelease } from 'semver';
-import { logger } from '@storybook/core/node-logger';
+import semver, { eq, lt, prerelease, clean } from 'semver';
+import { logger } from 'storybook/internal/node-logger';
 import { withTelemetry } from 'storybook/internal/core-server';
 import {
   UpgradeStorybookInWrongWorkingDirectory,
@@ -13,17 +13,17 @@ import {
 import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import boxen from 'boxen';
-import type { JsPackageManager, PackageManagerName } from '@storybook/core/common';
+import type { JsPackageManager, PackageManagerName } from 'storybook/internal/common';
 import {
   isCorePackage,
   versions,
   getStorybookInfo,
   loadMainConfig,
   JsPackageManagerFactory,
-} from '@storybook/core/common';
+} from 'storybook/internal/common';
 import { automigrate } from './automigrate/index';
 import { autoblock } from './autoblock/index';
-import { hasStorybookDependencies } from './helpers';
+import { hasStorybookDependencies } from 'storybook/internal/cli';
 
 type Package = {
   package: string;
@@ -34,7 +34,7 @@ const versionRegex = /(@storybook\/[^@]+)@(\S+)/;
 export const getStorybookVersion = (line: string) => {
   if (line.startsWith('npm ')) return null;
   const match = versionRegex.exec(line);
-  if (!match || !semver.clean(match[2])) return null;
+  if (!match || !clean(match[2])) return null;
   return {
     package: match[1],
     version: match[2],
diff --git a/code/lib/cli/src/warn.test.ts b/code/lib/cli-storybook/src/warn.test.ts
similarity index 92%
rename from code/lib/cli/src/warn.test.ts
rename to code/lib/cli-storybook/src/warn.test.ts
index 365847b73d42..ceda21a10089 100644
--- a/code/lib/cli/src/warn.test.ts
+++ b/code/lib/cli-storybook/src/warn.test.ts
@@ -1,8 +1,8 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 import { warn } from './warn';
 
-vi.mock('@storybook/core/node-logger');
+vi.mock('storybook/internal/node-logger');
 
 const mocks = vi.hoisted(() => {
   return {
diff --git a/code/lib/cli/src/warn.ts b/code/lib/cli-storybook/src/warn.ts
similarity index 93%
rename from code/lib/cli/src/warn.ts
rename to code/lib/cli-storybook/src/warn.ts
index 4b75a924814c..ef995d87ef76 100644
--- a/code/lib/cli/src/warn.ts
+++ b/code/lib/cli-storybook/src/warn.ts
@@ -1,4 +1,4 @@
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 
 interface Options {
   hasTSDependency: boolean;
diff --git a/code/lib/cli/src/window.d.ts b/code/lib/cli-storybook/src/window.d.ts
similarity index 73%
rename from code/lib/cli/src/window.d.ts
rename to code/lib/cli-storybook/src/window.d.ts
index 35dfceecddb1..91fe506c5490 100644
--- a/code/lib/cli/src/window.d.ts
+++ b/code/lib/cli-storybook/src/window.d.ts
@@ -1,4 +1,4 @@
-import type { Renderer } from '@storybook/core/types';
+import type { Renderer } from 'storybook/internal/types';
 import type { StoryStore } from 'storybook/internal/preview-api';
 
 declare global {
diff --git a/code/lib/cli/test/default/cli.test.cjs b/code/lib/cli-storybook/test/default/cli.test.cjs
similarity index 100%
rename from code/lib/cli/test/default/cli.test.cjs
rename to code/lib/cli-storybook/test/default/cli.test.cjs
diff --git a/code/lib/cli/test/helpers.cjs b/code/lib/cli-storybook/test/helpers.cjs
similarity index 100%
rename from code/lib/cli/test/helpers.cjs
rename to code/lib/cli-storybook/test/helpers.cjs
diff --git a/code/lib/cli-storybook/tsconfig.json b/code/lib/cli-storybook/tsconfig.json
new file mode 100644
index 000000000000..73a65ef2ef6e
--- /dev/null
+++ b/code/lib/cli-storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src/**/*"]
+}
diff --git a/code/lib/cli/bin/index.cjs b/code/lib/cli/bin/index.cjs
index f7164c48f330..0aecdd1e9b9b 100755
--- a/code/lib/cli/bin/index.cjs
+++ b/code/lib/cli/bin/index.cjs
@@ -23,4 +23,4 @@ process.once('uncaughtException', (error) => {
   throw error;
 });
 
-require('../dist/generate.cjs');
+require('../dist/proxy.cjs');
diff --git a/code/lib/cli/core/cli/bin/index.cjs b/code/lib/cli/core/cli/bin/index.cjs
new file mode 100644
index 000000000000..28b8be5e01cc
--- /dev/null
+++ b/code/lib/cli/core/cli/bin/index.cjs
@@ -0,0 +1 @@
+module.exports = require('@storybook/core/cli/bin');
diff --git a/code/lib/cli/core/cli/bin/index.d.ts b/code/lib/cli/core/cli/bin/index.d.ts
new file mode 100644
index 000000000000..c846fa780147
--- /dev/null
+++ b/code/lib/cli/core/cli/bin/index.d.ts
@@ -0,0 +1,2 @@
+export * from '@storybook/core/cli/bin';
+export type * from '@storybook/core/cli/bin';
diff --git a/code/lib/cli/core/cli/bin/index.js b/code/lib/cli/core/cli/bin/index.js
new file mode 100644
index 000000000000..32a19f877c90
--- /dev/null
+++ b/code/lib/cli/core/cli/bin/index.js
@@ -0,0 +1 @@
+export * from '@storybook/core/cli/bin';
diff --git a/code/lib/cli/core/cli/index.cjs b/code/lib/cli/core/cli/index.cjs
new file mode 100644
index 000000000000..023342dde38e
--- /dev/null
+++ b/code/lib/cli/core/cli/index.cjs
@@ -0,0 +1 @@
+module.exports = require('@storybook/core/cli');
diff --git a/code/lib/cli/core/cli/index.d.ts b/code/lib/cli/core/cli/index.d.ts
new file mode 100644
index 000000000000..2ce4e03dd15f
--- /dev/null
+++ b/code/lib/cli/core/cli/index.d.ts
@@ -0,0 +1,2 @@
+export * from '@storybook/core/cli';
+export type * from '@storybook/core/cli';
diff --git a/code/lib/cli/core/cli/index.js b/code/lib/cli/core/cli/index.js
new file mode 100644
index 000000000000..59fef763e102
--- /dev/null
+++ b/code/lib/cli/core/cli/index.js
@@ -0,0 +1 @@
+export * from '@storybook/core/cli';
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 43aadafc6dae..da240f96a3f8 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -168,6 +168,16 @@
       "import": "./core/preview/globals.js",
       "require": "./core/preview/globals.cjs"
     },
+    "./internal/cli": {
+      "types": "./core/cli/index.d.ts",
+      "import": "./core/cli/index.js",
+      "require": "./core/cli/index.cjs"
+    },
+    "./internal/cli/bin": {
+      "types": "./core/cli/bin/index.d.ts",
+      "import": "./core/cli/bin/index.js",
+      "require": "./core/cli/bin/index.cjs"
+    },
     "./internal/manager/globals": {
       "types": "./core/manager/globals.d.ts",
       "import": "./core/manager/globals.js",
@@ -188,6 +198,12 @@
       "internal/channels": [
         "./core/channels/index.d.ts"
       ],
+      "internal/cli": [
+        "./core/cli/index.d.ts"
+      ],
+      "internal/cli/bin": [
+        "./core/cli/bin/index.d.ts"
+      ],
       "internal/client-logger": [
         "./core/client-logger/index.d.ts"
       ],
@@ -293,45 +309,9 @@
     "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.24.4",
-    "@babel/types": "^7.24.0",
-    "@storybook/codemod": "workspace:*",
-    "@storybook/core": "workspace:*",
-    "@types/semver": "^7.3.4",
-    "@yarnpkg/fslib": "2.10.3",
-    "@yarnpkg/libzip": "2.3.0",
-    "chalk": "^4.1.0",
-    "commander": "^6.2.1",
-    "cross-spawn": "^7.0.3",
-    "detect-indent": "^6.1.0",
-    "envinfo": "^7.7.3",
-    "execa": "^5.0.0",
-    "fd-package-json": "^1.2.0",
-    "find-up": "^5.0.0",
-    "fs-extra": "^11.1.0",
-    "giget": "^1.0.0",
-    "globby": "^14.0.1",
-    "jscodeshift": "^0.15.1",
-    "leven": "^3.1.0",
-    "ora": "^5.4.1",
-    "prettier": "^3.1.1",
-    "prompts": "^2.4.0",
-    "semver": "^7.3.7",
-    "strip-json-comments": "^3.0.1",
-    "tempy": "^3.1.0",
-    "tiny-invariant": "^1.3.1",
-    "ts-dedent": "^2.0.0"
+    "@storybook/core": "workspace:*"
   },
   "devDependencies": {
-    "@ndelangen/get-tarball": "^3.0.7",
-    "@types/cross-spawn": "^6.0.2",
-    "@types/prompts": "^2.0.9",
-    "@types/util-deprecate": "^1.0.0",
-    "boxen": "^7.1.1",
-    "get-npm-tarball-url": "^2.0.3",
-    "slash": "^5.0.0",
-    "strip-ansi": "^7.1.0",
-    "strip-json-comments": "^3.1.1",
     "typescript": "^5.3.2"
   },
   "publishConfig": {
@@ -340,7 +320,7 @@
   "bundler": {
     "pre": "./scripts/update-core-portal.ts",
     "entries": [
-      "./src/generate.ts",
+      "./src/proxy.ts",
       "./src/core-path.ts",
       "./src/index.ts"
     ],
diff --git a/code/lib/cli/src/proxy.ts b/code/lib/cli/src/proxy.ts
new file mode 100644
index 000000000000..eee009524c59
--- /dev/null
+++ b/code/lib/cli/src/proxy.ts
@@ -0,0 +1,21 @@
+import { spawn } from 'child_process';
+import { versions } from '@storybook/core/common';
+
+const args = process.argv.slice(2);
+
+if (['dev', 'build'].includes(args[0])) {
+  require('@storybook/core/cli/bin');
+} else {
+  const proxiedArgs =
+    args[0] === 'init'
+      ? [`create-storybook@${versions.storybook}`, ...args.slice(1)]
+      : [`@storybook/cli@${versions.storybook}`, ...args];
+  const command = ['npx', '--yes', ...proxiedArgs];
+  const child = spawn(command[0], command.slice(1), { stdio: 'inherit' });
+  child.on('exit', (code) => {
+    if (code != null) {
+      process.exit(code);
+    }
+    process.exit(1);
+  });
+}
diff --git a/code/lib/create-storybook/.eslintrc.cjs b/code/lib/create-storybook/.eslintrc.cjs
new file mode 100644
index 000000000000..a2dae9fc88d3
--- /dev/null
+++ b/code/lib/create-storybook/.eslintrc.cjs
@@ -0,0 +1,36 @@
+const ignore = 0;
+
+module.exports = {
+  overrides: [
+    {
+      files: 'templates/**/*',
+      env: {
+        browser: true,
+      },
+      rules: {
+        'react/no-this-in-sfc': ignore,
+        'import/no-unresolved': ignore,
+        'react/react-in-jsx-scope': ignore,
+        'import/no-extraneous-dependencies': ignore,
+        'global-require': ignore,
+        'no-redeclare': ignore,
+        'react/prop-types': ignore,
+      },
+    },
+    {
+      files: 'rendererAssets/**/*',
+      env: {
+        browser: true,
+      },
+      rules: {
+        'jsx-a11y/anchor-is-valid': ignore,
+        'import/no-unresolved': ignore,
+        'react/prop-types': ignore,
+        'react/react-in-jsx-scope': ignore,
+        'import/no-extraneous-dependencies': ignore,
+        'import/extensions': ignore,
+        'import/named': ignore,
+      },
+    },
+  ],
+};
diff --git a/code/lib/create-storybook/README.md b/code/lib/create-storybook/README.md
new file mode 100644
index 000000000000..a84cddc67be2
--- /dev/null
+++ b/code/lib/create-storybook/README.md
@@ -0,0 +1 @@
+## Initialize Storybook into your project
diff --git a/code/lib/create-storybook/bin/index.cjs b/code/lib/create-storybook/bin/index.cjs
new file mode 100755
index 000000000000..ce13973e4eb9
--- /dev/null
+++ b/code/lib/create-storybook/bin/index.cjs
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+const majorNodeVersion = parseInt(process.versions.node, 10);
+if (majorNodeVersion < 18) {
+  console.error('To run Storybook you need to have Node.js 18 or higher');
+  process.exit(1);
+}
+
+// The Storybook CLI has a catch block for all of its commands, but if an error
+// occurs before the command even runs, for instance, if an import fails, then
+// such error will fall under the uncaughtException handler.
+// This is the earliest moment we can catch such errors.
+process.once('uncaughtException', (error) => {
+  if (error.message.includes('string-width')) {
+    console.error(
+      [
+        '🔴 Error: It looks like you are having a known issue with package hoisting.',
+        'Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092\n\n',
+      ].join('\n')
+    );
+  }
+
+  throw error;
+});
+
+require('../dist/bin/index.cjs');
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
new file mode 100644
index 000000000000..fc7b4dfec97b
--- /dev/null
+++ b/code/lib/create-storybook/package.json
@@ -0,0 +1,90 @@
+{
+  "name": "create-storybook",
+  "version": "8.3.0-alpha.3",
+  "description": "Initialize Storybook into your project",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/lib/cli"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "author": "Storybook Team",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./bin/index.cjs": {
+      "node": "./bin/index.cjs",
+      "require": "./bin/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "bin": "./bin/index.cjs",
+  "files": [
+    "bin/**/*",
+    "dist/**/*",
+    "rendererAssets/**/*",
+    "templates/**/*",
+    "README.md",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "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/bundle.ts"
+  },
+  "dependencies": {
+    "@types/semver": "^7.3.4",
+    "chalk": "^4.1.0",
+    "commander": "^6.2.1",
+    "execa": "^5.0.0",
+    "fd-package-json": "^1.2.0",
+    "find-up": "^5.0.0",
+    "fs-extra": "^11.1.0",
+    "ora": "^5.4.1",
+    "prettier": "^3.1.1",
+    "prompts": "^2.4.0",
+    "semver": "^7.3.7",
+    "storybook": "workspace:*",
+    "tiny-invariant": "^1.3.1",
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.0.9",
+    "@types/util-deprecate": "^1.0.0",
+    "boxen": "^7.1.1",
+    "typescript": "^5.3.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/bin/index.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}
diff --git a/code/lib/create-storybook/project.json b/code/lib/create-storybook/project.json
new file mode 100644
index 000000000000..66129bbf4250
--- /dev/null
+++ b/code/lib/create-storybook/project.json
@@ -0,0 +1,8 @@
+{
+  "name": "create-storybook",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "build": {}
+  }
+}
diff --git a/code/lib/cli/rendererAssets/.eslintrc.json b/code/lib/create-storybook/rendererAssets/.eslintrc.json
similarity index 100%
rename from code/lib/cli/rendererAssets/.eslintrc.json
rename to code/lib/create-storybook/rendererAssets/.eslintrc.json
diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/create-storybook/rendererAssets/common/Configure.mdx
similarity index 100%
rename from code/lib/cli/rendererAssets/common/Configure.mdx
rename to code/lib/create-storybook/rendererAssets/common/Configure.mdx
diff --git a/code/lib/cli/rendererAssets/common/assets/accessibility.png b/code/lib/create-storybook/rendererAssets/common/assets/accessibility.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/accessibility.png
rename to code/lib/create-storybook/rendererAssets/common/assets/accessibility.png
diff --git a/code/lib/cli/rendererAssets/common/assets/accessibility.svg b/code/lib/create-storybook/rendererAssets/common/assets/accessibility.svg
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/accessibility.svg
rename to code/lib/create-storybook/rendererAssets/common/assets/accessibility.svg
diff --git a/code/lib/cli/rendererAssets/common/assets/addon-library.png b/code/lib/create-storybook/rendererAssets/common/assets/addon-library.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/addon-library.png
rename to code/lib/create-storybook/rendererAssets/common/assets/addon-library.png
diff --git a/code/lib/cli/rendererAssets/common/assets/assets.png b/code/lib/create-storybook/rendererAssets/common/assets/assets.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/assets.png
rename to code/lib/create-storybook/rendererAssets/common/assets/assets.png
diff --git a/code/lib/cli/rendererAssets/common/assets/avif-test-image.avif b/code/lib/create-storybook/rendererAssets/common/assets/avif-test-image.avif
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/avif-test-image.avif
rename to code/lib/create-storybook/rendererAssets/common/assets/avif-test-image.avif
diff --git a/code/lib/cli/rendererAssets/common/assets/context.png b/code/lib/create-storybook/rendererAssets/common/assets/context.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/context.png
rename to code/lib/create-storybook/rendererAssets/common/assets/context.png
diff --git a/code/lib/cli/rendererAssets/common/assets/discord.svg b/code/lib/create-storybook/rendererAssets/common/assets/discord.svg
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/discord.svg
rename to code/lib/create-storybook/rendererAssets/common/assets/discord.svg
diff --git a/code/lib/cli/rendererAssets/common/assets/docs.png b/code/lib/create-storybook/rendererAssets/common/assets/docs.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/docs.png
rename to code/lib/create-storybook/rendererAssets/common/assets/docs.png
diff --git a/code/lib/cli/rendererAssets/common/assets/figma-plugin.png b/code/lib/create-storybook/rendererAssets/common/assets/figma-plugin.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/figma-plugin.png
rename to code/lib/create-storybook/rendererAssets/common/assets/figma-plugin.png
diff --git a/code/lib/cli/rendererAssets/common/assets/github.svg b/code/lib/create-storybook/rendererAssets/common/assets/github.svg
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/github.svg
rename to code/lib/create-storybook/rendererAssets/common/assets/github.svg
diff --git a/code/lib/cli/rendererAssets/common/assets/share.png b/code/lib/create-storybook/rendererAssets/common/assets/share.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/share.png
rename to code/lib/create-storybook/rendererAssets/common/assets/share.png
diff --git a/code/lib/cli/rendererAssets/common/assets/styling.png b/code/lib/create-storybook/rendererAssets/common/assets/styling.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/styling.png
rename to code/lib/create-storybook/rendererAssets/common/assets/styling.png
diff --git a/code/lib/cli/rendererAssets/common/assets/testing.png b/code/lib/create-storybook/rendererAssets/common/assets/testing.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/testing.png
rename to code/lib/create-storybook/rendererAssets/common/assets/testing.png
diff --git a/code/lib/cli/rendererAssets/common/assets/theming.png b/code/lib/create-storybook/rendererAssets/common/assets/theming.png
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/theming.png
rename to code/lib/create-storybook/rendererAssets/common/assets/theming.png
diff --git a/code/lib/cli/rendererAssets/common/assets/tutorials.svg b/code/lib/create-storybook/rendererAssets/common/assets/tutorials.svg
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/tutorials.svg
rename to code/lib/create-storybook/rendererAssets/common/assets/tutorials.svg
diff --git a/code/lib/cli/rendererAssets/common/assets/youtube.svg b/code/lib/create-storybook/rendererAssets/common/assets/youtube.svg
similarity index 100%
rename from code/lib/cli/rendererAssets/common/assets/youtube.svg
rename to code/lib/create-storybook/rendererAssets/common/assets/youtube.svg
diff --git a/code/lib/cli/rendererAssets/common/button.css b/code/lib/create-storybook/rendererAssets/common/button.css
similarity index 100%
rename from code/lib/cli/rendererAssets/common/button.css
rename to code/lib/create-storybook/rendererAssets/common/button.css
diff --git a/code/lib/cli/rendererAssets/common/header.css b/code/lib/create-storybook/rendererAssets/common/header.css
similarity index 100%
rename from code/lib/cli/rendererAssets/common/header.css
rename to code/lib/create-storybook/rendererAssets/common/header.css
diff --git a/code/lib/cli/rendererAssets/common/page.css b/code/lib/create-storybook/rendererAssets/common/page.css
similarity index 100%
rename from code/lib/cli/rendererAssets/common/page.css
rename to code/lib/create-storybook/rendererAssets/common/page.css
diff --git a/code/lib/create-storybook/src/bin/index.ts b/code/lib/create-storybook/src/bin/index.ts
new file mode 100644
index 000000000000..a3e21bfc4d60
--- /dev/null
+++ b/code/lib/create-storybook/src/bin/index.ts
@@ -0,0 +1,49 @@
+import program from 'commander';
+import { findPackageSync } from 'fd-package-json';
+import invariant from 'tiny-invariant';
+import { addToGlobalContext } from 'storybook/internal/telemetry';
+import { versions } from 'storybook/internal/common';
+
+import type { CommandOptions } from '../generators/types';
+import { initiate } from '../initiate';
+
+addToGlobalContext('cliVersion', versions.storybook);
+
+const pkg = findPackageSync(__dirname);
+invariant(pkg, 'Failed to find the closest package.json file.');
+
+program
+  .name('Initialize Storybook into your project.')
+  .option(
+    '--disable-telemetry',
+    'Disable sending telemetry data',
+    // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
+    process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false'
+  )
+  .option('--debug', 'Get more logs in debug mode', false)
+  .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data')
+  .option('-f --force', 'Force add Storybook')
+  .option('-s --skip-install', 'Skip installing deps')
+  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
+  .option('--use-pnp', 'Enable pnp mode for Yarn 2+')
+  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-t --type <type>', 'Add Storybook for a specific project type')
+  .option('-y --yes', 'Answer yes to all prompts')
+  .option('-b --builder <webpack5 | vite>', '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));
+  })
+  .version(String(pkg.version))
+  .parse(process.argv);
diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/create-storybook/src/generators/ANGULAR/index.ts
similarity index 91%
rename from code/lib/cli/src/generators/ANGULAR/index.ts
rename to code/lib/create-storybook/src/generators/ANGULAR/index.ts
index 3a18fd192bf4..e7a6ec09e42a 100644
--- a/code/lib/cli/src/generators/ANGULAR/index.ts
+++ b/code/lib/create-storybook/src/generators/ANGULAR/index.ts
@@ -1,11 +1,10 @@
 import { join } from 'path';
-import { commandLog } from '@storybook/core/common';
-import { baseGenerator } from '../baseGenerator';
+import { commandLog } from 'storybook/internal/common';
+import { baseGenerator, getCliDir } from '../baseGenerator';
 import type { Generator } from '../types';
-import { CoreBuilder } from '../../project_types';
-import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from './helpers';
-import { getCliDir } from '../../dirs';
-import { copyTemplate } from '../../helpers';
+import { CoreBuilder } from 'storybook/internal/cli';
+import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from 'storybook/internal/cli';
+import { copyTemplate } from 'storybook/internal/cli';
 
 const generator: Generator<{ projectName: string }> = async (
   packageManager,
diff --git a/code/lib/cli/src/generators/EMBER/index.ts b/code/lib/create-storybook/src/generators/EMBER/index.ts
similarity index 87%
rename from code/lib/cli/src/generators/EMBER/index.ts
rename to code/lib/create-storybook/src/generators/EMBER/index.ts
index 6b148964773d..cd12ca61a4d6 100644
--- a/code/lib/cli/src/generators/EMBER/index.ts
+++ b/code/lib/create-storybook/src/generators/EMBER/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/HTML/index.ts b/code/lib/create-storybook/src/generators/HTML/index.ts
similarity index 87%
rename from code/lib/cli/src/generators/HTML/index.ts
rename to code/lib/create-storybook/src/generators/HTML/index.ts
index 87ee978b0865..541525e7b384 100755
--- a/code/lib/cli/src/generators/HTML/index.ts
+++ b/code/lib/create-storybook/src/generators/HTML/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/NEXTJS/index.ts b/code/lib/create-storybook/src/generators/NEXTJS/index.ts
similarity index 92%
rename from code/lib/cli/src/generators/NEXTJS/index.ts
rename to code/lib/create-storybook/src/generators/NEXTJS/index.ts
index e29cb4f6a751..fbbbe7b58728 100644
--- a/code/lib/cli/src/generators/NEXTJS/index.ts
+++ b/code/lib/create-storybook/src/generators/NEXTJS/index.ts
@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { existsSync } from 'fs';
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/PREACT/index.ts b/code/lib/create-storybook/src/generators/PREACT/index.ts
similarity index 87%
rename from code/lib/cli/src/generators/PREACT/index.ts
rename to code/lib/create-storybook/src/generators/PREACT/index.ts
index 74549fc5e26b..b75293bf3c3d 100644
--- a/code/lib/cli/src/generators/PREACT/index.ts
+++ b/code/lib/create-storybook/src/generators/PREACT/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/QWIK/index.ts b/code/lib/create-storybook/src/generators/QWIK/index.ts
similarity index 100%
rename from code/lib/cli/src/generators/QWIK/index.ts
rename to code/lib/create-storybook/src/generators/QWIK/index.ts
diff --git a/code/lib/cli/src/generators/REACT/index.ts b/code/lib/create-storybook/src/generators/REACT/index.ts
similarity index 83%
rename from code/lib/cli/src/generators/REACT/index.ts
rename to code/lib/create-storybook/src/generators/REACT/index.ts
index 267f15b8427a..b4b2bb1d9479 100644
--- a/code/lib/cli/src/generators/REACT/index.ts
+++ b/code/lib/create-storybook/src/generators/REACT/index.ts
@@ -1,5 +1,5 @@
-import { detectLanguage } from '../../detect';
-import { CoreBuilder, SupportedLanguage } from '../../project_types';
+import { detectLanguage } from 'storybook/internal/cli';
+import { CoreBuilder, SupportedLanguage } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
similarity index 86%
rename from code/lib/cli/src/generators/REACT_NATIVE/index.ts
rename to code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
index 5d9cd1d82a53..377c87e94db4 100644
--- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
@@ -1,7 +1,7 @@
-import { copyTemplateFiles, getBabelDependencies } from '../../helpers';
-import type { JsPackageManager } from '@storybook/core/common';
-import type { NpmOptions } from '../../NpmOptions';
-import { SupportedLanguage } from '../../project_types';
+import { copyTemplateFiles, getBabelDependencies } from 'storybook/internal/cli';
+import type { JsPackageManager } from 'storybook/internal/common';
+import type { NpmOptions } from 'storybook/internal/cli';
+import { SupportedLanguage } from 'storybook/internal/cli';
 
 const generator = async (
   packageManager: JsPackageManager,
@@ -59,7 +59,6 @@ const generator = async (
     renderer: 'react-native',
     language: SupportedLanguage.TYPESCRIPT_3_8,
     destination: storybookConfigFolder,
-    includeCommonAssets: false,
   });
 };
 
diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts
similarity index 97%
rename from code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
rename to code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts
index 4a9282b5e32a..afd1ff670bf5 100644
--- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts
+++ b/code/lib/create-storybook/src/generators/REACT_SCRIPTS/index.ts
@@ -5,7 +5,7 @@ import { dedent } from 'ts-dedent';
 
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
   const monorepoRootPath = path.join(__dirname, '..', '..', '..', '..', '..', '..');
diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/create-storybook/src/generators/SERVER/index.ts
similarity index 88%
rename from code/lib/cli/src/generators/SERVER/index.ts
rename to code/lib/create-storybook/src/generators/SERVER/index.ts
index 1e7cdb0c6ad2..c46ace7b0e65 100755
--- a/code/lib/cli/src/generators/SERVER/index.ts
+++ b/code/lib/create-storybook/src/generators/SERVER/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/SOLID/index.ts b/code/lib/create-storybook/src/generators/SOLID/index.ts
similarity index 86%
rename from code/lib/cli/src/generators/SOLID/index.ts
rename to code/lib/create-storybook/src/generators/SOLID/index.ts
index 21347d057682..9f02e6256b45 100644
--- a/code/lib/cli/src/generators/SOLID/index.ts
+++ b/code/lib/create-storybook/src/generators/SOLID/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts
similarity index 100%
rename from code/lib/cli/src/generators/SVELTE/index.ts
rename to code/lib/create-storybook/src/generators/SVELTE/index.ts
diff --git a/code/lib/cli/src/generators/SVELTEKIT/index.ts b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
similarity index 89%
rename from code/lib/cli/src/generators/SVELTEKIT/index.ts
rename to code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
index 50c440a7922d..2632f7edcdd0 100644
--- a/code/lib/cli/src/generators/SVELTEKIT/index.ts
+++ b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/create-storybook/src/generators/VUE3/index.ts
similarity index 91%
rename from code/lib/cli/src/generators/VUE3/index.ts
rename to code/lib/create-storybook/src/generators/VUE3/index.ts
index c919b81cbbce..d7315f6cae39 100644
--- a/code/lib/cli/src/generators/VUE3/index.ts
+++ b/code/lib/create-storybook/src/generators/VUE3/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/code/lib/create-storybook/src/generators/WEB-COMPONENTS/index.ts
similarity index 88%
rename from code/lib/cli/src/generators/WEB-COMPONENTS/index.ts
rename to code/lib/create-storybook/src/generators/WEB-COMPONENTS/index.ts
index a4424ecb2757..49135da7f517 100755
--- a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts
+++ b/code/lib/create-storybook/src/generators/WEB-COMPONENTS/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts
similarity index 88%
rename from code/lib/cli/src/generators/WEBPACK_REACT/index.ts
rename to code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts
index 7274e40bf40f..7ded9e787096 100644
--- a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts
+++ b/code/lib/create-storybook/src/generators/WEBPACK_REACT/index.ts
@@ -1,4 +1,4 @@
-import { CoreBuilder } from '../../project_types';
+import { CoreBuilder } from 'storybook/internal/cli';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
similarity index 93%
rename from code/lib/cli/src/generators/baseGenerator.ts
rename to code/lib/create-storybook/src/generators/baseGenerator.ts
index 26af38afdbf4..57631d3f7245 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -1,19 +1,19 @@
-import path from 'path';
+import path, { dirname } from 'path';
 import fse from 'fs-extra';
 import { dedent } from 'ts-dedent';
 import ora from 'ora';
 import invariant from 'tiny-invariant';
-import type { JsPackageManager } from '@storybook/core/common';
-import { getPackageDetails, versions as packageVersions } from '@storybook/core/common';
-import type { SupportedFrameworks } from '@storybook/core/types';
-import type { NpmOptions } from '../NpmOptions';
-import type { SupportedRenderers, Builder } from '../project_types';
-import { SupportedLanguage, externalFrameworks } from '../project_types';
-import { copyTemplateFiles } from '../helpers';
+import type { JsPackageManager } from 'storybook/internal/common';
+import { getPackageDetails, versions as packageVersions } from 'storybook/internal/common';
+import type { SupportedFrameworks } from 'storybook/internal/types';
+import type { NpmOptions } from 'storybook/internal/cli';
+import type { SupportedRenderers, Builder } from 'storybook/internal/cli';
+import { SupportedLanguage, externalFrameworks } from 'storybook/internal/cli';
+import { copyTemplateFiles } from 'storybook/internal/cli';
 import { configureMain, configurePreview } from './configure';
 import type { FrameworkOptions, GeneratorOptions } from './types';
-import { configureEslintPlugin, extractEslintInfo } from '../automigrate/helpers/eslintPlugin';
-import { detectBuilder } from '../detect';
+import { configureEslintPlugin, extractEslintInfo } from 'storybook/internal/cli';
+import { detectBuilder } from 'storybook/internal/cli';
 
 const logger = console;
 
@@ -394,6 +394,11 @@ export async function baseGenerator(
       packageManager,
       language,
       destination: componentsDestinationPath,
+      commonAssetsDir: path.join(getCliDir(), 'rendererAssets', 'common'),
     });
   }
 }
+
+export function getCliDir() {
+  return dirname(require.resolve('create-storybook/package.json'));
+}
diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/create-storybook/src/generators/configure.test.ts
similarity index 99%
rename from code/lib/cli/src/generators/configure.test.ts
rename to code/lib/create-storybook/src/generators/configure.test.ts
index d0e593a3c026..b9626fdcdfd5 100644
--- a/code/lib/cli/src/generators/configure.test.ts
+++ b/code/lib/create-storybook/src/generators/configure.test.ts
@@ -1,7 +1,7 @@
 import { describe, beforeAll, expect, vi, it } from 'vitest';
 import fse from 'fs-extra';
 import { dedent } from 'ts-dedent';
-import { SupportedLanguage } from '../project_types';
+import { SupportedLanguage } from 'storybook/internal/cli';
 import { configureMain, configurePreview } from './configure';
 
 vi.mock('fs-extra');
diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/create-storybook/src/generators/configure.ts
similarity index 97%
rename from code/lib/cli/src/generators/configure.ts
rename to code/lib/create-storybook/src/generators/configure.ts
index 73c57dfc8fa3..791caf3887a3 100644
--- a/code/lib/cli/src/generators/configure.ts
+++ b/code/lib/create-storybook/src/generators/configure.ts
@@ -1,8 +1,8 @@
 import fse from 'fs-extra';
 import path from 'path';
 import { dedent } from 'ts-dedent';
-import { logger } from '@storybook/core/node-logger';
-import { externalFrameworks, SupportedLanguage } from '../project_types';
+import { logger } from 'storybook/internal/node-logger';
+import { externalFrameworks, SupportedLanguage } from 'storybook/internal/cli';
 
 interface ConfigureMainOptions {
   addons: string[];
diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/create-storybook/src/generators/types.ts
similarity index 86%
rename from code/lib/cli/src/generators/types.ts
rename to code/lib/create-storybook/src/generators/types.ts
index d1478019be0a..deade843e206 100644
--- a/code/lib/cli/src/generators/types.ts
+++ b/code/lib/create-storybook/src/generators/types.ts
@@ -1,6 +1,6 @@
-import type { NpmOptions } from '../NpmOptions';
-import type { SupportedLanguage, Builder, ProjectType } from '../project_types';
-import type { JsPackageManager, PackageManagerName } from '@storybook/core/common';
+import type { NpmOptions } from 'storybook/internal/cli';
+import type { SupportedLanguage, Builder, ProjectType } from 'storybook/internal/cli';
+import type { JsPackageManager, PackageManagerName } from 'storybook/internal/common';
 import type { FrameworkPreviewParts } from './configure';
 
 export type GeneratorOptions = {
diff --git a/code/lib/create-storybook/src/index.ts b/code/lib/create-storybook/src/index.ts
new file mode 100644
index 000000000000..605631a36245
--- /dev/null
+++ b/code/lib/create-storybook/src/index.ts
@@ -0,0 +1 @@
+export { doInitiate as initiate } from './initiate';
diff --git a/code/lib/cli/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
similarity index 97%
rename from code/lib/cli/src/initiate.ts
rename to code/lib/create-storybook/src/initiate.ts
index 747e2c6f6ea7..5d0932926d7b 100644
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -3,8 +3,8 @@ import findUp from 'find-up';
 import chalk from 'chalk';
 import prompts from 'prompts';
 import { telemetry } from 'storybook/internal/telemetry';
-import { withTelemetry } from '@storybook/core/core-server';
-import { NxProjectDetectedError } from '@storybook/core/server-errors';
+import { withTelemetry } from 'storybook/internal/core-server';
+import { NxProjectDetectedError } from 'storybook/internal/server-errors';
 import {
   versions,
   HandledError,
@@ -12,15 +12,15 @@ import {
   commandLog,
   paddedLog,
   getProjectRoot,
-} from '@storybook/core/common';
-import type { JsPackageManager } from '@storybook/core/common';
+} from 'storybook/internal/common';
+import type { JsPackageManager } from 'storybook/internal/common';
 
 import { dedent } from 'ts-dedent';
 import boxen from 'boxen';
 import { lt, prerelease } from 'semver';
-import type { Builder } from './project_types';
-import { installableProjectTypes, ProjectType } from './project_types';
-import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
+import type { Builder, NpmOptions } from 'storybook/internal/cli';
+import { installableProjectTypes, ProjectType } from 'storybook/internal/cli';
+import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from 'storybook/internal/cli';
 import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import reactGenerator from './generators/REACT';
@@ -37,7 +37,6 @@ import qwikGenerator from './generators/QWIK';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import solidGenerator from './generators/SOLID';
 import serverGenerator from './generators/SERVER';
-import type { NpmOptions } from './NpmOptions';
 import type { CommandOptions, GeneratorOptions } from './generators/types';
 import { currentDirectoryIsEmpty, scaffoldNewProject } from './scaffold-new-project';
 
diff --git a/code/lib/cli/src/scaffold-new-project.ts b/code/lib/create-storybook/src/scaffold-new-project.ts
similarity index 98%
rename from code/lib/cli/src/scaffold-new-project.ts
rename to code/lib/create-storybook/src/scaffold-new-project.ts
index eee3fbbe7939..18310892fbc5 100644
--- a/code/lib/cli/src/scaffold-new-project.ts
+++ b/code/lib/create-storybook/src/scaffold-new-project.ts
@@ -8,9 +8,9 @@ import { dedent } from 'ts-dedent';
 import { telemetry } from 'storybook/internal/telemetry';
 
 import { GenerateNewProjectOnInitError } from 'storybook/internal/server-errors';
-import { logger } from '@storybook/core/node-logger';
+import { logger } from 'storybook/internal/node-logger';
 
-import type { PackageManagerName } from '@storybook/core/common';
+import type { PackageManagerName } from 'storybook/internal/common';
 import type { CommandOptions } from './generators/types';
 
 type CoercedPackageManagerName = 'npm' | 'yarn' | 'pnpm';
diff --git a/code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json b/code/lib/create-storybook/templates/angular/application/template-csf/.storybook/tsconfig.doc.json
similarity index 100%
rename from code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json
rename to code/lib/create-storybook/templates/angular/application/template-csf/.storybook/tsconfig.doc.json
diff --git a/code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.json b/code/lib/create-storybook/templates/angular/application/template-csf/.storybook/tsconfig.json
similarity index 100%
rename from code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.json
rename to code/lib/create-storybook/templates/angular/application/template-csf/.storybook/tsconfig.json
diff --git a/code/lib/cli/templates/angular/application/template-csf/.storybook/typings.d.ts b/code/lib/create-storybook/templates/angular/application/template-csf/.storybook/typings.d.ts
similarity index 100%
rename from code/lib/cli/templates/angular/application/template-csf/.storybook/typings.d.ts
rename to code/lib/create-storybook/templates/angular/application/template-csf/.storybook/typings.d.ts
diff --git a/code/lib/cli/templates/angular/library/template-csf/.storybook/tsconfig.json b/code/lib/create-storybook/templates/angular/library/template-csf/.storybook/tsconfig.json
similarity index 100%
rename from code/lib/cli/templates/angular/library/template-csf/.storybook/tsconfig.json
rename to code/lib/create-storybook/templates/angular/library/template-csf/.storybook/tsconfig.json
diff --git a/code/lib/cli/templates/angular/library/template-csf/.storybook/typings.d.ts b/code/lib/create-storybook/templates/angular/library/template-csf/.storybook/typings.d.ts
similarity index 100%
rename from code/lib/cli/templates/angular/library/template-csf/.storybook/typings.d.ts
rename to code/lib/create-storybook/templates/angular/library/template-csf/.storybook/typings.d.ts
diff --git a/code/lib/cli/templates/aurelia/template-csf/.storybook/tsconfig.json b/code/lib/create-storybook/templates/aurelia/template-csf/.storybook/tsconfig.json
similarity index 100%
rename from code/lib/cli/templates/aurelia/template-csf/.storybook/tsconfig.json
rename to code/lib/create-storybook/templates/aurelia/template-csf/.storybook/tsconfig.json
diff --git a/code/lib/cli/templates/aurelia/template-csf/.storybook/typings.d.ts b/code/lib/create-storybook/templates/aurelia/template-csf/.storybook/typings.d.ts
similarity index 100%
rename from code/lib/cli/templates/aurelia/template-csf/.storybook/typings.d.ts
rename to code/lib/create-storybook/templates/aurelia/template-csf/.storybook/typings.d.ts
diff --git a/code/lib/create-storybook/tsconfig.json b/code/lib/create-storybook/tsconfig.json
new file mode 100644
index 000000000000..73a65ef2ef6e
--- /dev/null
+++ b/code/lib/create-storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {},
+  "include": ["src/**/*"]
+}
diff --git a/code/lib/create-storybook/vitest.config.ts b/code/lib/create-storybook/vitest.config.ts
new file mode 100644
index 000000000000..03172200442f
--- /dev/null
+++ b/code/lib/create-storybook/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+import { vitestCommonConfig } from '../../vitest.workspace';
+
+export default mergeConfig(
+  vitestCommonConfig,
+  defineConfig({
+    // Add custom config here
+  })
+);
diff --git a/code/package.json b/code/package.json
index 34e857d4681e..a287b61439df 100644
--- a/code/package.json
+++ b/code/package.json
@@ -108,6 +108,7 @@
     "@storybook/addon-onboarding": "workspace:*",
     "@storybook/addon-outline": "workspace:*",
     "@storybook/addon-storysource": "workspace:*",
+    "@storybook/addon-themes": "workspace:*",
     "@storybook/addon-toolbars": "workspace:*",
     "@storybook/addon-viewport": "workspace:*",
     "@storybook/angular": "workspace:*",
@@ -174,6 +175,7 @@
     "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^3.0.1",
     "@vitest/coverage-v8": "^1.2.2",
+    "create-storybook": "workspace:*",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
@@ -278,5 +280,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.3.0-alpha.4"
 }
diff --git a/code/playwright.config.ts b/code/playwright.config.ts
index 129c1aac537d..bc0ba12a8eaa 100644
--- a/code/playwright.config.ts
+++ b/code/playwright.config.ts
@@ -67,12 +67,12 @@ export default defineConfig({
       },
     },
 
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
 
     /* Test against mobile viewports. */
     // {
diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
index 6a0f096f868d..8e17288243d7 100644
--- a/code/renderers/react/src/__test__/portable-stories.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -53,7 +53,7 @@ describe('renders', () => {
   });
 
   it('should render component mounted in play function', async () => {
-    await MountInPlayFunction.play();
+    await MountInPlayFunction.run();
 
     expect(screen.getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
@@ -65,7 +65,7 @@ describe('renders', () => {
     expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
     // spy assertions happen in the play function and should work
-    await LoaderStory.play!();
+    await LoaderStory.run!();
   });
 });
 
@@ -125,7 +125,7 @@ describe('CSF3', () => {
 
   it('renders with play function without canvas element', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -138,7 +138,7 @@ describe('CSF3', () => {
     console.log(div.tagName);
     document.body.appendChild(div);
 
-    await CSF3InputFieldFilled.play({ canvasElement: div });
+    await CSF3InputFieldFilled.run({ canvasElement: div });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -185,6 +185,6 @@ const testCases = Object.values(composeStories(stories)).map(
 );
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (_storyName === 'CSF2StoryWithLocale') return;
-  await Story.play();
+  await Story.run();
   expect(document.body).toMatchSnapshot();
 });
diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx
index b8058deb4571..88d6e5382ae6 100644
--- a/code/renderers/react/src/portable-stories.tsx
+++ b/code/renderers/react/src/portable-stories.tsx
@@ -45,11 +45,16 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> = {
   ...reactProjectAnnotations,
-  renderToCanvas: ({
-    storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render, canvasElement },
-  }) => {
-    if (render == null) throw new TestingLibraryMustBeConfiguredError();
-    const { unmount } = render(<Story {...context} />, { baseElement: context.canvasElement });
+  renderToCanvas: (renderContext, canvasElement) => {
+    if (renderContext.storyContext.testingLibraryRender == null) {
+      throw new TestingLibraryMustBeConfiguredError();
+      // Enable for 8.3
+      // return reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+    }
+    const {
+      storyContext: { context, unboundStoryFn: Story, testingLibraryRender: render },
+    } = renderContext;
+    const { unmount } = render(<Story {...context} />, { container: context.canvasElement });
     return unmount;
   },
 };
diff --git a/code/renderers/react/src/preset.ts b/code/renderers/react/src/preset.ts
index 28c667570efc..fdd5add72485 100644
--- a/code/renderers/react/src/preset.ts
+++ b/code/renderers/react/src/preset.ts
@@ -11,6 +11,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
   options
 ) => {
   const docsConfig = await options.presets.apply('docs', {}, options);
+  const features = await options.presets.apply('features', {}, options);
   const docsEnabled = Object.keys(docsConfig).length > 0;
   const result: string[] = [];
 
@@ -18,7 +19,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
     .concat(input)
     .concat([join(__dirname, 'entry-preview.mjs')])
     .concat(docsEnabled ? [join(__dirname, 'entry-preview-docs.mjs')] : [])
-    .concat(FEATURES?.experimentalRSC ? [join(__dirname, 'entry-preview-rsc.mjs')] : []);
+    .concat(features?.experimentalRSC ? [join(__dirname, 'entry-preview-rsc.mjs')] : []);
 };
 
 /**
diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index 6b75dc71eb39..4cef8820fbc5 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -2,82 +2,48 @@
 
 exports[`Renders CSF2Secondary story 1`] = `
 <body>
-  
-  
-  <button
-    class="storybook-button storybook-button--medium storybook-button--secondary"
-    style=""
-    type="button"
-  >
-    label coming from story args! 
-    <!---->
-  </button>
-  
-</body>
-`;
-
-exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
-<body>
-  
-  
-  
-  <div
-    data-testid="local-decorator"
-    style="margin: 3em;"
-  >
+  <div>
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
       type="button"
     >
-      foo 
+      label coming from story args! 
       <!---->
     </button>
-    <!---->
-    <!---->
+    
   </div>
-  <!---->
-  <!---->
-  
 </body>
 `;
 
-exports[`Renders CSF3Button story 1`] = `
+exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
-  
-  
-  
-  
-  
-  
-  <button
-    class="storybook-button storybook-button--medium storybook-button--secondary"
-    style=""
-    type="button"
-  >
-    foo 
+  <div>
+    <div
+      data-testid="local-decorator"
+      style="margin: 3em;"
+    >
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo 
+        <!---->
+      </button>
+      <!---->
+      <!---->
+    </div>
     <!---->
-  </button>
-  
+    <!---->
+    
+  </div>
 </body>
 `;
 
-exports[`Renders CSF3ButtonWithRender story 1`] = `
+exports[`Renders CSF3Button story 1`] = `
 <body>
-  
-  
-  
-  
-  
-  
-  
   <div>
-    <p
-      data-testid="custom-render"
-    >
-      I am a custom render function
-    </p>
-     
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -86,101 +52,107 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       foo 
       <!---->
     </button>
-    <!---->
+    
+  </div>
+</body>
+`;
+
+exports[`Renders CSF3ButtonWithRender story 1`] = `
+<body>
+  <div>
+    <div>
+      <p
+        data-testid="custom-render"
+      >
+        I am a custom render function
+      </p>
+       
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo 
+        <!---->
+      </button>
+      <!---->
+    </div>
+    
   </div>
-  
 </body>
 `;
 
 exports[`Renders CSF3InputFieldFilled story 1`] = `
 <body>
-  
-  
-  
-  
-  
-  
-  
-  
-  <input
-    data-testid="input"
-    formaction="http://localhost:3000/"
-    formmethod=""
-  />
-  
+  <div>
+    <input
+      data-testid="input"
+      formaction="http://localhost:3000/"
+      formmethod=""
+    />
+    
+  </div>
 </body>
 `;
 
 exports[`Renders CSF3Primary story 1`] = `
 <body>
-  
-  
-  
-  
-  
-  <button
-    class="storybook-button storybook-button--large storybook-button--primary"
-    style=""
-    type="button"
-  >
-    foo 
-    <!---->
-  </button>
-  
+  <div>
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      style=""
+      type="button"
+    >
+      foo 
+      <!---->
+    </button>
+    
+  </div>
 </body>
 `;
 
 exports[`Renders LoaderStory story 1`] = `
 <body>
-  
-  
-  
-  
-  
-  
-  
-  
-  
   <div>
-    <div
-      data-testid="loaded-data"
-    >
-      loaded data
-    </div>
-     
-    <div
-      data-testid="spy-data"
-    >
-      mockFn return value
+    <div>
+      <div
+        data-testid="loaded-data"
+      >
+        loaded data
+      </div>
+       
+      <div
+        data-testid="spy-data"
+      >
+        mockFn return value
+      </div>
     </div>
+    
   </div>
-  
 </body>
 `;
 
 exports[`Renders NewStory story 1`] = `
 <body>
-  
-  
-  
-  
-  <div
-    data-testid="local-decorator"
-    style="margin: 3em;"
-  >
-    <button
-      class="storybook-button storybook-button--large storybook-button--primary"
-      style=""
-      type="button"
+  <div>
+    <div
+      data-testid="local-decorator"
+      style="margin: 3em;"
     >
-      foo 
+      <button
+        class="storybook-button storybook-button--large storybook-button--primary"
+        style=""
+        type="button"
+      >
+        foo 
+        <!---->
+      </button>
       <!---->
-    </button>
+      <!---->
+    </div>
     <!---->
     <!---->
+    
   </div>
-  <!---->
-  <!---->
-  
 </body>
 `;
diff --git a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
index 8bff1514450c..fa21d4967e33 100644
--- a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
+++ b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts
@@ -70,7 +70,7 @@ describe('renders', () => {
     expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
     // spy assertions happen in the play function and should work
-    await LoaderStory.play!();
+    await LoaderStory.run!();
   });
 });
 
@@ -120,7 +120,7 @@ describe('CSF3', () => {
   it('renders with play function without canvas element', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
 
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -132,7 +132,7 @@ describe('CSF3', () => {
     const div = document.createElement('div');
     document.body.appendChild(div);
 
-    await CSF3InputFieldFilled.play({ canvasElement: div });
+    await CSF3InputFieldFilled.run({ canvasElement: div });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -171,6 +171,6 @@ const testCases = Object.values(composeStories(stories)).map(
 );
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (_storyName === 'CSF2StoryWithLocale') return;
-  await Story.play();
+  await Story.run();
   expect(document.body).toMatchSnapshot();
 });
diff --git a/code/renderers/svelte/src/portable-stories.ts b/code/renderers/svelte/src/portable-stories.ts
index a3c2e54336e2..937d490edf15 100644
--- a/code/renderers/svelte/src/portable-stories.ts
+++ b/code/renderers/svelte/src/portable-stories.ts
@@ -63,8 +63,16 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<SvelteRenderer> = {
   ...svelteProjectAnnotations,
-  renderToCanvas: ({ storyFn, storyContext: { testingLibraryRender: render, canvasElement } }) => {
-    if (render == null) throw new TestingLibraryMustBeConfiguredError();
+  renderToCanvas: (renderContext, canvasElement) => {
+    if (renderContext.storyContext.testingLibraryRender == null) {
+      throw new TestingLibraryMustBeConfiguredError();
+      // Enable for 8.3
+      // return svelteProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+    }
+    const {
+      storyFn,
+      storyContext: { testingLibraryRender: render },
+    } = renderContext;
     const { Component, props } = storyFn();
     const { unmount } = render(Component, { props, target: canvasElement });
     return unmount;
diff --git a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
index f0d644ee8d0c..359baf7300cc 100644
--- a/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
+++ b/code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts
@@ -52,7 +52,7 @@ describe('renders', () => {
     expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
     // spy assertions happen in the play function and should work
-    await LoaderStory.play!();
+    await LoaderStory.run!();
   });
 });
 
@@ -103,7 +103,7 @@ describe('CSF3', () => {
   it('renders with play function', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
 
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -145,7 +145,7 @@ describe('ComposeStories types', () => {
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName, Story]);
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (typeof Story === 'string' || _storyName === 'CSF2StoryWithLocale') return;
-  await Story.play();
+  await Story.run();
   await new Promise((resolve) => setTimeout(resolve, 0));
   expect(document.body).toMatchSnapshot();
 });
diff --git a/code/renderers/vue3/src/portable-stories.ts b/code/renderers/vue3/src/portable-stories.ts
index 7e1e64c6f458..13a34728ad9b 100644
--- a/code/renderers/vue3/src/portable-stories.ts
+++ b/code/renderers/vue3/src/portable-stories.ts
@@ -53,9 +53,17 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const vueProjectAnnotations: ProjectAnnotations<VueRenderer> = {
   ...defaultProjectAnnotations,
-  renderToCanvas: ({ storyFn, storyContext: { testingLibraryRender: render, canvasElement } }) => {
-    if (render == null) throw new TestingLibraryMustBeConfiguredError();
-    const { unmount } = render(storyFn(), { baseElement: canvasElement });
+  renderToCanvas: (renderContext, canvasElement) => {
+    if (renderContext.storyContext.testingLibraryRender == null) {
+      throw new TestingLibraryMustBeConfiguredError();
+      // Enable for 8.3
+      // return defaultProjectAnnotations.renderToCanvas(renderContext, canvasElement);
+    }
+    const {
+      storyFn,
+      storyContext: { testingLibraryRender: render },
+    } = renderContext;
+    const { unmount } = render(storyFn(), { container: canvasElement });
     return unmount;
   },
 };
diff --git a/code/yarn.lock b/code/yarn.lock
index 1b831f85c140..2e0ac9980d25 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -360,7 +360,7 @@ __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, @babel/code-frame@npm:^7.24.7":
+"@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.2, @babel/code-frame@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/code-frame@npm:7.24.7"
   dependencies:
@@ -370,7 +370,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.7":
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/compat-data@npm:7.24.7"
   checksum: 10c0/dcd93a5632b04536498fbe2be5af1057f635fd7f7090483d8e797878559037e5130b26862ceb359acbae93ed27e076d395ddb4663db6b28a665756ffd02d324f
@@ -424,25 +424,25 @@ __metadata:
   linkType: hard
 
 "@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.7
-  resolution: "@babel/core@npm:7.24.7"
+  version: 7.24.4
+  resolution: "@babel/core@npm:7.24.4"
   dependencies:
     "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.24.7"
-    "@babel/generator": "npm:^7.24.7"
-    "@babel/helper-compilation-targets": "npm:^7.24.7"
-    "@babel/helper-module-transforms": "npm:^7.24.7"
-    "@babel/helpers": "npm:^7.24.7"
-    "@babel/parser": "npm:^7.24.7"
-    "@babel/template": "npm:^7.24.7"
-    "@babel/traverse": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
+    "@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/4004ba454d3c20a46ea66264e06c15b82e9f6bdc35f88819907d24620da70dbf896abac1cb4cc4b6bb8642969e45f4d808497c9054a1388a386cf8c12e9b9e0d
+  checksum: 10c0/fc136966583e64d6f84f4a676368de6ab4583aa87f867186068655b30ef67f21f8e65a88c6d446a7efd219ad7ffb9185c82e8a90183ee033f6f47b5026641e16
   languageName: node
   linkType: hard
 
@@ -479,7 +479,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.24.7":
+"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5, @babel/helper-annotate-as-pure@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-annotate-as-pure@npm:7.24.7"
   dependencies:
@@ -611,7 +611,7 @@ __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.24.7, @babel/helper-module-imports@npm:^7.8.3":
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3, @babel/helper-module-imports@npm:^7.24.7, @babel/helper-module-imports@npm:^7.8.3":
   version: 7.24.7
   resolution: "@babel/helper-module-imports@npm:7.24.7"
   dependencies:
@@ -730,7 +730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.7":
+"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-validator-option@npm:7.24.7"
   checksum: 10c0/21aea2b7bc5cc8ddfb828741d5c8116a84cbc35b4a3184ec53124f08e09746f1f67a6f9217850188995ca86059a7942e36d8965a6730784901def777b7e8a436
@@ -749,7 +749,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.24.7":
+"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.24.4":
   version: 7.24.7
   resolution: "@babel/helpers@npm:7.24.7"
   dependencies:
@@ -780,19 +780,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.7"
+"@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-environment-visitor": "npm:^7.24.7"
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/394c30e2b708ad385fa1219528e039066a1f1cb40f47986f283878848fd354c745e6397f588b4e5a046ee8d64bfdf4c208e4c3dfbdcfb2fd34315ec67c64e7af
+  checksum: 10c0/9aed453a1a21e4fd29add0b4a2d82a2c6f43a47c80d28411f8327f2a714064bc93a6f622c701d263970e0d72d7901d28f7f51e91ba91a31306efe8f17c411182
   languageName: node
   linkType: hard
 
-"@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.7":
+"@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.7
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.7"
   dependencies:
@@ -803,7 +803,7 @@ __metadata:
   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.7":
+"@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.7
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.7"
   dependencies:
@@ -816,7 +816,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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.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.7
   resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.7"
   dependencies:
@@ -990,18 +990,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-syntax-flow@npm:7.24.7"
+"@babel/plugin-syntax-flow@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-flow@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/2f0cb7a78379029707e61f6665634a5b758c8b4ccb602a72d798e41d36b0647c2f2de59f90e0c1d522b026962918e54d82f3aee0c194dc87cd340455aa58562a
+  checksum: 10c0/07afc7df02141597968532bfbfa3f6c0ad21a2bdd885d0e5e035dcf60fdf35f0995631c9750b464e1a6f2feea14160a82787f914e88e8f7115dc99f09853e43e
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-assertions@npm:^7.23.3, @babel/plugin-syntax-import-assertions@npm:^7.24.1, @babel/plugin-syntax-import-assertions@npm:^7.24.7":
+"@babel/plugin-syntax-import-assertions@npm:^7.23.3, @babel/plugin-syntax-import-assertions@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.7"
   dependencies:
@@ -1012,7 +1012,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.23.3, @babel/plugin-syntax-import-attributes@npm:^7.24.7":
+"@babel/plugin-syntax-import-attributes@npm:^7.23.3, @babel/plugin-syntax-import-attributes@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.7"
   dependencies:
@@ -1045,14 +1045,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-syntax-jsx@npm:7.24.7"
+"@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.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/f44d927a9ae8d5ef016ff5b450e1671e56629ddc12e56b938e41fd46e141170d9dfc9a53d6cb2b9a20a7dd266a938885e6a3981c60c052a2e1daed602ac80e51
+  checksum: 10c0/6cec76fbfe6ca81c9345c2904d8d9a8a0df222f9269f0962ed6eb2eb8f3f10c2f15e993d1ef09dbaf97726bf1792b5851cf5bd9a769f966a19448df6be95d19a
   languageName: node
   linkType: hard
 
@@ -1167,7 +1167,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.23.3, @babel/plugin-transform-arrow-functions@npm:^7.24.7":
+"@babel/plugin-transform-arrow-functions@npm:^7.23.3, @babel/plugin-transform-arrow-functions@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7"
   dependencies:
@@ -1192,7 +1192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:^7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.24.7":
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.24.3":
   version: 7.24.7
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.7"
   dependencies:
@@ -1219,7 +1219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-to-generator@npm:^7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.24.7":
+"@babel/plugin-transform-async-to-generator@npm:^7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.7"
   dependencies:
@@ -1232,7 +1232,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3, @babel/plugin-transform-block-scoped-functions@npm:^7.24.7":
+"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3, @babel/plugin-transform-block-scoped-functions@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.7"
   dependencies:
@@ -1243,7 +1243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.24.7, @babel/plugin-transform-block-scoping@npm:^7.8.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.7
   resolution: "@babel/plugin-transform-block-scoping@npm:7.24.7"
   dependencies:
@@ -1254,7 +1254,7 @@ __metadata:
   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.24.1, @babel/plugin-transform-class-properties@npm:^7.24.7":
+"@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.7
   resolution: "@babel/plugin-transform-class-properties@npm:7.24.7"
   dependencies:
@@ -1266,7 +1266,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-static-block@npm:^7.23.4, @babel/plugin-transform-class-static-block@npm:^7.24.7":
+"@babel/plugin-transform-class-static-block@npm:^7.23.4, @babel/plugin-transform-class-static-block@npm:^7.24.4":
   version: 7.24.7
   resolution: "@babel/plugin-transform-class-static-block@npm:7.24.7"
   dependencies:
@@ -1279,7 +1279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.23.8, @babel/plugin-transform-classes@npm:^7.24.7":
+"@babel/plugin-transform-classes@npm:^7.23.8, @babel/plugin-transform-classes@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-classes@npm:7.24.7"
   dependencies:
@@ -1297,7 +1297,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-computed-properties@npm:^7.23.3, @babel/plugin-transform-computed-properties@npm:^7.24.7":
+"@babel/plugin-transform-computed-properties@npm:^7.23.3, @babel/plugin-transform-computed-properties@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-computed-properties@npm:7.24.7"
   dependencies:
@@ -1309,7 +1309,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.23.3, @babel/plugin-transform-destructuring@npm:^7.24.7":
+"@babel/plugin-transform-destructuring@npm:^7.23.3, @babel/plugin-transform-destructuring@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-destructuring@npm:7.24.7"
   dependencies:
@@ -1320,7 +1320,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.24.7":
+"@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.7"
   dependencies:
@@ -1332,7 +1332,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-duplicate-keys@npm:^7.23.3, @babel/plugin-transform-duplicate-keys@npm:^7.24.7":
+"@babel/plugin-transform-duplicate-keys@npm:^7.23.3, @babel/plugin-transform-duplicate-keys@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.7"
   dependencies:
@@ -1343,7 +1343,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-dynamic-import@npm:^7.23.4, @babel/plugin-transform-dynamic-import@npm:^7.24.7":
+"@babel/plugin-transform-dynamic-import@npm:^7.23.4, @babel/plugin-transform-dynamic-import@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.7"
   dependencies:
@@ -1355,7 +1355,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3, @babel/plugin-transform-exponentiation-operator@npm:^7.24.7":
+"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3, @babel/plugin-transform-exponentiation-operator@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.7"
   dependencies:
@@ -1367,7 +1367,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.4, @babel/plugin-transform-export-namespace-from@npm:^7.24.1, @babel/plugin-transform-export-namespace-from@npm:^7.24.7":
+"@babel/plugin-transform-export-namespace-from@npm:^7.23.4, @babel/plugin-transform-export-namespace-from@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.7"
   dependencies:
@@ -1379,19 +1379,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.24.7"
+"@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"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/plugin-syntax-flow": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-flow": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/9995d52af58ceaa223c6553873bd5a16a94b2abdebb39993d59d9eb0c0c9666636ceb7a80f63ac86fe7ab3cb217f1dac9fb2f448ad5a54f8fb8e41e12716ef9a
+  checksum: 10c0/5949a8e5214e3fc65d31dab0551423cea9d9eef35faa5d0004707ba7347baf96166aa400907ce7498f754db4e1e9d039ca434a508546b0dc9fdae9a42e814c1a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.23.6, @babel/plugin-transform-for-of@npm:^7.24.7":
+"@babel/plugin-transform-for-of@npm:^7.23.6, @babel/plugin-transform-for-of@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-for-of@npm:7.24.7"
   dependencies:
@@ -1403,7 +1403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-function-name@npm:^7.23.3, @babel/plugin-transform-function-name@npm:^7.24.7":
+"@babel/plugin-transform-function-name@npm:^7.23.3, @babel/plugin-transform-function-name@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-function-name@npm:7.24.7"
   dependencies:
@@ -1416,7 +1416,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-json-strings@npm:^7.23.4, @babel/plugin-transform-json-strings@npm:^7.24.7":
+"@babel/plugin-transform-json-strings@npm:^7.23.4, @babel/plugin-transform-json-strings@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-json-strings@npm:7.24.7"
   dependencies:
@@ -1428,7 +1428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-literals@npm:^7.23.3, @babel/plugin-transform-literals@npm:^7.24.7":
+"@babel/plugin-transform-literals@npm:^7.23.3, @babel/plugin-transform-literals@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-literals@npm:7.24.7"
   dependencies:
@@ -1439,7 +1439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4, @babel/plugin-transform-logical-assignment-operators@npm:^7.24.7":
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4, @babel/plugin-transform-logical-assignment-operators@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.7"
   dependencies:
@@ -1451,7 +1451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-member-expression-literals@npm:^7.23.3, @babel/plugin-transform-member-expression-literals@npm:^7.24.7":
+"@babel/plugin-transform-member-expression-literals@npm:^7.23.3, @babel/plugin-transform-member-expression-literals@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.7"
   dependencies:
@@ -1462,7 +1462,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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.7":
+"@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.7
   resolution: "@babel/plugin-transform-modules-amd@npm:7.24.7"
   dependencies:
@@ -1474,7 +1474,7 @@ __metadata:
   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, @babel/plugin-transform-modules-commonjs@npm:^7.24.7":
+"@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.7
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.7"
   dependencies:
@@ -1487,7 +1487,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.7":
+"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7"
   dependencies:
@@ -1501,7 +1501,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-umd@npm:^7.23.3, @babel/plugin-transform-modules-umd@npm:^7.24.7":
+"@babel/plugin-transform-modules-umd@npm:^7.23.3, @babel/plugin-transform-modules-umd@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-modules-umd@npm:7.24.7"
   dependencies:
@@ -1513,7 +1513,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.5, @babel/plugin-transform-named-capturing-groups-regex@npm:^7.24.7":
+"@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.5":
   version: 7.24.7
   resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.24.7"
   dependencies:
@@ -1525,7 +1525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-new-target@npm:^7.23.3, @babel/plugin-transform-new-target@npm:^7.24.7":
+"@babel/plugin-transform-new-target@npm:^7.23.3, @babel/plugin-transform-new-target@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-new-target@npm:7.24.7"
   dependencies:
@@ -1536,7 +1536,7 @@ __metadata:
   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.24.7":
+"@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.7
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7"
   dependencies:
@@ -1548,7 +1548,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-numeric-separator@npm:^7.23.4, @babel/plugin-transform-numeric-separator@npm:^7.24.1, @babel/plugin-transform-numeric-separator@npm:^7.24.7":
+"@babel/plugin-transform-numeric-separator@npm:^7.23.4, @babel/plugin-transform-numeric-separator@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.7"
   dependencies:
@@ -1571,7 +1571,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:^7.24.0, @babel/plugin-transform-object-rest-spread@npm:^7.24.1, @babel/plugin-transform-object-rest-spread@npm:^7.24.7":
+"@babel/plugin-transform-object-rest-spread@npm:^7.24.0, @babel/plugin-transform-object-rest-spread@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.7"
   dependencies:
@@ -1585,7 +1585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-super@npm:^7.23.3, @babel/plugin-transform-object-super@npm:^7.24.7":
+"@babel/plugin-transform-object-super@npm:^7.23.3, @babel/plugin-transform-object-super@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-object-super@npm:7.24.7"
   dependencies:
@@ -1597,7 +1597,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4, @babel/plugin-transform-optional-catch-binding@npm:^7.24.7":
+"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4, @babel/plugin-transform-optional-catch-binding@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.7"
   dependencies:
@@ -1609,7 +1609,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@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.7":
+"@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, @babel/plugin-transform-optional-chaining@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.7"
   dependencies:
@@ -1622,7 +1622,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.7":
+"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.1, @babel/plugin-transform-parameters@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-transform-parameters@npm:7.24.7"
   dependencies:
@@ -1633,7 +1633,7 @@ __metadata:
   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.24.7":
+"@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.7
   resolution: "@babel/plugin-transform-private-methods@npm:7.24.7"
   dependencies:
@@ -1645,7 +1645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:^7.23.4, @babel/plugin-transform-private-property-in-object@npm:^7.24.7":
+"@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.7
   resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.7"
   dependencies:
@@ -1659,7 +1659,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-property-literals@npm:^7.23.3, @babel/plugin-transform-property-literals@npm:^7.24.7":
+"@babel/plugin-transform-property-literals@npm:^7.23.3, @babel/plugin-transform-property-literals@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-property-literals@npm:7.24.7"
   dependencies:
@@ -1670,78 +1670,78 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.24.7"
+"@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.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c14a07a9e75723c96f1a0a306b8a8e899ff1c6a0cc3d62bcda79bb1b54e4319127b258651c513a1a47da152cdc22e16525525a30ae5933a2980c7036fd0b4d24
+  checksum: 10c0/adf1a3cb0df8134533a558a9072a67e34127fd489dfe431c3348a86dd41f3e74861d5d5134bbb68f61a9cdb3f7e79b2acea1346be94ce4d3328a64e5a9e09be1
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-development@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.24.7"
+"@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
   dependencies:
-    "@babel/plugin-transform-react-jsx": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/fce647db50f90a5291681f0f97865d9dc76981262dff71d6d0332e724b85343de5860c26f9e9a79e448d61e1d70916b07ce91e8c7f2b80dceb4b16aee41794d8
+  checksum: 10c0/4d2e9e68383238feb873f6111df972df4a2ebf6256d6f787a8772241867efa975b3980f7d75ab7d750e7eaad4bd454e8cc6e106301fd7572dd389e553f5f69d2
   languageName: node
   linkType: hard
 
 "@babel/plugin-transform-react-jsx-self@npm:^7.18.6":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.7"
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/dcf3b732401f47f06bb29d6016e48066f66de00029a0ded98ddd9983c770a00a109d91cd04d2700d15ee0bcec3ae3027a5f12d69e15ec56efc0bcbfac65e92cb
+  checksum: 10c0/263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b
   languageName: node
   linkType: hard
 
 "@babel/plugin-transform-react-jsx-source@npm:^7.19.6":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.7"
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/970ef1264c7c6c416ab11610665d5309aec2bd2b9086ae394e1132e65138d97b060a7dc9d31054e050d6dc475b5a213938c9707c0202a5022d55dcb4c5abe28f
+  checksum: 10c0/defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.24.7"
+"@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:
-    "@babel/helper-annotate-as-pure": "npm:^7.24.7"
-    "@babel/helper-module-imports": "npm:^7.24.7"
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/plugin-syntax-jsx": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.23.3"
+    "@babel/types": "npm:^7.23.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/5c46d2c1c06a30e6bde084839df9cc689bf9c9cb0292105d61c225ca731f64247990724caee7dfc7f817dc964c062e8319e7f05394209590c476b65d75373435
+  checksum: 10c0/8851b3adc515cd91bdb06ff3a23a0f81f0069cfef79dfb3fa744da4b7a82e3555ccb6324c4fa71ecf22508db13b9ff6a0ed96675f95fc87903b9fc6afb699580
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-pure-annotations@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.7"
+"@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.24.7"
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.24.0"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/fae517d293d9c93b7b920458c3e4b91cb0400513889af41ba184a5f3acc8bfef27242cc262741bb8f87870df376f1733a0d0f52b966d342e2aaaf5607af8f73d
+  checksum: 10c0/9eb3056fcaadd63d404fd5652b2a3f693bc4758ba753fee5b5c580c7a64346eeeb94e5a4f77a99c76f3cf06d1f1ad6c227647cd0b1219efe3d00cafa5a6e7b2a
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.7":
+"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-regenerator@npm:7.24.7"
   dependencies:
@@ -1753,7 +1753,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-reserved-words@npm:^7.23.3, @babel/plugin-transform-reserved-words@npm:^7.24.7":
+"@babel/plugin-transform-reserved-words@npm:^7.23.3, @babel/plugin-transform-reserved-words@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-reserved-words@npm:7.24.7"
   dependencies:
@@ -1781,22 +1781,22 @@ __metadata:
   linkType: hard
 
 "@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.7
-  resolution: "@babel/plugin-transform-runtime@npm:7.24.7"
+  version: 7.24.3
+  resolution: "@babel/plugin-transform-runtime@npm:7.24.3"
   dependencies:
-    "@babel/helper-module-imports": "npm:^7.24.7"
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
+    "@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/a33f5095872bbba00b8ee553dfe6941477e69a017a2e65e9dd86e80dab5c627635093b796eb1eb22aaaf2f874704f63ad1d99b952b83b59ef6b368ae04e5bb41
+  checksum: 10c0/ee01967bf405d84bd95ca4089166a18fb23fe9851a6da53dcf712a7f8ba003319996f21f320d568ec76126e18adfaee978206ccda86eef7652d47cc9a052e75e
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.23.3, @babel/plugin-transform-shorthand-properties@npm:^7.24.7":
+"@babel/plugin-transform-shorthand-properties@npm:^7.23.3, @babel/plugin-transform-shorthand-properties@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7"
   dependencies:
@@ -1807,7 +1807,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-spread@npm:^7.23.3, @babel/plugin-transform-spread@npm:^7.24.7":
+"@babel/plugin-transform-spread@npm:^7.23.3, @babel/plugin-transform-spread@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-spread@npm:7.24.7"
   dependencies:
@@ -1819,7 +1819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-sticky-regex@npm:^7.23.3, @babel/plugin-transform-sticky-regex@npm:^7.24.7":
+"@babel/plugin-transform-sticky-regex@npm:^7.23.3, @babel/plugin-transform-sticky-regex@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.7"
   dependencies:
@@ -1830,7 +1830,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.23.3, @babel/plugin-transform-template-literals@npm:^7.24.7":
+"@babel/plugin-transform-template-literals@npm:^7.23.3, @babel/plugin-transform-template-literals@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-template-literals@npm:7.24.7"
   dependencies:
@@ -1841,7 +1841,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.23.3, @babel/plugin-transform-typeof-symbol@npm:^7.24.7":
+"@babel/plugin-transform-typeof-symbol@npm:^7.23.3, @babel/plugin-transform-typeof-symbol@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.7"
   dependencies:
@@ -1852,7 +1852,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.24.7":
+"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-typescript@npm:7.24.7"
   dependencies:
@@ -1866,7 +1866,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-escapes@npm:^7.23.3, @babel/plugin-transform-unicode-escapes@npm:^7.24.7":
+"@babel/plugin-transform-unicode-escapes@npm:^7.23.3, @babel/plugin-transform-unicode-escapes@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.7"
   dependencies:
@@ -1877,7 +1877,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3, @babel/plugin-transform-unicode-property-regex@npm:^7.24.7":
+"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3, @babel/plugin-transform-unicode-property-regex@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.7"
   dependencies:
@@ -1889,7 +1889,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.23.3, @babel/plugin-transform-unicode-regex@npm:^7.24.7":
+"@babel/plugin-transform-unicode-regex@npm:^7.23.3, @babel/plugin-transform-unicode-regex@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.7"
   dependencies:
@@ -1901,7 +1901,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3, @babel/plugin-transform-unicode-sets-regex@npm:^7.24.7":
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3, @babel/plugin-transform-unicode-sets-regex@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.7"
   dependencies:
@@ -2014,25 +2014,25 @@ __metadata:
   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.7
-  resolution: "@babel/preset-env@npm:7.24.7"
+  version: 7.24.4
+  resolution: "@babel/preset-env@npm:7.24.4"
   dependencies:
-    "@babel/compat-data": "npm:^7.24.7"
-    "@babel/helper-compilation-targets": "npm:^7.24.7"
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/helper-validator-option": "npm:^7.24.7"
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.7"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.7"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.7"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.7"
+    "@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.7"
-    "@babel/plugin-syntax-import-attributes": "npm:^7.24.7"
+    "@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"
@@ -2044,54 +2044,54 @@ __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.24.7"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.24.7"
-    "@babel/plugin-transform-async-to-generator": "npm:^7.24.7"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.7"
-    "@babel/plugin-transform-block-scoping": "npm:^7.24.7"
-    "@babel/plugin-transform-class-properties": "npm:^7.24.7"
-    "@babel/plugin-transform-class-static-block": "npm:^7.24.7"
-    "@babel/plugin-transform-classes": "npm:^7.24.7"
-    "@babel/plugin-transform-computed-properties": "npm:^7.24.7"
-    "@babel/plugin-transform-destructuring": "npm:^7.24.7"
-    "@babel/plugin-transform-dotall-regex": "npm:^7.24.7"
-    "@babel/plugin-transform-duplicate-keys": "npm:^7.24.7"
-    "@babel/plugin-transform-dynamic-import": "npm:^7.24.7"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.7"
-    "@babel/plugin-transform-export-namespace-from": "npm:^7.24.7"
-    "@babel/plugin-transform-for-of": "npm:^7.24.7"
-    "@babel/plugin-transform-function-name": "npm:^7.24.7"
-    "@babel/plugin-transform-json-strings": "npm:^7.24.7"
-    "@babel/plugin-transform-literals": "npm:^7.24.7"
-    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.7"
-    "@babel/plugin-transform-member-expression-literals": "npm:^7.24.7"
-    "@babel/plugin-transform-modules-amd": "npm:^7.24.7"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.7"
-    "@babel/plugin-transform-modules-systemjs": "npm:^7.24.7"
-    "@babel/plugin-transform-modules-umd": "npm:^7.24.7"
-    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.24.7"
-    "@babel/plugin-transform-new-target": "npm:^7.24.7"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.7"
-    "@babel/plugin-transform-numeric-separator": "npm:^7.24.7"
-    "@babel/plugin-transform-object-rest-spread": "npm:^7.24.7"
-    "@babel/plugin-transform-object-super": "npm:^7.24.7"
-    "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.7"
-    "@babel/plugin-transform-optional-chaining": "npm:^7.24.7"
-    "@babel/plugin-transform-parameters": "npm:^7.24.7"
-    "@babel/plugin-transform-private-methods": "npm:^7.24.7"
-    "@babel/plugin-transform-private-property-in-object": "npm:^7.24.7"
-    "@babel/plugin-transform-property-literals": "npm:^7.24.7"
-    "@babel/plugin-transform-regenerator": "npm:^7.24.7"
-    "@babel/plugin-transform-reserved-words": "npm:^7.24.7"
-    "@babel/plugin-transform-shorthand-properties": "npm:^7.24.7"
-    "@babel/plugin-transform-spread": "npm:^7.24.7"
-    "@babel/plugin-transform-sticky-regex": "npm:^7.24.7"
-    "@babel/plugin-transform-template-literals": "npm:^7.24.7"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.24.7"
-    "@babel/plugin-transform-unicode-escapes": "npm:^7.24.7"
-    "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.7"
-    "@babel/plugin-transform-unicode-regex": "npm:^7.24.7"
-    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.7"
+    "@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"
@@ -2100,20 +2100,20 @@ __metadata:
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/c6714346f3ccc1271eaa90051c75b8bb57b20ef57408ab68740e2f3552693ae0ee5a4bcce3a00211d40e4947af1f7b8ab422066b953f0095461937fb72d11274
+  checksum: 10c0/72a79d0cd38cb26f143509dd0c58db34b5b1ae90116863f55a404f0eb06a64a3cdcb1abd0b6435fafe463bbf55b82ffcf56aedee91e8d37797bf53e4ae74c413
   languageName: node
   linkType: hard
 
 "@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.15":
-  version: 7.24.7
-  resolution: "@babel/preset-flow@npm:7.24.7"
+  version: 7.22.15
+  resolution: "@babel/preset-flow@npm:7.22.15"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/helper-validator-option": "npm:^7.24.7"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.24.7"
+    "@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"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/2a99333b9aac17033cefe17fb9d8c41b20c4f2cd3eab34f56c20d7c1c528cc1cca7e6d909de92fc700739a505b43166c9de62423f8a30b484161ebdf9474e217
+  checksum: 10c0/7eef0c84ec1889d6c4f7a67d7d1a81703420eed123a8c23f25af148eead77907f0bd701f3e729fdb37d3ddb2a373bf43938b36a9ba17f546111ddb9521466b92
   languageName: node
   linkType: hard
 
@@ -2131,33 +2131,33 @@ __metadata:
   linkType: hard
 
 "@babel/preset-react@npm:^7.24.1":
-  version: 7.24.7
-  resolution: "@babel/preset-react@npm:7.24.7"
+  version: 7.24.1
+  resolution: "@babel/preset-react@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/helper-validator-option": "npm:^7.24.7"
-    "@babel/plugin-transform-react-display-name": "npm:^7.24.7"
-    "@babel/plugin-transform-react-jsx": "npm:^7.24.7"
-    "@babel/plugin-transform-react-jsx-development": "npm:^7.24.7"
-    "@babel/plugin-transform-react-pure-annotations": "npm:^7.24.7"
+    "@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.24.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/9658b685b25cedaadd0b65c4e663fbc7f57394b5036ddb4c99b1a75b0711fb83292c1c625d605c05b73413fc7a6dc20e532627f6a39b6dc8d4e00415479b054c
+  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.24.1":
-  version: 7.24.7
-  resolution: "@babel/preset-typescript@npm:7.24.7"
+  version: 7.24.1
+  resolution: "@babel/preset-typescript@npm:7.24.1"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.24.7"
-    "@babel/helper-validator-option": "npm:^7.24.7"
-    "@babel/plugin-syntax-jsx": "npm:^7.24.7"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.24.7"
-    "@babel/plugin-transform-typescript": "npm:^7.24.7"
+    "@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/986bc0978eedb4da33aba8e1e13a3426dd1829515313b7e8f4ba5d8c18aff1663b468939d471814e7acf4045d326ae6cff37239878d169ac3fe53a8fde71f8ee
+  checksum: 10c0/0033dc6fbc898ed0d8017c83a2dd5e095c82909e2f83e48cf9f305e3e9287148758c179ad90f27912cf98ca68bfec3643c57c70c0ca34d3a6c50dc8243aef406
   languageName: node
   linkType: hard
 
@@ -2267,7 +2267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6":
   version: 7.24.7
   resolution: "@babel/types@npm:7.24.7"
   dependencies:
@@ -3757,19 +3757,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ndelangen/fs-extra-unified@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@ndelangen/fs-extra-unified@npm:1.0.3"
-  peerDependencies:
-    "@types/fs-extra": ^11.0.0
-    fs-extra: ^11.0.0
-  peerDependenciesMeta:
-    "@types/fs-extra":
-      optional: true
-  checksum: 10c0/397e94eb34a644e33bb7e0cf263da2758efb44924dd6b4bd90e82184868cf4dca5f116b628a9dd0837e3c5c9a36735069bec4312f5d6be2b9997cb0fd3712aaa
-  languageName: node
-  linkType: hard
-
 "@ndelangen/get-tarball@npm:^3.0.7":
   version: 3.0.9
   resolution: "@ndelangen/get-tarball@npm:3.0.9"
@@ -4497,15 +4484,17 @@ __metadata:
   linkType: hard
 
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.1, @pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
-  version: 0.5.15
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.15"
+  version: 0.5.11
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
   dependencies:
-    ansi-html: "npm:^0.0.9"
+    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:^4.2.0"
+    schema-utils: "npm:^3.0.0"
     source-map: "npm:^0.7.3"
   peerDependencies:
     "@types/webpack": 4.x || 5.x
@@ -4513,7 +4502,7 @@ __metadata:
     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 || 5.x
+    webpack-dev-server: 3.x || 4.x
     webpack-hot-middleware: 2.x
     webpack-plugin-serve: 0.x || 1.x
   peerDependenciesMeta:
@@ -4529,7 +4518,7 @@ __metadata:
       optional: true
     webpack-plugin-serve:
       optional: true
-  checksum: 10c0/ba310aa4d53070f59c8a374d1d256c5965c044c0c3fb1ff6b55353fb5e86de08a490a7bd59a31f0d4951f8f29f81864c7df224fe1342543a95d048b7413ff171
+  checksum: 10c0/a9c8468417a14a23339e313cff6ddb8029e0637748973070e61d83a2534620b3492b9a42ecf9eb9d63cb709f53c17fe814bc7dd68d64c300db338e9fd7287bc4
   languageName: node
   linkType: hard
 
@@ -5380,7 +5369,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-themes@workspace:addons/themes":
+"@storybook/addon-themes@workspace:*, @storybook/addon-themes@workspace:addons/themes":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-themes@workspace:addons/themes"
   dependencies:
@@ -5644,10 +5633,35 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli-storybook"
   dependencies:
+    "@babel/core": "npm:^7.24.4"
+    "@babel/types": "npm:^7.24.0"
+    "@storybook/codemod": "workspace:*"
+    "@types/cross-spawn": "npm:^6.0.2"
+    "@types/prompts": "npm:^2.0.9"
+    "@types/semver": "npm:^7.3.4"
+    boxen: "npm:^7.1.1"
+    chalk: "npm:^4.1.0"
+    commander: "npm:^6.2.1"
+    create-storybook: "workspace:*"
+    cross-spawn: "npm:^7.0.3"
+    envinfo: "npm:^7.7.3"
+    fd-package-json: "npm:^1.2.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    giget: "npm:^1.0.0"
+    globby: "npm:^14.0.1"
+    jscodeshift: "npm:^0.15.1"
+    leven: "npm:^3.1.0"
+    prompts: "npm:^2.4.0"
+    semver: "npm:^7.3.7"
+    slash: "npm:^5.0.0"
     storybook: "workspace:*"
+    strip-ansi: "npm:^7.1.0"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+    typescript: "npm:^5.3.2"
   bin:
-    sb: ./index.js
-    storybook: ./index.js
+    cli: ./bin/index.cjs
   languageName: unknown
   linkType: soft
 
@@ -5756,7 +5770,7 @@ __metadata:
     "@emotion/styled": "npm:^11.11.0"
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
-    "@ndelangen/fs-extra-unified": "npm:^1.0.3"
+    "@ndelangen/get-tarball": "npm:^3.0.7"
     "@popperjs/core": "npm:^2.6.0"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
@@ -5782,10 +5796,11 @@ __metadata:
     "@types/picomatch": "npm:^2.3.0"
     "@types/prettier": "npm:^3.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
+    "@types/prompts": "npm:^2.0.9"
     "@types/qs": "npm:^6"
     "@types/react-syntax-highlighter": "npm:11.0.5"
     "@types/react-transition-group": "npm:^4"
-    "@types/semver": "npm:^7.3.4"
+    "@types/semver": "npm:^7.5.8"
     "@types/ws": "npm:^8"
     "@vitest/utils": "npm:^1.3.1"
     "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
@@ -5802,6 +5817,7 @@ __metadata:
     chai: "npm:^4.4.1"
     chalk: "npm:^5.3.0"
     cli-table3: "npm:^0.6.1"
+    commander: "npm:^6.2.1"
     comment-parser: "npm:^1.4.1"
     compression: "npm:^1.7.4"
     copy-to-clipboard: "npm:^3.3.1"
@@ -5809,6 +5825,7 @@ __metadata:
     css: "npm:^3.0.0"
     deep-object-diff: "npm:^1.1.0"
     dequal: "npm:^2.0.2"
+    detect-indent: "npm:^7.0.1"
     detect-package-manager: "npm:^3.0.2"
     detect-port: "npm:^1.3.0"
     diff: "npm:^5.2.0"
@@ -5827,12 +5844,14 @@ __metadata:
     flush-promises: "npm:^1.0.2"
     fs-extra: "npm:^11.1.0"
     fuse.js: "npm:^3.6.1"
+    get-npm-tarball-url: "npm:^2.0.3"
     glob: "npm:^10.0.0"
     globby: "npm:^14.0.1"
     handlebars: "npm:^4.7.7"
     js-yaml: "npm:^4.1.0"
     jsdoc-type-pratt-parser: "npm:^4.0.0"
     lazy-universal-dotenv: "npm:^4.0.0"
+    leven: "npm:^4.0.0"
     lodash: "npm:^4.17.21"
     markdown-to-jsx: "npm:^7.4.5"
     memoizerific: "npm:^1.11.3"
@@ -5860,9 +5879,10 @@ __metadata:
     recast: "npm:^0.23.5"
     require-from-string: "npm:^2.0.2"
     resolve-from: "npm:^5.0.0"
-    semver: "npm:^7.3.7"
+    semver: "npm:^7.6.2"
     slash: "npm:^5.0.0"
     store2: "npm:^2.14.2"
+    strip-json-comments: "npm:^5.0.1"
     telejson: "npm:^7.2.0"
     tiny-invariant: "npm:^1.3.1"
     tinyspy: "npm:^2.2.0"
@@ -6497,6 +6517,7 @@ __metadata:
     "@storybook/addon-onboarding": "workspace:*"
     "@storybook/addon-outline": "workspace:*"
     "@storybook/addon-storysource": "workspace:*"
+    "@storybook/addon-themes": "workspace:*"
     "@storybook/addon-toolbars": "workspace:*"
     "@storybook/addon-viewport": "workspace:*"
     "@storybook/angular": "workspace:*"
@@ -6563,6 +6584,7 @@ __metadata:
     "@typescript-eslint/parser": "npm:^6.18.1"
     "@vitejs/plugin-react": "npm:^3.0.1"
     "@vitest/coverage-v8": "npm:^1.2.2"
+    create-storybook: "workspace:*"
     cross-env: "npm:^7.0.3"
     danger: "npm:^12.3.3"
     esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
@@ -7250,9 +7272,9 @@ __metadata:
   linkType: hard
 
 "@types/babel__preset-env@npm:^7":
-  version: 7.9.7
-  resolution: "@types/babel__preset-env@npm:7.9.7"
-  checksum: 10c0/e1da078fee75841af512c7084e66f8a2b9136d72185d72c85c6fb41697358d330d195896d7d22834fca92fad1f16a8c0fb6269e890f9e6842c9a9972313b7baa
+  version: 7.9.6
+  resolution: "@types/babel__preset-env@npm:7.9.6"
+  checksum: 10c0/639bcf58094530eb8509b302de9c42fc1a9e44e236bcbfd218e987aba7a2c15052c3a1cac7ca7f260255e74beb3b489ff877b9870f8587394457cd3aa9f64934
   languageName: node
   linkType: hard
 
@@ -7848,9 +7870,9 @@ __metadata:
   linkType: hard
 
 "@types/qs@npm:*, @types/qs@npm:^6":
-  version: 6.9.15
-  resolution: "@types/qs@npm:6.9.15"
-  checksum: 10c0/49c5ff75ca3adb18a1939310042d273c9fc55920861bd8e5100c8a923b3cda90d759e1a95e18334092da1c8f7b820084687770c83a1ccef04fb2c6908117c823
+  version: 6.9.10
+  resolution: "@types/qs@npm:6.9.10"
+  checksum: 10c0/6be12e5f062d1b41eb037d59bf9cb65bc9410cedd5e6da832dfd7c8e2b3f4c91e81c9b90b51811140770e5052c6c4e8361181bd9437ddcd4515dc128b7c00353
   languageName: node
   linkType: hard
 
@@ -7949,10 +7971,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4, @types/semver@npm:^7.5.0, @types/semver@npm:^7.5.6":
-  version: 7.5.7
-  resolution: "@types/semver@npm:7.5.7"
-  checksum: 10c0/fb72d8b86a7779650f14ae89542f1da2ab624adb8188d98754b1d29a2fe3d41f0348bf9435b60ad145df1812fd2a09b3256779aa23b532c199f3dee59619a1eb
+"@types/semver@npm:^7.3.12, @types/semver@npm:^7.3.4, @types/semver@npm:^7.5.0, @types/semver@npm:^7.5.6, @types/semver@npm:^7.5.8":
+  version: 7.5.8
+  resolution: "@types/semver@npm:7.5.8"
+  checksum: 10c0/8663ff927234d1c5fcc04b33062cb2b9fcfbe0f5f351ed26c4d1e1581657deebd506b41ff7fdf89e787e3d33ce05854bc01686379b89e9c49b564c4cfa988efa
   languageName: node
   linkType: hard
 
@@ -8017,9 +8039,9 @@ __metadata:
   linkType: hard
 
 "@types/tapable@npm:^1":
-  version: 1.0.12
-  resolution: "@types/tapable@npm:1.0.12"
-  checksum: 10c0/d6a080f5839b323eb96dd5b65a6c3161c1297d8c2433eb52437912d1c3df54e38fce12ce7a57650f6453d96942298bd0935436e2501d09e407b7f41634483131
+  version: 1.0.9
+  resolution: "@types/tapable@npm:1.0.9"
+  checksum: 10c0/51e7a55432c3abf71ae5e13907eb01a576efdf66ddfcd4f2a765436e684e182df527885980d4f710250cd61304a61f7fe9d447b33fef8db1fa434a395c85933d
   languageName: node
   linkType: hard
 
@@ -8070,9 +8092,9 @@ __metadata:
   linkType: hard
 
 "@types/unist@npm:^2, @types/unist@npm:^2.0.0":
-  version: 2.0.10
-  resolution: "@types/unist@npm:2.0.10"
-  checksum: 10c0/5f247dc2229944355209ad5c8e83cfe29419fa7f0a6d557421b1985a1500444719cc9efcc42c652b55aab63c931813c88033e0202c1ac684bcd4829d66e44731
+  version: 2.0.8
+  resolution: "@types/unist@npm:2.0.8"
+  checksum: 10c0/2c4685d5258b4f543677d20dce0d72b8235e70b6c859af24fcf445f92dac98ec8a1faa0cfb43307466561fcd9dbd2534a4860000944401ac3314a685b5efe3d7
   languageName: node
   linkType: hard
 
@@ -8091,9 +8113,9 @@ __metadata:
   linkType: hard
 
 "@types/webpack-env@npm:^1.16.0, @types/webpack-env@npm:^1.18.0":
-  version: 1.18.5
-  resolution: "@types/webpack-env@npm:1.18.5"
-  checksum: 10c0/b9e4876e8c7cae419896249f9ed795db283c008fe1d38efa679cbbf05194fc2eea2a5bfb4ff4393d109e3a9895416dadf5f3ddd5c22931b678062230f860454e
+  version: 1.18.4
+  resolution: "@types/webpack-env@npm:1.18.4"
+  checksum: 10c0/3fa77dbff0ed71685404576b0a1cf74587567fe2ee1cfd11d56d6eefcab7a61e4c9ead0eced264e289d2cf0fc74296dbd55ed6c95774fe0fd6264d156c5a59f0
   languageName: node
   linkType: hard
 
@@ -8120,8 +8142,8 @@ __metadata:
   linkType: hard
 
 "@types/webpack@npm:^4":
-  version: 4.41.38
-  resolution: "@types/webpack@npm:4.41.38"
+  version: 4.41.34
+  resolution: "@types/webpack@npm:4.41.34"
   dependencies:
     "@types/node": "npm:*"
     "@types/tapable": "npm:^1"
@@ -8129,7 +8151,7 @@ __metadata:
     "@types/webpack-sources": "npm:*"
     anymatch: "npm:^3.0.0"
     source-map: "npm:^0.6.0"
-  checksum: 10c0/5a0a7465d45a0e7701a8c863e88c6cba7660b37e4aeab851c71baf505dbab2e178be1cac82488c2e7d0ea11fb703ceddb53476daec3ec9a004e2fc1554233483
+  checksum: 10c0/630ebd822e7ee85b7118d1c095370709ce493831365f7fd750bea88ac4726ef52df33cc25261922526e45b354c9fdb3edfabc7738d5b9ec18416fd502cda3838
   languageName: node
   linkType: hard
 
@@ -8433,12 +8455,12 @@ __metadata:
   linkType: hard
 
 "@vitejs/plugin-vue@npm:^4.4.0":
-  version: 4.6.2
-  resolution: "@vitejs/plugin-vue@npm:4.6.2"
+  version: 4.5.2
+  resolution: "@vitejs/plugin-vue@npm:4.5.2"
   peerDependencies:
     vite: ^4.0.0 || ^5.0.0
     vue: ^3.2.25
-  checksum: 10c0/8a8eb974936e4f0c7a66924240d122cd3a61af34498d7260f5920cf7a44ef4ef60e025a3f5d29df88e671ba32d5999c0fe1bc11d46bd838f51aa3a37a8f272c5
+  checksum: 10c0/dd024b9ee2eda3174e197bda2b42df30b594d1a7f50d20b4b0de01c5a130bd99b84452e8a8d597ade50f89106025346a56f7abbf63c560e82fe97223589d2514
   languageName: node
   linkType: hard
 
@@ -9435,15 +9457,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-html@npm:^0.0.9":
-  version: 0.0.9
-  resolution: "ansi-html@npm:0.0.9"
-  bin:
-    ansi-html: bin/ansi-html
-  checksum: 10c0/4a5de9802fb50193e32b51a9ea48dc0d7e4436b860cb819d7110c62f2bfb1410288e1a2f9a848269f5eab8f903797a7f0309fe4c552f92a92b61a5b759ed52bd
-  languageName: node
-  linkType: hard
-
 "ansi-regex@npm:^5.0.0, ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
@@ -9655,16 +9668,15 @@ __metadata:
   linkType: hard
 
 "array-includes@npm:^3.1.6, array-includes@npm:^3.1.7":
-  version: 3.1.8
-  resolution: "array-includes@npm:3.1.8"
+  version: 3.1.7
+  resolution: "array-includes@npm:3.1.7"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-    es-object-atoms: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.4"
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    es-abstract: "npm:^1.22.1"
+    get-intrinsic: "npm:^1.2.1"
     is-string: "npm:^1.0.7"
-  checksum: 10c0/5b1004d203e85873b96ddc493f090c9672fd6c80d7a60b798da8a14bff8a670ff95db5aafc9abc14a211943f05220dacf8ea17638ae0af1a6a47b8c0b48ce370
+  checksum: 10c0/692907bd7f19d06dc58ccb761f34b58f5dc0b437d2b47a8fe42a1501849a5cf5c27aed3d521a9702667827c2c85a7e75df00a402c438094d87fc43f39ebf9b2b
   languageName: node
   linkType: hard
 
@@ -10797,16 +10809,16 @@ __metadata:
   linkType: hard
 
 "browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.22.2, browserslist@npm:^4.23.0":
-  version: 4.23.2
-  resolution: "browserslist@npm:4.23.2"
+  version: 4.23.0
+  resolution: "browserslist@npm:4.23.0"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001640"
-    electron-to-chromium: "npm:^1.4.820"
+    caniuse-lite: "npm:^1.0.30001587"
+    electron-to-chromium: "npm:^1.4.668"
     node-releases: "npm:^2.0.14"
-    update-browserslist-db: "npm:^1.1.0"
+    update-browserslist-db: "npm:^1.0.13"
   bin:
     browserslist: cli.js
-  checksum: 10c0/0217d23c69ed61cdd2530c7019bf7c822cd74c51f8baab18dd62457fed3129f52499f8d3a6f809ae1fb7bb3050aa70caa9a529cc36c7478427966dbf429723a5
+  checksum: 10c0/8e9cc154529062128d02a7af4d8adeead83ca1df8cd9ee65a88e2161039f3d68a4d40fea7353cab6bae4c16182dec2fdd9a1cf7dc2a2935498cee1af0e998943
   languageName: node
   linkType: hard
 
@@ -11080,7 +11092,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001591, caniuse-lite@npm:^1.0.30001640":
+"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001591":
   version: 1.0.30001641
   resolution: "caniuse-lite@npm:1.0.30001641"
   checksum: 10c0/a065b641cfcc84b36955ee909bfd7313ad103d6a299f0fd261e0e4160e8f1cec79d685c5a9f11097a77687cf47154eddb8133163f2a34bcb8d73c45033a014d2
@@ -11946,9 +11958,9 @@ __metadata:
   linkType: hard
 
 "core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2":
-  version: 3.37.1
-  resolution: "core-js-pure@npm:3.37.1"
-  checksum: 10c0/38200d08862b4ef2207af72a7525f7b9ac750f5e1d84ef27a3e314aefa69518179a9b732f51ebe35c3b38606d9fa4f686fcf6eff067615cc293a3b1c84041e74
+  version: 3.33.0
+  resolution: "core-js-pure@npm:3.33.0"
+  checksum: 10c0/dbb683bf6c5d3671129e5029e0f8047a388818bb9720352c839f46ac5627b5fed763135b9a1df89452f2afee78e49639def6063e82fc6995c4e98c31f2892db5
   languageName: node
   linkType: hard
 
@@ -11960,9 +11972,9 @@ __metadata:
   linkType: hard
 
 "core-js@npm:^3.8.2":
-  version: 3.37.1
-  resolution: "core-js@npm:3.37.1"
-  checksum: 10c0/440eb51a7a39128a320225fe349f870a3641b96c9ecd26470227db730ef8c161ea298eaea621db66ec0ff622a85299efb4e23afebf889c0a1748616102307675
+  version: 3.33.0
+  resolution: "core-js@npm:3.33.0"
+  checksum: 10c0/f51192f311c2d75b94ebe4eb7210f91df2cb6de101b96da1a65f43cf52b9c5cfe1ce5ebebb86281e452d2ee949730afb72fb7ac826c655c9de3a92f793cf3b80
   languageName: node
   linkType: hard
 
@@ -12067,6 +12079,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"create-storybook@workspace:*, create-storybook@workspace:lib/create-storybook":
+  version: 0.0.0-use.local
+  resolution: "create-storybook@workspace:lib/create-storybook"
+  dependencies:
+    "@types/prompts": "npm:^2.0.9"
+    "@types/semver": "npm:^7.3.4"
+    "@types/util-deprecate": "npm:^1.0.0"
+    boxen: "npm:^7.1.1"
+    chalk: "npm:^4.1.0"
+    commander: "npm:^6.2.1"
+    execa: "npm:^5.0.0"
+    fd-package-json: "npm:^1.2.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    ora: "npm:^5.4.1"
+    prettier: "npm:^3.1.1"
+    prompts: "npm:^2.4.0"
+    semver: "npm:^7.3.7"
+    storybook: "workspace:*"
+    tiny-invariant: "npm:^1.3.1"
+    ts-dedent: "npm:^2.0.0"
+    typescript: "npm:^5.3.2"
+  bin:
+    create-storybook: ./bin/index.cjs
+  languageName: unknown
+  linkType: soft
+
 "critters@npm:0.0.22":
   version: 0.0.22
   resolution: "critters@npm:0.0.22"
@@ -12670,6 +12709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-indent@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "detect-indent@npm:7.0.1"
+  checksum: 10c0/47b6e3e3dda603c386e73b129f3e84844ae59bc2615f5072becf3cc02eab400bed5a4e6379c49d0b18cf630e80c2b07e87e0038b777addbc6ef793ad77dd05bc
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
@@ -12708,15 +12754,15 @@ __metadata:
   linkType: hard
 
 "detect-port@npm:^1.3.0, detect-port@npm:^1.5.1":
-  version: 1.6.1
-  resolution: "detect-port@npm:1.6.1"
+  version: 1.5.1
+  resolution: "detect-port@npm:1.5.1"
   dependencies:
     address: "npm:^1.0.1"
     debug: "npm:4"
   bin:
     detect: bin/detect-port.js
     detect-port: bin/detect-port.js
-  checksum: 10c0/4ea9eb46a637cb21220dd0a62b6074792894fc77b2cacbc9de533d1908b2eedafa7bfd7547baaa2ac1e9c7ba7c289b34b17db896dca6da142f4fc6e2060eee17
+  checksum: 10c0/f2b204ad3a9f8e8b53fea35fcc97469f31a8e3e786a2f59fbc886397e33b5f130c5f964bf001b9a64d990047c3824f6a439308461ff19801df04ab48a754639e
   languageName: node
   linkType: hard
 
@@ -13065,10 +13111,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.820":
-  version: 1.4.823
-  resolution: "electron-to-chromium@npm:1.4.823"
-  checksum: 10c0/772ad25e1305ab4a1a18beb9edae5d62ba55c5660c9d20a86c90e195d22da64dcf209ba8c9fb8172c76d1cbff12ea56a83eb75863bd2b22fb7ddabcd1d73c1e7
+"electron-to-chromium@npm:^1.4.668":
+  version: 1.4.699
+  resolution: "electron-to-chromium@npm:1.4.699"
+  checksum: 10c0/328051c526d840f137492ff870b782785666880e5a3df14abe9d04a843b1bfbb07139bf6496ada7958f97b482044cd6021d95db57e46f96b598b36e19c7da93c
   languageName: node
   linkType: hard
 
@@ -13423,7 +13469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.22.4, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2":
+"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.22.4, es-abstract@npm:^1.23.0":
   version: 1.23.3
   resolution: "es-abstract@npm:1.23.3"
   dependencies:
@@ -13718,7 +13764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1, escalade@npm:^3.1.2":
+"escalade@npm:^3.1.1":
   version: 3.1.2
   resolution: "escalade@npm:3.1.2"
   checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
@@ -15025,9 +15071,9 @@ __metadata:
   linkType: hard
 
 "flow-parser@npm:0.*":
-  version: 0.239.1
-  resolution: "flow-parser@npm:0.239.1"
-  checksum: 10c0/a95186e47cce6e0f401845eae8ec863480817b879f18b34564af51efd545b04193e2c4a0d429a5961d34e4c5f02c213adda008a15ac034bbe4ca0a4e2a5773c0
+  version: 0.217.2
+  resolution: "flow-parser@npm:0.217.2"
+  checksum: 10c0/d61127283db052fddf8275b070eea76dda5d2926aea3d8659250e168d69478f4ebdbc2bede83aa05c29f464c420ce1d701691278d3041af0492bfc16193277b5
   languageName: node
   linkType: hard
 
@@ -15789,12 +15835,11 @@ __metadata:
   linkType: hard
 
 "globalthis@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "globalthis@npm:1.0.4"
+  version: 1.0.3
+  resolution: "globalthis@npm:1.0.3"
   dependencies:
-    define-properties: "npm:^1.2.1"
-    gopd: "npm:^1.0.1"
-  checksum: 10c0/9d156f313af79d80b1566b93e19285f481c591ad6d0d319b4be5e03750d004dde40a39a0f26f7e635f9007a3600802f53ecd85a759b86f109e80a5f705e01846
+    define-properties: "npm:^1.1.3"
+  checksum: 10c0/0db6e9af102a5254630351557ac15e6909bc7459d3e3f6b001e59fe784c96d31108818f032d9095739355a88467459e6488ff16584ee6250cd8c27dec05af4b0
   languageName: node
   linkType: hard
 
@@ -16892,7 +16937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5, internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
   dependencies:
@@ -17987,14 +18032,11 @@ __metadata:
   linkType: hard
 
 "json-stable-stringify@npm:^1.0.1":
-  version: 1.1.1
-  resolution: "json-stable-stringify@npm:1.1.1"
+  version: 1.0.2
+  resolution: "json-stable-stringify@npm:1.0.2"
   dependencies:
-    call-bind: "npm:^1.0.5"
-    isarray: "npm:^2.0.5"
     jsonify: "npm:^0.0.1"
-    object-keys: "npm:^1.1.1"
-  checksum: 10c0/3801e3eeccbd030afb970f54bea690a079cfea7d9ed206a1b17ca9367f4b7772c764bf77a48f03e56b50e5f7ee7d11c52339fe20d8d7ccead003e4ca69e4cfde
+  checksum: 10c0/502d021c3c59c09587faa40d7693d77c00460fd6c68bae95d6e35804909ec8c4aec71b136d3a09df61a7ebf803eb6e820f23ede76b77e74b8b02c76afb2ada8c
   languageName: node
   linkType: hard
 
@@ -18340,6 +18382,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"leven@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "leven@npm:4.0.0"
+  checksum: 10c0/393bd949d93103d9ef487be96321bdb02c2e7695e372193f650642e1ad653c61b03da16bf55e45d442db59c7b6407eb947a7748b5777e48ddf0ada25f8b2a815
+  languageName: node
+  linkType: hard
+
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"
@@ -21249,25 +21298,24 @@ __metadata:
   linkType: hard
 
 "object.entries@npm:^1.1.5, object.entries@npm:^1.1.6, object.entries@npm:^1.1.7":
-  version: 1.1.8
-  resolution: "object.entries@npm:1.1.8"
+  version: 1.1.7
+  resolution: "object.entries@npm:1.1.7"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/db9ea979d2956a3bc26c262da4a4d212d36f374652cc4c13efdd069c1a519c16571c137e2893d1c46e1cb0e15c88fd6419eaf410c945f329f09835487d7e65d3
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    es-abstract: "npm:^1.22.1"
+  checksum: 10c0/3ad1899cc7bf14546bf28f4a9b363ae8690b90948fcfbcac4c808395435d760f26193d9cae95337ce0e3c1e5c1f4fa45f7b46b31b68d389e9e117fce38775d86
   languageName: node
   linkType: hard
 
 "object.fromentries@npm:^2.0.6, object.fromentries@npm:^2.0.7":
-  version: 2.0.8
-  resolution: "object.fromentries@npm:2.0.8"
+  version: 2.0.7
+  resolution: "object.fromentries@npm:2.0.7"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/cd4327e6c3369cfa805deb4cbbe919bfb7d3aeebf0bcaba291bb568ea7169f8f8cdbcabe2f00b40db0c20cd20f08e11b5f3a5a36fb7dd3fe04850c50db3bf83b
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    es-abstract: "npm:^1.22.1"
+  checksum: 10c0/071745c21f6fc9e6c914691f2532c1fb60ad967e5ddc52801d09958b5de926566299d07ae14466452a7efd29015f9145d6c09c573d93a0dc6f1683ee0ec2b93b
   languageName: node
   linkType: hard
 
@@ -21304,13 +21352,13 @@ __metadata:
   linkType: hard
 
 "object.values@npm:^1.1.6, object.values@npm:^1.1.7":
-  version: 1.2.0
-  resolution: "object.values@npm:1.2.0"
+  version: 1.1.7
+  resolution: "object.values@npm:1.1.7"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-object-atoms: "npm:^1.0.0"
-  checksum: 10c0/15809dc40fd6c5529501324fec5ff08570b7d70fb5ebbe8e2b3901afec35cf2b3dc484d1210c6c642cd3e7e0a5e18dd1d6850115337fef46bdae14ab0cb18ac3
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    es-abstract: "npm:^1.22.1"
+  checksum: 10c0/e869d6a37fb7afdd0054dea49036d6ccebb84854a8848a093bbd1bc516f53e690bba88f0bc3e83fdfa74c601469ee6989c9b13359cda9604144c6e732fad3b6b
   languageName: node
   linkType: hard
 
@@ -22038,7 +22086,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1":
+"picocolors@npm:^1.0.0":
   version: 1.0.1
   resolution: "picocolors@npm:1.0.1"
   checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
@@ -22422,13 +22470,13 @@ __metadata:
   linkType: hard
 
 "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.39
-  resolution: "postcss@npm:8.4.39"
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
   dependencies:
     nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.1"
+    picocolors: "npm:^1.0.0"
     source-map-js: "npm:^1.2.0"
-  checksum: 10c0/16f5ac3c4e32ee76d1582b3c0dcf1a1fdb91334a45ad755eeb881ccc50318fb8d64047de4f1601ac96e30061df203f0f2e2edbdc0bfc49b9c57bc9fb9bedaea3
+  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
   languageName: node
   linkType: hard
 
@@ -24309,9 +24357,9 @@ __metadata:
   linkType: hard
 
 "rfdc@npm:^1.3.0":
-  version: 1.4.1
-  resolution: "rfdc@npm:1.4.1"
-  checksum: 10c0/4614e4292356cafade0b6031527eea9bc90f2372a22c012313be1dcc69a3b90c7338158b414539be863fa95bfcb2ddcd0587be696841af4e6679d85e62c060c7
+  version: 1.3.0
+  resolution: "rfdc@npm:1.3.0"
+  checksum: 10c0/a17fd7b81f42c7ae4cb932abd7b2f677b04cc462a03619fb46945ae1ccae17c3bc87c020ffdde1751cbfa8549860a2883486fdcabc9b9de3f3108af32b69a667
   languageName: node
   linkType: hard
 
@@ -24642,7 +24690,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
+"schema-utils@npm:^3.0.0, schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
   dependencies:
@@ -24653,7 +24701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^4.0.0, schema-utils@npm:^4.2.0":
+"schema-utils@npm:^4.0.0":
   version: 4.2.0
   resolution: "schema-utils@npm:4.2.0"
   dependencies:
@@ -24716,7 +24764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0":
+"semver@npm:7.6.0":
   version: 7.6.0
   resolution: "semver@npm:7.6.0"
   dependencies:
@@ -24745,6 +24793,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2":
+  version: 7.6.2
+  resolution: "semver@npm:7.6.2"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
+  languageName: node
+  linkType: hard
+
 "send@npm:0.18.0":
   version: 0.18.0
   resolution: "send@npm:0.18.0"
@@ -24823,7 +24880,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-name@npm:^2.0.1, set-function-name@npm:^2.0.2":
+"set-function-name@npm:^2.0.0, set-function-name@npm:^2.0.1":
   version: 2.0.2
   resolution: "set-function-name@npm:2.0.2"
   dependencies:
@@ -25521,9 +25578,9 @@ __metadata:
   linkType: hard
 
 "store2@npm:^2.14.2":
-  version: 2.14.3
-  resolution: "store2@npm:2.14.3"
-  checksum: 10c0/22e1096e6d69590672ca0b7f891d82b060837ef4c3e5df0d4563e6cbed14c52ddf2589fa94b79f4311b6ec41d95d6142e5d01d194539e0175c3fb4090cca8244
+  version: 2.14.2
+  resolution: "store2@npm:2.14.2"
+  checksum: 10c0/2f27c3eaa7207b81410e170e7c41379816d22c1566308a9d97fbf853c4facff531fcb2a85f085c7503c578736570972f747c26018ebeaba7d1341fb82a7b6d52
   languageName: node
   linkType: hard
 
@@ -25531,42 +25588,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli"
   dependencies:
-    "@babel/core": "npm:^7.24.4"
-    "@babel/types": "npm:^7.24.0"
-    "@ndelangen/get-tarball": "npm:^3.0.7"
-    "@storybook/codemod": "workspace:*"
     "@storybook/core": "workspace:*"
-    "@types/cross-spawn": "npm:^6.0.2"
-    "@types/prompts": "npm:^2.0.9"
-    "@types/semver": "npm:^7.3.4"
-    "@types/util-deprecate": "npm:^1.0.0"
-    "@yarnpkg/fslib": "npm:2.10.3"
-    "@yarnpkg/libzip": "npm:2.3.0"
-    boxen: "npm:^7.1.1"
-    chalk: "npm:^4.1.0"
-    commander: "npm:^6.2.1"
-    cross-spawn: "npm:^7.0.3"
-    detect-indent: "npm:^6.1.0"
-    envinfo: "npm:^7.7.3"
-    execa: "npm:^5.0.0"
-    fd-package-json: "npm:^1.2.0"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^11.1.0"
-    get-npm-tarball-url: "npm:^2.0.3"
-    giget: "npm:^1.0.0"
-    globby: "npm:^14.0.1"
-    jscodeshift: "npm:^0.15.1"
-    leven: "npm:^3.1.0"
-    ora: "npm:^5.4.1"
-    prettier: "npm:^3.1.1"
-    prompts: "npm:^2.4.0"
-    semver: "npm:^7.3.7"
-    slash: "npm:^5.0.0"
-    strip-ansi: "npm:^7.1.0"
-    strip-json-comments: "npm:^3.1.1"
-    tempy: "npm:^3.1.0"
-    tiny-invariant: "npm:^1.3.1"
-    ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   bin:
     getstorybook: ./bin/index.cjs
@@ -25668,22 +25690,19 @@ __metadata:
   linkType: hard
 
 "string.prototype.matchall@npm:^4.0.8":
-  version: 4.0.11
-  resolution: "string.prototype.matchall@npm:4.0.11"
+  version: 4.0.10
+  resolution: "string.prototype.matchall@npm:4.0.10"
   dependencies:
-    call-bind: "npm:^1.0.7"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.2"
-    es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.4"
-    gopd: "npm:^1.0.1"
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    es-abstract: "npm:^1.22.1"
+    get-intrinsic: "npm:^1.2.1"
     has-symbols: "npm:^1.0.3"
-    internal-slot: "npm:^1.0.7"
-    regexp.prototype.flags: "npm:^1.5.2"
-    set-function-name: "npm:^2.0.2"
-    side-channel: "npm:^1.0.6"
-  checksum: 10c0/915a2562ac9ab5e01b7be6fd8baa0b2b233a0a9aa975fcb2ec13cc26f08fb9a3e85d5abdaa533c99c6fc4c5b65b914eba3d80c4aff9792a4c9fed403f28f7d9d
+    internal-slot: "npm:^1.0.5"
+    regexp.prototype.flags: "npm:^1.5.0"
+    set-function-name: "npm:^2.0.0"
+    side-channel: "npm:^1.0.4"
+  checksum: 10c0/cd7495fb0de16d43efeee3887b98701941f3817bd5f09351ad1825b023d307720c86394d56d56380563d97767ab25bf5448db239fcecbb85c28e2180f23e324a
   languageName: node
   linkType: hard
 
@@ -25827,6 +25846,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-json-comments@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "strip-json-comments@npm:5.0.1"
+  checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982
+  languageName: node
+  linkType: hard
+
 "strip-literal@npm:^2.0.0":
   version: 2.1.0
   resolution: "strip-literal@npm:2.1.0"
@@ -26219,13 +26245,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"temp-dir@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "temp-dir@npm:3.0.0"
-  checksum: 10c0/a86978a400984cd5f315b77ebf3fe53bb58c61f192278cafcb1f3fb32d584a21dc8e08b93171d7874b7cc972234d3455c467306cc1bfc4524b622e5ad3bfd671
-  languageName: node
-  linkType: hard
-
 "temp@npm:^0.8.4":
   version: 0.8.4
   resolution: "temp@npm:0.8.4"
@@ -26235,18 +26254,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tempy@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "tempy@npm:3.1.0"
-  dependencies:
-    is-stream: "npm:^3.0.0"
-    temp-dir: "npm:^3.0.0"
-    type-fest: "npm:^2.12.2"
-    unique-string: "npm:^3.0.0"
-  checksum: 10c0/b88e70baa8d935ba8f0e0372b59ad1a961121f098da5fb4a6e05bec98ec32a49026b553532fb75c1c102ec782fd4c6a6bde0d46cbe87013fa324451ce476fb76
-  languageName: node
-  linkType: hard
-
 "terser-webpack-plugin@npm:*, terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10":
   version: 5.3.10
   resolution: "terser-webpack-plugin@npm:5.3.10"
@@ -27397,17 +27404,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "update-browserslist-db@npm:1.1.0"
+"update-browserslist-db@npm:^1.0.13":
+  version: 1.0.13
+  resolution: "update-browserslist-db@npm:1.0.13"
   dependencies:
-    escalade: "npm:^3.1.2"
-    picocolors: "npm:^1.0.1"
+    escalade: "npm:^3.1.1"
+    picocolors: "npm:^1.0.0"
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10c0/a7452de47785842736fb71547651c5bbe5b4dc1e3722ccf48a704b7b34e4dcf633991eaa8e4a6a517ffb738b3252eede3773bef673ef9021baa26b056d63a5b9
+  checksum: 10c0/e52b8b521c78ce1e0c775f356cd16a9c22c70d25f3e01180839c407a5dc787fb05a13f67560cbaf316770d26fa99f78f1acd711b1b54a4f35d4820d4ea7136e6
   languageName: node
   linkType: hard
 
@@ -27445,8 +27452,8 @@ __metadata:
   linkType: hard
 
 "use-callback-ref@npm:^1.3.0":
-  version: 1.3.2
-  resolution: "use-callback-ref@npm:1.3.2"
+  version: 1.3.1
+  resolution: "use-callback-ref@npm:1.3.1"
   dependencies:
     tslib: "npm:^2.0.0"
   peerDependencies:
@@ -27455,7 +27462,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/d232c37160fe3970c99255da19b5fb5299fb5926a5d6141d928a87feb47732c323d29be2f8137d3b1e5499c70d284cd1d9cfad703cc58179db8be24d7dd8f1f2
+  checksum: 10c0/6666cd62e13053d03e453b5199037cb8f6475a8f55afd664ff488bd8f2ee2ede4da3b220dd7e60f5ecd4926133364fbf4b1aed463eeb8203e7c5be3b1533b59b
   languageName: node
   linkType: hard
 
@@ -27798,8 +27805,8 @@ __metadata:
   linkType: hard
 
 "vite@npm:^4.0.0, vite@npm:^4.0.4":
-  version: 4.5.3
-  resolution: "vite@npm:4.5.3"
+  version: 4.5.1
+  resolution: "vite@npm:4.5.1"
   dependencies:
     esbuild: "npm:^0.18.10"
     fsevents: "npm:~2.3.2"
@@ -27833,7 +27840,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/caeb1eecc0a8e0865782899e2f83d2993a9816562badc1c8291316d80d49b82f12038abd8cb8b8c627b6f369f58dfb25972ef4517d5e6e1b6e1bf7ee5b63a8a6
+  checksum: 10c0/352a94b13f793e4bcbc424d680a32507343223eeda8917fde0f23c1fa1ba3db7c806dade8461ca5cfb270154ddb8895a219fdd4384519fe9b8e46d1cf491a890
   languageName: node
   linkType: hard
 
@@ -28325,13 +28332,13 @@ __metadata:
   linkType: hard
 
 "webpack-hot-middleware@npm:^2.25.1":
-  version: 2.26.1
-  resolution: "webpack-hot-middleware@npm:2.26.1"
+  version: 2.25.4
+  resolution: "webpack-hot-middleware@npm:2.25.4"
   dependencies:
     ansi-html-community: "npm:0.0.8"
     html-entities: "npm:^2.1.0"
     strip-ansi: "npm:^6.0.0"
-  checksum: 10c0/13a3e78009e373b4ee990ffe1d4d49046e9893148a7106f063e11f962d02b744ea58b1dec25f5e76723c9dce678b9e68c883e7f2af2940aaf4de7aab31264c83
+  checksum: 10c0/c0702d308a39bdbc9277d66df50272e8c358c2238cecb0881df57136f54cb7a3d8291320b13075325b58f7a3cbf7a1ef10829554a5bc2ddfa3effbf416dc8e8c
   languageName: node
   linkType: hard
 
@@ -28781,11 +28788,9 @@ __metadata:
   linkType: hard
 
 "yaml@npm:^2.0.0, yaml@npm:^2.3.1":
-  version: 2.4.5
-  resolution: "yaml@npm:2.4.5"
-  bin:
-    yaml: bin.mjs
-  checksum: 10c0/e1ee78b381e5c710f715cc4082fd10fc82f7f5c92bd6f075771d20559e175616f56abf1c411f545ea0e9e16e4f84a83a50b42764af5f16ec006328ba9476bb31
+  version: 2.3.4
+  resolution: "yaml@npm:2.3.4"
+  checksum: 10c0/cf03b68f8fef5e8516b0f0b54edaf2459f1648317fc6210391cf606d247e678b449382f4bd01f77392538429e306c7cba8ff46ff6b37cac4de9a76aff33bd9e1
   languageName: node
   linkType: hard
 
diff --git a/docs/_assets/api/story-pipeline.png b/docs/_assets/api/story-pipeline.png
index 7e3932de10e2..f709265f2135 100644
Binary files a/docs/_assets/api/story-pipeline.png and b/docs/_assets/api/story-pipeline.png differ
diff --git a/docs/_snippets/button-snapshot-test-portable-stories.md b/docs/_snippets/button-snapshot-test-portable-stories.md
index 3afb7bdac9ec..bdf487cfc1e6 100644
--- a/docs/_snippets/button-snapshot-test-portable-stories.md
+++ b/docs/_snippets/button-snapshot-test-portable-stories.md
@@ -5,7 +5,7 @@ import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  await Primary.play();
+  await Primary.run();
   expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
@@ -21,7 +21,7 @@ import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  await Primary.play();
+  await Primary.run();
   expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
@@ -37,7 +37,7 @@ import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  await Primary.play();
+  await Primary.run();
   expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
@@ -53,7 +53,7 @@ import * as stories from '../stories/Button.stories';
 
 const { Primary } = composeStories(stories);
 test('Button snapshot', async () => {
-  await Primary.play();
+  await Primary.run();
   expect(document.body.firstChild).toMatchSnapshot();
 });
 ```
diff --git a/docs/_snippets/component-test-with-testing-library.md b/docs/_snippets/component-test-with-testing-library.md
index a8fd8558dde1..0ac1e206d6b1 100644
--- a/docs/_snippets/component-test-with-testing-library.md
+++ b/docs/_snippets/component-test-with-testing-library.md
@@ -47,7 +47,7 @@ const { InvalidForm } = composeStories(stories);
 
 test('Checks if the form is valid', async () => {
   // Renders the composed story
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -71,7 +71,7 @@ const { InvalidForm } = composeStories(stories);
 
 test('Checks if the form is valid', async () => {
   // Renders the composed story
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -95,7 +95,7 @@ const { InvalidForm } = composeStories(stories);
 
 it('Checks if the form is valid', async () => {
   // Renders the composed story
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   await fireEvent.click(screen.getByText('Submit'));
 
@@ -115,7 +115,7 @@ const { InvalidForm } = composeStories(stories);
 
 test('Checks if the form is valid', async () => {
   // Renders the composed story
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -139,7 +139,7 @@ const { InvalidForm } = composeStories(stories);
 
 test('Checks if the form is valid', async () => {
   // Renders the composed story
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
diff --git a/docs/_snippets/individual-snapshot-tests-portable-stories.md b/docs/_snippets/individual-snapshot-tests-portable-stories.md
index 6a51eb125440..14490c429f15 100644
--- a/docs/_snippets/individual-snapshot-tests-portable-stories.md
+++ b/docs/_snippets/individual-snapshot-tests-portable-stories.md
@@ -51,7 +51,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
@@ -131,7 +131,7 @@ describe("Stories Snapshots", () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
@@ -191,7 +191,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
@@ -262,7 +262,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           // Defines the custom snapshot path location and file name
diff --git a/docs/_snippets/multiple-stories-test.md b/docs/_snippets/multiple-stories-test.md
index 19b6d38d2b61..5610d4c144cd 100644
--- a/docs/_snippets/multiple-stories-test.md
+++ b/docs/_snippets/multiple-stories-test.md
@@ -8,7 +8,7 @@ import * as FormStories from './LoginForm.stories';
 const { InvalidForm, ValidForm } = composeStories(FormStories);
 
 test('Tests invalid form state', async () => {
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -21,7 +21,7 @@ test('Tests invalid form state', async () => {
 });
 
 test('Tests filled form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -44,7 +44,7 @@ import * as FormStories from './LoginForm.stories';
 const { InvalidForm, ValidForm } = composeStories(FormStories);
 
 test('Tests invalid form state', async () => {
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -57,7 +57,7 @@ test('Tests invalid form state', async () => {
 });
 
 test('Tests filled form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -80,7 +80,7 @@ import * as FormStories from './LoginForm.stories';
 const { InvalidForm, ValidForm } = composeStories(FormStories);
 
 test('Tests invalid form state', async () => {
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -93,7 +93,7 @@ test('Tests invalid form state', async () => {
 });
 
 test('Tests filled form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -116,7 +116,7 @@ import * as FormStories from './LoginForm.stories';
 const { InvalidForm, ValidForm } = composeStories(FormStories);
 
 test('Tests invalid form state', async () => {
-  await InvalidForm.play();
+  await InvalidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -129,7 +129,7 @@ test('Tests invalid form state', async () => {
 });
 
 test('Tests filled form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
diff --git a/docs/_snippets/portable-stories-jest-compose-story.md b/docs/_snippets/portable-stories-jest-compose-story.md
index ed50a5540ba8..610283b5f339 100644
--- a/docs/_snippets/portable-stories-jest-compose-story.md
+++ b/docs/_snippets/portable-stories-jest-compose-story.md
@@ -11,7 +11,7 @@ test('onclick handler is called', () => {
   const Primary = composeStory(PrimaryStory, meta);
 
   const onClickSpy = jest.fn();
-  await Primary.play({ args: { ...Primary.args, onClick: onClickSpy } });
+  await Primary.run({ args: { ...Primary.args, onClick: onClickSpy } });
 
   const buttonElement = screen.getByRole('button');
   buttonElement.click();
@@ -31,7 +31,7 @@ test('onclick handler is called', () => {
   const Primary = composeStory(PrimaryStory, meta);
 
   const onClickSpy = jest.fn();
-  await Primary.play({ args: { ...Primary.args, onClick: onClickSpy } });
+  await Primary.run({ args: { ...Primary.args, onClick: onClickSpy } });
 
   const buttonElement = screen.getByRole('button');
   buttonElement.click();
diff --git a/docs/_snippets/portable-stories-jest-multi-snapshot-test.md b/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
index bf9fb2e2426e..4845a1abd69e 100644
--- a/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
+++ b/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
@@ -13,7 +13,7 @@ describe(options.suite, () => {
       stories.forEach(({ name, story }) => {
         // ...Previously existing code
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
 
diff --git a/docs/_snippets/portable-stories-jest-override-globals.md b/docs/_snippets/portable-stories-jest-override-globals.md
index 1bf18cd793d0..43da554fca82 100644
--- a/docs/_snippets/portable-stories-jest-override-globals.md
+++ b/docs/_snippets/portable-stories-jest-override-globals.md
@@ -12,13 +12,13 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
-  await Primary.play();
+  await Primary.run();
 });
 
 test('renders in Spanish', async () => {
   const Primary = composeStory(PrimaryStory, meta, { globals: { locale: 'es' } });
 
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -36,12 +36,12 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
-  await Primary.play();
+  await Primary.run();
 });
 
 test('renders in Spanish', async () => {
   const Primary = composeStory(PrimaryStory, meta, { globals: { locale: 'es' } });
 
-  await Primary.play();
+  await Primary.run();
 });
 ```
diff --git a/docs/_snippets/portable-stories-jest-snapshot-test.md b/docs/_snippets/portable-stories-jest-snapshot-test.md
index 3abe940b0c4d..20a146ab48e7 100644
--- a/docs/_snippets/portable-stories-jest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-jest-snapshot-test.md
@@ -67,7 +67,7 @@ describe(options.suite, () => {
         const testFn = story.parameters.storyshots?.skip ? test.skip : test;
 
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           expect(document.body.firstChild).toMatchSnapshot();
@@ -155,7 +155,7 @@ describe(options.suite, () => {
         const testFn = story.parameters.storyshots?.skip ? test.skip : test;
 
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           expect(document.body.firstChild).toMatchSnapshot();
diff --git a/docs/_snippets/portable-stories-jest-with-play-function.md b/docs/_snippets/portable-stories-jest-with-play-function.md
index 2742aae2272f..a927b1366cfa 100644
--- a/docs/_snippets/portable-stories-jest-with-play-function.md
+++ b/docs/_snippets/portable-stories-jest-with-play-function.md
@@ -9,7 +9,7 @@ const { Primary } = composeStories(stories);
 
 test('renders and executes the play function', async () => {
   // Mount story and run interactions
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -23,6 +23,6 @@ const { Primary } = composeStories(stories);
 
 test('renders and executes the play function', async () => {
   // Mount story and run interactions
-  await Primary.play();
+  await Primary.run();
 });
 ```
diff --git a/docs/_snippets/portable-stories-vitest-compose-stories.md b/docs/_snippets/portable-stories-vitest-compose-stories.md
index 3e4164a04297..8ee390c4824f 100644
--- a/docs/_snippets/portable-stories-vitest-compose-stories.md
+++ b/docs/_snippets/portable-stories-vitest-compose-stories.md
@@ -11,14 +11,14 @@ import * as stories from './Button.stories';
 const { Primary, Secondary } = composeStories(stories);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
   // You can override props by passing them in the context argument of the play function
-  await Primary.play({ args: { ...Primary.args, children: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, children: 'Hello world' } });
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
 });
@@ -37,14 +37,14 @@ import * as stories from './Button.stories';
 const { Primary, Secondary } = composeStories(stories);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
   // You can override props by passing them in the context argument of the play function
-  await Primary.play({ args: { ...Primary.args, children: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, children: 'Hello world' } });
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
 });
@@ -63,14 +63,14 @@ import * as stories from './Button.stories';
 const { Primary, Secondary } = composeStories(stories);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
   // You can override props by passing them in the context argument of the play function
-  await Primary.play({ args: { ...Primary.args, children: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, children: 'Hello world' } });
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
 });
diff --git a/docs/_snippets/portable-stories-vitest-compose-story.md b/docs/_snippets/portable-stories-vitest-compose-story.md
index 3e38a8e7e01b..bb59a3e2c4ed 100644
--- a/docs/_snippets/portable-stories-vitest-compose-story.md
+++ b/docs/_snippets/portable-stories-vitest-compose-story.md
@@ -9,14 +9,14 @@ import meta, { Primary as PrimaryStory } from './Button.stories';
 const Primary = composeStory(PrimaryStory, meta);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
 
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
-  await Primary.play({ args: { ...Primary.args, label: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, label: 'Hello world' } });
 
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
@@ -34,14 +34,14 @@ import meta, { Primary as PrimaryStory } from './Button.stories';
 const Primary = composeStory(PrimaryStory, meta);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
 
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
-  await Primary.play({ args: { ...Primary.args, label: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, label: 'Hello world' } });
 
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
@@ -59,14 +59,14 @@ import meta, { Primary as PrimaryStory } from './Button.stories';
 const Primary = composeStory(PrimaryStory, meta);
 
 test('renders primary button with default args', async () => {
-  await Primary.play();
+  await Primary.run();
 
   const buttonElement = screen.getByText('Text coming from args in stories file!');
   expect(buttonElement).not.toBeNull();
 });
 
 test('renders primary button with overridden props', async () => {
-  await Primary.play({ args: { ...Primary.args, label: 'Hello world' } });
+  await Primary.run({ args: { ...Primary.args, label: 'Hello world' } });
 
   const buttonElement = screen.getByText(/Hello world/i);
   expect(buttonElement).not.toBeNull();
diff --git a/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md b/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
index 51d3dac4797f..b2cece86e6f1 100644
--- a/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
+++ b/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
@@ -10,7 +10,7 @@ describe(options.suite, () => {
       stories.forEach(({ name, story }) => {
         // ...Previously existing code
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
 
diff --git a/docs/_snippets/portable-stories-vitest-override-globals.md b/docs/_snippets/portable-stories-vitest-override-globals.md
index 3be33992d7c6..ae2a362b77ea 100644
--- a/docs/_snippets/portable-stories-vitest-override-globals.md
+++ b/docs/_snippets/portable-stories-vitest-override-globals.md
@@ -12,13 +12,13 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
-  await Primary.play();
+  await Primary.run();
 });
 
 test('renders in Spanish', async () => {
   const Primary = composeStory(PrimaryStory, meta, { globals: { locale: 'es' } });
 
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -36,13 +36,13 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
-  await Primary.play();
+  await Primary.run();
 });
 
 test('renders in Spanish', async () => {
   const Primary = composeStory(PrimaryStory, meta, { globals: { locale: 'es' } });
 
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -60,12 +60,12 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
   );
 
-  await Primary.play();
+  await Primary.run();
 });
 
 test('renders in Spanish', async () => {
   const Primary = composeStory(PrimaryStory, meta, { globals: { locale: 'es' } });
 
-  await Primary.play();
+  await Primary.run();
 });
 ```
diff --git a/docs/_snippets/portable-stories-vitest-snapshot-test.md b/docs/_snippets/portable-stories-vitest-snapshot-test.md
index 623c451c84c9..07b8cf4c7728 100644
--- a/docs/_snippets/portable-stories-vitest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-vitest-snapshot-test.md
@@ -69,7 +69,7 @@ describe(options.suite, () => {
         const testFn = story.parameters.storyshots?.skip ? test.skip : test;
 
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
 
@@ -160,7 +160,7 @@ describe(options.suite, () => {
         const testFn = story.parameters.storyshots?.skip ? test.skip : test;
 
         testFn(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
 
diff --git a/docs/_snippets/portable-stories-vitest-with-play-function.md b/docs/_snippets/portable-stories-vitest-with-play-function.md
index d5dbe5d8a502..024ea33056bb 100644
--- a/docs/_snippets/portable-stories-vitest-with-play-function.md
+++ b/docs/_snippets/portable-stories-vitest-with-play-function.md
@@ -8,7 +8,7 @@ const { Primary } = composeStories(stories);
 
 test('renders and executes the play function', async () => {
   // Mount story and run interactions
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -22,7 +22,7 @@ const { Primary } = composeStories(stories);
 
 test('renders and executes the play function', async () => {
   // Mount story and run interactions
-  await Primary.play();
+  await Primary.run();
 });
 ```
 
@@ -36,6 +36,6 @@ const { Primary } = composeStories(stories);
 
 test('renders and executes the play function', async () => {
   // Mount story and run interactions
-  await Primary.play();
+  await Primary.run();
 });
 ```
diff --git a/docs/_snippets/single-story-test.md b/docs/_snippets/single-story-test.md
index 14452f76c662..5ba0de1dbef4 100644
--- a/docs/_snippets/single-story-test.md
+++ b/docs/_snippets/single-story-test.md
@@ -8,7 +8,7 @@ import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 const ValidForm = composeStory(ValidFormStory, Meta);
 
 test('Validates form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -31,7 +31,7 @@ import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 const ValidForm = composeStory(ValidFormStory, Meta);
 
 test('Validates form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -54,7 +54,7 @@ import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 const ValidForm = composeStory(ValidFormStory, Meta);
 
 test('Validates form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
@@ -77,7 +77,7 @@ import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 const ValidForm = composeStory(ValidFormStory, Meta);
 
 test('Validates form', async () => {
-  await ValidForm.play();
+  await ValidForm.run();
 
   const buttonElement = screen.getByRole('button', {
     name: 'Submit',
diff --git a/docs/_snippets/snapshot-tests-portable-stories.md b/docs/_snippets/snapshot-tests-portable-stories.md
index 5a7de482c554..dfbd20efbde9 100644
--- a/docs/_snippets/snapshot-tests-portable-stories.md
+++ b/docs/_snippets/snapshot-tests-portable-stories.md
@@ -117,7 +117,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           expect(document.body.firstChild).toMatchSnapshot();
@@ -176,7 +176,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           expect(document.body.firstChild).toMatchSnapshot();
@@ -245,7 +245,7 @@ describe('Stories Snapshots', () => {
 
       stories.forEach(({ name, story }) => {
         test(name, async () => {
-          await story.play();
+          await story.run();
           // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
           await new Promise((resolve) => setTimeout(resolve, 1));
           expect(document.body.firstChild).toMatchSnapshot();
diff --git a/docs/api/doc-blocks/doc-block-colorpalette.mdx b/docs/api/doc-blocks/doc-block-colorpalette.mdx
index ef1b9fa305fe..a0f31720ea4f 100644
--- a/docs/api/doc-blocks/doc-block-colorpalette.mdx
+++ b/docs/api/doc-blocks/doc-block-colorpalette.mdx
@@ -46,6 +46,18 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
       Apple30: 'rgba(102,191,60,.3)',
     }}
   />
+  <ColorItem
+    title="gradient"
+    subtitle="Grayscale"
+    colors={{
+      Gradient: 'linear-gradient(to right,white,black)',
+    }}
+  />
+  <ColorItem
+    title="gradient"
+    subtitle="Grayscale"
+    colors={['linear-gradient(65deg,white,black)']}
+  />
 </ColorPalette>
 ```
 
@@ -79,7 +91,7 @@ import { ColorItem } from '@storybook/blocks';
 
 Type: `string[] | { [key: string]: string }`
 
-Provides the list of colors to be displayed. Accepts any valid CSS color format (hex, RGB, HSL, etc.). When an object is provided, the keys will be displayed above the values.
+Provides the list of colors to be displayed. Accepts any valid CSS color format (hex, RGB, HSL, etc.). When an object is provided, the keys will be displayed above the values. Additionally, it supports gradients such as 'linear-gradient(to right, white, black)' or 'linear-gradient(65deg, white, black)', etc. 
 
 ### `subtitle`
 
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
index 28ed8e65b2f5..352aea58e978 100644
--- a/docs/api/portable-stories/portable-stories-jest.mdx
+++ b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -18,6 +18,10 @@ sidebar:
 
   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.
 
+  <Callout variant="info">
+    The API specified here is available in Storybook `8.2.7` and up. If you're using an older version of Storybook, you can upgrade to the latest version (`npx storybook@latest upgrade`) to use this API. If you're unable to upgrade, you can use previous API, which uses the `.play()` method instead of `.run()`, but is otherwise identical.
+  </Callout>
+  
   <If renderer="react">
     <Callout variant="info">
       **Using `Next.js`?** You need to do three things differently when using portable stories in Jest with Next.js projects:
@@ -83,13 +87,14 @@ sidebar:
 
   | Property   | Type                                      | Description                                                                           |
   | ---------- | ----------------------------------------- | ------------------------------------------------------------------------------------- |
-  | storyName  | `string`                                  | The story's name                                                                      |
   | args       | `Record<string, any>`                     | The story's [args](../../writing-stories/args.mdx)                                    |
   | argTypes   | `ArgType`                                 | The story's [argTypes](../arg-types.mdx)                                              |
   | id         | `string`                                  | The story's id                                                                        |
-  | tags       | `string[]`                                | The story's [tags](../../writing-stories/tags.mdx)                                    |
   | parameters | `Record<string, any>`                     | The story's [parameters](../parameters.mdx)                                           |
-  | play       | `(context) => Promise<void> \| undefined` | Mounts and executes the [play function](#3-play) of a given story                     |
+  | play       | `(context) => Promise<void> \| undefined` | Executes the play function of a given story                                |
+  | run        | `(context) => Promise<void> \| undefined` | [Mounts and executes the play function](#3-run) of a given story                     |
+  | storyName  | `string`                                  | The story's name                                                                      |
+  | tags       | `string[]`                                | The story's [tags](../../writing-stories/tags.mdx)                                    |
 
   ## composeStory
 
@@ -202,7 +207,7 @@ sidebar:
 
   To preview your stories in Storybook, Storybook runs a story pipeline, which includes applying project annotations, loading data, rendering the story, and playing interactions. This is a simplified version of the pipeline:
 
-  ![A flow diagram of the story pipeline. First, set project annotations. Collect annotations (decorators, args, etc) which are exported by addons and the preview file. Second, compose story. Create renderable elements based on the stories passed onto the API. Third, play. Mount the component and execute all the story lifecycle hooks.](../../_assets/api/story-pipeline.png)
+  ![A flow diagram of the story pipeline. First, set project annotations. Collect annotations (decorators, args, etc) which are exported by addons and the preview file. Second, compose story. Create renderable elements based on the stories passed onto the API. Third, run. Mount the component and execute all the story lifecycle hooks, including the play function.](../../_assets/api/story-pipeline.png)
 
   When you want to reuse a story in a different environment, however, it's crucial to understand that all these steps make a story. The portable stories API provides you with the mechanism to recreate that story pipeline in your external environment:
 
@@ -216,11 +221,11 @@ sidebar:
 
   The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). The outcome is a renderable component that represents the render function of the story.
 
-  ### 3. Play
+  ### 3. Run
 
-  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you run the `play` method of the composed story.
+  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
 
-  👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `play` method to be called.
+  👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
 
   {/* prettier-ignore-start */}
 
diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx
index 5ba64aab8827..2cbae20f3dd9 100644
--- a/docs/api/portable-stories/portable-stories-playwright.mdx
+++ b/docs/api/portable-stories/portable-stories-playwright.mdx
@@ -116,7 +116,7 @@ sidebar:
   ## setProjectAnnotations
 
   This API should be called once, before the tests run, in [`playwright/index.ts`](https://playwright.dev/docs/test-components#step-1-install-playwright-test-for-components-for-your-respective-framework). This will make sure that when `mount` is called, the project annotations are taken into account as well.
-  
+
   These are the configurations needed in the setup file:
   - preview annotations: those defined in `.storybook/preview.ts`
   - addon annotations (optional): those exported by addons
diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
index 82fc3b54f1f9..f44d173dffc1 100644
--- a/docs/api/portable-stories/portable-stories-vitest.mdx
+++ b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -22,6 +22,10 @@ sidebar:
 
   Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Vitest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.
 
+  <Callout variant="info">
+    The API specified here is available in Storybook `8.2.7` and up. If you're using an older version of Storybook, you can upgrade to the latest version (`npx storybook@latest upgrade`) to use this API. If you're unable to upgrade, you can use previous API, which uses the `.play()` method instead of `.run()`, but is otherwise identical.
+  </Callout>
+
   <If renderer="react">
     <Callout variant="warning">
       **Using `Next.js`?** Next.js requires specific configuration that is only available in [Jest](./portable-stories-jest.mdx). The portable stories API is not supported in Next.js with Vitest.
@@ -89,13 +93,14 @@ sidebar:
 
   | Property   | Type                                      | Description                                                                           |
   | ---------- | ----------------------------------------- | ------------------------------------------------------------------------------------- |
-  | storyName  | `string`                                  | The story's name                                                                      |
   | args       | `Record<string, any>`                     | The story's [args](../../writing-stories/args.mdx)                                    |
   | argTypes   | `ArgType`                                 | The story's [argTypes](../arg-types.mdx)                                              |
   | id         | `string`                                  | The story's id                                                                        |
-  | tags       | `string[]`                                | The story's [tags](../../writing-stories/tags.mdx)                                    |
   | parameters | `Record<string, any>`                     | The story's [parameters](../parameters.mdx)                                           |
-  | play       | `(context) => Promise<void> \| undefined` | Mounts and executes the [play function](#3-play) of a given story                     |
+  | play       | `(context) => Promise<void> \| undefined` | Executes the play function of a given story                                |
+  | run        | `(context) => Promise<void> \| undefined` | [Mounts and executes the play function](#3-run) of a given story                     |
+  | storyName  | `string`                                  | The story's name                                                                      |
+  | tags       | `string[]`                                | The story's [tags](../../writing-stories/tags.mdx)                                    |
 
   ## composeStory
 
@@ -216,7 +221,7 @@ sidebar:
 
   To preview your stories in Storybook, Storybook runs a story pipeline, which includes applying project annotations, loading data, rendering the story, and playing interactions. This is a simplified version of the pipeline:
 
-  ![A flow diagram of the story pipeline. First, set project annotations. Collect annotations (decorators, args, etc) which are exported by addons and the preview file. Second, compose story. Create renderable elements based on the stories passed onto the API. Third, play. Mount the component and execute all the story lifecycle hooks.](../../_assets/api/story-pipeline.png)
+  ![A flow diagram of the story pipeline. First, set project annotations. Collect annotations (decorators, args, etc) which are exported by addons and the preview file. Second, compose story. Create renderable elements based on the stories passed onto the API. Third, run. Mount the component and execute all the story lifecycle hooks, including the play function.](../../_assets/api/story-pipeline.png)
 
   When you want to reuse a story in a different environment, however, it's crucial to understand that all these steps make a story. The portable stories API provides you with the mechanism to recreate that story pipeline in your external environment:
 
@@ -230,11 +235,11 @@ sidebar:
 
   The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). The outcome is a renderable component that represents the render function of the story.
 
-  ### 3. Play
+  ### 3. Run
 
-  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you run the `play` method of the composed story.
+  Finally, stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../../writing-stories/loaders.mdx), [beforeEach](../../writing-tests/interaction-testing.mdx#run-code-before-each-story) or by having all the story code in the play function when using the [mount](../../writing-tests/interaction-testing.mdx#run-code-before-the-component-gets-rendered). In portable stories, all of these steps will be executed when you call the `run` method of the composed story.
 
-  👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `play` method to be called.
+  👉 For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `run` method to be called.
 
   {/* prettier-ignore-start */}
 
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 955a2c69a495..50ef052da1b0 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.3.0-alpha.3","info":{"plain":"- Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!\n- Angular: Fix template props not able to use dot notation - [#28588](https://github.com/storybookjs/storybook/pull/28588), thanks @Marklb!\n- CLI: Fix the initialization of Storybook in workspaces - [#28699](https://github.com/storybookjs/storybook/pull/28699), thanks @valentinpalkovic!\n- CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!\n- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!\n- Controls: Add disableSave parameter - [#28734](https://github.com/storybookjs/storybook/pull/28734), thanks @valentinpalkovic!\n- React: Avoid 'Dynamic require of react is not possible' issue - [#28730](https://github.com/storybookjs/storybook/pull/28730), thanks @valentinpalkovic!\n- Telemetry: Add mount, beforeEach, moduleMock stats - [#28624](https://github.com/storybookjs/storybook/pull/28624), thanks @shilman!\n- Telemetry: CSF feature usage - [#28622](https://github.com/storybookjs/storybook/pull/28622), thanks @shilman!\n- Types: Adjust beforeAll to be non-nullable in NormalizedProjectAnnotations - [#28671](https://github.com/storybookjs/storybook/pull/28671), thanks @kasperpeulen!\n- Vue: Fix out of memory error when using vue-component-meta for events and slots - [#28674](https://github.com/storybookjs/storybook/pull/28674), thanks @larsrickert!\n- Vue: Improve generated code snippets - [#27194](https://github.com/storybookjs/storybook/pull/27194), thanks @larsrickert!"}}
+{"version":"8.3.0-alpha.4","info":{"plain":"- CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!\n- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!\n- Core: Split Storybook CLI  - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!\n- Fix: Invariant failed: Expected package.json#version to be defined in the \\\"undefined\\\" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!\n- Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!\n- UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!"}}
diff --git a/scripts/create-nx-sandbox-projects.ts b/scripts/create-nx-sandbox-projects.ts
index 52f7894b5078..6e9b8a6029d4 100644
--- a/scripts/create-nx-sandbox-projects.ts
+++ b/scripts/create-nx-sandbox-projects.ts
@@ -1,4 +1,4 @@
-import * as templates from '../code/lib/cli/src/sandbox-templates';
+import * as templates from '../code/lib/cli-storybook/src/sandbox-templates';
 import * as fs from 'fs';
 import * as path from 'path';
 
diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts
index bbcc1aeaf12f..164431aa342c 100644
--- a/scripts/event-log-checker.ts
+++ b/scripts/event-log-checker.ts
@@ -1,7 +1,7 @@
 import chalk from 'chalk';
 import assert from 'assert';
 import { esMain } from './utils/esmain';
-import { allTemplates } from '../code/lib/cli/src/sandbox-templates';
+import { allTemplates } from '../code/lib/cli-storybook/src/sandbox-templates';
 import versions from '../code/core/src/common/versions';
 import { oneWayHash } from '../code/core/src/telemetry/one-way-hash';
 
diff --git a/scripts/get-template.ts b/scripts/get-template.ts
index a04924c4c473..166f191fc6de 100644
--- a/scripts/get-template.ts
+++ b/scripts/get-template.ts
@@ -11,7 +11,7 @@ import {
   type Cadence,
   type Template as TTemplate,
   type SkippableTask,
-} from '../code/lib/cli/src/sandbox-templates';
+} from '../code/lib/cli-storybook/src/sandbox-templates';
 import { SANDBOX_DIRECTORY } from './utils/constants';
 
 const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index 88871e6eec4d..8ada9832705b 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -9,7 +9,7 @@ import { esMain } from '../utils/esmain';
 
 import type { OptionValues } from '../utils/options';
 import { createOptions } from '../utils/options';
-import { allTemplates as sandboxTemplates } from '../../code/lib/cli/src/sandbox-templates';
+import { allTemplates as sandboxTemplates } from '../../code/lib/cli-storybook/src/sandbox-templates';
 import storybookVersions from '../../code/core/src/common/versions';
 import { JsPackageManagerFactory } from '../../code/core/src/common/js-package-manager/JsPackageManagerFactory';
 
@@ -38,11 +38,11 @@ const sbInit = async (
   flags?: string[],
   debug?: boolean
 ) => {
-  const sbCliBinaryPath = join(__dirname, `../../code/lib/cli/bin/index.cjs`);
+  const sbCliBinaryPath = join(__dirname, `../../code/lib/create-storybook/bin/index.cjs`);
   console.log(`🎁 Installing storybook`);
   const env = { STORYBOOK_DISABLE_TELEMETRY: 'true', ...envVars };
   const fullFlags = ['--yes', ...(flags || [])];
-  await runCommand(`${sbCliBinaryPath} init ${fullFlags.join(' ')}`, { cwd, env }, debug);
+  await runCommand(`${sbCliBinaryPath} ${fullFlags.join(' ')}`, { cwd, env }, debug);
 };
 
 type LocalRegistryProps = {
diff --git a/scripts/sandbox/utils/template.ts b/scripts/sandbox/utils/template.ts
index 3694259d66cb..5f5228a46dc5 100644
--- a/scripts/sandbox/utils/template.ts
+++ b/scripts/sandbox/utils/template.ts
@@ -2,7 +2,7 @@ import { render } from 'ejs';
 import { readFile } from 'fs-extra';
 import prettier from 'prettier';
 import type { GeneratorConfig } from './types';
-import { allTemplates as sandboxTemplates } from '../../../code/lib/cli/src/sandbox-templates';
+import { allTemplates as sandboxTemplates } from '../../../code/lib/cli-storybook/src/sandbox-templates';
 
 export async function renderTemplate(templatePath: string, templateData: Record<string, any>) {
   const template = await readFile(templatePath, 'utf8');
diff --git a/scripts/task.ts b/scripts/task.ts
index 80fa759036b4..857a87c75bbc 100644
--- a/scripts/task.ts
+++ b/scripts/task.ts
@@ -32,7 +32,7 @@ import {
   allTemplates as TEMPLATES,
   type TemplateKey,
   type Template,
-} from '../code/lib/cli/src/sandbox-templates';
+} from '../code/lib/cli-storybook/src/sandbox-templates';
 
 import { version } from '../code/package.json';
 
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 90cdd9c43e45..bcde26616339 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -29,8 +29,8 @@ import type { ConfigFile } from '../../code/core/src/csf-tools';
 import { writeConfig } from '../../code/core/src/csf-tools';
 import { filterExistsInCodeDir } from '../utils/filterExistsInCodeDir';
 import { findFirstPath } from '../utils/paths';
-import { detectLanguage } from '../../code/lib/cli/src/detect';
-import { SupportedLanguage } from '../../code/lib/cli/src/project_types';
+import { detectLanguage } from '../../code/core/src/cli/detect';
+import { SupportedLanguage } from '../../code/core/src/cli/project_types';
 import { updatePackageScripts } from '../utils/package-json';
 import { addPreviewAnnotations, readMainConfig } from '../utils/main-js';
 import {
@@ -41,7 +41,7 @@ import {
 import { workspacePath } from '../utils/workspace';
 import { babelParse } from '../../code/core/src/csf-tools/babelParse';
 import { CODE_DIRECTORY, REPROS_DIRECTORY } from '../utils/constants';
-import type { TemplateKey } from '../../code/lib/cli/src/sandbox-templates';
+import type { TemplateKey } from '../../code/lib/cli-storybook/src/sandbox-templates';
 import { isFunction } from 'lodash';
 
 const logger = console;
diff --git a/scripts/utils/cli-step.ts b/scripts/utils/cli-step.ts
index 76e6f4f0498a..c05e03041891 100644
--- a/scripts/utils/cli-step.ts
+++ b/scripts/utils/cli-step.ts
@@ -5,6 +5,8 @@ import { exec } from './exec';
 
 const require = createRequire(import.meta.url);
 const cliExecutable = require.resolve('../../code/lib/cli/bin/index.cjs');
+const toolboxExecutable = require.resolve('../../code/lib/cli-storybook/bin/index.cjs');
+const createStorybookExecutable = require.resolve('../../code/lib/create-storybook/bin/index.cjs');
 
 export type CLIStep<TOptions extends OptionSpecifier> = {
   command: string;
@@ -83,7 +85,13 @@ export async function executeCLIStep<TOptions extends OptionSpecifier>(
   if (cliStep.hasArgument && !options.argument)
     throw new Error(`Argument required for ${cliStep.command} command.`);
 
-  const prefix = `node ${cliExecutable} ${cliStep.command}`;
+  const cliCommand = cliStep.command;
+
+  const prefix = ['dev', 'build'].includes(cliCommand)
+    ? `node ${cliExecutable} ${cliCommand}`
+    : cliCommand === 'init'
+      ? `node ${createStorybookExecutable} ${cliCommand}`
+      : `node ${toolboxExecutable} ${cliCommand}`;
   const command = getCommand(
     cliStep.hasArgument ? `${prefix} ${options.argument}` : prefix,
     cliStep.options,
diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml
index 6bb220a09948..9ac5a6ef6932 100644
--- a/scripts/verdaccio.yaml
+++ b/scripts/verdaccio.yaml
@@ -125,6 +125,10 @@ packages:
     access: $all
     publish: $all
 
+  'create-storybook':
+    access: $all
+    publish: $all
+
   'storybook':
     access: $all
     publish: $all
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 8b451f330dec..f67542889e8b 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
@@ -20,7 +20,7 @@ const runTests = (name: string, storiesModule: any) => {
     const composedStories = composeStories(storiesModule);
     Object.entries(composedStories).forEach(([name, Story]: [any, any]) => {
       it(`renders ${name}`, async () => {
-        await Story.play?.();
+        await Story.run?.();
         expect(document.body).toMatchSnapshot();
       });
     });
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
index 391e9f0f5636..314d3a0d031d 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
@@ -92,7 +92,7 @@ describe('CSF3', () => {
   it('renders with play function', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
 
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -117,6 +117,6 @@ it('should pass with decorators that need addons channel', () => {
 // Batch snapshot testing
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName, Story]);
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
-  await Story.play();
+  await Story.run();
   expect(document.body).toMatchSnapshot();
 });
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
index 3c013ef06ef2..094d2a592326 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/Button.test.ts
@@ -55,7 +55,7 @@ describe('renders', () => {
     expect(getByTestId('spy-data').textContent).toEqual('mockFn return value');
     expect(getByTestId('loaded-data').textContent).toEqual('loaded data');
     // spy assertions happen in the play function and should work
-    await LoaderStory.play!();
+    await LoaderStory.run!();
   });
 });
 
@@ -114,7 +114,7 @@ describe('CSF3', () => {
   it('renders with play function without canvas element', async () => {
     const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
 
-    await CSF3InputFieldFilled.play();
+    await CSF3InputFieldFilled.run();
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -126,7 +126,7 @@ describe('CSF3', () => {
     const div = document.createElement('div');
     document.body.appendChild(div);
 
-    await CSF3InputFieldFilled.play({ canvasElement: div });
+    await CSF3InputFieldFilled.run({ canvasElement: div });
 
     const input = screen.getByTestId('input') as HTMLInputElement;
     expect(input.value).toEqual('Hello world!');
@@ -141,6 +141,6 @@ const testCases = Object.values(composeStories(stories)).map(
 );
 it.each(testCases)('Renders %s story', async (_storyName, Story) => {
   if (_storyName === 'CSF2StoryWithLocale') return;
-  await Story.play();
+  await Story.run();
   expect(document.body).toMatchSnapshot();
 });
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
index cfede6f889b4..976716d156c4 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/stories/__snapshots__/Button.test.ts.snap
@@ -2,59 +2,44 @@
 
 exports[`Renders CSF2Secondary story 1`] = `
 <body>
-  <button
-    class="storybook-button storybook-button--medium storybook-button--secondary"
-    style=""
-    type="button"
-  >
-    label coming from story args!
-     
-  </button>
-</body>
-`;
-
-exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
-<body>
-  <div
-    style="margin: 3em;"
-  >
+  <div>
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
       type="button"
     >
-      foo
+      label coming from story args!
        
     </button>
-    
   </div>
-  
-  
 </body>
 `;
 
-exports[`Renders CSF3Button story 1`] = `
+exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
-  <button
-    class="storybook-button storybook-button--medium storybook-button--secondary"
-    style=""
-    type="button"
-  >
-    foo
-     
-  </button>
+  <div>
+    <div
+      style="margin: 3em;"
+    >
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo
+         
+      </button>
+      
+    </div>
+    
+    
+  </div>
 </body>
 `;
 
-exports[`Renders CSF3ButtonWithRender story 1`] = `
+exports[`Renders CSF3Button story 1`] = `
 <body>
   <div>
-    <p
-      data-testid="custom-render"
-    >
-      I am a custom render function
-    </p>
-     
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -67,40 +52,69 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
 </body>
 `;
 
+exports[`Renders CSF3ButtonWithRender story 1`] = `
+<body>
+  <div>
+    <div>
+      <p
+        data-testid="custom-render"
+      >
+        I am a custom render function
+      </p>
+       
+      <button
+        class="storybook-button storybook-button--medium storybook-button--secondary"
+        style=""
+        type="button"
+      >
+        foo
+         
+      </button>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`Renders CSF3InputFieldFilled story 1`] = `
 <body>
-  <input
-    data-testid="input"
-  />
+  <div>
+    <input
+      data-testid="input"
+    />
+  </div>
 </body>
 `;
 
 exports[`Renders CSF3Primary story 1`] = `
 <body>
-  <button
-    class="storybook-button storybook-button--large storybook-button--primary"
-    style=""
-    type="button"
-  >
-    foo
-     
-  </button>
+  <div>
+    <button
+      class="storybook-button storybook-button--large storybook-button--primary"
+      style=""
+      type="button"
+    >
+      foo
+       
+    </button>
+  </div>
 </body>
 `;
 
 exports[`Renders LoaderStory story 1`] = `
 <body>
   <div>
-    <div
-      data-testid="loaded-data"
-    >
-      loaded data
-    </div>
-     
-    <div
-      data-testid="spy-data"
-    >
-      mockFn return value
+    <div>
+      <div
+        data-testid="loaded-data"
+      >
+        loaded data
+      </div>
+       
+      <div
+        data-testid="spy-data"
+      >
+        mockFn return value
+      </div>
     </div>
   </div>
 </body>
@@ -108,20 +122,22 @@ exports[`Renders LoaderStory story 1`] = `
 
 exports[`Renders NewStory story 1`] = `
 <body>
-  <div
-    style="margin: 3em;"
-  >
-    <button
-      class="storybook-button storybook-button--large storybook-button--primary"
-      style=""
-      type="button"
+  <div>
+    <div
+      style="margin: 3em;"
     >
-      foo
-       
-    </button>
+      <button
+        class="storybook-button storybook-button--large storybook-button--primary"
+        style=""
+        type="button"
+      >
+        foo
+         
+      </button>
+      
+    </div>
+    
     
   </div>
-  
-  
 </body>
 `;