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/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/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/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/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/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 d1817f6db7bc..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}
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/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 3306b24bb4f4..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>;
 
@@ -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 6563cb23fe63..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
@@ -105,8 +105,10 @@ 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',
@@ -115,6 +117,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       step: (label, play) => story.runStep(label, play, context),
       canvasElement: null!,
       canvas: {} as Canvas,
+      globalTypes: normalizedProjectAnnotations.globalTypes,
       ...story,
       context: null!,
       mount: null!,
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/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/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/package.json b/code/package.json
index 34e857d4681e..fc4a1c93c6ab 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:*",
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/yarn.lock b/code/yarn.lock
index 16ee329edf79..2810b36b4760 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
 
@@ -2184,12 +2184,12 @@ __metadata:
   linkType: hard
 
 "@babel/runtime-corejs3@npm:^7.10.2":
-  version: 7.25.0
-  resolution: "@babel/runtime-corejs3@npm:7.25.0"
+  version: 7.23.1
+  resolution: "@babel/runtime-corejs3@npm:7.23.1"
   dependencies:
     core-js-pure: "npm:^3.30.2"
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/7c9e7896749b5968bc6a7638cf1735e5d2dc791780f4f46daf15a45777780cd0485d1357e92f54b03f815269064dc84d771e83486d49e18b847ffa8cfb6a6afa
+  checksum: 10c0/6e2c2b11779ff56c88b1f3a8742498640f7271ad4fcf9cfd24052bbb236a5e7c4c7c8d81cda751da3b4effa678736303deb78441c5752e63bfb90d6453fd870f
   languageName: node
   linkType: hard
 
@@ -2220,16 +2220,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2":
-  version: 7.25.0
-  resolution: "@babel/runtime@npm:7.25.0"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/bd3faf246170826cef2071a94d7b47b49d532351360ecd17722d03f6713fd93a3eb3dbd9518faa778d5e8ccad7392a7a604e56bd37aaad3f3aa68d619ccd983d
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.24.7
   resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
@@ -2276,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:
@@ -4506,15 +4497,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
@@ -4522,7 +4515,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:
@@ -4538,7 +4531,7 @@ __metadata:
       optional: true
     webpack-plugin-serve:
       optional: true
-  checksum: 10c0/ba310aa4d53070f59c8a374d1d256c5965c044c0c3fb1ff6b55353fb5e86de08a490a7bd59a31f0d4951f8f29f81864c7df224fe1342543a95d048b7413ff171
+  checksum: 10c0/a9c8468417a14a23339e313cff6ddb8029e0637748973070e61d83a2534620b3492b9a42ecf9eb9d63cb709f53c17fe814bc7dd68d64c300db338e9fd7287bc4
   languageName: node
   linkType: hard
 
@@ -5389,7 +5382,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:
@@ -6506,6 +6499,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:*"
@@ -7259,9 +7253,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
 
@@ -7624,14 +7618,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0":
-  version: 2.0.6
-  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
-  checksum: 10c0/3948088654f3eeb45363f1db158354fb013b362dba2a5c2c18c559484d5eb9f6fd85b23d66c0a7c2fcfab7308d0a585b14dadaca6cc8bf89ebfdc7f8f5102fb7
-  languageName: node
-  linkType: hard
-
-"@types/istanbul-lib-coverage@npm:^2.0.1":
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
   checksum: 10c0/af5f6b64e788331ed3f7b2e2613cb6ca659c58b8500be94bbda8c995ad3da9216c006f1cfe6f66b321c39392b1bda18b16e63cef090a77d24a00b4bd5ba3b018
@@ -7639,20 +7626,20 @@ __metadata:
   linkType: hard
 
 "@types/istanbul-lib-report@npm:*":
-  version: 3.0.3
-  resolution: "@types/istanbul-lib-report@npm:3.0.3"
+  version: 3.0.1
+  resolution: "@types/istanbul-lib-report@npm:3.0.1"
   dependencies:
     "@types/istanbul-lib-coverage": "npm:*"
-  checksum: 10c0/247e477bbc1a77248f3c6de5dadaae85ff86ac2d76c5fc6ab1776f54512a745ff2a5f791d22b942e3990ddbd40f3ef5289317c4fca5741bedfaa4f01df89051c
+  checksum: 10c0/a2a002ee7ecd9079a2c06235d28d1bc77089c3d834eec7e6dac38986203634936f2a017812624acfbedabec4bddd933942f14ac93eba2dc57f581ad4f35bbf1d
   languageName: node
   linkType: hard
 
 "@types/istanbul-reports@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "@types/istanbul-reports@npm:3.0.4"
+  version: 3.0.2
+  resolution: "@types/istanbul-reports@npm:3.0.2"
   dependencies:
     "@types/istanbul-lib-report": "npm:*"
-  checksum: 10c0/1647fd402aced5b6edac87274af14ebd6b3a85447ef9ad11853a70fd92a98d35f81a5d3ea9fcb5dbb5834e800c6e35b64475e33fcae6bfa9acc70d61497c54ee
+  checksum: 10c0/df6c9e6865006be06bae29f63d5240b96bc7041b18a8c6d66be5b5d92ef5c95675c7a605a603029065f4f8aece7dba7360349e9d0543f512417e64a707a3c4fa
   languageName: node
   linkType: hard
 
@@ -7864,9 +7851,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
 
@@ -8033,9 +8020,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
 
@@ -8086,9 +8073,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
 
@@ -8107,9 +8094,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
 
@@ -8136,8 +8123,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"
@@ -8145,7 +8132,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
 
@@ -8159,18 +8146,18 @@ __metadata:
   linkType: hard
 
 "@types/yargs-parser@npm:*":
-  version: 21.0.3
-  resolution: "@types/yargs-parser@npm:21.0.3"
-  checksum: 10c0/e71c3bd9d0b73ca82e10bee2064c384ab70f61034bbfb78e74f5206283fc16a6d85267b606b5c22cb2a3338373586786fed595b2009825d6a9115afba36560a0
+  version: 21.0.1
+  resolution: "@types/yargs-parser@npm:21.0.1"
+  checksum: 10c0/f1d723a4c4383a9c53b975820b7490186ca127237ca58eb2ee8f5eacdcdb195a81aeabd1d75560abdf22fc29f70e8bb103d7ab34c5ec49bc19196195a7bf3189
   languageName: node
   linkType: hard
 
 "@types/yargs@npm:^15.0.0":
-  version: 15.0.19
-  resolution: "@types/yargs@npm:15.0.19"
+  version: 15.0.16
+  resolution: "@types/yargs@npm:15.0.16"
   dependencies:
     "@types/yargs-parser": "npm:*"
-  checksum: 10c0/9fe9b8645304a628006cbba2d1990fb015e2727274d0e3853f321a379a1242d1da2c15d2f56cff0d4313ae94f0383ccf834c3bded9fb3589608aefb3432fcf00
+  checksum: 10c0/07f0960062e66226ae602fccd62e351143291d778e1f4dd645c51111e62fbedafe2a976c223dcfa7ae052e989407b62e97a7472fc1d73536110cd05502c204a5
   languageName: node
   linkType: hard
 
@@ -8449,12 +8436,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
 
@@ -9451,15 +9438,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"
@@ -9671,16 +9649,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
 
@@ -10813,16 +10790,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
 
@@ -11096,7 +11073,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
@@ -11962,9 +11939,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
 
@@ -11976,9 +11953,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
 
@@ -12724,15 +12701,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
 
@@ -13081,10 +13058,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
 
@@ -13439,7 +13416,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:
@@ -13734,7 +13711,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
@@ -15041,9 +15018,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
 
@@ -15805,12 +15782,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
 
@@ -16908,7 +16884,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:
@@ -18003,14 +17979,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
 
@@ -21265,25 +21238,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
 
@@ -21320,13 +21292,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
 
@@ -22054,7 +22026,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
@@ -22438,13 +22410,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
 
@@ -24325,9 +24297,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
 
@@ -24658,7 +24630,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:
@@ -24669,7 +24641,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:
@@ -24839,7 +24811,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:
@@ -25537,9 +25509,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
 
@@ -25684,22 +25656,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
 
@@ -27413,17 +27382,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
 
@@ -27461,8 +27430,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:
@@ -27471,7 +27440,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/d232c37160fe3970c99255da19b5fb5299fb5926a5d6141d928a87feb47732c323d29be2f8137d3b1e5499c70d284cd1d9cfad703cc58179db8be24d7dd8f1f2
+  checksum: 10c0/6666cd62e13053d03e453b5199037cb8f6475a8f55afd664ff488bd8f2ee2ede4da3b220dd7e60f5ecd4926133364fbf4b1aed463eeb8203e7c5be3b1533b59b
   languageName: node
   linkType: hard
 
@@ -27814,8 +27783,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"
@@ -27849,7 +27818,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/caeb1eecc0a8e0865782899e2f83d2993a9816562badc1c8291316d80d49b82f12038abd8cb8b8c627b6f369f58dfb25972ef4517d5e6e1b6e1bf7ee5b63a8a6
+  checksum: 10c0/352a94b13f793e4bcbc424d680a32507343223eeda8917fde0f23c1fa1ba3db7c806dade8461ca5cfb270154ddb8895a219fdd4384519fe9b8e46d1cf491a890
   languageName: node
   linkType: hard
 
@@ -28341,13 +28310,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
 
@@ -28797,11 +28766,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