Merge pull request #30804 from storybookjs/version-non-patch-from-9.0.0-alpha.3

Release: Prerelease 9.0.0-alpha.4

.circleci/config.yml

@@ -367,10 +367,10 @@ jobs:
       - report-workflow-on-failure
   chromatic-internal-storybook:
     executor:
-      class: medium
+      class: large
       name: sb_node_22_browsers
     environment:
-      NODE_OPTIONS: --max_old_space_size=6144
+      NODE_OPTIONS: --max_old_space_size=4096
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 9.0.0-alpha.4
+
+- Automigrate: Prefer framework import - [#30785](https://github.com/storybookjs/storybook/pull/30785), thanks @ndelangen!
+- Blocks: IconGallery improvement - [#30743](https://github.com/storybookjs/storybook/pull/30743), thanks @leeovictor!
+- CLI: Do not install renderer package on `init` - [#30799](https://github.com/storybookjs/storybook/pull/30799), thanks @ndelangen!
+- Core: Move @storybook/addon-actions into storybook - [#30765](https://github.com/storybookjs/storybook/pull/30765), thanks @valentinpalkovic!
+
 ## 9.0.0-alpha.3
 
 - Addon A11y: Promote @storybook/global to full dependency - [#30723](https://github.com/storybookjs/storybook/pull/30723), thanks @mrginglymus!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [Actions addon moved to core](#actions-addon-moved-to-core)
   - [Dropped support for legacy packages](#dropped-support-for-legacy-packages)
   - [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
   - [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
@@ -121,17 +122,17 @@
     - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -157,7 +158,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -171,7 +172,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -222,7 +223,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -437,17 +438,24 @@
 
 ## From version 8.x to 9.0.0
 
+### Actions addon moved to core
+
+The actions addon has been moved from `@storybook/addon-actions` to Storybook core. You no longer need to install it separately or include it in your addons list. As a consequence, `@storybook/addon-actions` is not part of `@storybook/addon-essentials` anymore.
+
+Furthermore, we have deprecated the usage of `withActions` from `@storybook/addon-actions` and we will remove it in Storybook v10. Please file an issue if you need this API.
+
 ### Dropped support for legacy packages
 
 The following packages are no longer published as part of `9.0.0`:
 The following packages have been consolidated into the main `storybook` package:
 
-| Old Package            | New Path                       |
+| Old Package              | New Path              |
-| ---------------------- | ------------------------------ |
+| ------------------------ | --------------------- |
-| @storybook/manager-api | storybook/manager-api |
+| @storybook/manager-api   | storybook/manager-api |
-| @storybook/preview-api | storybook/preview-api |
+| @storybook/preview-api   | storybook/preview-api |
-| @storybook/theming     | storybook/theming     |
+| @storybook/theming       | storybook/theming     |
-| @storybook/test        | storybook/test                 |
+| @storybook/test          | storybook/test        |
+| @storybook/addon-actions | storybook/actions     |
 
 Please un-install these packages, and ensure you have the `storybook` package installed.
 

code/.storybook/main.ts

@@ -37,10 +37,6 @@ const config = defineMain({
       directory: '../addons/a11y/template/stories',
       titlePrefix: 'addons/a11y',
     },
-    {
-      directory: '../addons/actions/template/stories',
-      titlePrefix: 'addons/actions',
-    },
     {
       directory: '../addons/backgrounds/template/stories',
       titlePrefix: 'addons/backgrounds',
@@ -144,7 +140,7 @@ const config = defineMain({
           ...(configType === 'DEVELOPMENT'
             ? {
                 'storybook/internal/components': componentsPath,
-                'storybook/internal/manager-api': managerApiPath,
+                'storybook/manager-api': managerApiPath,
                 'sb-original/image-context': imageContextPath,
               }
             : {}),

code/.storybook/manager.tsx

@@ -1,6 +1,5 @@
-import { addons } from 'storybook/internal/manager-api';
-
 import { startCase } from 'es-toolkit/compat';
+import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
   sidebar: {

code/.storybook/preview.tsx

@@ -2,17 +2,6 @@ import * as React from 'react';
 import { Fragment, useEffect } from 'react';
 
 import type { Channel } from 'storybook/internal/channels';
-import { DocsContext as DocsContextProps, useArgs } from 'storybook/internal/preview-api';
-import type { PreviewWeb } from 'storybook/internal/preview-api';
-import {
-  Global,
-  ThemeProvider,
-  convert,
-  createReset,
-  styled,
-  themes,
-  useTheme,
-} from 'storybook/internal/theming';
 
 import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
@@ -28,6 +17,18 @@ import addonEssentials from '@storybook/addon-essentials';
 import addonTest from '@storybook/addon-test';
 import addonThemes from '@storybook/addon-themes';
 
+import { DocsContext as DocsContextProps, useArgs } from 'storybook/preview-api';
+import type { PreviewWeb } from 'storybook/preview-api';
+import {
+  Global,
+  ThemeProvider,
+  convert,
+  createReset,
+  styled,
+  themes,
+  useTheme,
+} from 'storybook/theming';
+
 import * as addonsPreview from '../addons/toolbars/template/stories/preview';
 import * as templatePreview from '../core/template/stories/preview';
 import { DocsPageWrapper } from '../lib/blocks/src/components';

code/.storybook/vitest.config.ts

@@ -42,7 +42,7 @@ export default mergeConfig(
         '**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
         '../lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
       ],
-      // TODO: bring this back once portable stories support storybook/internal/preview-api hooks
+      // TODO: bring this back once portable stories support storybook/preview-api hooks
       // @ts-expect-error this type does not exist but the property does!
       testNamePattern: /^(?!.*(UseState)).*$/,
       browser: {

code/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch

@@ -0,0 +1,50 @@
+diff --git a/dist/cjs/utils/dataTransfer/Clipboard.js b/dist/cjs/utils/dataTransfer/Clipboard.js
+index 434be791b156984a8b76287bc0cc6c8955df4203..e28a15e85e2dccff058a18b4b80b099b7016d688 100644
+--- a/dist/cjs/utils/dataTransfer/Clipboard.js
++++ b/dist/cjs/utils/dataTransfer/Clipboard.js
+@@ -155,10 +155,18 @@ async function writeDataTransferToClipboard(document, clipboardData) {
+ }
+ const g = globalThis;
+ /* istanbul ignore else */ if (typeof g.afterEach === 'function') {
+-    g.afterEach(()=>resetClipboardStubOnView(globalThis.window));
++    g.afterEach(()=>{
++        if(typeof globalThis.window !== 'undefined'){
++            resetClipboardStubOnView(globalThis.window);
++        }
++    });
+ }
+ /* istanbul ignore else */ if (typeof g.afterAll === 'function') {
+-    g.afterAll(()=>detachClipboardStubFromView(globalThis.window));
++    g.afterAll(()=>{
++        if(typeof globalThis.window !== 'undefined'){
++            detachClipboardStubFromView(globalThis.window);
++        }
++    });
+ }
+ 
+ exports.attachClipboardStubToView = attachClipboardStubToView;
+diff --git a/dist/esm/utils/dataTransfer/Clipboard.js b/dist/esm/utils/dataTransfer/Clipboard.js
+index 2ed2676b52adaee045d2594b051c08a4b133e7df..337e644ed268ad4ad0ce9a601d6d0aec73264d5e 100644
+--- a/dist/esm/utils/dataTransfer/Clipboard.js
++++ b/dist/esm/utils/dataTransfer/Clipboard.js
+@@ -153,10 +153,18 @@ async function writeDataTransferToClipboard(document, clipboardData) {
+ }
+ const g = globalThis;
+ /* istanbul ignore else */ if (typeof g.afterEach === 'function') {
+-    g.afterEach(()=>resetClipboardStubOnView(globalThis.window));
++    g.afterEach(()=>{
++        if(typeof globalThis.window !== 'undefined'){
++            resetClipboardStubOnView(globalThis.window);
++        }
++    });
+ }
+ /* istanbul ignore else */ if (typeof g.afterAll === 'function') {
+-    g.afterAll(()=>detachClipboardStubFromView(globalThis.window));
++    g.afterAll(()=>{
++        if(typeof globalThis.window !== 'undefined'){
++            detachClipboardStubFromView(globalThis.window);
++        }
++    });
+ }
+ 
+ export { attachClipboardStubToView, createClipboardItem, detachClipboardStubFromView, readDataTransferFromClipboard, resetClipboardStubOnView, writeDataTransferToClipboard };

code/__mocks__/inject-decorator.ts.csf-meta-var.txt

@@ -1,5 +1,5 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Button } from "@storybook/react/demo";
 
 const meta = {

code/__mocks__/inject-decorator.ts.csf.txt

@@ -1,5 +1,5 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Button } from "@storybook/react/demo";
 
 export default {

code/__mocks__/inject-decorator.ts.csf3.txt

@@ -1,5 +1,5 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Button } from "@storybook/react/demo";
 
 export default {

code/__mocks__/inject-parameters.ts.csf.txt

@@ -1,5 +1,5 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Button } from "@storybook/react/demo";
 
 export default {

code/addons/a11y/src/a11yRunner.test.ts

@@ -1,11 +1,11 @@
 import type { Mock } from 'vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { addons } from 'storybook/internal/preview-api';
+import { addons } from 'storybook/preview-api';
 
 import { EVENTS } from './constants';
 
-vi.mock('storybook/internal/preview-api');
+vi.mock('storybook/preview-api');
 const mockedAddons = vi.mocked(addons);
 
 describe('a11yRunner', () => {

code/addons/a11y/src/a11yRunner.ts

@@ -1,8 +1,7 @@
-import { addons } from 'storybook/internal/preview-api';
-
 import { global } from '@storybook/global';
 
 import type { AxeResults } from 'axe-core';
+import { addons } from 'storybook/preview-api';
 
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';

code/addons/a11y/src/components/A11YPanel.stories.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 
-import { ManagerContext } from 'storybook/internal/manager-api';
-import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import type axe from 'axe-core';
+import { ManagerContext } from 'storybook/manager-api';
 import { fn } from 'storybook/test';
+import { ThemeProvider, convert, themes } from 'storybook/theming';
 
 import { A11YPanel } from './A11YPanel';
 import { A11yContext } from './A11yContext';

code/addons/a11y/src/components/A11YPanel.test.tsx

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 import React from 'react';
 
-import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
+import { ThemeProvider, convert, themes } from 'storybook/theming';
 
 import { A11YPanel } from './A11YPanel';
 import { type A11yContextStore, useA11yContext } from './A11yContext';

code/addons/a11y/src/components/A11YPanel.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
 
 import { ActionBar, ScrollArea } from 'storybook/internal/components';
-import { styled } from 'storybook/internal/theming';
 
 import { CheckIcon, SyncIcon } from '@storybook/icons';
 
+import { styled } from 'storybook/theming';
+
 import { useA11yContext } from './A11yContext';
 import { Report } from './Report';
 import { Tabs } from './Tabs';

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -9,14 +9,14 @@ import {
   STORY_RENDER_PHASE_CHANGED,
   type StoryFinishedPayload,
 } from 'storybook/internal/core-events';
-import * as api from 'storybook/internal/manager-api';
 
 import type { AxeResults } from 'axe-core';
+import * as api from 'storybook/manager-api';
 
 import { EVENTS, TEST_PROVIDER_ID } from '../constants';
 import { A11yContextProvider, useA11yContext } from './A11yContext';
 
-vi.mock('storybook/internal/manager-api');
+vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked(api);
 
 const storyId = 'button--primary';

code/addons/a11y/src/components/A11yContext.tsx

@@ -6,6 +6,10 @@ import {
   STORY_RENDER_PHASE_CHANGED,
   type StoryFinishedPayload,
 } from 'storybook/internal/core-events';
+
+import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import type { AxeResults, Result } from 'axe-core';
 import {
   useAddonState,
   useChannel,
@@ -13,13 +17,9 @@ import {
   useParameter,
   useStorybookApi,
   useStorybookState,
-} from 'storybook/internal/manager-api';
+} from 'storybook/manager-api';
-import type { Report } from 'storybook/internal/preview-api';
+import type { Report } from 'storybook/preview-api';
-import { convert, themes } from 'storybook/internal/theming';
+import { convert, themes } from 'storybook/theming';
-
-import { HIGHLIGHT } from '@storybook/addon-highlight';
-
-import type { AxeResults, Result } from 'axe-core';
 
 import { ADDON_ID, EVENTS, TEST_PROVIDER_ID } from '../constants';
 import type { A11yParameters } from '../params';

code/addons/a11y/src/components/Report/Elements.tsx

@@ -1,9 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import type { NodeResult } from 'axe-core';
+import { styled } from 'storybook/theming';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import type { NodeResult } from 'axe-core';
+import { styled } from 'storybook/theming';
 
 import { useA11yContext } from '../A11yContext';
 

code/addons/a11y/src/components/Report/Info.tsx

@@ -1,9 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import type { Result } from 'axe-core';
+import { styled } from 'storybook/theming';
 
 const Wrapper = styled.div({
   padding: 12,

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,10 +1,9 @@
 import React, { Fragment, useState } from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import { ChevronSmallDownIcon } from '@storybook/icons';
 
 import type { Result } from 'axe-core';
+import { styled } from 'storybook/theming';
 
 import type { RuleType } from '../A11YPanel';
 import { Elements } from './Elements';

code/addons/a11y/src/components/Report/Rules.tsx

@@ -2,10 +2,10 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { Badge } from 'storybook/internal/components';
-import { styled } from 'storybook/internal/theming';
 
 import type { CheckResult } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
+import { styled } from 'storybook/theming';
 
 const List = styled.div({
   display: 'flex',

code/addons/a11y/src/components/Report/Tags.tsx

@@ -1,9 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import type { TagValue } from 'axe-core';
+import { styled } from 'storybook/theming';
 
 const Wrapper = styled.div({
   display: 'flex',

code/addons/a11y/src/components/Tabs.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import type { NodeResult, Result } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
+import { styled } from 'storybook/theming';
 
 import type { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';
 import HighlightToggle from './Report/HighlightToggle';
 
-// TODO: reuse the Tabs component from storybook/internal/theming instead of re-building identical functionality
+// TODO: reuse the Tabs component from storybook/theming instead of re-building identical functionality
 
 const Container = styled.div({
   width: '100%',

code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { ManagerContext } from 'storybook/internal/manager-api';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { ManagerContext } from 'storybook/manager-api';
 import { fn } from 'storybook/test';
 
 import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';

code/addons/a11y/src/components/TestDiscrepancyMessage.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 
 import { Link } from 'storybook/internal/components';
-import { useStorybookApi } from 'storybook/internal/manager-api';
+
-import { styled } from 'storybook/internal/theming';
+import { useStorybookApi } from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
 
 import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
 

code/addons/a11y/src/components/VisionSimulator.test.tsx

@@ -6,7 +6,7 @@ import { describe, expect, it } from 'vitest';
 
 import React from 'react';
 
-import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
+import { ThemeProvider, convert, themes } from 'storybook/theming';
 
 import { VisionSimulator, baseList } from './VisionSimulator';
 

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -2,10 +2,11 @@ import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 
 import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
-import { Global, styled } from 'storybook/internal/theming';
 
 import { AccessibilityIcon } from '@storybook/icons';
 
+import { Global, styled } from 'storybook/theming';
+
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';

code/addons/a11y/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import * as addonAnnotations from './preview';
 

code/addons/a11y/src/manager.test.tsx

@@ -1,13 +1,14 @@
 // @vitest-environment happy-dom
 import { describe, expect, it, vi } from 'vitest';
 
-import * as api from 'storybook/internal/manager-api';
 import type { Addon_BaseType } from 'storybook/internal/types';
 
+import * as api from 'storybook/manager-api';
+
 import { PANEL_ID } from './constants';
 import './manager';
 
-vi.mock('storybook/internal/manager-api');
+vi.mock('storybook/manager-api');
 const mockedApi = vi.mocked<api.API>(api as any);
 mockedApi.useAddonState = vi.fn();
 const mockedAddons = vi.mocked(api.addons);

code/addons/a11y/src/manager.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { Badge, Spaced } from 'storybook/internal/components';
-import { addons, types, useAddonState } from 'storybook/internal/manager-api';
+
+import { addons, types, useAddonState } from 'storybook/manager-api';
 
 import { A11YPanel } from './components/A11YPanel';
 import type { Results } from './components/A11yContext';

code/addons/actions/ADVANCED.md

@@ -1,83 +0,0 @@
-## Advanced/Legacy Actions usage
-
-For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
-
-This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).
-
-## Manually-specified actions
-
-Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
-
-> _Note: Be mindful of the choice of the function's name. Avoid using Javascript reserved words such as **default** or **if**, as they will lead into unexpected errors._
-
-```js
-import { action } from '@storybook/addon-actions';
-import Button from './button';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-export const defaultView = () => <Button onClick={action('button-click')}>Hello World!</Button>;
-```
-
-## Multiple actions
-
-If your story requires multiple actions, it may be convenient to use `actions` to create many at once:
-
-```js
-import { actions } from '@storybook/addon-actions';
-import Button from './button';
-
-export default {
-  title: 'Button',
-  component: Button,
-};
-
-// This will lead to { onClick: action('onClick'), ... }
-const eventsFromNames = actions('onClick', 'onMouseOver');
-
-// This will lead to { onClick: action('clicked'), ... }
-const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
-
-export const first = () => <Button {...eventsFromNames}>Hello World!</Button>;
-
-export const second = () => <Button {...eventsFromObject}>Hello World!</Button>;
-```
-
-## Configuration
-
-Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.
-
-This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.
-
-The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.
-
-To apply the configuration globally use the `configureActions` function in your `preview.js` file.
-
-```js
-import { configureActions } from '@storybook/addon-actions';
-
-configureActions({
-  maxDepth: 100,
-  // Limit the number of items logged into the actions panel
-  limit: 20,
-});
-```
-
-To apply the configuration per action use:
-
-```js
-action('my-action', {
-  maxDepth: 5,
-});
-```
-
-### Available Options
-
-| Name                 | Type    | Description                                                                         | Default |
-| -------------------- | ------- | ----------------------------------------------------------------------------------- | ------- |
-| `maxDepth`           | Number  | Configures the transferred depth of any logged objects.                             | `10`    |
-| `clearOnStoryChange` | Boolean | Flag whether to clear the action logger when switching away from the current story. | `true`  |
-| `limit`              | Number  | Limits the number of items logged in the action logger                              | `50`    |

code/addons/actions/README.md

@@ -1,27 +0,0 @@
-# Storybook Addon Actions
-
-Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
-
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
-
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png)
-
-## Installation
-
-Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
-
-```sh
-npm i -D @storybook/addon-actions
-```
-
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
-
-```js
-export default {
-  addons: ['@storybook/addon-actions'],
-};
-```
-
-## Usage
-
-The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).

code/addons/actions/manager.js

@@ -1 +0,0 @@
-import './dist/manager';

code/addons/actions/package.json

@@ -1,109 +0,0 @@
-{
-  "name": "@storybook/addon-actions",
-  "version": "9.0.0-alpha.3",
-  "description": "Get UI feedback when an action is performed on an interactive element",
-  "keywords": [
-    "storybook",
-    "essentials",
-    "data-state"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/actions",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/addons/actions"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./decorator": {
-      "types": "./dist/decorator.d.ts",
-      "import": "./dist/decorator.mjs",
-      "require": "./dist/decorator.js"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
-    },
-    "./manager": "./dist/manager.js",
-    "./register.js": "./dist/manager.js",
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "react-native": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "decorator": [
-        "dist/decorator.d.ts"
-      ]
-    }
-  },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!src/**/*"
-  ],
-  "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
-  },
-  "dependencies": {
-    "@storybook/global": "^5.0.0",
-    "@types/uuid": "^9.0.1",
-    "dequal": "^2.0.2",
-    "polished": "^4.2.2",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-inspector": "^6.0.0",
-    "telejson": "^7.2.0",
-    "typescript": "^5.7.3"
-  },
-  "peerDependencies": {
-    "storybook": "workspace:^"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "exportEntries": [
-      "./src/decorator.ts",
-      "./src/index.ts"
-    ],
-    "managerEntries": [
-      "./src/manager.tsx"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
-    ]
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
-  "storybook": {
-    "displayName": "Actions",
-    "unsupportedFrameworks": [
-      "react-native"
-    ],
-    "icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
-  }
-}

code/addons/actions/preview.js

@@ -1 +0,0 @@
-export * from './dist/preview';

code/addons/actions/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "addon-actions",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "targets": {
-    "build": {}
-  }
-}

code/addons/actions/src/index.ts

@@ -1,11 +0,0 @@
-import { definePreview } from 'storybook/internal/preview-api';
-
-import * as addonAnnotations from './preview';
-
-export * from './constants';
-export * from './models';
-export * from './runtime';
-
-export default () => definePreview(addonAnnotations);
-
-export type { ActionsParameters } from './types';

code/addons/actions/src/preview.ts

@@ -1,2 +0,0 @@
-export * from './addArgs';
-export * from './loaders';

code/addons/actions/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"]
-}

code/addons/actions/vitest.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config';
-
-import { vitestCommonConfig } from '../../vitest.workspace';
-
-export default mergeConfig(
-  vitestCommonConfig,
-  defineConfig({
-    // Add custom config here
-  })
-);

code/addons/backgrounds/src/components/Tool.tsx

@@ -1,10 +1,11 @@
 import React, { Fragment, memo, useCallback, useState } from 'react';
 
 import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
-import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 
 import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
 
+import { useGlobals, useParameter } from 'storybook/manager-api';
+
 import { PARAM_KEY as KEY } from '../constants';
 import { DEFAULT_BACKGROUNDS } from '../defaults';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';

code/addons/backgrounds/src/decorator.ts

@@ -1,6 +1,7 @@
-import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction } from 'storybook/internal/types';
 
+import { useEffect } from 'storybook/preview-api';
+
 import { PARAM_KEY as KEY } from './constants';
 import { DEFAULT_BACKGROUNDS } from './defaults';
 import type { Config, GridConfig } from './types';

code/addons/backgrounds/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import * as addonAnnotations from './preview';
 

code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx

@@ -3,11 +3,11 @@ import React, { memo, useCallback, useMemo, useState } from 'react';
 
 import { logger } from 'storybook/internal/client-logger';
 import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
-import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 
 import { PhotoIcon } from '@storybook/icons';
 
 import memoize from 'memoizerific';
+import { useGlobals, useParameter } from 'storybook/manager-api';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import type { Background } from '../types';

code/addons/backgrounds/src/legacy/ColorIcon.tsx

@@ -1,4 +1,4 @@
-import { styled } from 'storybook/internal/theming';
+import { styled } from 'storybook/theming';
 
 export const ColorIcon = styled.span(
   ({ background }: { background: string }) => ({

code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx

@@ -2,10 +2,11 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 
 import { IconButton } from 'storybook/internal/components';
-import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 
 import { GridIcon } from '@storybook/icons';
 
+import { useGlobals, useParameter } from 'storybook/manager-api';
+
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
 export const GridToolLegacy: FC = memo(function GridSelector() {

code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts

@@ -1,6 +1,7 @@
-import { useEffect, useMemo } from 'storybook/internal/preview-api';
 import type { DecoratorFunction } from 'storybook/internal/types';
 
+import { useEffect, useMemo } from 'storybook/preview-api';
+
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { addBackgroundStyle, clearStyles, isReduceMotionEnabled } from '../utils';
 import { getBackgroundColorByName } from './getBackgroundColorByName';

code/addons/backgrounds/src/legacy/withGridLegacy.ts

@@ -1,6 +1,7 @@
-import { useEffect, useMemo } from 'storybook/internal/preview-api';
 import type { DecoratorFunction } from 'storybook/internal/types';
 
+import { useEffect, useMemo } from 'storybook/preview-api';
+
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { addGridStyle, clearStyles } from '../utils';
 

code/addons/backgrounds/src/manager.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 
 import { BackgroundTool } from './components/Tool';
 import { ADDON_ID } from './constants';

code/addons/controls/src/ControlsPanel.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import {
-  useArgTypes,
-  useArgs,
-  useGlobals,
-  useParameter,
-  useStorybookState,
-} from 'storybook/internal/manager-api';
-import { styled } from 'storybook/internal/theming';
 import type { ArgTypes } from 'storybook/internal/types';
 
 import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
 import { global } from '@storybook/global';
 
 import { dequal as deepEqual } from 'dequal';
+import {
+  useArgTypes,
+  useArgs,
+  useGlobals,
+  useParameter,
+  useStorybookState,
+} from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
 
 import { SaveStory } from './SaveStory';
 import { PARAM_KEY } from './constants';

code/addons/controls/src/SaveStory.stories.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
-
+import { expect, fireEvent, fn, within } from 'storybook/test';
-import { expect, fireEvent, fn, userEvent, within } from 'storybook/test';
 
 import { SaveStory } from './SaveStory';
 
@@ -41,7 +40,8 @@ export const Creating = {
 } satisfies Story;
 
 export const Created: Story = {
-  play: async (context) => {
+  play: async ({ context, userEvent }) => {
+    // eslint-disable-next-line storybook/context-in-play-function
     await Creating.play(context);
 
     const dialog = await within(document.body).findByRole('dialog');

code/addons/controls/src/SaveStory.tsx

@@ -9,10 +9,11 @@ import {
   TooltipNote,
   WithTooltip,
 } from 'storybook/internal/components';
-import { keyframes, styled } from 'storybook/internal/theming';
 
 import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons';
 
+import { keyframes, styled } from 'storybook/theming';
+
 const slideIn = keyframes({
   from: { transform: 'translateY(40px)' },
   to: { transform: 'translateY(0)' },

code/addons/controls/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 export { PARAM_KEY } from './constants';
 

code/addons/controls/src/manager.tsx

@@ -8,15 +8,10 @@ import type {
 } from 'storybook/internal/core-events';
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
 import type { Args } from 'storybook/internal/csf';
-import {
-  addons,
-  experimental_requestResponse,
-  types,
-  useArgTypes,
-} from 'storybook/internal/manager-api';
-import { color } from 'storybook/internal/theming';
 
 import { dequal as deepEqual } from 'dequal';
+import { addons, experimental_requestResponse, types, useArgTypes } from 'storybook/manager-api';
+import { color } from 'storybook/theming';
 
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';

code/addons/docs/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import * as addonAnnotations from './preview';
 

code/addons/docs/src/manager.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
-import { addons, types, useChannel, useParameter } from 'storybook/internal/manager-api';
-import { ignoreSsrWarning, styled, useTheme } from 'storybook/internal/theming';
 
 import { Source, type SourceParameters } from '@storybook/blocks';
 
+import { addons, types, useChannel, useParameter } from 'storybook/manager-api';
+import { ignoreSsrWarning, styled, useTheme } from 'storybook/theming';
+
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: 'Code',

code/addons/essentials/README.md

@@ -8,7 +8,6 @@ Each addon is documented and maintained by the core team and will be upgraded al
 
 Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
 
-- [Actions](https://github.com/storybookjs/storybook/tree/next/code/addons/actions)
 - [Backgrounds](https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds)
 - [Controls](https://github.com/storybookjs/storybook/tree/next/code/addons/controls)
 - [Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs)
@@ -54,4 +53,4 @@ export default {
 };
 ```
 
-Valid addon keys include: `actions`, `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.
+Valid addon keys include: `backgrounds`, `controls`, `docs`, `viewport`, `toolbars`.

code/addons/essentials/package.json

@@ -32,12 +32,6 @@
       "import": "./dist/preview.mjs",
       "require": "./dist/preview.js"
     },
-    "./actions/preview": {
-      "types": "./dist/actions/preview.d.ts",
-      "import": "./dist/actions/preview.mjs",
-      "require": "./dist/actions/preview.js"
-    },
-    "./actions/manager": "./dist/actions/manager.js",
     "./backgrounds/preview": {
       "types": "./dist/backgrounds/preview.d.ts",
       "import": "./dist/backgrounds/preview.mjs",
@@ -105,7 +99,6 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
     "@storybook/addon-controls": "workspace:*",
     "@storybook/addon-docs": "workspace:*",
@@ -138,7 +131,6 @@
       "./src/docs/manager.ts"
     ],
     "managerEntries": [
-      "./src/actions/manager.ts",
       "./src/backgrounds/manager.ts",
       "./src/controls/manager.ts",
       "./src/docs/manager.ts",
@@ -149,7 +141,6 @@
     ],
     "previewEntries": [
       "./src/preview.ts",
-      "./src/actions/preview.ts",
       "./src/backgrounds/preview.ts",
       "./src/docs/preview.ts",
       "./src/highlight/preview.ts",

code/addons/essentials/src/actions/manager.ts

@@ -1,2 +0,0 @@
-// @ts-expect-error (no types needed for this)
-export * from '@storybook/addon-actions/manager';

code/addons/essentials/src/actions/preview.ts

@@ -1,3 +0,0 @@
-// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
-
-export * from '@storybook/addon-actions/preview';

code/addons/essentials/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import addonAnnotations from './preview';
 

code/addons/essentials/src/preset.ts

@@ -4,13 +4,6 @@ import { serverRequire } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
 interface PresetOptions {
-  /**
-   * Allow to use @storybook/addon-actions
-   *
-   * @default true
-   * @see https://storybook.js.org/addons/@storybook/addon-actions
-   */
-  actions?: boolean;
   /**
    * Allow to use @storybook/addon-backgrounds
    *
@@ -89,7 +82,6 @@ export function addons(options: PresetOptions) {
   // NOTE: The order of these addons is important.
   return [
     'controls',
-    'actions',
     'docs',
     'backgrounds',
     'viewport',

code/addons/essentials/src/preview.ts

@@ -1,6 +1,3 @@
-import { composeConfigs } from 'storybook/internal/preview-api';
-
-import actionsAddon from '@storybook/addon-actions';
 import backgroundsAddon from '@storybook/addon-backgrounds';
 // We can't use docs as function yet because of the --test flag. Once we figure out disabling docs properly in CSF4, we can change this
 // eslint-disable-next-line import/namespace
@@ -10,8 +7,9 @@ import measureAddon from '@storybook/addon-measure';
 import outlineAddon from '@storybook/addon-outline';
 import viewportAddon from '@storybook/addon-viewport';
 
+import { composeConfigs } from 'storybook/preview-api';
+
 export default composeConfigs([
-  actionsAddon(),
   // TODO: we can't use this as function because of the --test flag
   docsAddon,
   backgroundsAddon(),

code/addons/essentials/src/types.ts

@@ -1,4 +1,3 @@
-import type { ActionsParameters } from '@storybook/addon-actions';
 import type { BackgroundsParameters } from '@storybook/addon-backgrounds';
 import type { DocsParameters } from '@storybook/addon-docs';
 import type { HighlightParameters } from '@storybook/addon-highlight';
@@ -7,8 +6,7 @@ import type { OutlineParameters } from '@storybook/addon-outline';
 import type { ViewportParameters } from '@storybook/addon-viewport';
 
 export interface EssentialsParameters
-  extends ActionsParameters,
+  extends BackgroundsParameters,
-    BackgroundsParameters,
     DocsParameters,
     HighlightParameters,
     MeasureParameters,

code/addons/highlight/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import './preview';
 

code/addons/highlight/src/preview.ts

@@ -1,9 +1,10 @@
 /* eslint-env browser */
 import { STORY_CHANGED } from 'storybook/internal/core-events';
-import { addons } from 'storybook/internal/preview-api';
 
 import { global } from '@storybook/global';
 
+import { addons } from 'storybook/preview-api';
+
 import { HIGHLIGHT, HIGHLIGHT_STYLE_ID, RESET_HIGHLIGHT } from './constants';
 
 const { document } = global;

code/addons/interactions/README.md

@@ -20,8 +20,6 @@ export default {
 };
 ```
 
-Note that `@storybook/addon-interactions` must be listed **after** `@storybook/addon-actions` or `@storybook/addon-essentials`.
-
 ## Usage
 
 Interactions relies on "instrumented" versions of Vitest and Testing Library, that you import from `storybook/test` instead of their original package. You can then use these libraries in your `play` function.

code/addons/interactions/src/Panel.tsx

@@ -9,10 +9,11 @@ import {
   UNHANDLED_ERRORS_WHILE_PLAYING,
 } from 'storybook/internal/core-events';
 import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
-import { useAddonState, useChannel, useParameter } from 'storybook/internal/manager-api';
 
 import { global } from '@storybook/global';
 
+import { useAddonState, useChannel, useParameter } from 'storybook/manager-api';
+
 import { InteractionsPanel } from './components/InteractionsPanel';
 import { ADDON_ID } from './constants';
 

code/addons/interactions/src/components/EmptyState.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 
 import { EmptyTabContent, Link } from 'storybook/internal/components';
-import { useStorybookApi } from 'storybook/internal/manager-api';
-import { styled } from 'storybook/internal/theming';
 
 import { DocumentIcon, VideoIcon } from '@storybook/icons';
 
+import { useStorybookApi } from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
+
 import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
 
 const Links = styled.div(({ theme }) => ({

code/addons/interactions/src/components/Interaction.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
 import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
-import { styled, typography } from 'storybook/internal/theming';
 
 import { ListUnorderedIcon } from '@storybook/icons';
 
 import { transparentize } from 'polished';
+import { styled, typography } from 'storybook/theming';
 
 import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
 import type { Controls } from './InteractionsPanel';

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { CallStates } from 'storybook/internal/instrumenter';
-import { styled } from 'storybook/internal/theming';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { expect, userEvent, waitFor, within } from 'storybook/test';
+import { styled } from 'storybook/theming';
 
 import { isChromatic } from '../../../../.storybook/isChromatic';
 import { getCalls, getInteractions } from '../mocks';

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
 import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
-import { styled } from 'storybook/internal/theming';
 
 import { transparentize } from 'polished';
+import { styled } from 'storybook/theming';
 
 import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
 import { Empty } from './EmptyState';

code/addons/interactions/src/components/List.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from 'react';
 
-import { convert, styled, themes } from 'storybook/internal/theming';
-
 import { ChevronSmallDownIcon } from '@storybook/icons';
 
+import { convert, styled, themes } from 'storybook/theming';
+
 const ListWrapper = styled.ul({
   listStyle: 'none',
   fontSize: 14,

code/addons/interactions/src/components/MatcherResult.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { styled } from 'storybook/internal/theming';
+import { styled } from 'storybook/theming';
-
 import { dedent } from 'ts-dedent';
 
 import { MatcherResult } from './MatcherResult';

code/addons/interactions/src/components/MatcherResult.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { styled, typography } from 'storybook/internal/theming';
+import { styled, typography } from 'storybook/theming';
 
 import { useAnsiToHtmlFilter } from '../utils';
 import { Node } from './MethodCall';

code/addons/interactions/src/components/MethodCall.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import type { Call } from 'storybook/internal/instrumenter';
-import { styled, typography } from 'storybook/internal/theming';
+
+import { styled, typography } from 'storybook/theming';
 
 import { MethodCall, Node } from './MethodCall';
 

code/addons/interactions/src/components/MethodCall.tsx

@@ -2,9 +2,9 @@ import type { ReactElement } from 'react';
 import React, { Fragment } from 'react';
 
 import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
-import { useTheme } from 'storybook/internal/theming';
 
 import { ObjectInspector } from '@devtools-ds/object-inspector';
+import { useTheme } from 'storybook/theming';
 
 const colorsLight = {
   base: '#444',

code/addons/interactions/src/components/StatusBadge.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { type Call, CallStates } from 'storybook/internal/instrumenter';
-import { styled, typography } from 'storybook/internal/theming';
+
+import { styled, typography } from 'storybook/theming';
 
 export interface StatusBadgeProps {
   status: Call['status'];

code/addons/interactions/src/components/StatusIcon.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { type Call, CallStates } from 'storybook/internal/instrumenter';
-import { styled, useTheme } from 'storybook/internal/theming';
 
 import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 
 import { transparentize } from 'polished';
+import { styled, useTheme } from 'storybook/theming';
 
 export interface StatusIconProps {
   status: Call['status'];

code/addons/interactions/src/components/Subnav.stories.tsx

@@ -1,6 +1,6 @@
 import { CallStates } from 'storybook/internal/instrumenter';
 
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 
 import { parameters } from '../preview';
 import { Subnav } from './Subnav';

code/addons/interactions/src/components/Subnav.tsx

@@ -12,7 +12,6 @@ import {
 } from 'storybook/internal/components';
 import type { Call, ControlStates } from 'storybook/internal/instrumenter';
 import { CallStates } from 'storybook/internal/instrumenter';
-import { styled } from 'storybook/internal/theming';
 
 import {
   FastForwardIcon,
@@ -22,6 +21,8 @@ import {
   SyncIcon,
 } from '@storybook/icons';
 
+import { styled } from 'storybook/theming';
+
 import type { Controls } from './InteractionsPanel';
 import { StatusBadge } from './StatusBadge';
 

code/addons/interactions/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import * as addonAnnotations from './preview';
 

code/addons/interactions/src/manager.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
 
 import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
-import type { Combo } from 'storybook/internal/manager-api';
+
-import { Consumer, addons, types, useAddonState } from 'storybook/internal/manager-api';
+import type { Combo } from 'storybook/manager-api';
+import { Consumer, addons, types, useAddonState } from 'storybook/manager-api';
 
 import { Panel } from './Panel';
 import { ADDON_ID, PANEL_ID } from './constants';

code/addons/interactions/src/preset.ts

@@ -1,24 +1,2 @@
-import { isAbsolute, join } from 'node:path';
-
-import { checkAddonOrder, serverRequire } from 'storybook/internal/common';
-
-export function previewAnnotations(entry: string[] = [], options: { configDir: string }) {
-  checkAddonOrder({
-    before: {
-      name: '@storybook/addon-actions',
-      inEssentials: true,
-    },
-    after: {
-      name: '@storybook/addon-interactions',
-      inEssentials: false,
-    },
-    configFile: isAbsolute(options.configDir)
-      ? join(options.configDir, 'main')
-      : join(process.cwd(), options.configDir, 'main'),
-    getConfig: (configFile) => serverRequire(configFile),
-  });
-  return entry;
-}
-
 // This annotation is read by addon-test, so it can throw an error if both addons are used
 export const ADDON_INTERACTIONS_IN_USE = true;

code/addons/interactions/src/preview.ts

@@ -1,10 +1,6 @@
 import { instrument } from 'storybook/internal/instrumenter';
 import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
 
-// This makes sure that storybook test loaders are always loaded when addon-interactions is used
-// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
-import 'storybook/test';
-
 import type { InteractionsParameters } from './types';
 
 export const runStep = instrument(

code/addons/interactions/src/utils.ts

@@ -1,6 +1,5 @@
-import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
-
 import Filter from 'ansi-to-html';
+import { type StorybookTheme, useTheme } from 'storybook/theming';
 
 export function isTestAssertionError(error: unknown) {
   return isChaiError(error) || isJestError(error);

code/addons/interactions/template/stories/basics.stories.ts

@@ -4,7 +4,7 @@ import {
   expect,
   fireEvent,
   fn,
-  userEvent,
+  userEvent as testUserEvent,
   waitFor,
   waitForElementToBeRemoved,
   within,
@@ -32,7 +32,7 @@ export const Validation = {
 };
 
 export const Type = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     await userEvent.type(canvas.getByTestId('value'), 'foobar');
   },
@@ -45,7 +45,7 @@ export const Step = {
 };
 
 export const TypeAndClear = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     await userEvent.type(canvas.getByTestId('value'), 'initial value');
     await userEvent.clear(canvas.getByTestId('value'));
@@ -103,16 +103,16 @@ export const WithLoaders = {
 
 const UserEventSetup = {
   play: async (context) => {
-    const { args, canvasElement, step } = context;
+    const { args, canvasElement, step, userEvent } = context;
-    const user = userEvent.setup();
     const canvas = within(canvasElement);
     await step('Select and type on input using user-event v14 setup', async () => {
       const input = canvas.getByRole('textbox');
-      await user.click(input);
+      await userEvent.click(input);
-      await user.type(input, 'Typing ...');
+      await userEvent.type(input, 'Typing ...');
     });
     await step('Tab and press enter on submit button', async () => {
-      await user.pointer([
+      // Vitest's userEvent does not support pointer events, so we use storybook's
+      await testUserEvent.pointer([
         { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
         { keys: '[/TouchA]' },
       ]);
@@ -122,8 +122,8 @@ const UserEventSetup = {
         // user event has a few issues on firefox, therefore we do it differently
         await fireEvent.click(submitButton);
       } else {
-        await user.tab();
+        await userEvent.tab();
-        await user.keyboard('{enter}');
+        await userEvent.keyboard('{enter}');
         await expect(submitButton).toHaveFocus();
       }
 

code/addons/jest/src/components/Message.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactElement } from 'react';
 import React, { Fragment } from 'react';
 
-import { styled } from 'storybook/internal/theming';
+import { styled } from 'storybook/theming';
 
 const positiveConsoleRegex = /\[32m(.*?)\[39m/;
 const negativeConsoleRegex = /\[31m(.*?)\[39m/;

code/addons/jest/src/components/Panel.tsx

@@ -2,9 +2,9 @@ import type { FC } from 'react';
 import React, { Fragment } from 'react';
 
 import { Link, Placeholder, ScrollArea, TabsState } from 'storybook/internal/components';
-import { convert, styled, themes } from 'storybook/internal/theming';
 
 import { useResizeDetector } from 'react-resize-detector';
+import { convert, styled, themes } from 'storybook/theming';
 
 import type { Test } from '../hoc/provideJestResult';
 import { provideTests as provideJestResult } from '../hoc/provideJestResult';

code/addons/jest/src/components/Result.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from 'react';
 
-import { convert, styled, themes } from 'storybook/internal/theming';
-
 import { ChevronSmallDownIcon } from '@storybook/icons';
 
+import { convert, styled, themes } from 'storybook/theming';
+
 // eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
 

code/addons/jest/src/hoc/provideJestResult.tsx

@@ -2,7 +2,8 @@ import type { ComponentType } from 'react';
 import React, { Component as ReactComponent } from 'react';
 
 import { STORY_CHANGED } from 'storybook/internal/core-events';
-import type { API } from 'storybook/internal/manager-api';
+
+import type { API } from 'storybook/manager-api';
 
 import { ADD_TESTS } from '../shared';
 

code/addons/jest/src/index.ts

@@ -1,5 +1,4 @@
-import { addons } from 'storybook/internal/preview-api';
+import { addons } from 'storybook/preview-api';
-
 import { normalize, sep } from 'upath';
 
 import { ADD_TESTS, defineJestParameter } from './shared';

code/addons/jest/src/manager.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 
 import Panel from './components/Panel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';

code/addons/links/README.md

@@ -80,7 +80,7 @@ export const third = () => <LinkTo story="index">Go back</LinkTo>;
 If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
 
 ```js
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 import { hrefTo } from '@storybook/addon-links';
 
 export default {

code/addons/links/scripts/fix-preview-api-reference.ts

@@ -8,7 +8,7 @@ const run = async () => {
   const content = await readFile('./dist/index.d.ts', 'utf-8');
 
   const regexp = /'lib\/preview-api/;
-  const replaced = content.replace(regexp, "'storybook/internal/preview-api");
+  const replaced = content.replace(regexp, "'storybook/preview-api");
 
   await writeFile('./dist/index.d.ts', replaced);
 };

code/addons/links/src/index.ts

@@ -1,4 +1,4 @@
-import { definePreview } from 'storybook/internal/preview-api';
+import { definePreview } from 'storybook/preview-api';
 
 import * as addonAnnotations from './preview';