Merge branch 'next' into norbert/remove-addon-essentials

2025-04-05 16:11:33 +08:00 · 2025-03-28 12:36:31 +01:00 · 2025-03-28 12:36:31 +01:00 · dc8b4f2d82
commit dc8b4f2d82
parent d88aaea78a b0d805409f
87 changed files with 728 additions and 1811 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,7 @@
+## 8.6.11
+
+- Angular: Fix zone.js support for Angular libraries - [#30941](https://github.com/storybookjs/storybook/pull/30941), thanks @valentinpalkovic!
+
 ## 8.6.10

 - Addon-docs: Fix non-string handling in Stories block - [#30913](https://github.com/storybookjs/storybook/pull/30913), thanks @JamesIves!
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,6 +1,16 @@
 <h1>Migration</h1>

 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
+  - [Button Component API Changes](#button-component-api-changes)
+  - [Documentation Generation Changes](#documentation-generation-changes)
+  - [Global State Management](#global-state-management)
+  - [Icon System Updates](#icon-system-updates)
+  - [Sidebar Component Changes](#sidebar-component-changes)
+  - [Testing Module Changes](#testing-module-changes)
+  - [Type System Updates](#type-system-updates)
+  - [Story Store API Changes](#story-store-api-changes)
+  - [CSF File Changes](#csf-file-changes)
  - [The parameter docs.source.excludeDecorators has no effect in React](#the-parameter-docssourceexcludedecorators-has-no-effect-in-react)
  - [Addon Viewport is moved to core](#addon-viewport-is-moved-to-core)
  - [Addon Controls is moved to core](#addon-controls-is-moved-to-core)
@ -412,6 +422,171 @@

 ## From version 8.x to 9.0.0

+### A11y addon: Removed deprecated manual parameter
+
+The deprecated `manual` parameter from the A11y addon's parameters has been removed. Instead, use the `globals.a11y.manual` setting to control manual mode. For example:
+
+```js
+// Old way (no longer works)
+export const MyStory = {
+  parameters: {
+    a11y: {
+      manual: true
+    }
+  }
+};
+
+// New way
+export const MyStory = {
+  parameters: {
+    a11y: {
+      // other a11y parameters
+    }
+  }
+  globals: {
+    a11y: {
+      manual: true
+    }
+  }
+};
+
+// To enable manual mode globally, use .storybook/preview.js:
+export const initialGlobals = {
+  a11y: {
+    manual: true
+  }
+};
+```
+
+### Button Component API Changes
+
+The Button component has been updated to use a more modern props API. The following props have been removed:
+- `isLink`
+- `primary`
+- `secondary`
+- `tertiary`
+- `gray`
+- `inForm`
+- `small`
+- `outline`
+- `containsIcon`
+
+Use the new `variant` and `size` props instead:
+
+```diff
+- <Button primary small>Click me</Button>
+ <Button variant="primary" size="small">Click me</Button>
+```
+
+### Documentation Generation Changes
+
+The `autodocs` configuration option has been removed in favor of using tags:
+
+```diff
+// .storybook/preview.js
+export default {
+- docs: { autodocs: true }
+};
+
+// In your CSF files:
+ export default {
+   tags: ['autodocs']
+ };
+```
+
+### Global State Management
+
+The `globals` field in project annotations has been renamed to `initialGlobals`:
+
+```diff
+export const preview = {
+- globals: {
+ initialGlobals: {
+    theme: 'light'
+  }
+};
+```
+
+Additionally loading the defaultValue from `globalTypes` isn't supported anymore. Use `initialGlobals` instead to define the defaultValue.
+
+```diff
+// .storybook/preview.js
+export default {
+ initialGlobals: {
+   locale: 'en'
+ },
+  globalTypes: {
+    locale: {
+      description: 'Locale for components',
+-     defaultValue: 'en',
+      toolbar: {
+        title: 'Locale',
+        icon: 'circlehollow',
+        items: ['es', 'en'],
+      },
+    },
+  },
+}
+```
+
+### Icon System Updates
+
+Several icon-related exports have been removed:
+- `IconButtonSkeleton`
+- `Icons`
+- `Symbols`
+- Legacy icon exports
+
+Use the new icon system from `@storybook/icons` instead:
+
+```diff
+- import { Icons, IconButtonSkeleton } from '@storybook/components';
+ import { ZoomIcon } from '@storybook/icons';
+```
+
+### Sidebar Component Changes
+
+1. The 'extra' prop has been removed from the Sidebar's Heading component
+2. Experimental sidebar features have been removed:
+   - `experimental_SIDEBAR_BOTTOM`
+   - `experimental_SIDEBAR_TOP`
+
+### Testing Module Changes
+
+The `TESTING_MODULE_RUN_ALL_REQUEST` event has been removed:
+
+```diff
+- import { TESTING_MODULE_RUN_ALL_REQUEST } from '@storybook/core-events';
+ import { TESTING_MODULE_RUN_REQUEST } from '@storybook/core-events';
+```
+
+### Type System Updates
+
+The following types have been removed:
+- `Addon_SidebarBottomType`
+- `Addon_SidebarTopType`
+- `DeprecatedState`
+
+Import paths have been updated:
+```diff
+- import { SupportedRenderers } from './project_types';
+ import { SupportedRenderers } from 'storybook/internal/types';
+```
+
+### Story Store API Changes
+
+Several deprecated methods have been removed from the StoryStore:
+- `getSetStoriesPayload`
+- `getStoriesJsonData`
+- `raw`
+- `fromId`
+
+### CSF File Changes
+
+Deprecated getters have been removed from the CsfFile class:
+- `_fileName`
+- `_makeTitle`
+
 ### The parameter docs.source.excludeDecorators has no effect in React

 In React, the parameter `docs.source.excludeDecorators` option is no longer used.
--- a/code/addons/a11y/src/components/A11YPanel.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.tsx
@ -56,14 +56,9 @@ const Centered = styled.span(({ theme }) => ({
  },
 }));

-const Count = styled(Badge)({
-  padding: 4,
-  minWidth: 24,
-});
-
 export const A11YPanel: React.FC = () => {
-  const { manual: manualParameter } = useParameter<A11yParameters>(PARAM_KEY, {} as any);
  const {
+    tab,
    results,
    status,
    handleManual,
@ -81,7 +76,9 @@ export const A11YPanel: React.FC = () => {
        label: (
          <Tab>
            Violations
-            <Count status="neutral">{violations.length}</Count>
+            <Badge compact status={tab === 'violations' ? 'active' : 'neutral'}>
+              {violations.length}
+            </Badge>
          </Tab>
        ),
        panel: (
@ -101,7 +98,9 @@ export const A11YPanel: React.FC = () => {
        label: (
          <Tab>
            Passes
-            <Count status="neutral">{passes.length}</Count>
+            <Badge compact status={tab === 'passes' ? 'active' : 'neutral'}>
+              {passes.length}
+            </Badge>
          </Tab>
        ),
        panel: (
@ -121,7 +120,9 @@ export const A11YPanel: React.FC = () => {
        label: (
          <Tab>
            Inconclusive
-            <Count status="neutral">{incomplete.length}</Count>
+            <Badge compact status={tab === 'incomplete' ? 'active' : 'neutral'}>
+              {incomplete.length}
+            </Badge>
          </Tab>
        ),
        panel: (
@ -138,7 +139,7 @@ export const A11YPanel: React.FC = () => {
        type: RuleType.INCOMPLETION,
      },
    ];
-  }, [results, handleSelectionChange, selectedItems, toggleOpen]);
+  }, [tab, results, handleSelectionChange, selectedItems, toggleOpen]);

  return (
    <>
@ -167,8 +168,7 @@ export const A11YPanel: React.FC = () => {
                Run accessibility scan
              </Button>
              <p>
-                Update <code>{manualParameter ? 'parameters' : 'globals'}.a11y.manual</code> to
-                disable manual mode.
+                Update <code>globals.a11y.manual</code> to disable manual mode.
              </p>
            </>
          )}
--- a/code/addons/a11y/src/components/A11yContext.test.tsx
+++ b/code/addons/a11y/src/components/A11yContext.test.tsx
@ -166,24 +166,6 @@ describe('A11yContext', () => {
    );
  });

-  it('should set discrepancy to cliFailedButModeManual when in manual mode', () => {
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-    mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
-
-    const Component = () => {
-      const { discrepancy } = useA11yContext();
-      return <div data-testid="discrepancy">{discrepancy}</div>;
-    };
-
-    const { getByTestId } = render(
-      <A11yContextProvider>
-        <Component />
-      </A11yContextProvider>
-    );
-
-    expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
-  });
-
  it('should set discrepancy to cliFailedButModeManual when in manual mode (set via globals)', () => {
    mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
    mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
@ -264,35 +246,6 @@ describe('A11yContext', () => {
    expect(queryByTestId('status')).toHaveTextContent('running');
  });

-  it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode', () => {
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-
-    const emit = vi.fn();
-    mockedApi.useChannel.mockReturnValue(emit);
-
-    const Component = () => {
-      const { status } = useA11yContext();
-      return <div data-testid="status">{status}</div>;
-    };
-
-    const { queryByTestId } = render(
-      <A11yContextProvider>
-        <Component />
-      </A11yContextProvider>
-    );
-
-    expect(queryByTestId('status')).toHaveTextContent('manual');
-
-    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-    const storyRenderPhaseChangedPayload = {
-      newPhase: 'loading',
-    };
-
-    act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
-
-    expect(queryByTestId('status')).toHaveTextContent('manual');
-  });
-
  it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode (set via globals)', () => {
    mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);

--- a/code/addons/a11y/src/components/A11yContext.tsx
+++ b/code/addons/a11y/src/components/A11yContext.tsx
@ -105,19 +105,14 @@ const defaultResult = {
 type Status = 'initial' | 'manual' | 'running' | 'error' | 'component-test-error' | 'ran' | 'ready';

 export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
-  const parameters = useParameter<A11yParameters>('a11y', {
-    manual: false,
-  });
+  const parameters = useParameter<A11yParameters>('a11y', {});

  const [globals] = useGlobals() ?? [];
  const api = useStorybookApi();

  const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []);

-  const manual = useMemo(
-    () => globals?.a11y?.manual ?? parameters.manual ?? false,
-    [globals?.a11y?.manual, parameters.manual]
-  );
+  const manual = useMemo(() => globals?.a11y?.manual ?? false, [globals?.a11y?.manual]);

  const a11ySelection = useMemo(() => {
    const value = api.getQueryParam('a11ySelection');
--- a/code/addons/a11y/src/components/Report/Details.tsx
+++ b/code/addons/a11y/src/components/Report/Details.tsx
@ -31,12 +31,22 @@ const Info = styled.div({
  flexDirection: 'column',
 });

+const RuleId = styled.div(({ theme }) => ({
+  display: 'block',
+  color: theme.textMutedColor,
+  marginTop: -10,
+  marginBottom: 10,
+
+  '@container (min-width: 800px)': {
+    display: 'none',
+  },
+}));
+
 const Description = styled.p({
  margin: 0,
 });

 const Wrapper = styled.div({
-  containerType: 'inline-size',
  display: 'flex',
  flexDirection: 'column',
  padding: '0 15px 20px 15px',
@ -56,7 +66,10 @@ const Content = styled.div<{ side: 'left' | 'right' }>(({ theme, side }) => ({
  display: side === 'left' ? 'flex' : 'none',
  flexDirection: 'column',
  gap: 15,
-  margin: side === 'left' ? '15px 0 20px 0' : 0,
+  margin: side === 'left' ? '15px 0' : 0,
+  padding: side === 'left' ? '0 15px' : 0,
+  borderLeft: side === 'left' ? `1px solid ${theme.color.border}` : 'none',
+
  '&:focus-visible': {
    outline: 'none',
    borderRadius: 4,
@ -124,12 +137,13 @@ interface DetailsProps {
 export const Details = ({ item, type, selection, handleSelectionChange }: DetailsProps) => (
  <Wrapper>
    <Info>
+      <RuleId>{item.id}</RuleId>
      <Description>
-        {item.description.endsWith('.') ? item.description : `${item.description}.`}
+        {item.description.endsWith('.') ? item.description : `${item.description}.`}{' '}
+        <Link href={item.helpUrl} target="_blank" withArrow>
+          How to resolve this
+        </Link>
      </Description>
-      <Link href={item.helpUrl} target="_blank" withArrow>
-        Learn how to resolve this violation
-      </Link>
    </Info>

    <Tabs.Root
--- a/code/addons/a11y/src/components/Report/Report.tsx
+++ b/code/addons/a11y/src/components/Report/Report.tsx
@ -27,8 +27,8 @@ const HeaderBar = styled.div(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
-  gap: 5,
-  padding: '6px 5px 6px 15px',
+  gap: 6,
+  padding: '6px 10px 6px 15px',
  minHeight: 40,
  background: 'none',
  color: 'inherit',
@ -40,26 +40,29 @@ const HeaderBar = styled.div(({ theme }) => ({
  },
 }));

-const Title = styled.div(({ theme }) => ({
+const Title = styled.div({
+  display: 'flex',
  flexGrow: 1,
-  fontWeight: theme.typography.weight.bold,
+  gap: 6,
+});
+
+const RuleId = styled.div(({ theme }) => ({
+  display: 'none',
+  color: theme.textMutedColor,
+
+  '@container (min-width: 800px)': {
+    display: 'block',
+  },
 }));

-const RuleId = styled.span<{ onClick: (event: React.SyntheticEvent<Element>) => void }>(
-  ({ theme }) => ({
-    display: 'none',
-    whiteSpace: 'nowrap',
-    cursor: 'text',
-    margin: 2,
-    color: theme.textMutedColor,
-    fontSize: theme.typography.size.s1,
-    fontWeight: theme.typography.weight.bold,
-
-    '@container (min-width: 800px)': {
-      display: 'inline-block',
-    },
-  })
-);
+const Count = styled.div(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: theme.textMutedColor,
+  width: 28,
+  height: 28,
+}));

 export interface ReportProps {
  items: Result[];
@ -90,8 +93,11 @@ export const Report: FC<ReportProps> = ({
              role="button"
              data-active={!!selection}
            >
-              <Title>{item.help}</Title>
-              <RuleId onClick={(event) => event.stopPropagation()}>{item.id}</RuleId>
+              <Title>
+                <strong>{item.help}</strong>
+                <RuleId>{item.id}</RuleId>
+              </Title>
+              <Count>{item.nodes.length}</Count>
              <IconButton onClick={(event) => toggleOpen(event, type, item)}>
                <Icon style={{ transform: `rotate(${selection ? -180 : 0}deg)` }} />
              </IconButton>
--- a/code/addons/a11y/src/manager.test.tsx
+++ b/code/addons/a11y/src/manager.test.tsx
@ -10,6 +10,7 @@ import './manager';

 vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked<api.API>(api as any);
+mockedApi.useStorybookApi = vi.fn(() => ({ getSelectedPanel: vi.fn() }));
 mockedApi.useAddonState = vi.fn();
 const mockedAddons = vi.mocked(api.addons);
 const registrationImpl = mockedAddons.register.mock.calls[0][1];
@ -44,21 +45,18 @@ describe('A11yManager', () => {

    // when / then
    expect(title()).toMatchInlineSnapshot(`
-      <div>
-        <Spaced
-          col={1}
-        >
-          <span
-            style={
-              {
-                "display": "inline-block",
-                "verticalAlign": "middle",
-              }
-            }
-          >
-            Accessibility
-          </span>
-        </Spaced>
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
      </div>
    `);
  });
@ -77,26 +75,24 @@ describe('A11yManager', () => {

    // when / then
    expect(title()).toMatchInlineSnapshot(`
-      <div>
-        <Spaced
-          col={1}
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
+        <Badge
+          compact={true}
+          status="neutral"
        >
-          <span
-            style={
-              {
-                "display": "inline-block",
-                "verticalAlign": "middle",
-              }
-            }
-          >
-            Accessibility
-          </span>
-          <Badge
-            status="neutral"
-          >
-            3
-          </Badge>
-        </Spaced>
+          3
+        </Badge>
      </div>
    `);
  });
--- a/code/addons/a11y/src/manager.tsx
+++ b/code/addons/a11y/src/manager.tsx
@ -1,8 +1,8 @@
 import React from 'react';

-import { Badge, Spaced } from 'storybook/internal/components';
+import { Badge } from 'storybook/internal/components';

-import { addons, types, useAddonState } from 'storybook/manager-api';
+import { addons, types, useAddonState, useStorybookApi } from 'storybook/manager-api';

 import { A11YPanel } from './components/A11YPanel';
 import type { Results } from './components/A11yContext';
@ -11,19 +11,24 @@ import { VisionSimulator } from './components/VisionSimulator';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';

 const Title = () => {
+  const api = useStorybookApi();
+  const selectedPanel = api.getSelectedPanel();
  const [addonState] = useAddonState<Results>(ADDON_ID);
  const violationsNb = addonState?.violations?.length || 0;
  const incompleteNb = addonState?.incomplete?.length || 0;
  const count = violationsNb + incompleteNb;

-  const suffix = count === 0 ? '' : <Badge status="neutral">{count}</Badge>;
+  const suffix =
+    count === 0 ? null : (
+      <Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
+        {count}
+      </Badge>
+    );

  return (
-    <div>
-      <Spaced col={1}>
-        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Accessibility</span>
-        {suffix}
-      </Spaced>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <span>Accessibility</span>
+      {suffix}
    </div>
  );
 };
--- a/code/addons/a11y/src/params.ts
+++ b/code/addons/a11y/src/params.ts
@ -12,8 +12,6 @@ export interface A11yParameters {
  element?: ElementContext;
  config?: Spec;
  options?: RunOptions;
-  /** @deprecated Use globals.a11y.manual instead */
-  manual?: boolean;
  disable?: boolean;
  test?: A11yTest;
 }
--- a/code/addons/a11y/src/preview.test.tsx
+++ b/code/addons/a11y/src/preview.test.tsx
@ -183,21 +183,6 @@ describe('afterEach', () => {
    });
  });

-  it('should not run accessibility checks when manual is true', async () => {
-    const context = createContext({
-      parameters: {
-        a11y: {
-          manual: true,
-        },
-      },
-    });
-
-    await experimental_afterEach(context);
-
-    expect(mockedRun).not.toHaveBeenCalled();
-    expect(context.reporting.addReport).not.toHaveBeenCalled();
-  });
-
  it('should not run accessibility checks when disable is true', async () => {
    const context = createContext({
      parameters: {
--- a/code/addons/a11y/src/preview.tsx
+++ b/code/addons/a11y/src/preview.tsx
@ -18,7 +18,6 @@ export const experimental_afterEach: AfterEach<any> = async ({
  const a11yGlobals = globals.a11y;

  const shouldRunEnvironmentIndependent =
-    a11yParameter?.manual !== true &&
    a11yParameter?.disable !== true &&
    a11yParameter?.test !== 'off' &&
    a11yGlobals?.manual !== true;
--- a/code/core/src/actions/manager.tsx
+++ b/code/core/src/actions/manager.tsx
@ -1,14 +1,16 @@
 import React from 'react';

-import { Badge, Spaced } from 'storybook/internal/components';
+import { Badge } from 'storybook/internal/components';
 import { STORY_CHANGED } from 'storybook/internal/core-events';

-import { addons, types, useAddonState, useChannel } from 'storybook/manager-api';
+import { addons, types, useAddonState, useChannel, useStorybookApi } from 'storybook/manager-api';

 import { ADDON_ID, CLEAR_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
 import ActionLogger from './containers/ActionLogger';

 function Title() {
+  const api = useStorybookApi();
+  const selectedPanel = api.getSelectedPanel();
  const [{ count }, setCount] = useAddonState(ADDON_ID, { count: 0 });

  useChannel({
@ -23,14 +25,17 @@ function Title() {
    },
  });

-  const suffix = count === 0 ? '' : <Badge status="neutral">{count}</Badge>;
+  const suffix =
+    count === 0 ? null : (
+      <Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
+        {count}
+      </Badge>
+    );

  return (
-    <div>
-      <Spaced col={1}>
-        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Actions</span>
-        {suffix}
-      </Spaced>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <span>Actions</span>
+      {suffix}
    </div>
  );
 }
--- a/code/core/src/cli/dirs.ts
+++ b/code/core/src/cli/dirs.ts
@ -2,14 +2,13 @@ import { dirname, join } from 'node:path';

 import { temporaryDirectory, versions } from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
-import type { SupportedFrameworks } from 'storybook/internal/types';
+import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';

 import downloadTarballDefault from '@ndelangen/get-tarball';
 import getNpmTarballUrlDefault from 'get-npm-tarball-url';
 import invariant from 'tiny-invariant';

 import { externalFrameworks } from './project_types';
-import type { SupportedRenderers } from './project_types';

 const resolveUsingBranchInstall = async (packageManager: JsPackageManager, request: string) => {
  const tempDirectory = await temporaryDirectory();
--- a/code/core/src/cli/helpers.test.ts
+++ b/code/core/src/cli/helpers.test.ts
@ -4,12 +4,12 @@ import fsp from 'node:fs/promises';
 import { beforeEach, describe, expect, it, vi } from 'vitest';

 import type { JsPackageManager } from 'storybook/internal/common';
+import type { SupportedRenderers } from 'storybook/internal/types';

 import { sep } from 'path';

 import { IS_WINDOWS } from '../../../vitest.helpers';
 import * as helpers from './helpers';
-import type { SupportedRenderers } from './project_types';
 import { SupportedLanguage } from './project_types';

 const normalizePath = (path: string) => (IS_WINDOWS ? path.replace(/\//g, sep) : path);
--- a/code/core/src/cli/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@ -3,10 +3,10 @@ import { cp, readFile, writeFile } from 'node:fs/promises';
 import { join, resolve } from 'node:path';

 import {
-  frameworkToRenderer as CoreFrameworkToRenderer,
  type JsPackageManager,
  type PackageJson,
  type PackageJsonWithDepsAndDevDeps,
+  frameworkToRenderer,
 } from 'storybook/internal/common';
 import { versions as storybookMonorepoPackages } from 'storybook/internal/common';
 import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
@ -142,9 +142,6 @@ type CopyTemplateFilesOptions = {
  features: string[];
 };

-/** @deprecated Please use `frameworkToRenderer` from `storybook/internal/common` instead */
-export const frameworkToRenderer = CoreFrameworkToRenderer;
-
 export const frameworkToDefaultBuilder: Record<
  SupportedFrameworks,
  CoreBuilder | CommunityBuilder
--- a/code/core/src/cli/project_types.ts
+++ b/code/core/src/cli/project_types.ts
@ -1,7 +1,4 @@
-import type {
-  SupportedRenderers as CoreSupportedRenderers,
-  SupportedFrameworks,
-} from 'storybook/internal/types';
+import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';

 import { minVersion, validRange } from 'semver';

@ -32,9 +29,6 @@ export const externalFrameworks: ExternalFramework[] = [
  },
 ];

-/** @deprecated Please use `SupportedRenderers` from `storybook/internal/types` instead */
-export type SupportedRenderers = CoreSupportedRenderers;
-
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
  'react',
  'react-native',
--- a/code/core/src/component-testing/components/PanelTitle.tsx
+++ b/code/core/src/component-testing/components/PanelTitle.tsx
@ -1,24 +1,30 @@
 import React from 'react';

-import { Badge, Spaced } from 'storybook/internal/components';
+import { Badge } from 'storybook/internal/components';

-import { useAddonState } from 'storybook/manager-api';
+import { useAddonState, useStorybookApi } from 'storybook/manager-api';

-import { ADDON_ID } from '../constants';
+import { ADDON_ID, PANEL_ID } from '../constants';

 export function PanelTitle() {
+  const api = useStorybookApi();
+  const selectedPanel = api.getSelectedPanel();
  const [addonState = {}] = useAddonState(ADDON_ID);
  const { hasException, interactionsCount } = addonState as any;

  return (
-    <div>
-      <Spaced col={1}>
-        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Component tests</span>
-        {interactionsCount && !hasException ? (
-          <Badge status="neutral">{interactionsCount}</Badge>
-        ) : null}
-        {hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
-      </Spaced>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <span>Component tests</span>
+      {interactionsCount && !hasException ? (
+        <Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'neutral'}>
+          {interactionsCount}
+        </Badge>
+      ) : null}
+      {hasException ? (
+        <Badge compact status={selectedPanel === PANEL_ID ? 'active' : 'negative'}>
+          {interactionsCount}
+        </Badge>
+      ) : null}
    </div>
  );
 }
--- a/code/core/src/components/components/Badge/Badge.stories.tsx
+++ b/code/core/src/components/components/Badge/Badge.stories.tsx
@ -10,8 +10,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;

 export const Default = { args: { children: 'Default' } } satisfies Story;
+export const Active = { args: { status: 'active', children: 'Active' } } satisfies Story;
 export const Positive = { args: { status: 'positive', children: 'Positive' } } satisfies Story;
 export const Negative = { args: { status: 'negative', children: 'Negative' } } satisfies Story;
 export const Neutral = { args: { status: 'neutral', children: 'Neutral' } } satisfies Story;
 export const Warning = { args: { status: 'warning', children: 'Warning' } } satisfies Story;
 export const Critical = { args: { status: 'critical', children: 'Critical' } } satisfies Story;
+
+export const Compact = {
+  args: { compact: true, status: 'neutral', children: '12' },
+} satisfies Story;
--- a/code/core/src/components/components/Badge/Badge.tsx
+++ b/code/core/src/components/components/Badge/Badge.tsx
@ -4,14 +4,16 @@ import { transparentize } from 'polished';
 import { styled } from 'storybook/theming';

 const BadgeWrapper = styled.div<BadgeProps>(
-  ({ theme }) => ({
-    display: 'inline-block',
-    fontSize: 11,
-    lineHeight: '12px',
-    alignSelf: 'center',
-    padding: '4px 10px',
-    borderRadius: '3em',
+  ({ theme, compact }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: theme.typography.size.s1,
    fontWeight: theme.typography.weight.bold,
+    lineHeight: '12px',
+    minWidth: 20,
+    borderRadius: 20,
+    padding: compact ? '4px 7px' : '4px 10px',
  }),
  {
    svg: {
@ -56,7 +58,7 @@ const BadgeWrapper = styled.div<BadgeProps>(
      case 'neutral': {
        return {
          color: theme.textMutedColor,
-          background: theme.background.app,
+          background: theme.base === 'light' ? theme.background.app : theme.barBg,
          boxShadow: `inset 0 0 0 1px ${transparentize(0.8, theme.textMutedColor)}`,
        };
      }
@ -70,6 +72,13 @@ const BadgeWrapper = styled.div<BadgeProps>(
              : 'none',
        };
      }
+      case 'active': {
+        return {
+          color: theme.color.secondary,
+          background: theme.background.hoverable,
+          boxShadow: `inset 0 0 0 1px ${transparentize(0.9, theme.color.secondary)}`,
+        };
+      }
      default: {
        return {};
      }
@ -78,7 +87,8 @@ const BadgeWrapper = styled.div<BadgeProps>(
 );

 export interface BadgeProps {
-  status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
+  compact?: boolean;
+  status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical' | 'active';
  children?: React.ReactNode;
 }

--- a/code/core/src/components/components/Button/Button.deprecated.stories.tsx
+++ b/code/core/src/components/components/Button/Button.deprecated.stories.tsx
@ -1,93 +0,0 @@
-import React from 'react';
-
-import { LinkIcon } from '@storybook/icons';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Form } from '../form';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Button (Deprecated)',
-  component: Button,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default = { args: { children: 'Default' } };
-
-export const FormButton: Story = {
-  render: (args) => <Form.Button {...args} />,
-  args: { children: 'Form.Button' },
-};
-
-export const Primary: Story = { args: { primary: true, children: 'Primary' } };
-export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
-export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
-export const Gray: Story = { args: { gray: true, children: 'Gray' } };
-
-export const Outline: Story = { args: { outline: true, children: 'Outline' } };
-export const OutlinePrimary: Story = {
-  args: { outline: true, primary: true, children: 'Outline Primary' },
-};
-export const OutlineSecondary: Story = {
-  args: { outline: true, secondary: true, children: 'Outline Secondary' },
-};
-export const OutlineTertiary: Story = {
-  args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
-};
-
-export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
-export const DisabledPrimary: Story = {
-  args: { disabled: true, primary: true, children: 'Disabled Priary' },
-};
-export const DisabledSecondary: Story = {
-  args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
-};
-export const DisabledTertiary: Story = {
-  args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
-};
-export const DisabledGray: Story = {
-  args: { disabled: true, gray: true, children: 'Disabled Gray' },
-};
-
-export const Small: Story = { args: { small: true, children: 'Small' } };
-export const SmallPrimary: Story = {
-  args: { small: true, primary: true, children: 'Small Priary' },
-};
-export const SmallSecondary: Story = {
-  args: { small: true, secondary: true, children: 'Small Secondary' },
-};
-export const SmallTertiary: Story = {
-  args: { small: true, tertiary: true, children: 'Small Tertiary' },
-};
-export const SmallGray: Story = {
-  args: { small: true, gray: true, children: 'Small Gray' },
-};
-
-export const IsLink: Story = {
-  args: { isLink: true, children: 'Button as a link' },
-};
-
-export const IconPrimary: Story = {
-  args: {
-    primary: true,
-    containsIcon: true,
-    title: 'link',
-    children: <LinkIcon />,
-  },
-};
-export const IconOutline: Story = {
-  args: { outline: true, containsIcon: true, title: 'link', children: <LinkIcon /> },
-};
-export const IconOutlineSmall: Story = {
-  args: {
-    outline: true,
-    containsIcon: true,
-    small: true,
-    title: 'link',
-    children: <LinkIcon />,
-  },
-};
--- a/code/core/src/components/components/Button/Button.tsx
+++ b/code/core/src/components/components/Button/Button.tsx
@ -1,8 +1,6 @@
 import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
 import React, { forwardRef, useEffect, useState } from 'react';

-import { deprecate } from 'storybook/internal/client-logger';
-
 import { Slot } from '@radix-ui/react-slot';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import { isPropValid, styled } from 'storybook/theming';
@ -16,25 +14,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  disabled?: boolean;
  active?: boolean;
  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
-
-  /** @deprecated Use {@link asChild} instead. This will be removed in Storybook 9.0 */
-  isLink?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  primary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  secondary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  tertiary?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  gray?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  inForm?: boolean;
-  /** @deprecated Use {@link size} instead. This will be removed in Storybook 9.0 */
-  small?: boolean;
-  /** @deprecated Use {@link variant} instead. This will be removed in Storybook 9.0 */
-  outline?: boolean;
-  /** @deprecated Add your icon as a child directly. This will be removed in Storybook 9.0 */
-  containsIcon?: boolean;
 }

 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@ -54,15 +33,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ) => {
    let Comp: 'button' | 'a' | typeof Slot = 'button';

-    if (props.isLink) {
-      Comp = 'a';
-    }
-
    if (asChild) {
      Comp = Slot;
    }
-    let localVariant = variant;
-    let localSize = size;

    const [isAnimating, setIsAnimating] = useState(false);

@ -86,48 +59,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      return () => clearTimeout(timer);
    }, [isAnimating]);

-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    if (props.primary) {
-      localVariant = 'solid';
-      localSize = 'medium';
-    }
-
-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
-      localVariant = 'outline';
-      localSize = 'medium';
-    }
-
-    if (
-      props.small ||
-      props.isLink ||
-      props.primary ||
-      props.secondary ||
-      props.tertiary ||
-      props.gray ||
-      props.outline ||
-      props.inForm ||
-      props.containsIcon
-    ) {
-      const buttonContent = React.Children.toArray(props.children).filter(
-        (e) => typeof e === 'string' && e !== ''
-      );
-
-      deprecate(
-        `Use of deprecated props in the button ${
-          buttonContent.length > 0 ? `"${buttonContent.join(' ')}"` : 'component'
-        } detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components`
-      );
-    }
-
    return (
      <StyledButton
        as={Comp}
        ref={ref}
-        variant={localVariant}
-        size={localSize}
+        variant={variant}
+        size={size}
        padding={padding}
        disabled={disabled}
        active={active}
--- a/code/core/src/components/components/bar/bar.tsx
+++ b/code/core/src/components/components/bar/bar.tsx
@ -18,7 +18,7 @@ export const Side = styled.div<SideProps>(
    whiteSpace: 'nowrap',
    flexBasis: 'auto',
    marginLeft: 3,
-    marginRight: 3,
+    marginRight: 10,
  },
  ({ scrollable }) => (scrollable ? { flexShrink: 0 } : {}),
  ({ left }) =>
@ -32,10 +32,7 @@ export const Side = styled.div<SideProps>(
  ({ right }) =>
    right
      ? {
-          marginLeft: 30,
-          '& > *': {
-            marginRight: 4,
-          },
+          gap: 6,
        }
      : {}
 );
--- a/code/core/src/components/components/bar/button.tsx
+++ b/code/core/src/components/components/bar/button.tsx
@ -132,23 +132,3 @@ export interface IconButtonProps {
  active?: boolean;
  disabled?: boolean;
 }
-
-const IconPlaceholder = styled.div(({ theme }) => ({
-  width: 14,
-  height: 14,
-  backgroundColor: theme.appBorderColor,
-  animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
-}));
-
-const IconButtonSkeletonWrapper = styled.div({
-  marginTop: 6,
-  padding: 7,
-  height: 28,
-});
-
-/** @deprecated This component will be removed in Storybook 9.0 */
-export const IconButtonSkeleton = () => (
-  <IconButtonSkeletonWrapper>
-    <IconPlaceholder />
-  </IconButtonSkeletonWrapper>
-);
--- a/code/core/src/components/index.ts
+++ b/code/core/src/components/index.ts
@ -67,15 +67,12 @@ export { default as ListItem } from './components/tooltip/ListItem';
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs';
 export { EmptyTabContent } from './components/tabs/EmptyTabContent';
-export { IconButtonSkeleton, TabButton } from './components/bar/button';
+export { TabButton } from './components/bar/button';
 export { Separator, interleaveSeparators } from './components/bar/separator';
 export { Bar, FlexBar } from './components/bar/bar';
 export { AddonPanel } from './components/addon-panel/addon-panel';

 // Graphics
-export type { IconsProps } from './components/icon/icon';
-export { Icons, Symbols } from './components/icon/icon';
-export { icons } from './components/icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';

--- a/code/core/src/controls/manager.tsx
+++ b/code/core/src/controls/manager.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
+import { AddonPanel, Badge } from 'storybook/internal/components';
 import type {
  ResponseData,
  SaveStoryRequestPayload,
@ -9,26 +9,39 @@ import type {
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
 import type { Args } from 'storybook/internal/csf';

+import { FailedIcon, PassedIcon } from '@storybook/icons';
+
 import { dequal as deepEqual } from 'dequal';
-import { addons, experimental_requestResponse, types, useArgTypes } from 'storybook/manager-api';
+import {
+  addons,
+  experimental_requestResponse,
+  types,
+  useArgTypes,
+  useStorybookApi,
+} from 'storybook/manager-api';
 import { color } from 'storybook/theming';

 import { ControlsPanel } from './components/ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';

 function Title() {
+  const api = useStorybookApi();
+  const selectedPanel = api.getSelectedPanel();
  const rows = useArgTypes();
  const controlsCount = Object.values(rows).filter(
    (argType) => argType?.control && !argType?.table?.disable
  ).length;
-  const suffix = controlsCount === 0 ? '' : <Badge status="neutral">{controlsCount}</Badge>;
+  const suffix =
+    controlsCount === 0 ? null : (
+      <Badge compact status={selectedPanel === ADDON_ID ? 'active' : 'neutral'}>
+        {controlsCount}
+      </Badge>
+    );

  return (
-    <div>
-      <Spaced col={1}>
-        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Controls</span>
-        {suffix}
-      </Spaced>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <span>Controls</span>
+      {suffix}
    </div>
  );
 }
@ -71,7 +84,7 @@ export default addons.register(ADDON_ID, (api) => {

      api.addNotification({
        id: 'save-story-success',
-        icon: { name: 'passed', color: color.positive },
+        icon: <PassedIcon color={color.positive} />,
        content: {
          headline: 'Story saved',
          subHeadline: (
@ -85,7 +98,7 @@ export default addons.register(ADDON_ID, (api) => {
    } catch (error: any) {
      api.addNotification({
        id: 'save-story-error',
-        icon: { name: 'failed', color: color.negative },
+        icon: <FailedIcon color={color.negative} />,
        content: {
          headline: 'Failed to save story',
          subHeadline:
@ -116,7 +129,7 @@ export default addons.register(ADDON_ID, (api) => {

    api.addNotification({
      id: 'save-story-success',
-      icon: { name: 'passed', color: color.positive },
+      icon: <PassedIcon color={color.positive} />,
      content: {
        headline: 'Story created',
        subHeadline: (
--- a/code/core/src/core-events/index.ts
+++ b/code/core/src/core-events/index.ts
@ -89,8 +89,6 @@ enum events {
  TESTING_MODULE_CRASH_REPORT = 'testingModuleCrashReport',
  TESTING_MODULE_PROGRESS_REPORT = 'testingModuleProgressReport',
  TESTING_MODULE_RUN_REQUEST = 'testingModuleRunRequest',
-  /** @deprecated Use TESTING_MODULE_RUN_REQUEST instead */
-  TESTING_MODULE_RUN_ALL_REQUEST = 'testingModuleRunAllRequest',
  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = 'testingModuleCancelTestRunRequest',
  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE = 'testingModuleCancelTestRunResponse',
 }
@ -160,7 +158,6 @@ export const {
  TESTING_MODULE_CRASH_REPORT,
  TESTING_MODULE_PROGRESS_REPORT,
  TESTING_MODULE_RUN_REQUEST,
-  TESTING_MODULE_RUN_ALL_REQUEST,
  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE,
 } = events;
--- a/code/core/src/core-server/build-index.test.ts
+++ b/code/core/src/core-server/build-index.test.ts
@ -10,6 +10,19 @@ describe('buildIndex', () => {
    expect(index).toMatchInlineSnapshot(`
      {
        "entries": {
+          "my-component-a--docs": {
+            "id": "my-component-a--docs",
+            "importPath": "./core/src/core-server/utils/__mockdata__/docs-id-generation/A.stories.jsx",
+            "name": "Docs",
+            "storiesImports": [],
+            "tags": [
+              "dev",
+              "test",
+              "autodocs",
+            ],
+            "title": "A",
+            "type": "docs",
+          },
          "my-component-a--story-one": {
            "componentPath": undefined,
            "id": "my-component-a--story-one",
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@ -40,7 +40,7 @@ const options: StoryIndexGeneratorOptions = {
  configDir: join(__dirname, '__mockdata__'),
  workingDir: join(__dirname, '__mockdata__'),
  indexers: [csfIndexer],
-  docs: { defaultName: 'docs', autodocs: false },
+  docs: { defaultName: 'docs' },
 };

 describe('StoryIndexGenerator', () => {
@ -121,6 +121,19 @@ describe('StoryIndexGenerator', () => {
        expect(storyIndex).toMatchInlineSnapshot(`
          {
            "entries": {
+              "f--docs": {
+                "id": "f--docs",
+                "importPath": "./src/F.story.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "F",
+                "type": "docs",
+              },
              "f--story-one": {
                "componentPath": undefined,
                "id": "f--story-one",
@ -154,6 +167,19 @@ describe('StoryIndexGenerator', () => {
        expect(storyIndex).toMatchInlineSnapshot(`
          {
            "entries": {
+              "stories--docs": {
+                "id": "stories--docs",
+                "importPath": "./src/stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "stories",
+                "type": "docs",
+              },
              "stories--story-one": {
                "componentPath": undefined,
                "id": "stories--story-one",
@ -282,6 +308,19 @@ describe('StoryIndexGenerator', () => {
                "title": "A",
                "type": "story",
              },
+              "b--docs": {
+                "id": "b--docs",
+                "importPath": "./src/B.stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "B",
+                "type": "docs",
+              },
              "b--story-one": {
                "componentPath": undefined,
                "id": "b--story-one",
@ -331,6 +370,19 @@ describe('StoryIndexGenerator', () => {
                "title": "componentPath/package",
                "type": "story",
              },
+              "d--docs": {
+                "id": "d--docs",
+                "importPath": "./src/D.stories.jsx",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "D",
+                "type": "docs",
+              },
              "d--story-one": {
                "componentPath": undefined,
                "id": "d--story-one",
@ -431,6 +483,19 @@ describe('StoryIndexGenerator', () => {
                "title": "first-nested/deeply/Features",
                "type": "story",
              },
+              "h--docs": {
+                "id": "h--docs",
+                "importPath": "./src/H.stories.mjs",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "H",
+                "type": "docs",
+              },
              "h--story-one": {
                "componentPath": undefined,
                "id": "h--story-one",
@ -787,37 +852,28 @@ describe('StoryIndexGenerator', () => {
        await generator.initialize();

        expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
-          [
-            "a--docs",
-            "a--story-one",
-            "b--docs",
-            "b--story-one",
-            "example-button--docs",
-            "example-button--story-one",
-            "d--docs",
-            "d--story-one",
-            "h--docs",
-            "h--story-one",
-            "componentpath-extension--docs",
-            "componentpath-extension--story-one",
-            "componentpath-noextension--docs",
-            "componentpath-noextension--story-one",
-            "componentpath-package--docs",
-            "componentpath-package--story-one",
-            "first-nested-deeply-f--docs",
-            "first-nested-deeply-f--story-one",
-            "first-nested-deeply-features--docs",
-            "first-nested-deeply-features--with-play",
-            "first-nested-deeply-features--with-story-fn",
-            "first-nested-deeply-features--with-render",
-            "first-nested-deeply-features--with-test",
-            "first-nested-deeply-features--with-csf-1",
-            "nested-button--docs",
-            "nested-button--story-one",
-            "second-nested-g--docs",
-            "second-nested-g--story-one",
-          ]
-        `);
+  [
+    "a--story-one",
+    "b--docs",
+    "b--story-one",
+    "example-button--story-one",
+    "d--docs",
+    "d--story-one",
+    "h--docs",
+    "h--story-one",
+    "componentpath-extension--story-one",
+    "componentpath-noextension--story-one",
+    "componentpath-package--story-one",
+    "first-nested-deeply-f--story-one",
+    "first-nested-deeply-features--with-play",
+    "first-nested-deeply-features--with-story-fn",
+    "first-nested-deeply-features--with-render",
+    "first-nested-deeply-features--with-test",
+    "first-nested-deeply-features--with-csf-1",
+    "nested-button--story-one",
+    "second-nested-g--story-one",
+  ]
+`);
      });

      it('generates an entry for every CSF file when projectTags contains autodocs', async () => {
@ -864,21 +920,6 @@ describe('StoryIndexGenerator', () => {
        `);
      });

-      it('adds the autodocs tag to the autogenerated docs entries when docsOptions.autodocs = true', async () => {
-        const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|mjs|jsx)',
-          options
-        );
-
-        const generator = new StoryIndexGenerator([specifier], autodocsTrueOptions);
-        await generator.initialize();
-
-        const index = await generator.getIndex();
-        expect(index.entries['first-nested-deeply-f--docs'].tags).toEqual(
-          expect.arrayContaining(['autodocs'])
-        );
-      });
-
      it('adds the autodocs tag to the autogenerated docs entries when projectTags contains autodocs', async () => {
        const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
          './src/**/*.stories.(ts|js|mjs|jsx)',
@ -1095,7 +1136,6 @@ describe('StoryIndexGenerator', () => {
                "tags": [
                  "dev",
                  "test",
-                  "autodocs",
                  "component-tag",
                  "story-tag",
                  "attached-mdx",
@ -1111,7 +1151,6 @@ describe('StoryIndexGenerator', () => {
                "tags": [
                  "dev",
                  "test",
-                  "autodocs",
                  "component-tag",
                  "story-tag",
                ],
@ -1572,6 +1611,19 @@ describe('StoryIndexGenerator', () => {
                "title": "A",
                "type": "story",
              },
+              "b--docs": {
+                "id": "b--docs",
+                "importPath": "./src/B.stories.ts",
+                "name": "docs",
+                "storiesImports": [],
+                "tags": [
+                  "dev",
+                  "test",
+                  "autodocs",
+                ],
+                "title": "B",
+                "type": "docs",
+              },
              "b--story-one": {
                "componentPath": undefined,
                "id": "b--story-one",
@ -1815,30 +1867,33 @@ describe('StoryIndexGenerator', () => {
      });

      expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
-        [
-          "docs2-yabbadabbadooo--docs",
-          "d--story-one",
-          "b--story-one",
-          "nested-button--story-one",
-          "a--metaof",
-          "a--second-docs",
-          "a--story-one",
-          "second-nested-g--story-one",
-          "componentreference--docs",
-          "notitle--docs",
-          "example-button--story-one",
-          "h--story-one",
-          "componentpath-extension--story-one",
-          "componentpath-noextension--story-one",
-          "componentpath-package--story-one",
-          "first-nested-deeply-f--story-one",
-          "first-nested-deeply-features--with-play",
-          "first-nested-deeply-features--with-story-fn",
-          "first-nested-deeply-features--with-render",
-          "first-nested-deeply-features--with-test",
-          "first-nested-deeply-features--with-csf-1",
-        ]
-      `);
+  [
+    "docs2-yabbadabbadooo--docs",
+    "d--docs",
+    "d--story-one",
+    "b--docs",
+    "b--story-one",
+    "nested-button--story-one",
+    "a--metaof",
+    "a--second-docs",
+    "a--story-one",
+    "second-nested-g--story-one",
+    "componentreference--docs",
+    "notitle--docs",
+    "example-button--story-one",
+    "h--docs",
+    "h--story-one",
+    "componentpath-extension--story-one",
+    "componentpath-noextension--story-one",
+    "componentpath-package--story-one",
+    "first-nested-deeply-f--story-one",
+    "first-nested-deeply-features--with-play",
+    "first-nested-deeply-features--with-story-fn",
+    "first-nested-deeply-features--with-render",
+    "first-nested-deeply-features--with-test",
+    "first-nested-deeply-features--with-csf-1",
+  ]
+`);
    });
  });

--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@ -400,7 +400,7 @@ export class StoryIndexGenerator {
    //  a) autodocs is globally enabled
    //  b) we have autodocs enabled for this file
    const hasAutodocsTag = entries.some((entry) => entry.tags.includes(AUTODOCS_TAG));
-    const createDocEntry = hasAutodocsTag && !!this.options.docs.autodocs;
+    const createDocEntry = hasAutodocsTag;

    if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) {
      const name = this.options.docs.defaultName ?? 'Docs';
@ -592,10 +592,7 @@ export class StoryIndexGenerator {
      }

      // If you link a file to a tagged CSF file, you have probably made a mistake
-      if (
-        worseEntry.tags?.includes(AUTODOCS_TAG) &&
-        !(this.options.docs.autodocs === true || projectTags?.includes(AUTODOCS_TAG))
-      ) {
+      if (worseEntry.tags?.includes(AUTODOCS_TAG) && !projectTags?.includes(AUTODOCS_TAG)) {
        throw new IndexingError(
          `You created a component docs page for '${worseEntry.title}', but also tagged the CSF file with '${AUTODOCS_TAG}'. This is probably a mistake.`,
          [betterEntry.importPath, worseEntry.importPath]
@ -768,7 +765,6 @@ export class StoryIndexGenerator {
  getProjectTags(previewCode?: string) {
    let projectTags = [] as Tag[];
    const defaultTags = ['dev', 'test'];
-    const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
    if (previewCode) {
      try {
        const projectAnnotations = loadConfig(previewCode).parse();
@ -789,7 +785,7 @@ export class StoryIndexGenerator {
        `);
      }
    }
-    return [...defaultTags, ...projectTags, ...extraTags];
+    return [...defaultTags, ...projectTags];
  }

  // Get the story file names in "imported order"
--- a/code/core/src/core-server/utils/tests/index-extraction.test.ts
+++ b/code/core/src/core-server/utils/tests/index-extraction.test.ts
@ -14,7 +14,7 @@ const options: StoryIndexGeneratorOptions = {
  configDir: join(__dirname, '..', '__mockdata__'),
  workingDir: join(__dirname, '..', '__mockdata__'),
  indexers: [],
-  docs: { defaultName: 'docs', autodocs: false },
+  docs: { defaultName: 'docs' },
 };

 describe('story extraction', () => {
@ -392,57 +392,6 @@ describe('story extraction', () => {
  });
 });
 describe('docs entries from story extraction', () => {
-  it('adds docs entry when autodocs is globally enabled', async () => {
-    const relativePath = './src/A.stories.js';
-    const absolutePath = join(options.workingDir, relativePath);
-    const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
-
-    const generator = new StoryIndexGenerator([specifier], {
-      ...options,
-      docs: { defaultName: 'docs', autodocs: true },
-      indexers: [
-        {
-          test: /\.stories\.(m?js|ts)x?$/,
-          createIndex: async (fileName) => [
-            {
-              exportName: 'StoryOne',
-              __id: 'a--story-one',
-              name: 'Story One',
-              title: 'A',
-              tags: ['story-tag-from-indexer'],
-              importPath: fileName,
-              type: 'story',
-            },
-          ],
-        },
-      ],
-    });
-    const result = await generator.extractStories(specifier, absolutePath);
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "dependents": [],
-        "entries": [
-          {
-            "componentPath": undefined,
-            "extra": {
-              "metaId": undefined,
-              "stats": {},
-            },
-            "id": "a--story-one",
-            "importPath": "./src/A.stories.js",
-            "name": "Story One",
-            "tags": [
-              "story-tag-from-indexer",
-            ],
-            "title": "A",
-            "type": "story",
-          },
-        ],
-        "type": "stories",
-      }
-    `);
-  });
  it(`adds docs entry when autodocs is "tag" and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
    const relativePath = './src/A.stories.js';
    const absolutePath = join(options.workingDir, relativePath);
@ -450,7 +399,7 @@ describe('docs entries from story extraction', () => {

    const generator = new StoryIndexGenerator([specifier], {
      ...options,
-      docs: { defaultName: 'docs', autodocs: 'tag' },
+      docs: { defaultName: 'docs' },
      indexers: [
        {
          test: /\.stories\.(m?js|ts)x?$/,
@ -507,56 +456,4 @@ describe('docs entries from story extraction', () => {
      }
    `);
  });
-  it(`DOES NOT adds docs entry when autodocs is false and an entry has the "${AUTODOCS_TAG}" tag`, async () => {
-    const relativePath = './src/A.stories.js';
-    const absolutePath = join(options.workingDir, relativePath);
-    const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(relativePath, options);
-
-    const generator = new StoryIndexGenerator([specifier], {
-      ...options,
-      docs: { defaultName: 'docs', autodocs: false },
-      indexers: [
-        {
-          test: /\.stories\.(m?js|ts)x?$/,
-          createIndex: async (fileName) => [
-            {
-              exportName: 'StoryOne',
-              __id: 'a--story-one',
-              name: 'Story One',
-              title: 'A',
-              tags: [AUTODOCS_TAG, 'story-tag-from-indexer'],
-              importPath: fileName,
-              type: 'story',
-            },
-          ],
-        },
-      ],
-    });
-    const result = await generator.extractStories(specifier, absolutePath);
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "dependents": [],
-        "entries": [
-          {
-            "componentPath": undefined,
-            "extra": {
-              "metaId": undefined,
-              "stats": {},
-            },
-            "id": "a--story-one",
-            "importPath": "./src/A.stories.js",
-            "name": "Story One",
-            "tags": [
-              "autodocs",
-              "story-tag-from-indexer",
-            ],
-            "title": "A",
-            "type": "story",
-          },
-        ],
-        "type": "stories",
-      }
-    `);
-  });
 });
--- a/code/core/src/core-server/utils/stories-json.test.ts
+++ b/code/core/src/core-server/utils/stories-json.test.ts
@ -47,7 +47,7 @@ const getInitializedStoryIndexGenerator = async (
    indexers: [csfIndexer],
    configDir: workingDir,
    workingDir,
-    docs: { defaultName: 'docs', autodocs: false },
+    docs: { defaultName: 'docs' },
    ...overrides,
  };
  const generator = new StoryIndexGenerator(inputNormalizedStories, options);
@ -155,6 +155,19 @@ describe('useStoriesJson', () => {
              "title": "A",
              "type": "story",
            },
+            "b--docs": {
+              "id": "b--docs",
+              "importPath": "./src/B.stories.ts",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "B",
+              "type": "docs",
+            },
            "b--story-one": {
              "id": "b--story-one",
              "importPath": "./src/B.stories.ts",
@ -203,6 +216,19 @@ describe('useStoriesJson', () => {
              "title": "componentPath/package",
              "type": "story",
            },
+            "d--docs": {
+              "id": "d--docs",
+              "importPath": "./src/D.stories.jsx",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "D",
+              "type": "docs",
+            },
            "d--story-one": {
              "id": "d--story-one",
              "importPath": "./src/D.stories.jsx",
@ -334,6 +360,19 @@ describe('useStoriesJson', () => {
              "title": "first-nested/deeply/Features",
              "type": "story",
            },
+            "h--docs": {
+              "id": "h--docs",
+              "importPath": "./src/H.stories.mjs",
+              "name": "docs",
+              "storiesImports": [],
+              "tags": [
+                "dev",
+                "test",
+                "autodocs",
+              ],
+              "title": "H",
+              "type": "docs",
+            },
            "h--story-one": {
              "id": "h--story-one",
              "importPath": "./src/H.stories.mjs",
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@ -278,16 +278,6 @@ export class CsfFile {

  imports: string[];

-  /** @deprecated Use `_options.fileName` instead */
-  get _fileName() {
-    return this._options.fileName;
-  }
-
-  /** @deprecated Use `_options.makeTitle` instead */
-  get _makeTitle() {
-    return this._options.makeTitle;
-  }
-
  constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
    this._ast = ast;
    this._file = file;
--- a/code/core/src/csf/story.ts
+++ b/code/core/src/csf/story.ts
@ -405,8 +405,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer = Renderer, TArgs
   */
  beforeAll?: BeforeAll;

-  /** @deprecated Project `globals` renamed to `initiaGlobals` */
-  globals?: Globals;
  initialGlobals?: Globals;
  globalTypes?: GlobalTypes;
  applyDecorators?: DecoratorApplicator<TRenderer, Args>;
--- a/code/core/src/manager-api/lib/addons.ts
+++ b/code/core/src/manager-api/lib/addons.ts
@ -8,8 +8,6 @@ import type {
  Addon_Elements,
  Addon_Loaders,
  Addon_PageType,
-  Addon_SidebarBottomType,
-  Addon_SidebarTopType,
  Addon_TestProviderType,
  Addon_Type,
  Addon_Types,
@ -70,8 +68,6 @@ export class AddonStore {
    T extends
      | Addon_Types
      | Addon_TypesEnum.experimental_PAGE
-      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-      | Addon_TypesEnum.experimental_SIDEBAR_TOP
      | Addon_TypesEnum.experimental_TEST_PROVIDER,
  >(type: T): Addon_Collection<Addon_TypesMapping[T]> | any {
    if (!this.elements[type]) {
@ -91,8 +87,6 @@ export class AddonStore {
    id: string,
    addon:
      | Addon_BaseType
-      | Omit<Addon_SidebarTopType, 'id'>
-      | Omit<Addon_SidebarBottomType, 'id'>
      | Omit<Addon_TestProviderType, 'id'>
      | Omit<Addon_PageType, 'id'>
      | Omit<Addon_WrapperType, 'id'>
--- a/code/core/src/manager-api/modules/addons.ts
+++ b/code/core/src/manager-api/modules/addons.ts
@ -29,9 +29,7 @@ export interface SubAPI {
    T extends
      | Addon_Types
      | Addon_TypesEnum.experimental_PAGE
-      | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-      | Addon_TypesEnum.experimental_TEST_PROVIDER
-      | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
+      | Addon_TypesEnum.experimental_TEST_PROVIDER,
  >(
    type: T
  ) => Addon_Collection<Addon_TypesMapping[T]>;
--- a/code/core/src/manager-api/modules/experimental_testmodule.ts
+++ b/code/core/src/manager-api/modules/experimental_testmodule.ts
@ -1,6 +1,5 @@
 import {
  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
-  TESTING_MODULE_RUN_ALL_REQUEST,
  TESTING_MODULE_RUN_REQUEST,
  type TestProviderId,
  type TestProviderState,
@ -98,9 +97,6 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {

        fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload);

-        // For backwards compatibility:
-        fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id });
-
        return () => api.cancelTestProvider(id);
      }

--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@ -88,7 +88,6 @@ export type State = layout.SubState &
  whatsnew.SubState &
  RouterData &
  API_OptionsData &
-  DeprecatedState &
  Other;

 export type API = addons.SubAPI &
@ -107,15 +106,6 @@ export type API = addons.SubAPI &
  whatsnew.SubAPI &
  Other;

-interface DeprecatedState {
-  /** @deprecated Use index */
-  storiesHash: API_IndexHash;
-  /** @deprecated Use previewInitialized */
-  storiesConfigured: boolean;
-  /** @deprecated Use indexError */
-  storiesFailed?: Error;
-}
-
 interface Other {
  [key: string]: any;
 }
@ -299,23 +289,7 @@ function ManagerConsumer<P = Combo>({

 export function useStorybookState(): State {
  const { state } = useContext(ManagerContext);
-  return {
-    ...state,
-
-    // deprecated fields for back-compat
-    get storiesHash() {
-      deprecate('state.storiesHash is deprecated, please use state.index');
-      return this.index || {};
-    },
-    get storiesConfigured() {
-      deprecate('state.storiesConfigured is deprecated, please use state.previewInitialized');
-      return this.previewInitialized;
-    },
-    get storiesFailed() {
-      deprecate('state.storiesFailed is deprecated, please use state.indexError');
-      return this.indexError;
-    },
-  };
+  return state;
 }
 export function useStorybookApi(): API {
  const { api } = useContext(ManagerContext);
--- a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx
+++ b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx
@ -274,20 +274,3 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
    },
  },
 };
-
-export const WithOldIconFormat: Story = {
-  args: {
-    notification: {
-      id: '13',
-      onClear,
-      content: {
-        headline: 'Storybook notifications has a accessibility icon it can be any color!',
-      },
-      icon: {
-        name: 'accessibility',
-        color: 'gold',
-      },
-      link: undefined,
-    },
-  },
-};
--- a/code/core/src/manager/components/notifications/NotificationItem.tsx
+++ b/code/core/src/manager/components/notifications/NotificationItem.tsx
@ -1,15 +1,14 @@
 import type { FC, SyntheticEvent } from 'react';
 import React, { useCallback, useEffect, useRef } from 'react';

-import type { IconsProps } from 'storybook/internal/components';
-import { IconButton, Icons } from 'storybook/internal/components';
+import { IconButton } from 'storybook/internal/components';
 import { Link } from 'storybook/internal/router';

 import { CloseAltIcon } from '@storybook/icons';

 import { transparentize } from 'polished';
 import { type State } from 'storybook/manager-api';
-import { keyframes, styled, useTheme } from 'storybook/theming';
+import { keyframes, styled } from 'storybook/theming';

 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';

@ -133,31 +132,17 @@ const SubHeadline = styled.div(({ theme }) => ({
 const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
  icon,
  content: { headline, subHeadline },
-}) => {
-  const theme = useTheme();
-  const defaultColor = theme.base === 'dark' ? theme.color.mediumdark : theme.color.mediumlight;
-
-  return (
-    <>
-      {!icon || (
-        <NotificationIconWrapper>
-          {React.isValidElement(icon)
-            ? icon
-            : typeof icon === 'object' &&
-              'name' in icon && (
-                <Icons icon={icon.name as IconsProps['icon']} color={icon.color || defaultColor} />
-              )}
-        </NotificationIconWrapper>
-      )}
-      <NotificationTextWrapper>
-        <Headline title={headline} hasIcon={!!icon}>
-          {headline}
-        </Headline>
-        {subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
-      </NotificationTextWrapper>
-    </>
-  );
-};
+}) => (
+  <>
+    {!icon || <NotificationIconWrapper>{icon}</NotificationIconWrapper>}
+    <NotificationTextWrapper>
+      <Headline title={headline} hasIcon={!!icon}>
+        {headline}
+      </Headline>
+      {subHeadline && <SubHeadline>{subHeadline}</SubHeadline>}
+    </NotificationTextWrapper>
+  </>
+);

 const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
  width: 28,
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@ -31,7 +31,7 @@ const menuItems = [
 ];

 export const MenuHighlighted: Story = () => (
-  <Heading menuHighlighted menu={menuItems} isLoading={false} extra={[]} />
+  <Heading menuHighlighted menu={menuItems} isLoading={false} />
 );

 export const standardData = { menu: menuItems };
@ -50,7 +50,7 @@ export const Standard: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -69,7 +69,7 @@ export const StandardNoLink: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -88,7 +88,7 @@ export const LinkAndText: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -107,7 +107,7 @@ export const OnlyText: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -126,7 +126,7 @@ export const LongText: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -145,7 +145,7 @@ export const CustomTitle: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -164,7 +164,7 @@ export const CustomBrandImage: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -183,7 +183,7 @@ export const CustomBrandImageTall: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -202,7 +202,7 @@ export const CustomBrandImageUnsizedSVG: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -221,7 +221,7 @@ export const NoBrand: Story = () => {
        },
      }}
    >
-      <Heading menu={menuItems} isLoading={false} extra={[]} />
+      <Heading menu={menuItems} isLoading={false} />
    </ThemeProvider>
  );
 };
@ -230,7 +230,6 @@ export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
  args: {
    menu: menuItems,
    skipLinkHref: '#storybook-preview-wrapper',
-    extra: [],
    isLoading: false,
  },
  globals: { sb_theme: 'light' },
--- a/code/core/src/manager/components/sidebar/Heading.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.tsx
@ -2,7 +2,6 @@ import type { ComponentProps, FC } from 'react';
 import React from 'react';

 import { Button } from 'storybook/internal/components';
-import type { Addon_SidebarTopType } from 'storybook/internal/types';

 import { styled } from 'storybook/theming';

@ -13,7 +12,6 @@ import { SidebarMenu } from './Menu';
 export interface HeadingProps {
  menuHighlighted?: boolean;
  menu: MenuList;
-  extra: Addon_SidebarTopType[];
  skipLinkHref?: string;
  isLoading: boolean;
  onMenuClick?: SidebarMenuProps['onClick'];
@ -83,7 +81,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
  menuHighlighted = false,
  menu,
  skipLinkHref,
-  extra,
  isLoading,
  onMenuClick,
  ...props
@ -102,7 +99,6 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
        <Brand />
      </BrandArea>

-      {isLoading ? null : extra.map(({ id, render: Render }) => <Render key={id} />)}
      <SidebarMenu menu={menu} isHighlighted={menuHighlighted} onClick={onMenuClick} />
    </HeadingWrapper>
  );
--- a/code/core/src/manager/components/sidebar/RefBlocks.tsx
+++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@ -80,8 +80,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
              this Storybook.
            </Text>
            <div>
-              {/* TODO: Make sure this button is working without the deprecated props */}
-              <Button small gray onClick={refresh}>
+              <Button size="small" variant="outline" onClick={refresh}>
                <SyncIcon />
                Refresh now
              </Button>
@ -92,7 +91,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
            <Text>Sign in to browse this Storybook.</Text>
            <div>
              {/* @ts-expect-error (non strict) */}
-              <Button small gray onClick={open}>
+              <Button size="small" variant="outline" onClick={open}>
                <LockIcon />
                Sign in
              </Button>
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@ -1,6 +1,5 @@
 import React from 'react';

-import { type Addon_SidebarTopType } from 'storybook/internal/types';
 import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';

 import type { Meta, StoryObj } from '@storybook/react-vite';
@ -68,7 +67,6 @@ const meta = {
  args: {
    previewInitialized: true,
    menu,
-    extra: [] as Addon_SidebarTopType[],
    index: index,
    indexJson: {
      entries: {
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@ -7,7 +7,7 @@ import {
  TooltipNote,
  WithTooltip,
 } from 'storybook/internal/components';
-import type { API_LoadedRefData, Addon_SidebarTopType, StoryIndex } from 'storybook/internal/types';
+import type { API_LoadedRefData, StoryIndex } from 'storybook/internal/types';
 import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';

 import { global } from '@storybook/global';
@ -117,7 +117,6 @@ export interface SidebarProps extends API_LoadedRefData {
  refs: State['refs'];
  allStatuses: StatusesByStoryIdAndTypeId;
  menu: any[];
-  extra: Addon_SidebarTopType[];
  storyId?: string;
  refId?: string;
  menuHighlighted?: boolean;
@ -137,7 +136,6 @@ export const Sidebar = React.memo(function Sidebar({
  allStatuses,
  previewInitialized,
  menu,
-  extra,
  menuHighlighted = false,
  enableShortcuts = true,
  isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
@ -162,7 +160,6 @@ export const Sidebar = React.memo(function Sidebar({
            className="sidebar-header"
            menuHighlighted={menuHighlighted}
            menu={menu}
-            extra={extra}
            skipLinkHref="#storybook-preview-wrapper"
            isLoading={isLoading}
            onMenuClick={onMenuClick}
--- a/code/core/src/manager/components/sidebar/tests/Sidebar.test.tsx
+++ b/code/core/src/manager/components/sidebar/tests/Sidebar.test.tsx
@ -21,15 +21,7 @@ const factory = (props: Partial<SidebarProps>): RenderResult => {

  return render(
    <ThemeProvider theme={theme}>
-      <Sidebar
-        menu={[]}
-        index={{}}
-        previewInitialized
-        refs={{}}
-        allStatuses={{}}
-        extra={[]}
-        {...props}
-      />
+      <Sidebar menu={[]} index={{}} previewInitialized refs={{}} allStatuses={{}} {...props} />
    </ThemeProvider>
  );
 };
--- a/code/core/src/manager/container/Sidebar.tsx
+++ b/code/core/src/manager/container/Sidebar.tsx
@ -46,10 +46,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
    const whatsNewNotificationsEnabled =
      state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;

-    const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]);
-
    return {
      title: name,
      url,
@ -64,7 +60,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
      menu,
      menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
      enableShortcuts,
-      extra: top,
    };
  };

--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@ -494,8 +494,6 @@ export default {
    'H6',
    'HR',
    'IconButton',
-    'IconButtonSkeleton',
-    'Icons',
    'Img',
    'LI',
    'Link',
@ -514,7 +512,6 @@ export default {
    'Span',
    'StorybookIcon',
    'StorybookLogo',
-    'Symbols',
    'SyntaxHighlighter',
    'TT',
    'TabBar',
@ -534,7 +531,6 @@ export default {
    'components',
    'createCopyToClipboardFunction',
    'getStoryHref',
-    'icons',
    'interleaveSeparators',
    'nameSpaceClassNames',
    'resetComponents',
@ -596,7 +592,6 @@ export default {
    'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
    'TESTING_MODULE_CRASH_REPORT',
    'TESTING_MODULE_PROGRESS_REPORT',
-    'TESTING_MODULE_RUN_ALL_REQUEST',
    'TESTING_MODULE_RUN_REQUEST',
    'TOGGLE_WHATS_NEW_NOTIFICATIONS',
    'UNHANDLED_ERRORS_WHILE_PLAYING',
@ -660,7 +655,6 @@ export default {
    'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
    'TESTING_MODULE_CRASH_REPORT',
    'TESTING_MODULE_PROGRESS_REPORT',
-    'TESTING_MODULE_RUN_ALL_REQUEST',
    'TESTING_MODULE_RUN_REQUEST',
    'TOGGLE_WHATS_NEW_NOTIFICATIONS',
    'UNHANDLED_ERRORS_WHILE_PLAYING',
--- a/code/core/src/preview-api/README-preview-web.md
+++ b/code/core/src/preview-api/README-preview-web.md
@ -30,7 +30,7 @@ A rendering story goes through these phases:

 - `preparing` - (maybe async) import the story file and prepare the story function.
 - `loading` - async loaders are running
- `rendering` - the `renderToDOM` function for the framework is running
+- `rendering` - the `renderToCanvas` function for the framework is running
 - `playing` - the `play` function is running
 - `completed` - the story is done.

--- a/code/core/src/preview-api/modules/preview-web/Preview.tsx
+++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx
@ -56,9 +56,6 @@ const STORY_INDEX_PATH = './index.json';
 export type MaybePromise<T> = Promise<T> | T;

 export class Preview<TRenderer extends Renderer> {
-  /** @deprecated Will be removed in 8.0, please use channel instead */
-  serverChannel?: Channel;
-
  protected storyStoreValue?: StoryStore<TRenderer>;

  renderToCanvas?: RenderToCanvas<TRenderer>;
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@ -164,7 +164,10 @@ describe('PreviewWeb', () => {

      const preview = await createAndRenderPreview();

-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'c',
+      });
    });

    it('emits the SET_GLOBALS event', async () => {
@ -208,7 +211,10 @@ describe('PreviewWeb', () => {

      const preview = await createAndRenderPreview();

-      expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+      expect(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+      ).toEqual({
        foo: 'url',
        one: 1,
      });
@ -234,7 +240,10 @@ describe('PreviewWeb', () => {
      });
      await preview.ready();

-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'b',
+      });
    });
  });

@ -895,7 +904,10 @@ describe('PreviewWeb', () => {

      emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });

-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'b' });
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+        a: 'b',
+      });
    });

    it('passes globals in context to renderToCanvas', async () => {
@ -972,7 +984,8 @@ describe('PreviewWeb', () => {
      });

      expect(
-        (preview.storyStore as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer> as StoryStore<Renderer>)?.args.get(
          'component-one--a'
        )
      ).toEqual({
@ -1256,7 +1269,8 @@ describe('PreviewWeb', () => {
          await waitForRender();

          mockChannel.emit.mockClear();
-          const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+          // @ts-expect-error Ignore protected property
+          const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
            storyId: 'component-one--a',
          });
          preview.renderStoryToElement(story, 'story-element' as any, callbacks, {});
@ -1296,7 +1310,8 @@ describe('PreviewWeb', () => {
          await waitForRender();

          mockChannel.emit.mockClear();
-          const story = await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+          // @ts-expect-error Ignore protected property
+          const story = await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
            storyId: 'component-one--a',
          });
          preview.renderStoryToElement(story, 'story-element' as any, callbacks, {
@ -2284,7 +2299,10 @@ describe('PreviewWeb', () => {
          updatedArgs: { foo: 'updated' },
        });
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'updated',
          one: 1,
        });
@ -2296,7 +2314,10 @@ describe('PreviewWeb', () => {
        });
        await waitForSetCurrentStory();
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'updated',
          one: 1,
        });
@ -2308,7 +2329,10 @@ describe('PreviewWeb', () => {
        });
        await waitForSetCurrentStory();
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'updated',
          one: 1,
        });
@ -2877,7 +2901,10 @@ describe('PreviewWeb', () => {
        mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
        preview.onStoryIndexChanged();
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'url',
          one: 1,
        });
@ -3327,7 +3354,10 @@ describe('PreviewWeb', () => {
        });
        await waitForSetCurrentStory();
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'updated',
          one: 1,
        });
@ -3346,7 +3376,10 @@ describe('PreviewWeb', () => {
        });
        await waitForSetCurrentStory();
        await waitForRender();
-        expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+        expect(
+          // @ts-expect-error Ignore protected property
+          (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+        ).toEqual({
          foo: 'updated',
          bar: 'edited',
          one: 1,
@ -3517,7 +3550,10 @@ describe('PreviewWeb', () => {
        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
        await waitForRender();

-        expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({ a: 'c' });
+        // @ts-expect-error Ignore protected property
+        expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+          a: 'c',
+        });
      });
    });

@ -3566,7 +3602,8 @@ describe('PreviewWeb', () => {
      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
      await waitForRender();

-      expect((preview.storyStore as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
+      // @ts-expect-error Ignore protected property
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
        a: 'edited',
      });
    });
@ -3594,7 +3631,10 @@ describe('PreviewWeb', () => {
      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
      await waitForRender();

-      expect((preview.storyStore as StoryStore<Renderer>)?.args.get('component-one--a')).toEqual({
+      expect(
+        // @ts-expect-error Ignore protected property
+        (preview.storyStoreValue as StoryStore<Renderer>)?.args.get('component-one--a')
+      ).toEqual({
        foo: 'a',
        one: 1,
        global: 'added',
@ -3722,7 +3762,8 @@ describe('PreviewWeb', () => {
      componentOneExports.b.play.mockImplementationOnce(async () => gate);
      // @ts-expect-error (not strict)
      preview.renderStoryToElement(
-        await (preview.storyStore as StoryStore<Renderer>)?.loadStory({
+        // @ts-expect-error Ignore protected property
+        await (preview.storyStoreValue as StoryStore<Renderer>)?.loadStory({
          storyId: 'component-one--b',
        }),
        {} as any,
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@ -45,7 +45,7 @@ const importFn = vi.fn(async (path) => {

 const projectAnnotations: ProjectAnnotations<any> = composeConfigs([
  {
-    globals: { a: 'b' },
+    initialGlobals: { a: 'b' },
    globalTypes: { a: { type: 'string' } },
    argTypes: { a: { type: 'string' } },
    render: vi.fn(),
@ -684,446 +684,4 @@ describe('StoryStore', () => {
      ]);
    });
  });
-
-  describe('raw', () => {
-    it('produces an array of stories', async () => {
-      const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-      await store.cacheAllCSFFiles();
-
-      expect(store.raw()).toMatchInlineSnapshot(`
-        [
-          {
-            "applyAfterEach": [Function],
-            "applyBeforeEach": [Function],
-            "applyLoaders": [Function],
-            "argTypes": {
-              "a": {
-                "name": "a",
-                "type": {
-                  "name": "string",
-                },
-              },
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "component": undefined,
-            "componentId": "component-one",
-            "id": "component-one--a",
-            "initialArgs": {
-              "foo": "a",
-            },
-            "kind": "Component One",
-            "moduleExport": {
-              "args": {
-                "foo": "a",
-              },
-            },
-            "mount": [Function],
-            "name": "A",
-            "originalStoryFn": [MockFunction spy],
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "fileName": "./src/ComponentOne.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "playFunction": undefined,
-            "renderToCanvas": undefined,
-            "runStep": [Function],
-            "story": "A",
-            "storyFn": [Function],
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testingLibraryRender": undefined,
-            "title": "Component One",
-            "unboundStoryFn": [Function],
-            "undecoratedStoryFn": [Function],
-            "usesMount": false,
-          },
-          {
-            "applyAfterEach": [Function],
-            "applyBeforeEach": [Function],
-            "applyLoaders": [Function],
-            "argTypes": {
-              "a": {
-                "name": "a",
-                "type": {
-                  "name": "string",
-                },
-              },
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "component": undefined,
-            "componentId": "component-one",
-            "id": "component-one--b",
-            "initialArgs": {
-              "foo": "b",
-            },
-            "kind": "Component One",
-            "moduleExport": {
-              "args": {
-                "foo": "b",
-              },
-            },
-            "mount": [Function],
-            "name": "B",
-            "originalStoryFn": [MockFunction spy],
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "fileName": "./src/ComponentOne.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "playFunction": undefined,
-            "renderToCanvas": undefined,
-            "runStep": [Function],
-            "story": "B",
-            "storyFn": [Function],
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testingLibraryRender": undefined,
-            "title": "Component One",
-            "unboundStoryFn": [Function],
-            "undecoratedStoryFn": [Function],
-            "usesMount": false,
-          },
-          {
-            "applyAfterEach": [Function],
-            "applyBeforeEach": [Function],
-            "applyLoaders": [Function],
-            "argTypes": {
-              "a": {
-                "name": "a",
-                "type": {
-                  "name": "string",
-                },
-              },
-              "foo": {
-                "name": "foo",
-                "type": {
-                  "name": "string",
-                },
-              },
-            },
-            "component": undefined,
-            "componentId": "component-two",
-            "id": "component-two--c",
-            "initialArgs": {
-              "foo": "c",
-            },
-            "kind": "Component Two",
-            "moduleExport": {
-              "args": {
-                "foo": "c",
-              },
-            },
-            "mount": [Function],
-            "name": "C",
-            "originalStoryFn": [MockFunction spy],
-            "parameters": {
-              "__isArgsStory": false,
-              "backgrounds": {
-                "disable": false,
-                "grid": {
-                  "cellAmount": 5,
-                  "cellSize": 20,
-                  "opacity": 0.5,
-                },
-              },
-              "fileName": "./src/ComponentTwo.stories.js",
-              "throwPlayFunctionExceptions": false,
-            },
-            "playFunction": undefined,
-            "renderToCanvas": undefined,
-            "runStep": [Function],
-            "story": "C",
-            "storyFn": [Function],
-            "storyGlobals": {},
-            "subcomponents": undefined,
-            "tags": [
-              "dev",
-              "test",
-            ],
-            "testingLibraryRender": undefined,
-            "title": "Component Two",
-            "unboundStoryFn": [Function],
-            "undecoratedStoryFn": [Function],
-            "usesMount": false,
-          },
-        ]
-      `);
-    });
-  });
-
-  describe('getSetStoriesPayload', () => {
-    it('maps stories list to payload correctly', async () => {
-      const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-      await store.cacheAllCSFFiles();
-
-      expect(store.getSetStoriesPayload()).toMatchInlineSnapshot(`
-        {
-          "globalParameters": {},
-          "globals": {
-            "a": "b",
-          },
-          "kindParameters": {
-            "Component One": {},
-            "Component Two": {},
-          },
-          "stories": {
-            "component-one--a": {
-              "argTypes": {
-                "a": {
-                  "name": "a",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-                "foo": {
-                  "name": "foo",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-              },
-              "args": {
-                "foo": "a",
-              },
-              "component": undefined,
-              "componentId": "component-one",
-              "globals": {
-                "a": "b",
-              },
-              "id": "component-one--a",
-              "initialArgs": {
-                "foo": "a",
-              },
-              "kind": "Component One",
-              "name": "A",
-              "parameters": {
-                "__isArgsStory": false,
-                "backgrounds": {
-                  "disable": false,
-                  "grid": {
-                    "cellAmount": 5,
-                    "cellSize": 20,
-                    "opacity": 0.5,
-                  },
-                },
-                "fileName": "./src/ComponentOne.stories.js",
-                "throwPlayFunctionExceptions": false,
-              },
-              "playFunction": undefined,
-              "renderToCanvas": undefined,
-              "story": "A",
-              "storyGlobals": {},
-              "subcomponents": undefined,
-              "tags": [
-                "dev",
-                "test",
-              ],
-              "testingLibraryRender": undefined,
-              "title": "Component One",
-              "usesMount": false,
-            },
-            "component-one--b": {
-              "argTypes": {
-                "a": {
-                  "name": "a",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-                "foo": {
-                  "name": "foo",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-              },
-              "args": {
-                "foo": "b",
-              },
-              "component": undefined,
-              "componentId": "component-one",
-              "globals": {
-                "a": "b",
-              },
-              "id": "component-one--b",
-              "initialArgs": {
-                "foo": "b",
-              },
-              "kind": "Component One",
-              "name": "B",
-              "parameters": {
-                "__isArgsStory": false,
-                "backgrounds": {
-                  "disable": false,
-                  "grid": {
-                    "cellAmount": 5,
-                    "cellSize": 20,
-                    "opacity": 0.5,
-                  },
-                },
-                "fileName": "./src/ComponentOne.stories.js",
-                "throwPlayFunctionExceptions": false,
-              },
-              "playFunction": undefined,
-              "renderToCanvas": undefined,
-              "story": "B",
-              "storyGlobals": {},
-              "subcomponents": undefined,
-              "tags": [
-                "dev",
-                "test",
-              ],
-              "testingLibraryRender": undefined,
-              "title": "Component One",
-              "usesMount": false,
-            },
-            "component-two--c": {
-              "argTypes": {
-                "a": {
-                  "name": "a",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-                "foo": {
-                  "name": "foo",
-                  "type": {
-                    "name": "string",
-                  },
-                },
-              },
-              "args": {
-                "foo": "c",
-              },
-              "component": undefined,
-              "componentId": "component-two",
-              "globals": {
-                "a": "b",
-              },
-              "id": "component-two--c",
-              "initialArgs": {
-                "foo": "c",
-              },
-              "kind": "Component Two",
-              "name": "C",
-              "parameters": {
-                "__isArgsStory": false,
-                "backgrounds": {
-                  "disable": false,
-                  "grid": {
-                    "cellAmount": 5,
-                    "cellSize": 20,
-                    "opacity": 0.5,
-                  },
-                },
-                "fileName": "./src/ComponentTwo.stories.js",
-                "throwPlayFunctionExceptions": false,
-              },
-              "playFunction": undefined,
-              "renderToCanvas": undefined,
-              "story": "C",
-              "storyGlobals": {},
-              "subcomponents": undefined,
-              "tags": [
-                "dev",
-                "test",
-              ],
-              "testingLibraryRender": undefined,
-              "title": "Component Two",
-              "usesMount": false,
-            },
-          },
-          "v": 2,
-        }
-      `);
-    });
-  });
-
-  describe('getStoriesJsonData', () => {
-    describe('in back-compat mode', () => {
-      it('maps stories list to payload correctly', async () => {
-        const store = new StoryStore(storyIndex, importFn, projectAnnotations);
-        await store.cacheAllCSFFiles();
-
-        expect(store.getStoriesJsonData()).toMatchInlineSnapshot(`
-          {
-            "stories": {
-              "component-one--a": {
-                "id": "component-one--a",
-                "importPath": "./src/ComponentOne.stories.js",
-                "kind": "Component One",
-                "name": "A",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentOne.stories.js",
-                },
-                "story": "A",
-                "title": "Component One",
-              },
-              "component-one--b": {
-                "id": "component-one--b",
-                "importPath": "./src/ComponentOne.stories.js",
-                "kind": "Component One",
-                "name": "B",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentOne.stories.js",
-                },
-                "story": "B",
-                "title": "Component One",
-              },
-              "component-two--c": {
-                "id": "component-two--c",
-                "importPath": "./src/ComponentTwo.stories.js",
-                "kind": "Component Two",
-                "name": "C",
-                "parameters": {
-                  "__isArgsStory": false,
-                  "fileName": "./src/ComponentTwo.stories.js",
-                },
-                "story": "C",
-                "title": "Component Two",
-              },
-            },
-            "v": 3,
-          }
-        `);
-      });
-    });
-  });
 });
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@ -1,11 +1,9 @@
-import { deprecate } from 'storybook/internal/client-logger';
-import type { Canvas, CleanupCallback } from 'storybook/internal/csf';
+import type { CleanupCallback } from 'storybook/internal/csf';
 import {
  CalledExtractOnStoreError,
  MissingStoryFromCsfFileError,
 } from 'storybook/internal/preview-errors';
 import type {
-  BoundStory,
  CSFFile,
  ComponentTitle,
  IndexEntry,
@ -18,7 +16,6 @@ import type {
  PreparedStory,
  ProjectAnnotations,
  Renderer,
-  StoryContext,
  StoryContextForEnhancers,
  StoryId,
  StoryIndex,
@ -28,7 +25,6 @@ import type {

 import { mapValues, omitBy, pick } from 'es-toolkit';
 import memoize from 'memoizerific';
-import type { UserEventObject } from 'storybook/test';

 import { HooksContext } from '../addons';
 import { ArgsStore } from './ArgsStore';
@ -334,107 +330,4 @@ export class StoryStore<TRenderer extends Renderer> {
      {} as Record<string, any>
    );
  }
-
-  // TODO: Remove in 9.0
-  getSetStoriesPayload() {
-    const stories = this.extract({ includeDocsOnly: true });
-
-    const kindParameters: Parameters = Object.values(stories).reduce(
-      (acc: Parameters, { title }: { title: ComponentTitle }) => {
-        acc[title] = {};
-        return acc;
-      },
-      {} as Parameters
-    );
-
-    return {
-      v: 2,
-      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).
-  getStoriesJsonData = (): StoryIndexV3 => {
-    const value = this.getSetStoriesPayload();
-    const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];
-
-    const stories: Record<StoryId, V3CompatIndexEntry> = mapValues(value.stories, (story) => {
-      const { importPath } = this.storyIndex.entries[story.id];
-      return {
-        ...picky(story, ['id', 'name', 'title']),
-        importPath,
-        // These 3 fields were going to be dropped in v7, but instead we will keep them for the
-        // 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
-        // In v8 we will (likely) completely drop support for `extract` and `getStoriesJsonData`
-        kind: story.title,
-        story: story.name,
-        parameters: {
-          ...picky(story.parameters, allowedParameters),
-          fileName: importPath,
-        },
-      } as V3CompatIndexEntry;
-    });
-
-    return {
-      v: 3,
-      stories,
-    };
-  };
-
-  raw(): BoundStory<TRenderer>[] {
-    deprecate(
-      'StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead'
-    );
-    return Object.values(this.extract())
-      .map(({ id }: { id: StoryId }) => this.fromId(id))
-      .filter(Boolean) as BoundStory<TRenderer>[];
-  }
-
-  fromId(storyId: StoryId): BoundStory<TRenderer> | null {
-    deprecate(
-      'StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead'
-    );
-
-    // Deprecated so won't make a proper error for this
-
-    // Deprecated so won't make a proper error for this
-    if (!this.cachedCSFFiles) {
-      // eslint-disable-next-line local-rules/no-uncategorized-errors
-      throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');
-    }
-
-    let importPath;
-    try {
-      ({ importPath } = this.storyIndex.storyIdToEntry(storyId));
-    } catch (err) {
-      return null;
-    }
-    const csfFile = this.cachedCSFFiles[importPath];
-    const story = this.storyFromCSFFile({ storyId, csfFile });
-    return {
-      ...story,
-      storyFn: (update) => {
-        const context = {
-          ...this.getStoryContext(story),
-          abortSignal: new AbortController().signal,
-          canvasElement: null!,
-          loaded: {},
-          step: (label, play) => story.runStep(label, play, context),
-          context: null!,
-          mount: null!,
-          canvas: {} as Canvas,
-          userEvent: {} as UserEventObject,
-          viewMode: 'story',
-        } as StoryContext<TRenderer>;
-
-        return story.unboundStoryFn({ ...context, ...update });
-      },
-    };
-  }
 }
--- a/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
@ -19,7 +19,6 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: {},
      argTypesEnhancers: [],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
@ -48,7 +47,6 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: {},
      argTypesEnhancers: [],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
@ -81,7 +79,6 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: {},
      argTypesEnhancers: [],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
@ -100,7 +97,7 @@ describe('composeConfigs', () => {
          default: {
            args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
            argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
            globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
          },
        },
@ -108,7 +105,7 @@ describe('composeConfigs', () => {
          default: {
            args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
            argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
-            globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+            initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
            globalTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
          },
        },
@ -120,8 +117,7 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      argTypesEnhancers: [],
-      globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
-      initialGlobals: {},
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      loaders: [],
      beforeAll: expect.any(Function),
@ -140,14 +136,14 @@ describe('composeConfigs', () => {
          default: {
            args: { x: '1', y: '1', obj: { a: '1', b: '1' } },
            argTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
-            globals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
+            initialGlobals: { x: '1', y: '1', obj: { a: '1', b: '1' } },
            globalTypes: { x: '1', y: '1', obj: { a: '1', b: '1' } },
          },
        },
        {
          args: { x: '2', z: '2', obj: { a: '2', c: '2' } },
          argTypes: { x: '2', z: '2', obj: { a: '2', c: '2' } },
-          globals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
+          initialGlobals: { x: '2', z: '2', obj: { a: '2', c: '2' } },
        },
        {
          default: {
@ -162,8 +158,7 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      argTypesEnhancers: [],
-      globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
-      initialGlobals: {},
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
      loaders: [],
      beforeAll: expect.any(Function),
@ -195,7 +190,6 @@ describe('composeConfigs', () => {
      argsEnhancers: ['1', '2', '3', '4'],
      argTypes: {},
      argTypesEnhancers: ['1', '2', '3', '4'],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: ['1', '2', '3', '4'],
@ -228,7 +222,6 @@ describe('composeConfigs', () => {
      argsEnhancers: ['1', '2', '3'],
      argTypes: {},
      argTypesEnhancers: ['1', '2', '3'],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: ['1', '2', '3'],
@ -257,7 +250,6 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: {},
      argTypesEnhancers: [],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
@ -287,7 +279,6 @@ describe('composeConfigs', () => {
        { a: '2', secondPass: true },
        { a: '4', secondPass: true },
      ],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
@ -320,7 +311,6 @@ describe('composeConfigs', () => {
      argsEnhancers: [],
      argTypes: {},
      argTypesEnhancers: [],
-      globals: {},
      initialGlobals: {},
      globalTypes: {},
      loaders: [],
--- a/code/core/src/preview-api/modules/store/csf/composeConfigs.ts
+++ b/code/core/src/preview-api/modules/store/csf/composeConfigs.ts
@ -59,7 +59,6 @@ export function composeConfigs<TRenderer extends Renderer>(
      ...allArgTypeEnhancers.filter((e) => !e.secondPass),
      ...allArgTypeEnhancers.filter((e) => e.secondPass),
    ],
-    globals: getObjectField(moduleExportList, 'globals'),
    initialGlobals: getObjectField(moduleExportList, 'initialGlobals'),
    globalTypes: getObjectField(moduleExportList, 'globalTypes'),
    loaders: getArrayField(moduleExportList, 'loaders'),
@ -68,7 +67,6 @@ export function composeConfigs<TRenderer extends Renderer>(
    experimental_afterEach: getArrayField(moduleExportList, 'experimental_afterEach'),
    render: getSingletonField(moduleExportList, 'render'),
    renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
-    renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
    applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
    runStep: composeStepRunners<TRenderer>(stepRunners),
    tags: getArrayField(moduleExportList, 'tags'),
--- a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.test.ts
@ -1,26 +1,8 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';

 import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';

 describe('normalizeProjectAnnotations', () => {
-  describe('blah', () => {
-    beforeEach(() => {
-      const warnThatThrows = vi.mocked(console.warn).getMockImplementation();
-      vi.mocked(console.warn).mockImplementation(() => {});
-      return () => {
-        vi.mocked(console.warn).mockImplementation(warnThatThrows!);
-      };
-    });
-    it('normalizes globals to initialGlobals', () => {
-      expect(
-        normalizeProjectAnnotations({
-          globals: { a: 'b' },
-        })
-      ).toMatchObject({
-        initialGlobals: { a: 'b' },
-      });
-    });
-  });
  it('passes through initialGlobals', () => {
    expect(
      normalizeProjectAnnotations({
--- a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
@ -1,4 +1,3 @@
-import { deprecate } from 'storybook/internal/client-logger';
 import type {
  ArgTypes,
  NormalizedProjectAnnotations,
@ -6,11 +5,8 @@ import type {
  Renderer,
 } from 'storybook/internal/types';

-import { dedent } from 'ts-dedent';
-
 import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
-import { combineParameters } from '../parameters';
 import { normalizeArrays } from './normalizeArrays';
 import { normalizeInputTypes } from './normalizeInputTypes';

@ -26,18 +22,9 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
  loaders,
  beforeEach,
  experimental_afterEach,
-  globals,
  initialGlobals,
  ...annotations
 }: ProjectAnnotations<TRenderer>): NormalizedProjectAnnotations<TRenderer> {
-  if (globals && Object.keys(globals).length > 0) {
-    deprecate(dedent`
-      The preview.js 'globals' field is deprecated and will be removed in Storybook 9.0.
-      Please use 'initialGlobals' instead. Learn more:
-
-      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewjs-globals-renamed-to-initialglobals
-    `);
-  }
  return {
    ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
    ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
@ -65,7 +52,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
      // TODO: Make an architectural decision on the handling of core addons
      inferControls,
    ],
-    initialGlobals: combineParameters(initialGlobals, globals),
+    initialGlobals,
    ...(annotations as NormalizedProjectAnnotations<TRenderer>),
  };
 }
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@ -29,7 +29,6 @@ import { HooksContext } from '../../../addons';
 import { ReporterAPI } from '../reporter-api';
 import { composeConfigs } from './composeConfigs';
 import { getCsfFactoryAnnotations } from './csf-factory-utils';
-import { getValuesFromArgTypes } from './getValuesFromArgTypes';
 import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
 import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 import { normalizeStory } from './normalizeStory';
@ -134,10 +133,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
    normalizedProjectAnnotations
  );

-  const globalsFromGlobalTypes = getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes);
  const globals = {
-    // TODO: remove loading from globalTypes in 9.0
-    ...globalsFromGlobalTypes,
    ...normalizedProjectAnnotations.initialGlobals,
    ...story.storyGlobals,
  };
@ -169,7 +165,10 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend

    if (story.renderToCanvas) {
      context.renderToCanvas = async () => {
-        // Consolidate this renderContext with Context in SB 9.0
+        // TODO: Consolidate this renderContext with Context in SB 10.0
+        // Change renderToCanvas function to only use the context object
+        // and to make the renderContext an internal implementation detail
+        // wasnt'possible so far because showError and showException are not part of the story context (yet)
        const unmount = await story.renderToCanvas?.(
          {
            componentId: story.componentId,
--- a/code/core/src/preview/README.md
+++ b/code/core/src/preview/README.md
@ -30,7 +30,7 @@ A rendering story goes through these phases:

 - `preparing` - (maybe async) import the story file and prepare the story function.
 - `loading` - async loaders are running
- `rendering` - the `renderToDOM` function for the framework is running
+- `rendering` - the `renderToCanvas` function for the framework is running
 - `playing` - the `play` function is running
 - `completed` - the story is done.

--- a/code/core/src/toolbar/components/ToolbarMenuButton.tsx
+++ b/code/core/src/toolbar/components/ToolbarMenuButton.tsx
@ -1,6 +1,8 @@
 import React, { type FC } from 'react';

-import { IconButton, Icons, type IconsProps } from 'storybook/internal/components';
+import { IconButton } from 'storybook/internal/components';
+
+import { Icons, type IconsProps } from '../../components/components/icon/icon';

 interface ToolbarMenuButtonProps {
  active: boolean;
--- a/code/core/src/toolbar/components/ToolbarMenuListItem.tsx
+++ b/code/core/src/toolbar/components/ToolbarMenuListItem.tsx
@ -1,8 +1,8 @@
 import React from 'react';

 import type { TooltipLinkListLink } from 'storybook/internal/components';
-import { Icons } from 'storybook/internal/components';

+import { Icons } from '../../components/components/icon/icon';
 import type { ToolbarItem } from '../types';

 export type ToolbarMenuListItemProps = {
--- a/code/core/src/toolbar/types.ts
+++ b/code/core/src/toolbar/types.ts
@ -1,6 +1,7 @@
-import type { IconsProps } from 'storybook/internal/components';
 import type { InputType } from 'storybook/internal/types';

+import type { IconsProps } from '../components/components/icon/icon';
+
 export type ToolbarShortcutType = 'next' | 'previous' | 'reset';

 export type ToolbarItemType = 'item' | 'reset';
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@ -26,10 +26,7 @@ import type { IndexEntry } from './indexer';

 export type Addon_Types = Exclude<
  Addon_TypesEnum,
-  | Addon_TypesEnum.experimental_PAGE
-  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-  | Addon_TypesEnum.experimental_TEST_PROVIDER
-  | Addon_TypesEnum.experimental_SIDEBAR_TOP
+  Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_TEST_PROVIDER
 >;

 export interface Addon_ArgType<TArg = unknown> extends InputType {
@ -291,7 +288,6 @@ export interface Addon_BaseMeta<ComponentType> {
   *
   * Used by addons for automatic prop table generation and display of other component metadata.
   *
-   * @deprecated
   * @example
   *
   * ```ts
@ -328,8 +324,6 @@ export type Addon_Type =
  | Addon_BaseType
  | Addon_PageType
  | Addon_WrapperType
-  | Addon_SidebarBottomType
-  | Addon_SidebarTopType
  | Addon_TestProviderType<Addon_TestProviderState>;
 export interface Addon_BaseType {
  /**
@ -350,8 +344,6 @@ export interface Addon_BaseType {
    Addon_Types,
    | Addon_TypesEnum.PREVIEW
    | Addon_TypesEnum.experimental_PAGE
-    | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-    | Addon_TypesEnum.experimental_SIDEBAR_TOP
    | Addon_TypesEnum.experimental_TEST_PROVIDER
  >;
  /**
@ -448,24 +440,6 @@ export interface Addon_WrapperType {
  >;
 }

-/** @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0. */
-export interface Addon_SidebarBottomType {
-  type: Addon_TypesEnum.experimental_SIDEBAR_BOTTOM;
-  /** The unique id of the tool. */
-  id: string;
-  /** A React.FunctionComponent. */
-  render: FC;
-}
-
-/** @deprecated This will be removed in Storybook 9.0. */
-export interface Addon_SidebarTopType {
-  type: Addon_TypesEnum.experimental_SIDEBAR_TOP;
-  /** The unique id of the tool. */
-  id: string;
-  /** A React.FunctionComponent. */
-  render: FC;
-}
-
 export interface Addon_TestProviderType<
  Details extends { [key: string]: any } = NonNullable<unknown>,
 > {
@ -508,16 +482,12 @@ type Addon_TypeBaseNames = Exclude<
  Addon_TypesEnum,
  | Addon_TypesEnum.PREVIEW
  | Addon_TypesEnum.experimental_PAGE
-  | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-  | Addon_TypesEnum.experimental_SIDEBAR_TOP
  | Addon_TypesEnum.experimental_TEST_PROVIDER
 >;

 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
  [Addon_TypesEnum.PREVIEW]: Addon_WrapperType;
  [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
-  [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
-  [Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
  [Addon_TypesEnum.experimental_TEST_PROVIDER]: Addon_TestProviderType<Addon_TestProviderState>;
 }

@ -570,18 +540,6 @@ export enum Addon_TypesEnum {
   * @unstable
   */
  experimental_PAGE = 'page',
-  /**
-   * This adds items in the bottom of the sidebar.
-   *
-   * @deprecated This doesn't do anything anymore and will be removed in Storybook 9.0.
-   */
-  experimental_SIDEBAR_BOTTOM = 'sidebar-bottom',
-  /**
-   * This adds items in the top of the sidebar.
-   *
-   * @deprecated This will be removed in Storybook 9.0.
-   */
-  experimental_SIDEBAR_TOP = 'sidebar-top',
  /** This adds items to the Testing Module in the sidebar. */
  experimental_TEST_PROVIDER = 'test-provider',
 }
--- a/code/core/src/types/modules/api.ts
+++ b/code/core/src/types/modules/api.ts
@ -38,8 +38,6 @@ export interface API_ProviderData<API> {

 export interface API_Provider<API> {
  channel?: Channel;
-  /** @deprecated Will be removed in 8.0, please use channel instead */
-  serverChannel?: Channel;
  renderPreview?: API_IframeRenderer;
  handleAPI(api: API): void;
  getConfig(): {
@ -88,8 +86,6 @@ export interface API_Layout {
  panelPosition: API_PanelPositions;
  showTabs: boolean;
  showToolbar: boolean;
-  /** @deprecated, will be removed in 8.0 - this API no longer works */
-  isToolshown?: boolean;
 }

 export interface API_UI {
@ -120,14 +116,6 @@ interface OnClickOptions {
  onDismiss: () => void;
 }

-/**
- * @deprecated Use ReactNode for the icon instead.
- * @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
- */
-interface DeprecatedIconType {
-  name: string;
-  color?: string;
-}
 export interface API_Notification {
  id: string;
  content: {
@ -136,8 +124,7 @@ export interface API_Notification {
  };
  duration?: number;
  link?: string;
-  // TODO: Remove DeprecatedIconType in 9.0
-  icon?: React.ReactNode | DeprecatedIconType;
+  icon?: React.ReactNode;
  onClear?: (options: OnClearOptions) => void;
  onClick?: (options: OnClickOptions) => void;
 }
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@ -297,13 +297,6 @@ type CoreCommon_StorybookRefs = Record<
 export type DocsOptions = {
  /** What should we call the generated docs entries? */
  defaultName?: string;
-  /**
-   * Should we generate a docs entry per CSF file? Set to 'tag' (the default) to generate an entry
-   * for every CSF file with the 'autodocs' tag.
-   *
-   * @deprecated Use `tags: ['autodocs']` in `.storybook/preview.js` instead
-   */
-  autodocs?: boolean | 'tag';
  /** Only show doc entries in the side bar (usually set with the `--docs` CLI flag) */
  docsMode?: boolean;
 };
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@ -47,8 +47,6 @@ export interface ProjectAnnotations<TRenderer extends Renderer>
  addons?: ProjectAnnotations<TRenderer>[];
  testingLibraryRender?: (...args: never[]) => { unmount: () => void };
  renderToCanvas?: RenderToCanvas<TRenderer>;
-  /* @deprecated use renderToCanvas */
-  renderToDOM?: RenderToCanvas<TRenderer>;
 }

 type NamedExportsOrDefault<TExport> = TExport | { default: TExport };
--- a/code/core/template/stories/globals.stories.ts
+++ b/code/core/template/stories/globals.stories.ts
@ -21,7 +21,7 @@ export const Inheritance = {
  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
      foo: 'fooValue',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
      baz: 'bazComponentValue',
    });
  },
@ -63,7 +63,7 @@ export const Overrides1 = {
  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
      foo: 'fooOverridden1',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
      baz: 'bazOverridden1',
    });
  },
@ -82,7 +82,7 @@ export const Overrides2 = {
  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
    await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({
      foo: 'fooOverridden2',
-      bar: 'barDefaultValue',
+      bar: 'barValue',
      baz: 'bazOverridden2',
    });
  },
--- a/code/core/template/stories/preview.ts
+++ b/code/core/template/stories/preview.ts
@ -57,6 +57,7 @@ export const decorators = [testProjectDecorator];

 export const initialGlobals = {
  foo: 'fooValue',
+  bar: 'barValue',
  baz: 'bazValue',

  sb_theme: 'light',
@ -69,9 +70,6 @@ export const initialGlobals = {
 };

 export const globalTypes = {
-  foo: { defaultValue: 'fooDefaultValue' },
-  bar: { defaultValue: 'barDefaultValue' },
-
  sb_theme: {
    name: 'Theme',
    description: 'Global theme for components',
--- a/code/lib/blocks/src/components/Preview.stories.tsx
+++ b/code/lib/blocks/src/components/Preview.stories.tsx
@ -30,70 +30,70 @@ export const Loading = () => <PreviewSkeleton />;

 export const CodeCollapsed = () => (
  <Preview isExpanded={false} withSource={sourceStories.JSX.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
  </Preview>
 );

 export const CodeExpanded = () => (
  <Preview isExpanded withSource={sourceStories.JSX.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
  </Preview>
 );

 export const CodeError = () => (
  <Preview isExpanded withSource={sourceStories.SourceUnavailable.args}>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
  </Preview>
 );

 export const Single = () => (
  <Preview>
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
  </Preview>
 );

 export const Row = () => (
  <Preview>
-    <Button secondary>Button 1</Button>
-    <Button secondary>Button 2</Button>
-    <Button secondary>Button 3</Button>
-    <Button secondary>Button 4</Button>
-    <Button secondary>Button 5</Button>
-    <Button secondary>Button 6</Button>
-    <Button secondary>Button 7</Button>
+    <Button variant="outline">Button 1</Button>
+    <Button variant="outline">Button 2</Button>
+    <Button variant="outline">Button 3</Button>
+    <Button variant="outline">Button 4</Button>
+    <Button variant="outline">Button 5</Button>
+    <Button variant="outline">Button 6</Button>
+    <Button variant="outline">Button 7</Button>
  </Preview>
 );

 export const Column = () => (
  <Preview isColumn>
-    <Button secondary>Button 1</Button>
-    <Button secondary>Button 2</Button>
-    <Button secondary>Button 3</Button>
+    <Button variant="outline">Button 1</Button>
+    <Button variant="outline">Button 2</Button>
+    <Button variant="outline">Button 3</Button>
  </Preview>
 );

 export const GridWith3Columns = () => (
  <Preview columns={3}>
-    <Button secondary>Button 1</Button>
-    <Button secondary>Button 2</Button>
-    <Button secondary>Button 3</Button>
-    <Button secondary>Button 4</Button>
-    <Button secondary>Button 5</Button>
-    <Button secondary>Button 6</Button>
-    <Button secondary>Button 7 long long long long long </Button>
-    <Button secondary>Button 8</Button>
-    <Button secondary>Button 9</Button>
-    <Button secondary>Button 10</Button>
-    <Button secondary>Button 11</Button>
-    <Button secondary>Button 12</Button>
-    <Button secondary>Button 13</Button>
-    <Button secondary>Button 14</Button>
-    <Button secondary>Button 15</Button>
-    <Button secondary>Button 16</Button>
-    <Button secondary>Button 17</Button>
-    <Button secondary>Button 18</Button>
-    <Button secondary>Button 19</Button>
-    <Button secondary>Button 20</Button>
+    <Button variant="outline">Button 1</Button>
+    <Button variant="outline">Button 2</Button>
+    <Button variant="outline">Button 3</Button>
+    <Button variant="outline">Button 4</Button>
+    <Button variant="outline">Button 5</Button>
+    <Button variant="outline">Button 6</Button>
+    <Button variant="outline">Button 7 long long long long long </Button>
+    <Button variant="outline">Button 8</Button>
+    <Button variant="outline">Button 9</Button>
+    <Button variant="outline">Button 10</Button>
+    <Button variant="outline">Button 11</Button>
+    <Button variant="outline">Button 12</Button>
+    <Button variant="outline">Button 13</Button>
+    <Button variant="outline">Button 14</Button>
+    <Button variant="outline">Button 15</Button>
+    <Button variant="outline">Button 16</Button>
+    <Button variant="outline">Button 17</Button>
+    <Button variant="outline">Button 18</Button>
+    <Button variant="outline">Button 19</Button>
+    <Button variant="outline">Button 20</Button>
  </Preview>
 );

@ -241,10 +241,7 @@ export const WithCenteredMulti = (
  </Preview>
 );

-export const WithAdditionalActions = (
-  args: any,
-  { loaded: { docsContext } }: { loaded: { docsContext: DocsContextProps } }
-) => (
+export const WithAdditionalActions = () => (
  <Preview
    additionalActions={[
      {
@ -256,6 +253,6 @@ export const WithAdditionalActions = (
      },
    ]}
  >
-    <Button secondary>Button 1</Button>
+    <Button variant="outline">Button 1</Button>
  </Preview>
 );
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.test.ts
@ -1,76 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import type { StorybookConfig } from 'storybook/internal/types';
-
-import { autodocsTags } from './autodocs-tags';
-
-const check = async ({
-  main: mainConfig,
-  storybookVersion = '7.0.0',
-  previewConfigPath,
-}: {
-  main: Partial<StorybookConfig> & Record<string, unknown>;
-  storybookVersion?: string;
-  previewConfigPath?: string;
-}) => {
-  return autodocsTags.check({
-    packageManager: {} as any,
-    configDir: '',
-    mainConfig: mainConfig as any,
-    storybookVersion,
-    previewConfigPath,
-  });
-};
-
-it('with no docs setting', async () => {
-  await expect(
-    check({
-      main: {},
-    })
-  ).resolves.toBeFalsy();
-});
-
-describe('docs.autodocs = true', () => {
-  it('errors with no preview.js', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: true },
-        },
-      })
-    ).rejects.toThrowError();
-  });
-
-  it('continues with preview.js', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: true },
-        },
-        previewConfigPath: '.storybook/preview.js',
-      })
-    ).resolves.toBeTruthy();
-  });
-});
-
-describe('docs.autodocs != true', () => {
-  it('docs.autodocs = false', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: false },
-        },
-      })
-    ).resolves.toBeTruthy();
-  });
-
-  it('docs.autodocs = "tag"', async () => {
-    await expect(
-      check({
-        main: {
-          docs: { autodocs: 'tag' },
-        },
-      })
-    ).resolves.toBeTruthy();
-  });
-});
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
@ -1,95 +0,0 @@
-import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
-import type { DocsOptions } from 'storybook/internal/types';
-
-import picocolors from 'picocolors';
-import { dedent } from 'ts-dedent';
-
-import { updateMainConfig } from '../helpers/mainConfigFile';
-import type { Fix } from '../types';
-
-const logger = console;
-
-const MIGRATION =
-  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated';
-
-interface Options {
-  autodocs: DocsOptions['autodocs'];
-  mainConfigPath?: string;
-  previewConfigPath?: string;
-}
-
-export const autodocsTags: Fix<Options> = {
-  id: 'autodocs-tags',
-  versionRange: ['*.*.*', '>=8.0.*'],
-  async check({ mainConfig, mainConfigPath, previewConfigPath }) {
-    const autodocs = mainConfig?.docs?.autodocs;
-
-    if (autodocs === undefined) {
-      return null;
-    }
-
-    if (autodocs === true && !previewConfigPath) {
-      throw Error(dedent`
-        ❌ Failed to remove the deprecated ${picocolors.cyan(
-          'docs.autodocs'
-        )} setting from ${picocolors.cyan(mainConfigPath)}.
-        
-        There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag.
-
-        Please perform the migration by hand: ${picocolors.yellow(MIGRATION)}
-      `);
-      return null;
-    }
-
-    return { autodocs, mainConfigPath, previewConfigPath };
-  },
-
-  prompt({ autodocs, mainConfigPath, previewConfigPath }) {
-    let falseMessage = '',
-      trueMessage = '';
-
-    if (autodocs === false) {
-      falseMessage = dedent`
-
-
-        There is no ${picocolors.cyan('docs.autodocs = false')} equivalent.
-        You'll need to check your stories to ensure none are tagged with ${picocolors.cyan(
-          'autodocs'
-        )}.
-      `;
-    } else if (autodocs === true) {
-      trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`;
-    }
-
-    return dedent`
-      The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan(
-        mainConfigPath
-      )} is deprecated.${falseMessage}
-        
-      Learn more: ${picocolors.yellow(MIGRATION)}
-      
-      Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}?
-    `;
-  },
-
-  async run({ dryRun, mainConfigPath, result }) {
-    if (!dryRun) {
-      if (result.autodocs === true) {
-        logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`);
-        const previewConfig = await readConfig(result.previewConfigPath!);
-        const tags = previewConfig.getFieldNode(['tags']);
-        if (tags) {
-          previewConfig.appendValueToArray(['tags'], 'autodocs');
-        } else {
-          previewConfig.setFieldValue(['tags'], ['autodocs']);
-        }
-        await writeConfig(previewConfig);
-      }
-
-      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
-        logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`);
-        main.removeField(['docs', 'autodocs']);
-      });
-    }
-  },
-};
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.test.ts
@ -1,48 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { PackageJson, StorybookConfigRaw } from 'storybook/internal/types';
-
-import { makePackageManager } from '../helpers/testing-helpers';
-import { autodocsTrue } from './autodocs-true';
-
-const checkAutodocs = async ({
-  packageJson = {},
-  main: mainConfig,
-}: {
-  packageJson?: PackageJson;
-  main: Partial<StorybookConfigRaw> & Record<string, unknown>;
-}) => {
-  return autodocsTrue.check({
-    packageManager: makePackageManager(packageJson),
-    mainConfig: mainConfig as StorybookConfigRaw,
-    storybookVersion: '7.0.0',
-  });
-};
-
-describe('autodocs-true fix', () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it('should skip when docs.autodocs is already defined', async () => {
-    await expect(checkAutodocs({ main: { docs: { autodocs: 'tag' } } })).resolves.toBeFalsy();
-  });
-
-  it('should throw when docs.docsPage contains invalid value', async () => {
-    const main = { docs: { docsPage: 123 } } as any;
-    await expect(checkAutodocs({ main })).rejects.toThrow();
-  });
-
-  it('should prompt when using docs.docsPage legacy property', async () => {
-    const main = { docs: { docsPage: true } } as any;
-    await expect(checkAutodocs({ main })).resolves.toEqual({
-      value: 'tag',
-    });
-  });
-
-  it('should prompt when not using docs.autodocs', async () => {
-    await expect(checkAutodocs({ main: {} })).resolves.toEqual({
-      value: true,
-    });
-  });
-});
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
@ -1,92 +0,0 @@
-import picocolors from 'picocolors';
-import { dedent } from 'ts-dedent';
-
-import { updateMainConfig } from '../helpers/mainConfigFile';
-import type { Fix } from '../types';
-
-const logger = console;
-
-interface AutodocsTrueFrameworkRunOptions {
-  value?: boolean | 'tag';
-}
-
-/** Set the `docs.autodocs` option to true if it isn't already set */
-export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
-  id: 'autodocsTrue',
-
-  versionRange: ['<7', '>=7'],
-
-  async check({ mainConfig }) {
-    const { docs } = mainConfig;
-
-    const docsPageToAutodocsMapping = {
-      true: 'tag' as const,
-      automatic: true,
-      false: false,
-    };
-
-    // @ts-expect-error docsPage does not exist anymore but we need to account for legacy code
-    if (docs?.docsPage) {
-      // @ts-expect-error same as above
-      const oldValue = docs?.docsPage.toString();
-      if (!(oldValue in docsPageToAutodocsMapping)) {
-        throw new Error(`Unexpected value for docs.docsPage: ${oldValue}`);
-      }
-
-      return {
-        value: docsPageToAutodocsMapping[oldValue as keyof typeof docsPageToAutodocsMapping],
-      };
-    }
-
-    return docs?.autodocs === undefined ? { value: true } : null;
-  },
-
-  prompt({ value }) {
-    const autodocsFormatted = picocolors.cyan(
-      `docs: { autodocs: ${JSON.stringify(value ?? true)} }`
-    );
-    const tagWarning = dedent`
-      NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
-      please update your story files to use the 'autodocs' tag instead.
-    `;
-
-    if (value) {
-      return dedent`
-      We've changed the configuration of autodocs (previous docsPage), so now the value:
-        - docs.autodocs: true -- means automatically create docs for every CSF file
-        - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag
-        - docs.autodocs: false -- means never create autodocs
-
-      Based on your prior configuration,  we can set the \`docs.autodocs\` to keep your old behaviour:
-
-      ${autodocsFormatted}
-      ${value === 'tag' ? tagWarning : ''}
-      More info: ${picocolors.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-      )}
-    `;
-    }
-
-    return dedent`
-      We've detected that your main.js configuration file has not configured autodocs. In 6.x we
-      we defaulted to having a autodocs for every story, in 7.x you need to opt in per-component.
-      However, we can set the \`docs.autodocs\` to true to approximate the old behaviour:
-
-      ${autodocsFormatted}
-
-      More info: ${picocolors.yellow(
-        'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
-      )}
-    `;
-  },
-
-  async run({ result: { value }, dryRun, mainConfigPath }) {
-    logger.info(`✅ Setting 'docs.autodocs' to true in main.js`);
-    if (!dryRun) {
-      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
-        main.removeField(['docs', 'docsPage']);
-        main.setFieldValue(['docs', 'autodocs'], value ?? true);
-      });
-    }
-  },
-};
--- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
@ -6,8 +6,6 @@ import { addonPostCSS } from './addon-postcss';
 import { addonsAPI } from './addons-api';
 import { angularBuilders } from './angular-builders';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
-import { autodocsTags } from './autodocs-tags';
-import { autodocsTrue } from './autodocs-true';
 import { builderVite } from './builder-vite';
 import { consolidatedImports } from './consolidated-imports';
 import { cra5 } from './cra5';
@ -54,7 +52,6 @@ export const allFixes: Fix[] = [
  removedGlobalClientAPIs,
  mdxgfm,
  mdxToCSF,
-  autodocsTrue,
  angularBuildersMultiproject,
  angularBuilders,
  wrapRequire,
@ -66,7 +63,6 @@ export const allFixes: Fix[] = [
  mdx1to3,
  upgradeStorybookRelatedDependencies,
  vta,
-  autodocsTags,
  initialGlobals,
  addonA11yAddonTest,
  consolidatedImports,
--- a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
@ -1,7 +1,6 @@
 import { join } from 'node:path';

-import { frameworkToRenderer } from 'storybook/internal/cli';
-import { frameworkPackages } from 'storybook/internal/common';
+import { frameworkPackages, frameworkToRenderer } from 'storybook/internal/common';

 import findUp from 'find-up';
 import { dedent } from 'ts-dedent';
--- a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
@ -1,6 +1,5 @@
 import { normalize } from 'node:path';

-import { frameworkToRenderer } from 'storybook/internal/cli';
 import {
  builderPackages,
  extractProperFrameworkName,
@ -10,7 +9,7 @@ import {
  rendererPackages,
 } from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
-import { getCoercedStorybookVersion } from 'storybook/internal/common';
+import { frameworkToRenderer, getCoercedStorybookVersion } from 'storybook/internal/common';
 import type { ConfigFile } from 'storybook/internal/csf-tools';
 import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools';
 import type { StorybookConfigRaw } from 'storybook/internal/types';
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@ -183,9 +183,6 @@ const getFrameworkDetails = (

 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);

-const hasInteractiveStories = (rendererId: SupportedRenderers) =>
-  ['react', 'angular', 'preact', 'svelte', 'vue3', 'html', 'solid', 'qwik'].includes(rendererId);
-
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) => {
  if (!framework) {
    return false;
--- a/code/package.json
+++ b/code/package.json
@ -102,7 +102,7 @@
    "@nx/workspace": "20.2.2",
    "@playwright/test": "1.48.1",
    "@storybook/addon-a11y": "workspace:*",
-    "@storybook/addon-designs": "9.0.0--canary.1499c1a.0",
+    "@storybook/addon-designs": "9.0.0-next.1",
    "@storybook/addon-docs": "workspace:*",
    "@storybook/addon-jest": "workspace:*",
    "@storybook/addon-links": "workspace:*",
--- a/code/renderers/react/src/test/portable-stories-factory.test.tsx
+++ b/code/renderers/react/src/test/portable-stories-factory.test.tsx
@ -99,8 +99,8 @@ describe('projectAnnotations', () => {
    setProjectAnnotations([
      {
        parameters: { injected: true },
-        globalTypes: {
-          locale: { defaultValue: 'en' },
+        initialGlobals: {
+          locale: 'en',
        },
      },
    ]);
--- a/code/renderers/react/src/test/portable-stories-legacy.test.tsx
+++ b/code/renderers/react/src/test/portable-stories-legacy.test.tsx
@ -13,7 +13,7 @@ import { composeStories, composeStory, setProjectAnnotations } from '..';
 import type { Button } from './Button';
 import * as stories from './Button.stories';

-// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API
+// TODO: Potentially remove this in Storybook 9.0 once we fully move users to the new portable stories API (with CSF4)
 describe('Legacy Portable Stories API', () => {
  // example with composeStories, returns an object with all stories composed with args/decorators
  const { CSF3Primary, LoaderStory } = composeStories(stories);
@ -70,9 +70,7 @@ describe('Legacy Portable Stories API', () => {
      setProjectAnnotations([
        {
          parameters: { injected: true },
-          globalTypes: {
-            locale: { defaultValue: 'en' },
-          },
+          initialGlobals: { locale: 'en' },
        },
      ]);
      const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);
--- a/code/renderers/react/src/test/portable-stories.test.tsx
+++ b/code/renderers/react/src/test/portable-stories.test.tsx
@ -90,9 +90,7 @@ describe('projectAnnotations', () => {
    setProjectAnnotations([
      {
        parameters: { injected: true },
-        globalTypes: {
-          locale: { defaultValue: 'en' },
-        },
+        initialGlobals: { locale: 'en' },
      },
    ]);
    const WithEnglishText = composeStory(ButtonStories.CSF2StoryWithLocale, ButtonStories.default);
--- a/code/renderers/vue3/src/tests/composeStories/portable-stories.test.ts
+++ b/code/renderers/vue3/src/tests/composeStories/portable-stories.test.ts
@ -66,9 +66,7 @@ describe('projectAnnotations', () => {
    setProjectAnnotations([
      {
        parameters: { injected: true },
-        globalTypes: {
-          locale: { defaultValue: 'en' },
-        },
+        initialGlobals: { locale: 'en' },
      },
    ]);
    const WithEnglishText = composeStory(stories.CSF2StoryWithLocale, stories.default);
--- a/code/yarn.lock
+++ b/code/yarn.lock
@ -6327,9 +6327,9 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0":
-  version: 9.0.0--canary.1499c1a.0
-  resolution: "@storybook/addon-designs@npm:9.0.0--canary.1499c1a.0"
+"@storybook/addon-designs@npm:9.0.0-next.1":
+  version: 9.0.0-next.1
+  resolution: "@storybook/addon-designs@npm:9.0.0-next.1"
  dependencies:
    "@figspec/react": "npm:^1.0.0"
  peerDependencies:
@ -6343,7 +6343,7 @@ __metadata:
      optional: true
    react-dom:
      optional: true
-  checksum: 10c0/5fd56ad8832778590f1bcdd144c17c234482a137475747e8791e4be9a4ba7132a6089287a614586b86d06b6082de932ee19a8709f39888077cbac98bc60b3705
+  checksum: 10c0/6989444d6caeb7abbb1a763e0a29d0749c529216d03d690618575378845e4259ddcf1935f7990fb05667a373940086dbacdcc6c97ff3f11eaa76f132bb11a1d5
  languageName: node
  linkType: hard

@ -7346,7 +7346,7 @@ __metadata:
    "@nx/workspace": "npm:20.2.2"
    "@playwright/test": "npm:1.48.1"
    "@storybook/addon-a11y": "workspace:*"
-    "@storybook/addon-designs": "npm:9.0.0--canary.1499c1a.0"
+    "@storybook/addon-designs": "npm:9.0.0-next.1"
    "@storybook/addon-docs": "workspace:*"
    "@storybook/addon-jest": "workspace:*"
    "@storybook/addon-links": "workspace:*"
--- a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview.tsx
@ -12,10 +12,12 @@ const preview: Preview = {
      </div>
    ),
  ],
+  initialGlobals: {
+    locale: 'en',
+  },
  globalTypes: {
    locale: {
      description: 'Locale for components',
-      defaultValue: 'en',
      toolbar: {
        title: 'Locale',
        icon: 'circlehollow',
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.playwright.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.playwright.ts
@ -5,4 +5,4 @@ export default composeStories(stories);

 export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);

-export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
+export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, { initialGlobals: { locale: 'es' } });
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.test.tsx
@ -55,7 +55,7 @@ describe('projectAnnotations', () => {

  it('renders with custom projectAnnotations via composeStory params', () => {
    const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globalTypes: { locale: { defaultValue: 'pt' } },
+      initialGlobals: { locale: 'pt' },
    });
    const { getByText } = render(<WithPortugueseText />);
    const buttonElement = getByText('Olá!');
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.portable.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.portable.ts
@ -5,4 +5,4 @@ export default composeStories(stories);

 export const SingleComposedStory = composeStory(stories.CSF3Primary, stories.default);

-export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {globals: { locale: 'es' }});
+export const WithSpanishGlobal = composeStory(stories.CSF2StoryWithLocale, stories.default, {initialGlobals: { locale: 'es' }});