From c63bfd6b06bc334b05f0d1bdc5a6c8ec38534664 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 24 Mar 2025 13:52:31 +0100
Subject: [PATCH] Remove addon-interactions

---
 CODEOWNERS                                    |   1 -
 code/.storybook/main.ts                       |   8 -
 code/addons/interactions/README.md            |  55 ---
 code/addons/interactions/manager.js           |   1 -
 code/addons/interactions/package.json         | 107 ----
 code/addons/interactions/preset.js            |   1 -
 code/addons/interactions/preview.js           |   1 -
 code/addons/interactions/project.json         |   8 -
 code/addons/interactions/src/Panel.test.ts    | 292 -----------
 code/addons/interactions/src/Panel.tsx        | 262 ----------
 .../src/components/EmptyState.tsx             |  70 ---
 .../src/components/Interaction.stories.tsx    |  65 ---
 .../src/components/Interaction.tsx            | 208 --------
 .../components/InteractionsPanel.stories.tsx  | 137 ------
 .../src/components/InteractionsPanel.tsx      | 175 -------
 .../interactions/src/components/List.tsx      |  93 ----
 .../src/components/MatcherResult.stories.tsx  | 112 -----
 .../src/components/MatcherResult.tsx          | 146 ------
 .../src/components/MethodCall.stories.tsx     | 219 ---------
 .../src/components/MethodCall.tsx             | 465 ------------------
 .../src/components/StatusBadge.stories.tsx    |  25 -
 .../src/components/StatusBadge.tsx            |  45 --
 .../src/components/StatusIcon.stories.tsx     |  24 -
 .../src/components/StatusIcon.tsx             |  46 --
 .../src/components/Subnav.stories.tsx         |  91 ----
 .../interactions/src/components/Subnav.tsx    | 194 --------
 code/addons/interactions/src/constants.ts     |   5 -
 code/addons/interactions/src/index.ts         |   5 -
 code/addons/interactions/src/manager.tsx      |  47 --
 code/addons/interactions/src/mocks/index.ts   | 148 ------
 code/addons/interactions/src/preset.ts        |   2 -
 code/addons/interactions/src/preview.ts       |  21 -
 code/addons/interactions/src/theme.ts         |  20 -
 code/addons/interactions/src/types.ts         |  14 -
 code/addons/interactions/src/utils.ts         |  39 --
 .../template/stories/basics.stories.ts        | 135 -----
 .../stories/unhandled-errors.stories.ts       |  27 -
 code/addons/interactions/tsconfig.json        |   7 -
 code/addons/interactions/vitest.config.ts     |  10 -
 code/addons/test/src/postinstall.ts           |  36 --
 code/addons/test/src/preset.ts                |  21 -
 code/builders/builder-vite/README.md          |   2 +-
 .../builders/builder-vite/src/optimizeDeps.ts |   1 -
 .../js-package-manager/NPMProxy.test.ts       |  23 -
 .../js-package-manager/PNPMProxy.test.ts      |   8 +-
 .../js-package-manager/Yarn1Proxy.test.ts     |   4 +-
 code/core/src/common/presets.test.ts          |  14 +-
 .../utils/__tests__/check-addon-order.test.ts |  18 +-
 code/core/src/common/versions.ts              |   1 -
 .../src/core-server/__for-testing__/main.ts   |   1 -
 code/core/src/instrumenter/instrumenter.ts    |   2 +-
 .../components/sidebar/Heading.stories.tsx    |   1 -
 .../components/sidebar/Tree.stories.tsx       |   1 -
 .../modules/store/csf/stepRunners.ts          |   4 +-
 code/core/src/test/README.md                  |   2 +-
 code/e2e-tests/addon-interactions.spec.ts     |  13 +-
 code/e2e-tests/addon-test.spec.ts             |   5 -
 code/lib/cli-storybook/src/add.ts             |   4 +-
 .../__test__/main-config-with-wrappers.js     |   6 +-
 .../__test__/main-config-without-wrappers.js  |   2 +-
 .../src/generators/baseGenerator.ts           |   5 -
 .../src/generators/configure.test.ts          |   2 -
 code/package.json                             |   1 -
 code/sandbox/angular-cli-15-ts/project.json   |   1 -
 .../angular-cli-default-ts/project.json       |   1 -
 .../angular-cli-prerelease/project.json       |   1 -
 .../project.json                              |   1 -
 .../project.json                              |   1 -
 .../bench-react-vite-default-ts/project.json  |   1 -
 .../project.json                              |   1 -
 .../bench-react-webpack-18-ts/project.json    |   1 -
 code/sandbox/cra-default-js/project.json      |   1 -
 code/sandbox/cra-default-ts/project.json      |   1 -
 code/sandbox/ember-3-js/project.json          |   1 -
 code/sandbox/ember-default-js/project.json    |   1 -
 .../project.json                              |   1 -
 .../sandbox/html-vite-default-js/project.json |   1 -
 .../sandbox/html-vite-default-ts/project.json |   1 -
 .../sandbox/html-webpack-default/project.json |   1 -
 .../internal-react16-webpack/project.json     |   1 -
 .../project.json                              |   1 -
 .../internal-server-webpack5/project.json     |   1 -
 code/sandbox/lit-vite-default-js/project.json |   1 -
 code/sandbox/lit-vite-default-ts/project.json |   1 -
 code/sandbox/nextjs-default-js/project.json   |   1 -
 code/sandbox/nextjs-default-ts/project.json   |   1 -
 code/sandbox/nextjs-prerelease/project.json   |   1 -
 .../sandbox/nuxt-vite-default-ts/project.json |   1 -
 .../preact-vite-default-js/project.json       |   1 -
 .../preact-vite-default-ts/project.json       |   1 -
 .../sandbox/qwik-vite-default-ts/project.json |   1 -
 .../react-vite-default-js/project.json        |   1 -
 .../react-vite-default-ts/project.json        |   1 -
 code/sandbox/react-webpack-17-ts/project.json |   1 -
 code/sandbox/react-webpack-18-ts/project.json |   1 -
 .../solid-vite-default-js/project.json        |   1 -
 .../solid-vite-default-ts/project.json        |   1 -
 .../svelte-kit-prerelease-ts/project.json     |   1 -
 .../svelte-kit-skeleton-js/project.json       |   1 -
 .../svelte-kit-skeleton-ts/project.json       |   1 -
 .../svelte-vite-default-js/project.json       |   1 -
 .../svelte-vite-default-ts/project.json       |   1 -
 code/sandbox/vue-cli-default-js/project.json  |   1 -
 .../sandbox/vue3-vite-default-js/project.json |   1 -
 .../sandbox/vue3-vite-default-ts/project.json |   1 -
 code/yarn.lock                                |  21 -
 test-storybooks/ember-cli/package.json        |   1 -
 test-storybooks/external-docs/package.json    |   1 -
 .../nextjs/.storybook/main.ts                 |   1 -
 .../nextjs/jest.setup.ts                      |   4 -
 .../nextjs/package.json                       |   2 -
 .../react/cypress/support/component.ts        |   2 -
 .../react/jest.setup.ts                       |   5 +-
 .../react/package.json                        |   2 -
 .../react/playwright/index.ts                 |   9 +-
 .../svelte/.storybook/main.ts                 |   1 -
 .../svelte/cypress/support/component.ts       |   2 -
 .../svelte/package.json                       |   2 -
 .../svelte/playwright/index.ts                |   5 +-
 .../vue3/.storybook/main.ts                   |   1 -
 .../vue3/cypress/support/component.ts         |   2 -
 .../vue3/package.json                         |   2 -
 .../vue3/playwright/index.ts                  |   5 +-
 .../server-kitchen-sink/package.json          |   1 -
 .../standalone-preview/package.json           |   1 -
 125 files changed, 27 insertions(+), 3593 deletions(-)
 delete mode 100644 code/addons/interactions/README.md
 delete mode 100644 code/addons/interactions/manager.js
 delete mode 100644 code/addons/interactions/package.json
 delete mode 100644 code/addons/interactions/preset.js
 delete mode 100644 code/addons/interactions/preview.js
 delete mode 100644 code/addons/interactions/project.json
 delete mode 100644 code/addons/interactions/src/Panel.test.ts
 delete mode 100644 code/addons/interactions/src/Panel.tsx
 delete mode 100644 code/addons/interactions/src/components/EmptyState.tsx
 delete mode 100644 code/addons/interactions/src/components/Interaction.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/Interaction.tsx
 delete mode 100644 code/addons/interactions/src/components/InteractionsPanel.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/InteractionsPanel.tsx
 delete mode 100644 code/addons/interactions/src/components/List.tsx
 delete mode 100644 code/addons/interactions/src/components/MatcherResult.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/MatcherResult.tsx
 delete mode 100644 code/addons/interactions/src/components/MethodCall.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/MethodCall.tsx
 delete mode 100644 code/addons/interactions/src/components/StatusBadge.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/StatusBadge.tsx
 delete mode 100644 code/addons/interactions/src/components/StatusIcon.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/StatusIcon.tsx
 delete mode 100644 code/addons/interactions/src/components/Subnav.stories.tsx
 delete mode 100644 code/addons/interactions/src/components/Subnav.tsx
 delete mode 100644 code/addons/interactions/src/constants.ts
 delete mode 100644 code/addons/interactions/src/index.ts
 delete mode 100644 code/addons/interactions/src/manager.tsx
 delete mode 100644 code/addons/interactions/src/mocks/index.ts
 delete mode 100644 code/addons/interactions/src/preset.ts
 delete mode 100644 code/addons/interactions/src/preview.ts
 delete mode 100644 code/addons/interactions/src/theme.ts
 delete mode 100644 code/addons/interactions/src/types.ts
 delete mode 100644 code/addons/interactions/src/utils.ts
 delete mode 100644 code/addons/interactions/template/stories/basics.stories.ts
 delete mode 100644 code/addons/interactions/template/stories/unhandled-errors.stories.ts
 delete mode 100644 code/addons/interactions/tsconfig.json
 delete mode 100644 code/addons/interactions/vitest.config.ts

diff --git a/CODEOWNERS b/CODEOWNERS
index 7c7aee5e09e..f051c38c804 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -21,7 +21,6 @@
 # /code/addons/essentials/           @valentinpalkovic @ndelangen
 # /code/addons/gfm/                  @ndelangen @valentinpalkovic
 # /code/addons/highlight/            @yannbf @valentinpalkovic
-# /code/addons/interactions/         @yannbf @ndelangen
 # /code/addons/jest/                 @ndelangen
 # /code/addons/links/                @yannbf @JReinhold
 # /code/addons/measure/              @yannbf @valentinpalkovic
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index f32112ae798..d1a4ff6ebc5 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -73,14 +73,6 @@ const config = defineMain({
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
     },
-    {
-      directory: '../addons/interactions/src',
-      titlePrefix: 'addons/interactions',
-    },
-    {
-      directory: '../addons/interactions/template/stories',
-      titlePrefix: 'addons/interactions/tests',
-    },
     {
       directory: '../addons/test/src/components',
       titlePrefix: 'addons/test',
diff --git a/code/addons/interactions/README.md b/code/addons/interactions/README.md
deleted file mode 100644
index 26192c246a8..00000000000
--- a/code/addons/interactions/README.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# Storybook Addon Interactions
-
-Storybook Addon Interactions enables visual debugging of interactions and tests in [Storybook](https://storybook.js.org).
-
-![Screenshot](https://user-images.githubusercontent.com/321738/135628189-3d101cba-50bc-49dc-bba0-776586fedaf3.png)
-
-## Installation
-
-Install this addon by adding the `@storybook/addon-interactions` dependency:
-
-```sh
-yarn add -D @storybook/addon-interactions
-```
-
-within `.storybook/main.js`:
-
-```js
-export default {
-  addons: ['@storybook/addon-interactions'],
-};
-```
-
-## 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.
-
-```js
-import { expect, fn, userEvent, within } from 'storybook/test';
-import { Button } from './Button';
-
-export default {
-  title: 'Button',
-  component: Button,
-  args: {
-    onClick: fn(),
-  },
-};
-
-const Template = (args) => <Button {...args} />;
-
-export const Demo = Template.bind({});
-Demo.play = async ({ args, canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
-  await expect(args.onClick).toHaveBeenCalled();
-};
-```
-
-In order to enable step-through debugging in the addon panel, calls to `userEvent.*`, `fireEvent`, `findBy*`, `waitFor*` and `expect` have to
-be `await`-ed. While debugging, these functions return a Promise that won't resolve until you continue to the next step.
-
-While you can technically use `screen`, it's recommended to use `within(canvasElement)`. Besides giving you a better error
-message when a DOM element can't be found, it will also ensure your play function is compatible with Storybook Docs.
-
-Note that the `fn` function will assign a spy to your arg, so that you can assert invocations.
diff --git a/code/addons/interactions/manager.js b/code/addons/interactions/manager.js
deleted file mode 100644
index 8a2eae4ffce..00000000000
--- a/code/addons/interactions/manager.js
+++ /dev/null
@@ -1 +0,0 @@
-import './dist/manager';
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
deleted file mode 100644
index fa10655b2d6..00000000000
--- a/code/addons/interactions/package.json
+++ /dev/null
@@ -1,107 +0,0 @@
-{
-  "name": "@storybook/addon-interactions",
-  "version": "9.0.0-alpha.8",
-  "description": "Automate, test and debug user interactions",
-  "keywords": [
-    "storybook-addons",
-    "data-state",
-    "test"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/interactions",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/addons/interactions"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
-    },
-    "./manager": "./dist/manager.js",
-    "./preset": "./dist/preset.js",
-    "./register.js": "./dist/manager.js",
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preview": [
-        "dist/preview.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",
-    "polished": "^4.2.2",
-    "ts-dedent": "^2.2.0"
-  },
-  "devDependencies": {
-    "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/icons": "^1.4.0",
-    "@types/node": "^22.0.0",
-    "ansi-to-html": "^0.7.2",
-    "formik": "^2.2.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.7.3"
-  },
-  "peerDependencies": {
-    "storybook": "workspace:^"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "bundler": {
-    "exportEntries": [
-      "./src/index.ts"
-    ],
-    "managerEntries": [
-      "./src/manager.tsx"
-    ],
-    "previewEntries": [
-      "./src/preview.ts"
-    ],
-    "nodeEntries": [
-      "./src/preset.ts"
-    ]
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
-  "storybook": {
-    "displayName": "Interactions",
-    "unsupportedFrameworks": [
-      "react-native"
-    ],
-    "icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
-  }
-}
diff --git a/code/addons/interactions/preset.js b/code/addons/interactions/preset.js
deleted file mode 100644
index a83f95279e7..00000000000
--- a/code/addons/interactions/preset.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/preset');
diff --git a/code/addons/interactions/preview.js b/code/addons/interactions/preview.js
deleted file mode 100644
index 49ad602f79f..00000000000
--- a/code/addons/interactions/preview.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/preview';
diff --git a/code/addons/interactions/project.json b/code/addons/interactions/project.json
deleted file mode 100644
index d2fd1ee2dab..00000000000
--- a/code/addons/interactions/project.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "addon-interactions",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "targets": {
-    "build": {}
-  }
-}
diff --git a/code/addons/interactions/src/Panel.test.ts b/code/addons/interactions/src/Panel.test.ts
deleted file mode 100644
index 496c20bc0a3..00000000000
--- a/code/addons/interactions/src/Panel.test.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-// @vitest-environment happy-dom
-import { describe, expect, it } from 'vitest';
-
-import { type Call, CallStates, type LogItem } from 'storybook/internal/instrumenter';
-
-import { getInteractions } from './Panel';
-
-describe('Panel', () => {
-  describe('getInteractions', () => {
-    const log: LogItem[] = [
-      {
-        callId: 'story--id [4] findByText',
-        status: CallStates.DONE,
-        ancestors: [],
-      },
-      {
-        callId: 'story--id [5] click',
-        status: CallStates.DONE,
-        ancestors: [],
-      },
-      {
-        callId: 'story--id [6] waitFor',
-        status: CallStates.DONE,
-        ancestors: [],
-      },
-      {
-        callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-        status: CallStates.DONE,
-        ancestors: ['story--id [6] waitFor'],
-      },
-    ];
-    const calls = new Map<Call['id'], Call>(
-      [
-        {
-          id: 'story--id [0] action',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 0,
-          path: [],
-          method: 'action',
-          args: [{ __function__: { name: 'onSubmit' } }],
-          interceptable: false,
-          retain: true,
-        },
-        {
-          id: 'story--id [1] action',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 1,
-          path: [],
-          method: 'action',
-          args: [{ __function__: { name: 'onTransactionStart' } }],
-          interceptable: false,
-          retain: true,
-        },
-        {
-          id: 'story--id [2] action',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 2,
-          path: [],
-          method: 'action',
-          args: [{ __function__: { name: 'onTransactionEnd' } }],
-          interceptable: false,
-          retain: true,
-        },
-        {
-          id: 'story--id [3] within',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 3,
-          path: [],
-          method: 'within',
-          args: [{ __element__: { localName: 'div', id: 'root', innerText: 'Click' } }],
-          interceptable: false,
-          retain: false,
-        },
-        {
-          id: 'story--id [4] findByText',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 4,
-          path: [{ __callId__: 'story--id [3] within' }],
-          method: 'findByText',
-          args: ['Click'],
-          interceptable: true,
-          retain: false,
-        },
-        {
-          id: 'story--id [5] click',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 5,
-          path: ['userEvent'],
-          method: 'click',
-          args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
-          interceptable: true,
-          retain: false,
-        },
-        {
-          id: 'story--id [6] waitFor [0] expect',
-          storyId: 'story--id',
-          ancestors: ['story--id [6] waitFor'],
-          cursor: 0,
-          path: [],
-          method: 'expect',
-          args: [{ __callId__: 'story--id [0] action', retain: true }],
-          interceptable: true,
-          retain: false,
-        },
-        {
-          id: 'story--id [6] waitFor [1] stringMatching',
-          storyId: 'story--id',
-          ancestors: ['story--id [6] waitFor'],
-          cursor: 1,
-          path: ['expect'],
-          method: 'stringMatching',
-          args: [{ __regexp__: { flags: 'gi', source: '([A-Z])\\w+' } }],
-          interceptable: false,
-          retain: false,
-        },
-        {
-          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-          storyId: 'story--id',
-          ancestors: ['story--id [6] waitFor'],
-          cursor: 2,
-          path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
-          method: 'toHaveBeenCalledWith',
-          args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
-          interceptable: true,
-          retain: false,
-        },
-        {
-          id: 'story--id [6] waitFor',
-          storyId: 'story--id',
-          ancestors: [],
-          cursor: 6,
-          path: [],
-          method: 'waitFor',
-          args: [{ __function__: { name: '' } }],
-          interceptable: true,
-          retain: false,
-        },
-      ].map((v) => [v.id, v])
-    );
-    const collapsed = new Set<Call['id']>();
-    const setCollapsed = () => {};
-
-    it('returns list of interactions', () => {
-      expect(getInteractions({ log, calls, collapsed, setCollapsed })).toEqual([
-        {
-          ...calls.get('story--id [4] findByText'),
-          status: CallStates.DONE,
-          childCallIds: undefined,
-          isHidden: false,
-          isCollapsed: false,
-          toggleCollapsed: expect.any(Function),
-        },
-        {
-          ...calls.get('story--id [5] click'),
-          status: CallStates.DONE,
-          childCallIds: undefined,
-          isHidden: false,
-          isCollapsed: false,
-          toggleCollapsed: expect.any(Function),
-        },
-        {
-          ...calls.get('story--id [6] waitFor'),
-          status: CallStates.DONE,
-          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
-          isHidden: false,
-          isCollapsed: false,
-          toggleCollapsed: expect.any(Function),
-        },
-        {
-          ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
-          status: CallStates.DONE,
-          childCallIds: undefined,
-          isHidden: false,
-          isCollapsed: false,
-          toggleCollapsed: expect.any(Function),
-        },
-      ]);
-    });
-
-    it('hides calls for which the parent is collapsed', () => {
-      const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
-
-      expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
-        expect.objectContaining({
-          ...calls.get('story--id [4] findByText'),
-          childCallIds: undefined,
-          isCollapsed: false,
-          isHidden: false,
-        }),
-        expect.objectContaining({
-          ...calls.get('story--id [5] click'),
-          childCallIds: undefined,
-          isCollapsed: false,
-          isHidden: false,
-        }),
-        expect.objectContaining({
-          ...calls.get('story--id [6] waitFor'),
-          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
-          isCollapsed: true,
-          isHidden: false,
-        }),
-        expect.objectContaining({
-          ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
-          childCallIds: undefined,
-          isCollapsed: false,
-          isHidden: true,
-        }),
-      ]);
-    });
-
-    it('uses status from log', () => {
-      const withError = log.slice(0, 3).concat({ ...log[3], status: CallStates.ERROR });
-
-      expect(getInteractions({ log: withError, calls, collapsed, setCollapsed })).toEqual([
-        expect.objectContaining({
-          id: 'story--id [4] findByText',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [5] click',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-          status: CallStates.ERROR,
-        }),
-      ]);
-    });
-
-    it('keeps status active for errored child calls while parent is active', () => {
-      const withActiveError = log.slice(0, 2).concat([
-        { ...log[2], status: CallStates.ACTIVE },
-        { ...log[3], status: CallStates.ERROR },
-      ]);
-
-      expect(getInteractions({ log: withActiveError, calls, collapsed, setCollapsed })).toEqual([
-        expect.objectContaining({
-          id: 'story--id [4] findByText',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [5] click',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor',
-          status: CallStates.ACTIVE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-          status: CallStates.ACTIVE, // not ERROR
-        }),
-      ]);
-    });
-
-    it('does not override child status other than error for active parent', () => {
-      const withActiveWaiting = log.slice(0, 2).concat([
-        { ...log[2], status: CallStates.ACTIVE },
-        { ...log[3], status: CallStates.WAITING },
-      ]);
-
-      expect(getInteractions({ log: withActiveWaiting, calls, collapsed, setCollapsed })).toEqual([
-        expect.objectContaining({
-          id: 'story--id [4] findByText',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [5] click',
-          status: CallStates.DONE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor',
-          status: CallStates.ACTIVE,
-        }),
-        expect.objectContaining({
-          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-          status: CallStates.WAITING,
-        }),
-      ]);
-    });
-  });
-});
diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx
deleted file mode 100644
index 9168ed02c8c..00000000000
--- a/code/addons/interactions/src/Panel.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';
-
-import {
-  FORCE_REMOUNT,
-  PLAY_FUNCTION_THREW_EXCEPTION,
-  STORY_RENDER_PHASE_CHANGED,
-  STORY_THREW_EXCEPTION,
-  UNHANDLED_ERRORS_WHILE_PLAYING,
-} from 'storybook/internal/core-events';
-import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
-
-import { global } from '@storybook/global';
-
-import { useAddonState, useChannel, useParameter } from 'storybook/manager-api';
-
-import { InteractionsPanel } from './components/InteractionsPanel';
-import { ADDON_ID } from './constants';
-
-interface Interaction extends Call {
-  status: Call['status'];
-  childCallIds: Call['id'][];
-  isHidden: boolean;
-  isCollapsed: boolean;
-  toggleCollapsed: () => void;
-}
-
-const INITIAL_CONTROL_STATES = {
-  start: false,
-  back: false,
-  goto: false,
-  next: false,
-  end: false,
-};
-
-export const getInteractions = ({
-  log,
-  calls,
-  collapsed,
-  setCollapsed,
-}: {
-  log: LogItem[];
-  calls: Map<Call['id'], Call>;
-  collapsed: Set<Call['id']>;
-  setCollapsed: Dispatch<SetStateAction<Set<string>>>;
-}) => {
-  const callsById = new Map<Call['id'], Call>();
-  const childCallMap = new Map<Call['id'], Call['id'][]>();
-
-  return log
-    .map<Call & { isHidden: boolean }>(({ callId, ancestors, status }) => {
-      let isHidden = false;
-      ancestors.forEach((ancestor) => {
-        if (collapsed.has(ancestor)) {
-          isHidden = true;
-        }
-        childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
-      });
-      return { ...calls.get(callId), status, isHidden };
-    })
-    .map<Interaction>((call) => {
-      const status =
-        call.status === CallStates.ERROR &&
-        callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
-          ? CallStates.ACTIVE
-          : call.status;
-      callsById.set(call.id, { ...call, status });
-      return {
-        ...call,
-        status,
-        childCallIds: childCallMap.get(call.id),
-        isCollapsed: collapsed.has(call.id),
-        toggleCollapsed: () =>
-          setCollapsed((ids) => {
-            if (ids.has(call.id)) {
-              ids.delete(call.id);
-            } else {
-              ids.add(call.id);
-            }
-            return new Set(ids);
-          }),
-      };
-    });
-};
-
-export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId }) {
-  // shared state
-  const [addonState, set] = useAddonState(ADDON_ID, {
-    controlStates: INITIAL_CONTROL_STATES,
-    isErrored: false,
-    pausedAt: undefined,
-    interactions: [],
-    isPlaying: false,
-    hasException: false,
-    caughtException: undefined,
-    interactionsCount: 0,
-    unhandledErrors: undefined,
-  });
-
-  // local state
-  const [scrollTarget, setScrollTarget] = useState<HTMLElement | undefined>(undefined);
-  const [collapsed, setCollapsed] = useState<Set<Call['id']>>(new Set());
-
-  const {
-    controlStates = INITIAL_CONTROL_STATES,
-    isErrored = false,
-    pausedAt = undefined,
-    interactions = [],
-    isPlaying = false,
-    caughtException = undefined,
-    unhandledErrors = undefined,
-  } = addonState;
-
-  // Log and calls are tracked in a ref so we don't needlessly rerender.
-  const log = useRef<LogItem[]>([]);
-  const calls = useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
-  const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
-
-  const endRef = useRef();
-  useEffect(() => {
-    let observer: IntersectionObserver;
-    if (global.IntersectionObserver) {
-      observer = new global.IntersectionObserver(
-        ([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
-        { root: global.document.querySelector('#panel-tab-content') }
-      );
-
-      if (endRef.current) {
-        observer.observe(endRef.current);
-      }
-    }
-    return () => observer?.disconnect();
-  }, []);
-
-  const emit = useChannel(
-    {
-      [EVENTS.CALL]: setCall,
-      [EVENTS.SYNC]: (payload) => {
-        set((s) => {
-          const list = getInteractions({
-            log: payload.logItems,
-            calls: calls.current,
-            collapsed,
-            setCollapsed,
-          });
-          return {
-            ...s,
-            controlStates: payload.controlStates,
-            pausedAt: payload.pausedAt,
-            interactions: list,
-            interactionsCount: list.filter(({ method }) => method !== 'step').length,
-          };
-        });
-
-        log.current = payload.logItems;
-      },
-      [STORY_RENDER_PHASE_CHANGED]: (event) => {
-        if (event.newPhase === 'preparing') {
-          set({
-            controlStates: INITIAL_CONTROL_STATES,
-            isErrored: false,
-            pausedAt: undefined,
-            interactions: [],
-            isPlaying: false,
-            hasException: false,
-            caughtException: undefined,
-            interactionsCount: 0,
-            unhandledErrors: undefined,
-          });
-          return;
-        }
-        set((s) => {
-          const newState: typeof s = {
-            ...s,
-            isPlaying: event.newPhase === 'playing',
-            pausedAt: undefined,
-            ...(event.newPhase === 'rendering'
-              ? {
-                  isErrored: false,
-                  caughtException: undefined,
-                }
-              : {}),
-          };
-
-          return newState;
-        });
-      },
-      [STORY_THREW_EXCEPTION]: () => {
-        set((s) => ({ ...s, isErrored: true, hasException: true }));
-      },
-      [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
-        set((s) => ({ ...s, caughtException: e, hasException: true }));
-      },
-      [UNHANDLED_ERRORS_WHILE_PLAYING]: (e) => {
-        set((s) => ({ ...s, unhandledErrors: e, hasException: true }));
-      },
-    },
-    [collapsed]
-  );
-
-  useEffect(() => {
-    set((s) => {
-      const list = getInteractions({
-        log: log.current,
-        calls: calls.current,
-        collapsed,
-        setCollapsed,
-      });
-      return {
-        ...s,
-        interactions: list,
-        interactionsCount: list.filter(({ method }) => method !== 'step').length,
-      };
-    });
-  }, [collapsed]);
-
-  const controls = useMemo(
-    () => ({
-      start: () => emit(EVENTS.START, { storyId }),
-      back: () => emit(EVENTS.BACK, { storyId }),
-      goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
-      next: () => emit(EVENTS.NEXT, { storyId }),
-      end: () => emit(EVENTS.END, { storyId }),
-      rerun: () => {
-        emit(FORCE_REMOUNT, { storyId });
-      },
-    }),
-    [storyId]
-  );
-
-  const storyFilePath = useParameter('fileName', '');
-  const [fileName] = storyFilePath.toString().split('/').slice(-1);
-  const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
-
-  const hasException =
-    !!caughtException ||
-    !!unhandledErrors ||
-    interactions.some((v) => v.status === CallStates.ERROR);
-
-  if (isErrored) {
-    return <Fragment key="interactions" />;
-  }
-
-  return (
-    <Fragment key="interactions">
-      <InteractionsPanel
-        calls={calls.current}
-        controls={controls}
-        controlStates={controlStates}
-        interactions={interactions}
-        fileName={fileName}
-        hasException={hasException}
-        caughtException={caughtException}
-        unhandledErrors={unhandledErrors}
-        isPlaying={isPlaying}
-        pausedAt={pausedAt}
-        endRef={endRef}
-        onScrollToEnd={scrollTarget && scrollToTarget}
-      />
-    </Fragment>
-  );
-});
diff --git a/code/addons/interactions/src/components/EmptyState.tsx b/code/addons/interactions/src/components/EmptyState.tsx
deleted file mode 100644
index b1db9a79e59..00000000000
--- a/code/addons/interactions/src/components/EmptyState.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { EmptyTabContent, Link } from 'storybook/internal/components';
-
-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 }) => ({
-  display: 'flex',
-  fontSize: theme.typography.size.s2 - 1,
-  gap: 25,
-}));
-
-const Divider = styled.div(({ theme }) => ({
-  width: 1,
-  height: 16,
-  backgroundColor: theme.appBorderColor,
-}));
-
-export const Empty = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const api = useStorybookApi();
-  const docsUrl = api.getDocsUrl({
-    subpath: DOCUMENTATION_LINK,
-    versioned: true,
-    renderer: true,
-  });
-
-  // We are adding a small delay to avoid flickering when the story is loading.
-  // It takes a bit of time for the controls to appear, so we don't want
-  // to show the empty state for a split second.
-  useEffect(() => {
-    const load = setTimeout(() => {
-      setIsLoading(false);
-    }, 100);
-
-    return () => clearTimeout(load);
-  }, []);
-
-  if (isLoading) {
-    return null;
-  }
-
-  return (
-    <EmptyTabContent
-      title="Interaction testing"
-      description={
-        <>
-          Interaction tests allow you to verify the functional aspects of UIs. Write a play function
-          for your story and you&apos;ll see it run here.
-        </>
-      }
-      footer={
-        <Links>
-          <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
-            <VideoIcon /> Watch 8m video
-          </Link>
-          <Divider />
-          <Link href={docsUrl} target="_blank" withArrow>
-            <DocumentIcon /> Read docs
-          </Link>
-        </Links>
-      }
-    />
-  );
-};
diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx
deleted file mode 100644
index 4526cdcebab..00000000000
--- a/code/addons/interactions/src/components/Interaction.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { CallStates } from 'storybook/internal/instrumenter';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { expect, userEvent, within } from 'storybook/test';
-
-import { getCalls } from '../mocks';
-import { Interaction } from './Interaction';
-import SubnavStories from './Subnav.stories';
-
-type Story = StoryObj<typeof Interaction>;
-
-export default {
-  title: 'Interaction',
-  component: Interaction,
-  args: {
-    callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
-    controls: SubnavStories.args.controls,
-    controlStates: SubnavStories.args.controlStates,
-  },
-} as Meta<typeof Interaction>;
-
-export const Active: Story = {
-  args: {
-    call: getCalls(CallStates.ACTIVE).slice(-1)[0],
-  },
-};
-
-export const Waiting: Story = {
-  args: {
-    call: getCalls(CallStates.WAITING).slice(-1)[0],
-  },
-};
-
-export const Failed: Story = {
-  args: {
-    call: getCalls(CallStates.ERROR).slice(-1)[0],
-  },
-};
-
-export const Done: Story = {
-  args: {
-    call: getCalls(CallStates.DONE).slice(-1)[0],
-  },
-};
-
-export const WithParent: Story = {
-  args: {
-    call: { ...getCalls(CallStates.DONE).slice(-1)[0], ancestors: ['parent-id'] },
-  },
-};
-
-export const Disabled: Story = {
-  args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
-};
-
-export const Hovered: Story = {
-  ...Done,
-  globals: { sb_theme: 'light' },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.hover(canvas.getByRole('button'));
-    await expect(canvas.getByTestId('icon-active')).toBeInTheDocument();
-  },
-};
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
deleted file mode 100644
index 770f332d68e..00000000000
--- a/code/addons/interactions/src/components/Interaction.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import * as React from 'react';
-
-import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
-import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
-
-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';
-import { MatcherResult } from './MatcherResult';
-import { MethodCall } from './MethodCall';
-import { StatusIcon } from './StatusIcon';
-
-const MethodCallWrapper = styled.div({
-  fontFamily: typography.fonts.mono,
-  fontSize: typography.size.s1,
-  overflowWrap: 'break-word',
-  inlineSize: 'calc( 100% - 40px )',
-});
-
-const RowContainer = styled('div', {
-  shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),
-})<{ call: Call; pausedAt: Call['id'] }>(
-  ({ theme, call }) => ({
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    borderBottom: `1px solid ${theme.appBorderColor}`,
-    fontFamily: typography.fonts.base,
-    fontSize: 13,
-    ...(call.status === CallStates.ERROR && {
-      backgroundColor:
-        theme.base === 'dark'
-          ? transparentize(0.93, theme.color.negative)
-          : theme.background.warning,
-    }),
-    paddingLeft: (call.ancestors?.length ?? 0) * 20,
-  }),
-  ({ theme, call, pausedAt }) =>
-    pausedAt === call.id && {
-      '&::before': {
-        content: '""',
-        position: 'absolute',
-        top: -5,
-        zIndex: 1,
-        borderTop: '4.5px solid transparent',
-        borderLeft: `7px solid ${theme.color.warning}`,
-        borderBottom: '4.5px solid transparent',
-      },
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: -1,
-        zIndex: 1,
-        width: '100%',
-        borderTop: `1.5px solid ${theme.color.warning}`,
-      },
-    }
-);
-
-const RowHeader = styled.div<{ isInteractive: boolean }>(({ theme, isInteractive }) => ({
-  display: 'flex',
-  '&:hover': isInteractive ? {} : { background: theme.background.hoverable },
-}));
-
-const RowLabel = styled('button', {
-  shouldForwardProp: (prop) => !['call'].includes(prop.toString()),
-})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ theme, disabled, call }) => ({
-  flex: 1,
-  display: 'grid',
-  background: 'none',
-  border: 0,
-  gridTemplateColumns: '15px 1fr',
-  alignItems: 'center',
-  minHeight: 40,
-  margin: 0,
-  padding: '8px 15px',
-  textAlign: 'start',
-  cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
-  '&:focus-visible': {
-    outline: 0,
-    boxShadow: `inset 3px 0 0 0 ${
-      call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary
-    }`,
-    background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable,
-  },
-  '& > div': {
-    opacity: call.status === CallStates.WAITING ? 0.5 : 1,
-  },
-}));
-
-const RowActions = styled.div({
-  padding: 6,
-});
-
-export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
-  color: theme.textMutedColor,
-  margin: '0 3px',
-}));
-
-const Note = styled(TooltipNote)(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-}));
-
-const RowMessage = styled('div')(({ theme }) => ({
-  padding: '8px 10px 8px 36px',
-  fontSize: typography.size.s1,
-  color: theme.color.defaultText,
-  pre: {
-    margin: 0,
-    padding: 0,
-  },
-}));
-
-export const Exception = ({ exception }: { exception: Call['exception'] }) => {
-  const filter = useAnsiToHtmlFilter();
-  if (isJestError(exception)) {
-    return <MatcherResult {...exception} />;
-  }
-  if (isChaiError(exception)) {
-    return (
-      <RowMessage>
-        <MatcherResult
-          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
-          style={{ padding: 0 }}
-        />
-        <p>See the full stack trace in the browser console.</p>
-      </RowMessage>
-    );
-  }
-
-  const paragraphs = exception.message.split('\n\n');
-  const more = paragraphs.length > 1;
-  return (
-    <RowMessage>
-      <pre dangerouslySetInnerHTML={{ __html: filter.toHtml(paragraphs[0]) }}></pre>
-      {more && <p>See the full stack trace in the browser console.</p>}
-    </RowMessage>
-  );
-};
-
-export const Interaction = ({
-  call,
-  callsById,
-  controls,
-  controlStates,
-  childCallIds,
-  isHidden,
-  isCollapsed,
-  toggleCollapsed,
-  pausedAt,
-}: {
-  call: Call;
-  callsById: Map<Call['id'], Call>;
-  controls: Controls;
-  controlStates: ControlStates;
-  childCallIds?: Call['id'][];
-  isHidden: boolean;
-  isCollapsed: boolean;
-  toggleCollapsed: () => void;
-  pausedAt?: Call['id'];
-}) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors?.length;
-
-  if (isHidden) {
-    return null;
-  }
-
-  return (
-    <RowContainer call={call} pausedAt={pausedAt}>
-      <RowHeader isInteractive={isInteractive}>
-        <RowLabel
-          aria-label="Interaction step"
-          call={call}
-          onClick={() => controls.goto(call.id)}
-          disabled={isInteractive}
-          onMouseEnter={() => controlStates.goto && setIsHovered(true)}
-          onMouseLeave={() => controlStates.goto && setIsHovered(false)}
-        >
-          <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
-          <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
-            <MethodCall call={call} callsById={callsById} />
-          </MethodCallWrapper>
-        </RowLabel>
-        <RowActions>
-          {childCallIds?.length > 0 && (
-            <WithTooltip
-              hasChrome={false}
-              tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
-            >
-              <StyledIconButton onClick={toggleCollapsed}>
-                <ListUnorderedIcon />
-              </StyledIconButton>
-            </WithTooltip>
-          )}
-        </RowActions>
-      </RowHeader>
-
-      {call.status === CallStates.ERROR && call.exception?.callId === call.id && (
-        <Exception exception={call.exception} />
-      )}
-    </RowContainer>
-  );
-};
diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
deleted file mode 100644
index 0cc603955a0..00000000000
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React from 'react';
-
-import { CallStates } from 'storybook/internal/instrumenter';
-
-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';
-import { InteractionsPanel } from './InteractionsPanel';
-import SubnavStories from './Subnav.stories';
-
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
-  color: theme.color.defaultText,
-  display: 'block',
-  height: '100%',
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  overflow: 'auto',
-}));
-
-const interactions = getInteractions(CallStates.DONE);
-
-const meta = {
-  title: 'InteractionsPanel',
-  component: InteractionsPanel,
-  decorators: [
-    (Story: any) => (
-      <StyledWrapper id="panel-tab-content">
-        <Story />
-      </StyledWrapper>
-    ),
-  ],
-  parameters: { layout: 'fullscreen' },
-  args: {
-    calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
-    controls: SubnavStories.args.controls,
-    controlStates: SubnavStories.args.controlStates,
-    interactions,
-    fileName: 'addon-interactions.stories.tsx',
-    hasException: false,
-    isPlaying: false,
-    onScrollToEnd: () => {},
-    endRef: null,
-    // prop for the AddonPanel used as wrapper of Panel
-    active: true,
-  },
-} as Meta<typeof InteractionsPanel>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Passing: Story = {
-  args: {
-    interactions: getInteractions(CallStates.DONE),
-  },
-  play: async ({ args, canvasElement }) => {
-    if (isChromatic()) {
-      return;
-    }
-    const canvas = within(canvasElement);
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByLabelText('Go to start'));
-      await expect(args.controls.start).toHaveBeenCalled();
-    });
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByLabelText('Go back'));
-      await expect(args.controls.back).toHaveBeenCalled();
-    });
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByLabelText('Go forward'));
-      await expect(args.controls.next).not.toHaveBeenCalled();
-    });
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByLabelText('Go to end'));
-      await expect(args.controls.end).not.toHaveBeenCalled();
-    });
-
-    await waitFor(async () => {
-      await userEvent.click(canvas.getByLabelText('Rerun'));
-      await expect(args.controls.rerun).toHaveBeenCalled();
-    });
-  },
-};
-
-export const Paused: Story = {
-  args: {
-    isPlaying: true,
-    interactions: getInteractions(CallStates.WAITING),
-    controlStates: {
-      start: false,
-      back: false,
-      goto: true,
-      next: true,
-      end: true,
-    },
-    pausedAt: interactions[interactions.length - 1].id,
-  },
-};
-
-export const Playing: Story = {
-  args: {
-    isPlaying: true,
-    interactions: getInteractions(CallStates.ACTIVE),
-  },
-};
-
-export const Failed: Story = {
-  args: {
-    hasException: true,
-    interactions: getInteractions(CallStates.ERROR),
-  },
-};
-
-// export const NoInteractions: Story = {
-//   args: {
-//     interactions: [],
-//   },
-// };
-
-export const CaughtException: Story = {
-  args: {
-    hasException: true,
-    interactions: [],
-    caughtException: new TypeError("Cannot read properties of undefined (reading 'args')"),
-  },
-};
diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx
deleted file mode 100644
index 1a9bfbd3f61..00000000000
--- a/code/addons/interactions/src/components/InteractionsPanel.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import * as React from 'react';
-
-import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
-
-import { transparentize } from 'polished';
-import { styled } from 'storybook/theming';
-
-import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
-import { Empty } from './EmptyState';
-import { Interaction } from './Interaction';
-import { Subnav } from './Subnav';
-
-export interface Controls {
-  start: (args: any) => void;
-  back: (args: any) => void;
-  goto: (args: any) => void;
-  next: (args: any) => void;
-  end: (args: any) => void;
-  rerun: (args: any) => void;
-}
-
-interface InteractionsPanelProps {
-  controls: Controls;
-  controlStates: ControlStates;
-  interactions: (Call & {
-    status?: CallStates;
-    childCallIds: Call['id'][];
-    isHidden: boolean;
-    isCollapsed: boolean;
-    toggleCollapsed: () => void;
-  })[];
-  fileName?: string;
-  hasException?: boolean;
-  caughtException?: Error;
-  unhandledErrors?: SerializedError[];
-  isPlaying?: boolean;
-  pausedAt?: Call['id'];
-  calls: Map<string, any>;
-  endRef?: React.Ref<HTMLDivElement>;
-  onScrollToEnd?: () => void;
-}
-
-const Container = styled.div(({ theme }) => ({
-  height: '100%',
-  background: theme.background.content,
-}));
-
-const CaughtException = styled.div(({ theme }) => ({
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  backgroundColor:
-    theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
-  padding: 15,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '19px',
-}));
-const CaughtExceptionCode = styled.code(({ theme }) => ({
-  margin: '0 1px',
-  padding: 3,
-  fontSize: theme.typography.size.s1 - 1,
-  lineHeight: 1,
-  verticalAlign: 'top',
-  background: 'rgba(0, 0, 0, 0.05)',
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: 3,
-}));
-const CaughtExceptionTitle = styled.div({
-  paddingBottom: 4,
-  fontWeight: 'bold',
-});
-const CaughtExceptionDescription = styled.p({
-  margin: 0,
-  padding: '0 0 20px',
-});
-
-const CaughtExceptionStack = styled.pre(({ theme }) => ({
-  margin: 0,
-  padding: 0,
-  '&:not(:last-child)': {
-    paddingBottom: 16,
-  },
-  fontSize: theme.typography.size.s1 - 1,
-}));
-
-export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
-  function InteractionsPanel({
-    calls,
-    controls,
-    controlStates,
-    interactions,
-    fileName,
-    hasException,
-    caughtException,
-    unhandledErrors,
-    isPlaying,
-    pausedAt,
-    onScrollToEnd,
-    endRef,
-  }) {
-    const filter = useAnsiToHtmlFilter();
-    return (
-      <Container>
-        {(interactions.length > 0 || hasException) && (
-          <Subnav
-            controls={controls}
-            controlStates={controlStates}
-            status={
-              isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
-            }
-            storyFileName={fileName}
-            onScrollToEnd={onScrollToEnd}
-          />
-        )}
-        <div aria-label="Interactions list">
-          {interactions.map((call) => (
-            <Interaction
-              key={call.id}
-              call={call}
-              callsById={calls}
-              controls={controls}
-              controlStates={controlStates}
-              childCallIds={call.childCallIds}
-              isHidden={call.isHidden}
-              isCollapsed={call.isCollapsed}
-              toggleCollapsed={call.toggleCollapsed}
-              pausedAt={pausedAt}
-            />
-          ))}
-        </div>
-        {caughtException && !isTestAssertionError(caughtException) && (
-          <CaughtException>
-            <CaughtExceptionTitle>
-              Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
-            </CaughtExceptionTitle>
-            <CaughtExceptionStack
-              data-chromatic="ignore"
-              dangerouslySetInnerHTML={{
-                __html: filter.toHtml(printSerializedError(caughtException)),
-              }}
-            ></CaughtExceptionStack>
-          </CaughtException>
-        )}
-        {unhandledErrors && (
-          <CaughtException>
-            <CaughtExceptionTitle>Unhandled Errors</CaughtExceptionTitle>
-            <CaughtExceptionDescription>
-              Found {unhandledErrors.length} unhandled error{unhandledErrors.length > 1 ? 's' : ''}{' '}
-              while running the play function. This might cause false positive assertions. Resolve
-              unhandled errors or ignore unhandled errors with setting the
-              <CaughtExceptionCode>test.dangerouslyIgnoreUnhandledErrors</CaughtExceptionCode>{' '}
-              parameter to <CaughtExceptionCode>true</CaughtExceptionCode>.
-            </CaughtExceptionDescription>
-
-            {unhandledErrors.map((error, i) => (
-              <CaughtExceptionStack key={i} data-chromatic="ignore">
-                {printSerializedError(error)}
-              </CaughtExceptionStack>
-            ))}
-          </CaughtException>
-        )}
-        <div ref={endRef} />
-        {!isPlaying && !caughtException && interactions.length === 0 && <Empty />}
-      </Container>
-    );
-  }
-);
-
-interface SerializedError {
-  name: string;
-  stack?: string;
-  message: string;
-}
-
-function printSerializedError(error: SerializedError) {
-  return error.stack || `${error.name}: ${error.message}`;
-}
diff --git a/code/addons/interactions/src/components/List.tsx b/code/addons/interactions/src/components/List.tsx
deleted file mode 100644
index 6d8b3b8e6da..00000000000
--- a/code/addons/interactions/src/components/List.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Fragment, useState } from 'react';
-
-import { ChevronSmallDownIcon } from '@storybook/icons';
-
-import { convert, styled, themes } from 'storybook/theming';
-
-const ListWrapper = styled.ul({
-  listStyle: 'none',
-  fontSize: 14,
-  padding: 0,
-  margin: 0,
-});
-
-const Wrapper = styled.div({
-  display: 'flex',
-  width: '100%',
-  borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
-  '&:hover': {
-    background: convert(themes.light).background.hoverable,
-  },
-});
-
-const Icon = styled(ChevronSmallDownIcon)({
-  color: convert(themes.light).textMutedColor,
-  marginRight: 10,
-  transition: 'transform 0.1s ease-in-out',
-  alignSelf: 'center',
-  display: 'inline-flex',
-});
-
-const HeaderBar = styled.div({
-  padding: convert(themes.light).layoutMargin,
-  paddingLeft: convert(themes.light).layoutMargin - 3,
-  background: 'none',
-  color: 'inherit',
-  textAlign: 'left',
-  cursor: 'pointer',
-  borderLeft: '3px solid transparent',
-  width: '100%',
-
-  '&:focus': {
-    outline: '0 none',
-    borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
-  },
-});
-
-const Description = styled.div({
-  padding: convert(themes.light).layoutMargin,
-  marginBottom: convert(themes.light).layoutMargin,
-  fontStyle: 'italic',
-});
-
-type Item = {
-  title: string;
-  description: string;
-};
-
-interface ListItemProps {
-  item: Item;
-}
-
-export const ListItem: React.FC<ListItemProps> = ({ item }) => {
-  const [open, onToggle] = useState(false);
-
-  return (
-    <Fragment>
-      <Wrapper>
-        <HeaderBar onClick={() => onToggle(!open)} role="button">
-          <Icon
-            color={convert(themes.light).appBorderColor}
-            style={{
-              transform: `rotate(${open ? 0 : -90}deg)`,
-            }}
-          />
-          {item.title}
-        </HeaderBar>
-      </Wrapper>
-      {open ? <Description>{item.description}</Description> : null}
-    </Fragment>
-  );
-};
-
-interface ListProps {
-  items: Item[];
-}
-
-export const List: React.FC<ListProps> = ({ items }) => (
-  <ListWrapper>
-    {items.map((item) => (
-      <ListItem key={item.title + item.description} item={item} />
-    ))}
-  </ListWrapper>
-);
diff --git a/code/addons/interactions/src/components/MatcherResult.stories.tsx b/code/addons/interactions/src/components/MatcherResult.stories.tsx
deleted file mode 100644
index f8ec78e970a..00000000000
--- a/code/addons/interactions/src/components/MatcherResult.stories.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-
-import { styled } from 'storybook/theming';
-import { dedent } from 'ts-dedent';
-
-import { MatcherResult } from './MatcherResult';
-
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
-  padding: '12px 0',
-  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
-  color: theme.color.defaultText,
-  fontSize: 13,
-}));
-
-export default {
-  title: 'MatcherResult',
-  component: MatcherResult,
-  decorators: [
-    (Story: any) => (
-      <StyledWrapper>
-        <Story />
-      </StyledWrapper>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Expected = {
-  args: {
-    message: dedent`
-      expected last "spy" call to have been called with [ { …(2) } ]
-      
-      - Expected: 
-      Array [
-        Object {
-          "email": "michael@chromatic.com",
-          "password": "testpasswordthatwontfail",
-        },
-      ]
-      
-      + Received: 
-      undefined
-    `,
-  },
-};
-
-export const ExpectedReceived = {
-  args: {
-    message: dedent`
-      expected last "spy" call to have been called with []
-      
-      - Expected
-      + Received
-      
-      - Array []
-      + Array [
-      +   Object {
-      +     "email": "michael@chromatic.com",
-      +     "password": "testpasswordthatwontfail",
-      +   },
-      + ]
-    `,
-  },
-};
-
-export const ExpectedNumberOfCalls = {
-  args: {
-    message: dedent`
-      expected "spy" to not be called at all, but actually been called 1 times
-      
-      Received: 
-      
-        1st spy call:
-      
-          Array [
-            Object {
-              "email": "michael@chromatic.com",
-              "password": "testpasswordthatwontfail",
-            },
-          ]
-      
-      
-      Number of calls: 1
-    `,
-  },
-};
-
-export const Diff = {
-  args: {
-    message: dedent`
-      expected "spy" to be called with arguments: [ { …(2) } ]
-      
-      Received: 
-      
-        1st spy call:
-      
-        Array [
-          Object {
-      -     "email": "michael@chromaui.com",
-      +     "email": "michael@chromatic.com",
-            "password": "testpasswordthatwontfail",
-          },
-        ]
-      
-      
-      Number of calls: 1
-    `,
-  },
-};
diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx
deleted file mode 100644
index d0fecdf0210..00000000000
--- a/code/addons/interactions/src/components/MatcherResult.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-
-import { styled, typography } from 'storybook/theming';
-
-import { useAnsiToHtmlFilter } from '../utils';
-import { Node } from './MethodCall';
-
-const getParams = (line: string, fromIndex = 0): string => {
-  for (let i = fromIndex, depth = 1; i < line.length; i += 1) {
-    if (line[i] === '(') {
-      depth += 1;
-    } else if (line[i] === ')') {
-      depth -= 1;
-    }
-
-    if (depth === 0) {
-      return line.slice(fromIndex, i);
-    }
-  }
-  return '';
-};
-
-const parseValue = (value: string): any => {
-  try {
-    return value === 'undefined' ? undefined : JSON.parse(value);
-  } catch (e) {
-    return value;
-  }
-};
-
-const StyledExpected = styled.span(({ theme }) => ({
-  color: theme.base === 'light' ? theme.color.positiveText : theme.color.positive,
-}));
-
-const StyledReceived = styled.span(({ theme }) => ({
-  color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative,
-}));
-
-export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>
-  parsed ? (
-    <Node showObjectInspector value={value} style={{ color: '#D43900' }} />
-  ) : (
-    <StyledReceived>{value}</StyledReceived>
-  );
-
-export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => {
-  if (parsed) {
-    if (typeof value === 'string' && value.startsWith('called with')) {
-      return <>{value}</>;
-    }
-    return <Node showObjectInspector value={value} style={{ color: '#16B242' }} />;
-  }
-  return <StyledExpected>{value}</StyledExpected>;
-};
-
-export const MatcherResult = ({
-  message,
-  style = {},
-}: {
-  message: string;
-  style?: React.CSSProperties;
-}) => {
-  const filter = useAnsiToHtmlFilter();
-  const lines = message.split('\n');
-  return (
-    <pre
-      style={{
-        margin: 0,
-        padding: '8px 10px 8px 36px',
-        fontSize: typography.size.s1,
-        ...style,
-      }}
-    >
-      {lines.flatMap((line: string, index: number) => {
-        if (line.startsWith('expect(')) {
-          const received = getParams(line, 7);
-          const remainderIndex = received && 7 + received.length;
-          const matcher = received && line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);
-          if (matcher) {
-            const expectedIndex = remainderIndex + matcher.index + matcher[0].length;
-            const expected = getParams(line, expectedIndex);
-            if (expected) {
-              return [
-                'expect(',
-                <Received key={`received_${received}`} value={received} />,
-                line.slice(remainderIndex, expectedIndex),
-                <Expected key={`expected_${expected}`} value={expected} />,
-                line.slice(expectedIndex + expected.length),
-                <br key={`br${index}`} />,
-              ];
-            }
-          }
-        }
-
-        if (line.match(/^\s*- /)) {
-          return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
-        }
-        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
-          return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
-        }
-
-        const [, assertionLabel, assertionValue] = line.match(/^(Expected|Received): (.*)$/) || [];
-        if (assertionLabel && assertionValue) {
-          return assertionLabel === 'Expected'
-            ? [
-                'Expected: ',
-                <Expected key={line + index} value={parseValue(assertionValue)} parsed />,
-                <br key={`br${index}`} />,
-              ]
-            : [
-                'Received: ',
-                <Received key={line + index} value={parseValue(assertionValue)} parsed />,
-                <br key={`br${index}`} />,
-              ];
-        }
-
-        const [, prefix, numberOfCalls] =
-          line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i) || [];
-        if (prefix && numberOfCalls) {
-          return [
-            `${prefix} of calls: `,
-            <Node key={line + index} value={Number(numberOfCalls)} />,
-            <br key={`br${index}`} />,
-          ];
-        }
-
-        const [, receivedValue] = line.match(/^Received has value: (.+)$/) || [];
-        if (receivedValue) {
-          return [
-            'Received has value: ',
-            <Node key={line + index} value={parseValue(receivedValue)} />,
-            <br key={`br${index}`} />,
-          ];
-        }
-
-        return [
-          <span
-            key={line + index}
-            dangerouslySetInnerHTML={{ __html: filter.toHtml(line) }}
-          ></span>,
-          <br key={`br${index}`} />,
-        ];
-      })}
-    </pre>
-  );
-};
diff --git a/code/addons/interactions/src/components/MethodCall.stories.tsx b/code/addons/interactions/src/components/MethodCall.stories.tsx
deleted file mode 100644
index dbbc108d441..00000000000
--- a/code/addons/interactions/src/components/MethodCall.stories.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import React from 'react';
-
-import type { Call } from 'storybook/internal/instrumenter';
-
-import { styled, typography } from 'storybook/theming';
-
-import { MethodCall, Node } from './MethodCall';
-
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
-  padding: '20px',
-  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
-  color: theme.color.defaultText,
-  fontFamily: typography.fonts.mono,
-  fontSize: typography.size.s1,
-}));
-
-export default {
-  title: 'MethodCall',
-  component: MethodCall,
-  decorators: [
-    (Story: any) => (
-      <StyledWrapper>
-        <Story />
-      </StyledWrapper>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Args = () => (
-  <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
-    <Node value={null} />
-    <Node value={undefined} />
-    <Node value="Hello world" />
-    <Node value="https://github.com/storybookjs/storybook/blob/next/README.md" />
-    <Node value="012345678901234567890123456789012345678901234567890123456789" />
-    {}
-    <Node value={true} />
-    <Node value={false} />
-    <Node value={12345} />
-    <Node value={['foo', 1, { hello: 'world' }]} />
-    <Node value={[...Array(23)].map((_, i) => i)} />
-    <Node value={{ hello: 'world' }} />
-    <Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} />
-    <Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} showObjectInspector />
-    <Node
-      value={{
-        hello: 'world',
-        arr: [1, 2, 3],
-        more: true,
-        regex: /regex/,
-        class: class DummyClass {},
-        fn: () => 123,
-        asyncFn: async () => 'hello',
-      }}
-      showObjectInspector
-    />
-    <Node value={{ __class__: { name: 'FooBar' } }} />
-    <Node value={{ __function__: { name: 'goFaster' } }} />
-    <Node value={{ __function__: { name: '' } }} />
-    <Node value={{ __element__: { localName: 'hr' } }} />
-    <Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
-    <Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
-    <Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
-    <Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
-    <Node
-      value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
-    />
-    <Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
-    <Node value={{ __date__: { value: new Date(1600000000123) } }} />
-    <Node value={{ __error__: { name: 'EvalError', message: '' } }} />
-    <Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
-    <Node
-      value={{
-        __error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
-      }}
-    />
-    <Node
-      value={{
-        __error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
-      }}
-    />
-    <Node
-      value={{
-        __error__: {
-          name: 'Error',
-          message:
-            "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
-        },
-      }}
-    />
-    <Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
-    <Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
-    <Node value={{ __symbol__: { description: '' } }} />
-    <Node value={{ __symbol__: { description: 'Hello world' } }} />
-  </div>
-);
-
-const calls: Call[] = [
-  {
-    cursor: 0,
-    id: '1',
-    ancestors: [],
-    path: ['screen'],
-    method: 'getByText',
-    storyId: 'kind--story',
-    args: ['Click'],
-    interceptable: false,
-    retain: false,
-  },
-  {
-    cursor: 1,
-    id: '2',
-    ancestors: [],
-    path: ['userEvent'],
-    method: 'click',
-    storyId: 'kind--story',
-    args: [{ __callId__: '1' }],
-    interceptable: true,
-    retain: false,
-  },
-  {
-    cursor: 2,
-    id: '3',
-    ancestors: [],
-    path: [],
-    method: 'expect',
-    storyId: 'kind--story',
-    args: [true],
-    interceptable: true,
-    retain: false,
-  },
-  {
-    cursor: 3,
-    id: '4',
-    ancestors: [],
-    path: [{ __callId__: '3' }, 'not'],
-    method: 'toBe',
-    storyId: 'kind--story',
-    args: [false],
-    interceptable: true,
-    retain: false,
-  },
-  {
-    cursor: 4,
-    id: '5',
-    ancestors: [],
-    path: ['jest'],
-    method: 'fn',
-    storyId: 'kind--story',
-    args: [{ __function__: { name: 'actionHandler' } }],
-    interceptable: false,
-    retain: false,
-  },
-  {
-    cursor: 5,
-    id: '6',
-    ancestors: [],
-    path: [],
-    method: 'expect',
-    storyId: 'kind--story',
-    args: [{ __callId__: '5' }],
-    interceptable: false,
-    retain: false,
-  },
-  {
-    cursor: 6,
-    id: '7',
-    ancestors: [],
-    path: ['expect'],
-    method: 'stringMatching',
-    storyId: 'kind--story',
-    args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
-    interceptable: false,
-    retain: false,
-  },
-  {
-    cursor: 7,
-    id: '8',
-    ancestors: [],
-    path: [{ __callId__: '6' }, 'not'],
-    method: 'toHaveBeenCalledWith',
-    storyId: 'kind--story',
-    args: [
-      { __callId__: '7' },
-      [
-        { __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
-        { __symbol__: { description: 'Hello world' } },
-      ],
-    ],
-    interceptable: false,
-    retain: false,
-  },
-  {
-    cursor: 8,
-    id: '9',
-    ancestors: [],
-    path: [],
-    method: 'step',
-    storyId: 'kind--story',
-    args: ['Custom step label', { __function__: { name: '' } }],
-    interceptable: true,
-    retain: false,
-  },
-];
-
-const callsById = calls.reduce((acc, call) => {
-  acc.set(call.id, call);
-  return acc;
-}, new Map<Call['id'], Call>());
-
-export const Step = () => <MethodCall call={callsById.get('9')} callsById={callsById} />;
-export const Simple = () => <MethodCall call={callsById.get('1')} callsById={callsById} />;
-export const Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />;
-export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />;
-export const Complex = () => <MethodCall call={callsById.get('8')} callsById={callsById} />;
diff --git a/code/addons/interactions/src/components/MethodCall.tsx b/code/addons/interactions/src/components/MethodCall.tsx
deleted file mode 100644
index 823fa34af42..00000000000
--- a/code/addons/interactions/src/components/MethodCall.tsx
+++ /dev/null
@@ -1,465 +0,0 @@
-import type { ReactElement } from 'react';
-import React, { Fragment } from 'react';
-
-import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
-
-import { ObjectInspector } from '@devtools-ds/object-inspector';
-import { useTheme } from 'storybook/theming';
-
-const colorsLight = {
-  base: '#444',
-  nullish: '#7D99AA',
-  string: '#16B242',
-  number: '#5D40D0',
-  boolean: '#f41840',
-  objectkey: '#698394',
-  instance: '#A15C20',
-  function: '#EA7509',
-  muted: '#7D99AA',
-  tag: {
-    name: '#6F2CAC',
-    suffix: '#1F99E5',
-  },
-  date: '#459D9C',
-  error: {
-    name: '#D43900',
-    message: '#444',
-  },
-  regex: {
-    source: '#A15C20',
-    flags: '#EA7509',
-  },
-  meta: '#EA7509',
-  method: '#0271B6',
-};
-
-const colorsDark = {
-  base: '#eee',
-  nullish: '#aaa',
-  string: '#5FE584',
-  number: '#6ba5ff',
-  boolean: '#ff4191',
-  objectkey: '#accfe6',
-  instance: '#E3B551',
-  function: '#E3B551',
-  muted: '#aaa',
-  tag: {
-    name: '#f57bff',
-    suffix: '#8EB5FF',
-  },
-  date: '#70D4D3',
-  error: {
-    name: '#f40',
-    message: '#eee',
-  },
-  regex: {
-    source: '#FAD483',
-    flags: '#E3B551',
-  },
-  meta: '#FAD483',
-  method: '#5EC1FF',
-};
-
-const useThemeColors = () => {
-  const { base } = useTheme();
-  return base === 'dark' ? colorsDark : colorsLight;
-};
-
-const special = /[^A-Z0-9]/i;
-const trimEnd = /[\s.,…]+$/gm;
-const ellipsize = (string: string, maxlength: number): string => {
-  if (string.length <= maxlength) {
-    return string;
-  }
-  for (let i = maxlength - 1; i >= 0; i -= 1) {
-    if (special.test(string[i]) && i > 10) {
-      return `${string.slice(0, i).replace(trimEnd, '')}…`;
-    }
-  }
-  return `${string.slice(0, maxlength).replace(trimEnd, '')}…`;
-};
-
-const stringify = (value: any) => {
-  try {
-    return JSON.stringify(value, null, 1);
-  } catch (e) {
-    return String(value);
-  }
-};
-
-const interleave = (nodes: ReactElement[], separator: ReactElement) =>
-  nodes.flatMap((node, index) =>
-    index === nodes.length - 1
-      ? [node]
-      : [node, React.cloneElement(separator, { key: `sep${index}` })]
-  );
-
-export const Node = ({
-  value,
-  nested,
-  showObjectInspector,
-  callsById,
-  ...props
-}: {
-  value: any;
-  nested?: boolean;
-  /** Shows an object inspector instead of just printing the object. Only available for Objects */
-  showObjectInspector?: boolean;
-  callsById?: Map<Call['id'], Call>;
-  [props: string]: any;
-}) => {
-  switch (true) {
-    case value === null:
-      return <NullNode {...props} />;
-    case value === undefined:
-      return <UndefinedNode {...props} />;
-    case Array.isArray(value):
-      return <ArrayNode {...props} value={value} callsById={callsById} />;
-    case typeof value === 'string':
-      return <StringNode {...props} value={value} />;
-    case typeof value === 'number':
-      return <NumberNode {...props} value={value} />;
-    case typeof value === 'boolean':
-      return <BooleanNode {...props} value={value} />;
-
-    /* eslint-disable no-underscore-dangle */
-    case Object.prototype.hasOwnProperty.call(value, '__date__'):
-      return <DateNode {...props} {...value.__date__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__error__'):
-      return <ErrorNode {...props} {...value.__error__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
-      return <RegExpNode {...props} {...value.__regexp__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__function__'):
-      return <FunctionNode {...props} {...value.__function__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
-      return <SymbolNode {...props} {...value.__symbol__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__element__'):
-      return <ElementNode {...props} {...value.__element__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__class__'):
-      return <ClassNode {...props} {...value.__class__} />;
-    case Object.prototype.hasOwnProperty.call(value, '__callId__'):
-      return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
-    /* eslint-enable no-underscore-dangle */
-
-    case Object.prototype.toString.call(value) === '[object Object]':
-      return (
-        <ObjectNode
-          value={value}
-          showInspector={showObjectInspector}
-          callsById={callsById}
-          {...props}
-        />
-      );
-    default:
-      return <OtherNode value={value} {...props} />;
-  }
-};
-
-export const NullNode = (props: object) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.nullish }} {...props}>
-      null
-    </span>
-  );
-};
-
-export const UndefinedNode = (props: object) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.nullish }} {...props}>
-      undefined
-    </span>
-  );
-};
-
-export const StringNode = ({ value, ...props }: { value: string }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.string }} {...props}>
-      {JSON.stringify(ellipsize(value, 50))}
-    </span>
-  );
-};
-
-export const NumberNode = ({ value, ...props }: { value: number }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.number }} {...props}>
-      {value}
-    </span>
-  );
-};
-
-export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.boolean }} {...props}>
-      {String(value)}
-    </span>
-  );
-};
-
-export const ArrayNode = ({
-  value,
-  nested = false,
-  callsById,
-}: {
-  value: any[];
-  nested?: boolean;
-  callsById?: Map<Call['id'], Call>;
-}) => {
-  const colors = useThemeColors();
-  if (nested) {
-    return <span style={{ color: colors.base }}>[…]</span>;
-  }
-  const nodes = value
-    .slice(0, 3)
-    .map((v, index) => (
-      <Node key={`${index}--${JSON.stringify(v)}`} value={v} nested callsById={callsById} />
-    ));
-  const nodelist = interleave(nodes, <span>, </span>);
-  if (value.length <= 3) {
-    return <span style={{ color: colors.base }}>[{nodelist}]</span>;
-  }
-  return (
-    <span style={{ color: colors.base }}>
-      ({value.length}) [{nodelist}, …]
-    </span>
-  );
-};
-
-export const ObjectNode = ({
-  showInspector,
-  value,
-  callsById,
-  nested = false,
-}: {
-  showInspector?: boolean;
-  value: object;
-  nested?: boolean;
-  callsById?: Map<Call['id'], Call>;
-}) => {
-  const isDarkMode = useTheme().base === 'dark';
-  const colors = useThemeColors();
-
-  if (showInspector) {
-    return (
-      <>
-        <ObjectInspector
-          id="interactions-object-inspector"
-          data={value}
-          includePrototypes={false}
-          colorScheme={isDarkMode ? 'dark' : 'light'}
-        />
-      </>
-    );
-  }
-
-  if (nested) {
-    return <span style={{ color: colors.base }}>{'{…}'}</span>;
-  }
-  const nodelist = interleave(
-    Object.entries(value)
-      .slice(0, 2)
-      .map(([k, v]) => (
-        <Fragment key={k}>
-          <span style={{ color: colors.objectkey }}>{k}: </span>
-          <Node value={v} callsById={callsById} nested />
-        </Fragment>
-      )),
-    <span>, </span>
-  );
-  if (Object.keys(value).length <= 2) {
-    return (
-      <span style={{ color: colors.base }}>
-        {'{ '}
-        {nodelist}
-        {' }'}
-      </span>
-    );
-  }
-  return (
-    <span style={{ color: colors.base }}>
-      ({Object.keys(value).length}) {'{ '}
-      {nodelist}
-      {', … }'}
-    </span>
-  );
-};
-
-export const ClassNode = ({ name }: { name: string }) => {
-  const colors = useThemeColors();
-  return <span style={{ color: colors.instance }}>{name}</span>;
-};
-
-export const FunctionNode = ({ name }: { name: string }) => {
-  const colors = useThemeColors();
-  return name ? (
-    <span style={{ color: colors.function }}>{name}</span>
-  ) : (
-    <span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
-  );
-};
-
-export const ElementNode = ({
-  prefix,
-  localName,
-  id,
-  classNames = [],
-  innerText,
-}: ElementRef['__element__']) => {
-  const name = prefix ? `${prefix}:${localName}` : localName;
-  const colors = useThemeColors();
-  return (
-    <span style={{ wordBreak: 'keep-all' }}>
-      <span key={`${name}_lt`} style={{ color: colors.muted }}>
-        &lt;
-      </span>
-      <span key={`${name}_tag`} style={{ color: colors.tag.name }}>
-        {name}
-      </span>
-      <span key={`${name}_suffix`} style={{ color: colors.tag.suffix }}>
-        {id ? `#${id}` : classNames.reduce((acc, className) => `${acc}.${className}`, '')}
-      </span>
-      <span key={`${name}_gt`} style={{ color: colors.muted }}>
-        &gt;
-      </span>
-      {!id && classNames.length === 0 && innerText && (
-        <>
-          <span key={`${name}_text`}>{innerText}</span>
-          <span key={`${name}_close_lt`} style={{ color: colors.muted }}>
-            &lt;
-          </span>
-          <span key={`${name}_close_tag`} style={{ color: colors.tag.name }}>
-            /{name}
-          </span>
-          <span key={`${name}_close_gt`} style={{ color: colors.muted }}>
-            &gt;
-          </span>
-        </>
-      )}
-    </span>
-  );
-};
-
-export const DateNode = ({ value }: { value: string | Date }) => {
-  const string = value instanceof Date ? value.toISOString() : value;
-  const [date, time, ms] = string.split(/[T.Z]/);
-  const colors = useThemeColors();
-  return (
-    <span style={{ whiteSpace: 'nowrap', color: colors.date }}>
-      {date}
-      <span style={{ opacity: 0.7 }}>T</span>
-      {time === '00:00:00' ? <span style={{ opacity: 0.7 }}>{time}</span> : time}
-      {ms === '000' ? <span style={{ opacity: 0.7 }}>.{ms}</span> : `.${ms}`}
-      <span style={{ opacity: 0.7 }}>Z</span>
-    </span>
-  );
-};
-
-export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ color: colors.error.name }}>
-      {name}
-      {message && ': '}
-      {message && (
-        <span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
-          {ellipsize(message, 50)}
-        </span>
-      )}
-    </span>
-  );
-};
-
-export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
-      /<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
-    </span>
-  );
-};
-
-export const SymbolNode = ({ description }: { description: string }) => {
-  const colors = useThemeColors();
-  return (
-    <span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
-      Symbol(
-      {description && <span style={{ color: colors.meta }}>"{description}"</span>})
-    </span>
-  );
-};
-
-export const OtherNode = ({ value }: { value: any }) => {
-  const colors = useThemeColors();
-  return <span style={{ color: colors.meta }}>{stringify(value)}</span>;
-};
-
-export const StepNode = ({ label }: { label: string }) => {
-  const colors = useThemeColors();
-  const { typography } = useTheme();
-  return (
-    <span
-      style={{
-        color: colors.base,
-        fontFamily: typography.fonts.base,
-        fontSize: typography.size.s2 - 1,
-      }}
-    >
-      {label}
-    </span>
-  );
-};
-
-export const MethodCall = ({
-  call,
-  callsById,
-}: {
-  call?: Call;
-  callsById: Map<Call['id'], Call>;
-}) => {
-  // Call might be undefined during initial render, can be safely ignored.
-  if (!call) {
-    return null;
-  }
-
-  if (call.method === 'step' && call.path.length === 0) {
-    return <StepNode label={call.args[0]} />;
-  }
-
-  const path = call.path?.flatMap((elem, index) => {
-    // eslint-disable-next-line no-underscore-dangle
-    const callId = (elem as CallRef).__callId__;
-    return [
-      callId ? (
-        <MethodCall key={`elem${index}`} call={callsById.get(callId)} callsById={callsById} />
-      ) : (
-        <span key={`elem${index}`}>{elem as any}</span>
-      ),
-      <wbr key={`wbr${index}`} />,
-      <span key={`dot${index}`}>.</span>,
-    ];
-  });
-
-  const args = call.args?.flatMap((arg, index, array) => {
-    const node = <Node key={`node${index}`} value={arg} callsById={callsById} />;
-    return index < array.length - 1
-      ? [node, <span key={`comma${index}`}>,&nbsp;</span>, <wbr key={`wbr${index}`} />]
-      : [node];
-  });
-
-  const colors = useThemeColors();
-  return (
-    <>
-      <span style={{ color: colors.base }}>{path}</span>
-      <span style={{ color: colors.method }}>{call.method}</span>
-      <span style={{ color: colors.base }}>
-        (<wbr />
-        {args}
-        <wbr />)
-      </span>
-    </>
-  );
-};
diff --git a/code/addons/interactions/src/components/StatusBadge.stories.tsx b/code/addons/interactions/src/components/StatusBadge.stories.tsx
deleted file mode 100644
index bb55a415b6e..00000000000
--- a/code/addons/interactions/src/components/StatusBadge.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { CallStates } from 'storybook/internal/instrumenter';
-
-import { StatusBadge } from './StatusBadge';
-
-export default {
-  title: 'StatusBadge',
-  component: StatusBadge,
-  parameters: { layout: 'padded' },
-};
-
-export const Pass = {
-  args: { status: CallStates.DONE },
-};
-
-export const Active = {
-  args: { status: CallStates.ACTIVE },
-};
-
-export const Waiting = {
-  args: { status: CallStates.WAITING },
-};
-
-export const Fail = {
-  args: { status: CallStates.ERROR },
-};
diff --git a/code/addons/interactions/src/components/StatusBadge.tsx b/code/addons/interactions/src/components/StatusBadge.tsx
deleted file mode 100644
index 4f24aad4427..00000000000
--- a/code/addons/interactions/src/components/StatusBadge.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-import { type Call, CallStates } from 'storybook/internal/instrumenter';
-
-import { styled, typography } from 'storybook/theming';
-
-export interface StatusBadgeProps {
-  status: Call['status'];
-}
-
-const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
-  const backgroundColor = {
-    [CallStates.DONE]: theme.color.positive,
-    [CallStates.ERROR]: theme.color.negative,
-    [CallStates.ACTIVE]: theme.color.warning,
-    [CallStates.WAITING]: theme.color.warning,
-  }[status];
-  return {
-    padding: '4px 6px 4px 8px;',
-    borderRadius: '4px',
-    backgroundColor,
-    color: 'white',
-    fontFamily: typography.fonts.base,
-    textTransform: 'uppercase',
-    fontSize: typography.size.s1,
-    letterSpacing: 3,
-    fontWeight: typography.weight.bold,
-    width: 65,
-    textAlign: 'center',
-  };
-});
-
-export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
-  const badgeText = {
-    [CallStates.DONE]: 'Pass',
-    [CallStates.ERROR]: 'Fail',
-    [CallStates.ACTIVE]: 'Runs',
-    [CallStates.WAITING]: 'Runs',
-  }[status];
-  return (
-    <StyledBadge aria-label="Status of the test run" status={status}>
-      {badgeText}
-    </StyledBadge>
-  );
-};
diff --git a/code/addons/interactions/src/components/StatusIcon.stories.tsx b/code/addons/interactions/src/components/StatusIcon.stories.tsx
deleted file mode 100644
index eaa4db11c56..00000000000
--- a/code/addons/interactions/src/components/StatusIcon.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { CallStates } from 'storybook/internal/instrumenter';
-
-import { StatusIcon } from './StatusIcon';
-
-export default {
-  title: 'StatusIcon',
-  component: StatusIcon,
-};
-
-export const Pending = {
-  args: { status: CallStates.WAITING },
-};
-
-export const Active = {
-  args: { status: CallStates.ACTIVE },
-};
-
-export const Error = {
-  args: { status: CallStates.ERROR },
-};
-
-export const Done = {
-  args: { status: CallStates.DONE },
-};
diff --git a/code/addons/interactions/src/components/StatusIcon.tsx b/code/addons/interactions/src/components/StatusIcon.tsx
deleted file mode 100644
index c89575798e6..00000000000
--- a/code/addons/interactions/src/components/StatusIcon.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { type Call, CallStates } from 'storybook/internal/instrumenter';
-
-import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
-
-import { transparentize } from 'polished';
-import { styled, useTheme } from 'storybook/theming';
-
-export interface StatusIconProps {
-  status: Call['status'];
-}
-
-const WarningContainer = styled.div({
-  width: 14,
-  height: 14,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
-  const theme = useTheme();
-
-  switch (status) {
-    case CallStates.DONE: {
-      return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
-    }
-    case CallStates.ERROR: {
-      return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
-    }
-    case CallStates.ACTIVE: {
-      return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
-    }
-    case CallStates.WAITING: {
-      return (
-        <WarningContainer data-testid="icon-waiting">
-          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
-        </WarningContainer>
-      );
-    }
-    default: {
-      return null;
-    }
-  }
-};
diff --git a/code/addons/interactions/src/components/Subnav.stories.tsx b/code/addons/interactions/src/components/Subnav.stories.tsx
deleted file mode 100644
index bb48ee78e28..00000000000
--- a/code/addons/interactions/src/components/Subnav.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { CallStates } from 'storybook/internal/instrumenter';
-
-import { action } from 'storybook/actions';
-
-import { parameters } from '../preview';
-import { Subnav } from './Subnav';
-
-export default {
-  title: 'Subnav',
-  component: Subnav,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    controls: {
-      start: action('start'),
-      back: action('back'),
-      goto: action('goto'),
-      next: action('next'),
-      end: action('end'),
-      rerun: action('rerun'),
-    },
-    controlStates: {
-      start: true,
-      back: true,
-      goto: true,
-      next: false,
-      end: false,
-    },
-    storyFileName: 'Subnav.stories.tsx',
-    hasNext: true,
-    hasPrevious: true,
-  },
-};
-
-export const Pass = {
-  args: {
-    status: CallStates.DONE,
-  },
-};
-
-export const Fail = {
-  args: {
-    status: CallStates.ERROR,
-  },
-};
-
-export const Runs = {
-  args: {
-    status: CallStates.WAITING,
-  },
-};
-
-export const AtStart = {
-  args: {
-    status: CallStates.WAITING,
-    controlStates: {
-      start: false,
-      back: false,
-      goto: true,
-      next: true,
-      end: true,
-    },
-  },
-};
-
-export const Midway = {
-  args: {
-    status: CallStates.WAITING,
-    controlStates: {
-      start: true,
-      back: true,
-      goto: true,
-      next: true,
-      end: true,
-    },
-  },
-};
-
-export const Locked = {
-  args: {
-    status: CallStates.ACTIVE,
-    controlStates: {
-      start: false,
-      back: false,
-      goto: false,
-      next: false,
-      end: false,
-    },
-  },
-};
diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx
deleted file mode 100644
index 5f8f181a9e2..00000000000
--- a/code/addons/interactions/src/components/Subnav.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import type { ComponentProps } from 'react';
-import React from 'react';
-
-import {
-  Bar,
-  Button,
-  IconButton,
-  P,
-  Separator,
-  TooltipNote,
-  WithTooltip,
-} from 'storybook/internal/components';
-import type { Call, ControlStates } from 'storybook/internal/instrumenter';
-import { CallStates } from 'storybook/internal/instrumenter';
-
-import {
-  FastForwardIcon,
-  PlayBackIcon,
-  PlayNextIcon,
-  RewindIcon,
-  SyncIcon,
-} from '@storybook/icons';
-
-import { styled } from 'storybook/theming';
-
-import type { Controls } from './InteractionsPanel';
-import { StatusBadge } from './StatusBadge';
-
-const SubnavWrapper = styled.div(({ theme }) => ({
-  background: theme.background.app,
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  position: 'sticky',
-  top: 0,
-  zIndex: 1,
-}));
-
-const StyledSubnav = styled.nav(({ theme }) => ({
-  height: 40,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  paddingLeft: 15,
-}));
-
-export interface SubnavProps {
-  controls: Controls;
-  controlStates: ControlStates;
-  status: Call['status'];
-  storyFileName?: string;
-  onScrollToEnd?: () => void;
-}
-
-const StyledButton = styled(Button)(({ theme }) => ({
-  borderRadius: 4,
-  padding: 6,
-  color: theme.textMutedColor,
-  '&:not(:disabled)': {
-    '&:hover,&:focus-visible': {
-      color: theme.color.secondary,
-    },
-  },
-}));
-
-const Note = styled(TooltipNote)(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-}));
-
-export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
-  color: theme.textMutedColor,
-  margin: '0 3px',
-}));
-
-const StyledSeparator = styled(Separator)({
-  marginTop: 0,
-});
-
-const StyledLocation = styled(P)(({ theme }) => ({
-  color: theme.textMutedColor,
-  justifyContent: 'flex-end',
-  textAlign: 'right',
-  whiteSpace: 'nowrap',
-  marginTop: 'auto',
-  marginBottom: 1,
-  paddingRight: 15,
-  fontSize: 13,
-}));
-
-const Group = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const RewindButton = styled(StyledIconButton)({
-  marginLeft: 9,
-});
-
-const JumpToEndButton = styled(StyledButton)({
-  marginLeft: 9,
-  marginRight: 9,
-  marginBottom: 1,
-  lineHeight: '12px',
-});
-
-interface AnimatedButtonProps {
-  animating?: boolean;
-}
-
-const RerunButton = styled(StyledIconButton)<
-  AnimatedButtonProps & ComponentProps<typeof StyledIconButton>
->(({ theme, animating, disabled }) => ({
-  opacity: disabled ? 0.5 : 1,
-  svg: {
-    animation: animating && `${theme.animation.rotate360} 200ms ease-out`,
-  },
-}));
-
-export const Subnav: React.FC<SubnavProps> = ({
-  controls,
-  controlStates,
-  status,
-  storyFileName,
-  onScrollToEnd,
-}) => {
-  const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
-
-  return (
-    <SubnavWrapper>
-      <Bar>
-        <StyledSubnav>
-          <Group>
-            <StatusBadge status={status} />
-
-            <JumpToEndButton onClick={onScrollToEnd} disabled={!onScrollToEnd}>
-              {buttonText}
-            </JumpToEndButton>
-
-            <StyledSeparator />
-
-            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to start" />}>
-              <RewindButton
-                aria-label="Go to start"
-                onClick={controls.start}
-                disabled={!controlStates.start}
-              >
-                <RewindIcon />
-              </RewindButton>
-            </WithTooltip>
-
-            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go back" />}>
-              <StyledIconButton
-                aria-label="Go back"
-                onClick={controls.back}
-                disabled={!controlStates.back}
-              >
-                <PlayBackIcon />
-              </StyledIconButton>
-            </WithTooltip>
-
-            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go forward" />}>
-              <StyledIconButton
-                aria-label="Go forward"
-                onClick={controls.next}
-                disabled={!controlStates.next}
-              >
-                <PlayNextIcon />
-              </StyledIconButton>
-            </WithTooltip>
-
-            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to end" />}>
-              <StyledIconButton
-                aria-label="Go to end"
-                onClick={controls.end}
-                disabled={!controlStates.end}
-              >
-                <FastForwardIcon />
-              </StyledIconButton>
-            </WithTooltip>
-
-            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
-              <RerunButton aria-label="Rerun" onClick={controls.rerun}>
-                <SyncIcon />
-              </RerunButton>
-            </WithTooltip>
-          </Group>
-          {storyFileName && (
-            <Group>
-              <StyledLocation>{storyFileName}</StyledLocation>
-            </Group>
-          )}
-        </StyledSubnav>
-      </Bar>
-    </SubnavWrapper>
-  );
-};
diff --git a/code/addons/interactions/src/constants.ts b/code/addons/interactions/src/constants.ts
deleted file mode 100644
index 1b70ededc7c..00000000000
--- a/code/addons/interactions/src/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const ADDON_ID = 'storybook/interactions';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-
-export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
-export const DOCUMENTATION_LINK = 'writing-tests/interaction-testing';
diff --git a/code/addons/interactions/src/index.ts b/code/addons/interactions/src/index.ts
deleted file mode 100644
index f2b27d79c07..00000000000
--- a/code/addons/interactions/src/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { definePreview } from 'storybook/preview-api';
-
-import * as addonAnnotations from './preview';
-
-export default () => definePreview(addonAnnotations);
diff --git a/code/addons/interactions/src/manager.tsx b/code/addons/interactions/src/manager.tsx
deleted file mode 100644
index a4bad1dd12e..00000000000
--- a/code/addons/interactions/src/manager.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { AddonPanel, Badge, Spaced } from 'storybook/internal/components';
-
-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';
-
-function Title() {
-  const [addonState = {}] = useAddonState(ADDON_ID);
-  const { hasException, interactionsCount } = addonState as any;
-
-  return (
-    <div>
-      <Spaced col={1}>
-        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Interactions</span>
-        {interactionsCount && !hasException ? (
-          <Badge status="neutral">{interactionsCount}</Badge>
-        ) : null}
-        {hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
-      </Spaced>
-    </div>
-  );
-}
-
-addons.register(ADDON_ID, (api) => {
-  addons.add(PANEL_ID, {
-    type: types.PANEL,
-    title: Title,
-    match: ({ viewMode }) => viewMode === 'story',
-    render: ({ active }) => {
-      const newLocal = useCallback(({ state }: Combo) => {
-        return {
-          storyId: state.storyId,
-        };
-      }, []);
-
-      return (
-        <AddonPanel active={active}>
-          <Consumer filter={newLocal}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
-        </AddonPanel>
-      );
-    },
-  });
-});
diff --git a/code/addons/interactions/src/mocks/index.ts b/code/addons/interactions/src/mocks/index.ts
deleted file mode 100644
index 279dca22ce1..00000000000
--- a/code/addons/interactions/src/mocks/index.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { type Call, CallStates } from 'storybook/internal/instrumenter';
-
-export const getCalls = (finalStatus: CallStates) => {
-  const calls: Call[] = [
-    {
-      id: 'story--id [3] step',
-      storyId: 'story--id',
-      cursor: 1,
-      ancestors: [],
-      path: [],
-      method: 'step',
-      args: ['Click button', { __function__: { name: '' } }],
-      interceptable: true,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [3] step [1] within',
-      storyId: 'story--id',
-      cursor: 3,
-      ancestors: ['story--id [3] step'],
-      path: [],
-      method: 'within',
-      args: [{ __element__: { localName: 'div', id: 'root' } }],
-      interceptable: false,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [3] step [2] findByText',
-      storyId: 'story--id',
-      cursor: 4,
-      ancestors: ['story--id [3] step'],
-      path: [{ __callId__: 'story--id [3] step [1] within' }],
-      method: 'findByText',
-      args: ['Click'],
-      interceptable: true,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [3] step [3] click',
-      storyId: 'story--id',
-      cursor: 5,
-      ancestors: ['story--id [3] step'],
-      path: ['userEvent'],
-      method: 'click',
-      args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
-      interceptable: true,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [6] waitFor',
-      storyId: 'story--id',
-      cursor: 6,
-      ancestors: [],
-      path: [],
-      method: 'waitFor',
-      args: [{ __function__: { name: '' } }],
-      interceptable: true,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [6] waitFor [0] expect',
-      storyId: 'story--id',
-      cursor: 1,
-      ancestors: ['story--id [6] waitFor'],
-      path: [],
-      method: 'expect',
-      args: [{ __function__: { name: 'handleSubmit' } }],
-      interceptable: false,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [6] waitFor [1] stringMatching',
-      storyId: 'story--id',
-      cursor: 2,
-      ancestors: ['story--id [6] waitFor'],
-      path: ['expect'],
-      method: 'stringMatching',
-      args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
-      interceptable: false,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
-      storyId: 'story--id',
-      cursor: 3,
-      ancestors: ['story--id [6] waitFor'],
-      path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
-      method: 'toHaveBeenCalledWith',
-      args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
-      interceptable: true,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [7] expect',
-      storyId: 'story--id',
-      cursor: 7,
-      ancestors: [],
-      path: [],
-      method: 'expect',
-      args: [{ __function__: { name: 'handleReset' } }],
-      interceptable: false,
-      retain: false,
-      status: CallStates.DONE,
-    },
-    {
-      id: 'story--id [8] toHaveBeenCalled',
-      storyId: 'story--id',
-      cursor: 8,
-      ancestors: [],
-      path: [{ __callId__: 'story--id [7] expect' }, 'not'],
-      method: 'toHaveBeenCalled',
-      args: [],
-      interceptable: true,
-      retain: false,
-      status: finalStatus,
-    },
-  ];
-
-  if (finalStatus === CallStates.ERROR) {
-    calls[calls.length - 1].exception = {
-      name: 'Error',
-      stack: '',
-      message: 'Oops!',
-      callId: calls[calls.length - 1].id,
-    };
-  }
-
-  return calls;
-};
-
-export const getInteractions = (finalStatus: CallStates) =>
-  getCalls(finalStatus)
-    .filter((call) => call.interceptable)
-    .map((call) => ({
-      ...call,
-      childCallIds: [] as any[],
-      isCollapsed: false,
-      isHidden: false,
-      toggleCollapsed: () => {},
-    }));
diff --git a/code/addons/interactions/src/preset.ts b/code/addons/interactions/src/preset.ts
deleted file mode 100644
index 82649e3c6a4..00000000000
--- a/code/addons/interactions/src/preset.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// 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;
diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts
deleted file mode 100644
index 4111faf9928..00000000000
--- a/code/addons/interactions/src/preview.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { instrument } from 'storybook/internal/instrumenter';
-import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
-
-import type { InteractionsParameters } from './types';
-
-export const runStep = instrument(
-  {
-    // It seems like the label is unused, but the instrumenter has access to it
-    // The context will be bounded later in StoryRender, so that the user can write just:
-    // await step("label", (context) => {
-    //   // labeled step
-    // });
-    step: (label: StepLabel, play: PlayFunction, context: StoryContext) => play(context),
-  },
-  { intercept: true }
-  // perhaps csf types need to be updated? StepRunner expects Promise<void> and not Promise<void> | void
-).step as StepRunner;
-
-export const parameters: InteractionsParameters['test'] = {
-  throwPlayFunctionExceptions: false,
-};
diff --git a/code/addons/interactions/src/theme.ts b/code/addons/interactions/src/theme.ts
deleted file mode 100644
index 8e6a63c5ed6..00000000000
--- a/code/addons/interactions/src/theme.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/** Interaction Testing Theme PLACEHOLDER until SB is updated <3 */
-interface Colors {
-  pure?: {
-    gray?: any;
-  };
-}
-
-export const colors: Colors = {
-  pure: {
-    gray: {
-      500: '#CCCCCC',
-    },
-  },
-};
-
-export const theme = {
-  colors,
-};
-
-export default theme;
diff --git a/code/addons/interactions/src/types.ts b/code/addons/interactions/src/types.ts
deleted file mode 100644
index 9e21dc4e152..00000000000
--- a/code/addons/interactions/src/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface InteractionsParameters {
-  /**
-   * Interactions configuration
-   *
-   * @see https://storybook.js.org/docs/essentials/interactions
-   */
-  test: {
-    /** Ignore unhandled errors during test execution */
-    dangerouslyIgnoreUnhandledErrors?: boolean;
-
-    /** Whether to throw exceptions coming from the play function */
-    throwPlayFunctionExceptions?: boolean;
-  };
-}
diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts
deleted file mode 100644
index 7755ef782d5..00000000000
--- a/code/addons/interactions/src/utils.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import Filter from 'ansi-to-html';
-import { type StorybookTheme, useTheme } from 'storybook/theming';
-
-export function isTestAssertionError(error: unknown) {
-  return isChaiError(error) || isJestError(error);
-}
-
-export function isChaiError(error: unknown) {
-  return (
-    error &&
-    typeof error === 'object' &&
-    'name' in error &&
-    typeof error.name === 'string' &&
-    error.name === 'AssertionError'
-  );
-}
-
-export function isJestError(error: unknown) {
-  return (
-    error &&
-    typeof error === 'object' &&
-    'message' in error &&
-    typeof error.message === 'string' &&
-    error.message.startsWith('expect(')
-  );
-}
-
-export function createAnsiToHtmlFilter(theme: StorybookTheme) {
-  return new Filter({
-    fg: theme.color.defaultText,
-    bg: theme.background.content,
-    escapeXML: true,
-  });
-}
-
-export function useAnsiToHtmlFilter() {
-  const theme = useTheme();
-  return createAnsiToHtmlFilter(theme);
-}
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
deleted file mode 100644
index 881c34d8d19..00000000000
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-import {
-  expect,
-  fireEvent,
-  fn,
-  userEvent as testUserEvent,
-  waitFor,
-  waitForElementToBeRemoved,
-  within,
-} from 'storybook/test';
-
-export default {
-  component: globalThis.Components.Form,
-  args: {
-    onSuccess: fn(),
-  },
-  globals: {
-    sb_theme: 'light',
-  },
-};
-
-export const Validation = {
-  play: async (context) => {
-    const { args, canvasElement, step } = context;
-    const canvas = within(canvasElement);
-
-    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
-
-    await expect(args.onSuccess).not.toHaveBeenCalled();
-  },
-};
-
-export const Type = {
-  play: async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByTestId('value'), 'foobar');
-  },
-};
-
-export const Step = {
-  play: async ({ step }) => {
-    await step('Enter value', Type.play);
-  },
-};
-
-export const TypeAndClear = {
-  play: async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByTestId('value'), 'initial value');
-    await userEvent.clear(canvas.getByTestId('value'));
-    await userEvent.type(canvas.getByTestId('value'), 'final value');
-  },
-};
-
-export const Callback = {
-  play: async ({ args, canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step('Enter value', Type.play);
-
-    await step('Submit', async () => {
-      await fireEvent.click(canvas.getByRole('button'));
-    });
-
-    await expect(args.onSuccess).toHaveBeenCalled();
-  },
-};
-
-// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
-// an explicit test here
-export const SyncWaitFor = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step('Submit form', Callback.play);
-    await waitFor(() => canvas.getByText('Completed!!'));
-  },
-};
-
-export const AsyncWaitFor = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step('Submit form', Callback.play);
-    await waitFor(async () => canvas.getByText('Completed!!'));
-  },
-};
-
-export const WaitForElementToBeRemoved = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step('SyncWaitFor play fn', SyncWaitFor.play);
-    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
-      timeout: 2000,
-    });
-  },
-};
-
-export const WithLoaders = {
-  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
-  play: async ({ step }) => {
-    await step('Submit form', Callback.play);
-  },
-};
-
-const UserEventSetup = {
-  play: async (context) => {
-    const { args, canvasElement, step, userEvent } = context;
-    const canvas = within(canvasElement);
-    await step('Select and type on input using user-event v14 setup', async () => {
-      const input = canvas.getByRole('textbox');
-      await userEvent.click(input);
-      await userEvent.type(input, 'Typing ...');
-    });
-    await step('Tab and press enter on submit button', async () => {
-      // Vitest's userEvent does not support pointer events, so we use storybook's
-      await testUserEvent.pointer([
-        { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
-        { keys: '[/TouchA]' },
-      ]);
-      const submitButton = await canvas.findByRole('button');
-
-      if (navigator.userAgent.toLowerCase().includes('firefox')) {
-        // user event has a few issues on firefox, therefore we do it differently
-        await fireEvent.click(submitButton);
-      } else {
-        await userEvent.tab();
-        await userEvent.keyboard('{enter}');
-        await expect(submitButton).toHaveFocus();
-      }
-
-      await expect(args.onSuccess).toHaveBeenCalled();
-    });
-  },
-};
-
-export { UserEventSetup };
diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
deleted file mode 100644
index d5c396b7168..00000000000
--- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { global as globalThis } from '@storybook/global';
-
-import { userEvent, within } from 'storybook/test';
-
-export default {
-  component: globalThis.Components.Button,
-  args: {
-    label: 'Button',
-    // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error
-  },
-  argTypes: {
-    onClick: { type: 'function' },
-  },
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    chromatic: { disable: true },
-  },
-  tags: ['!test', '!vitest'],
-};
-
-export const Default = {
-  play: async (context) => {
-    const { args, canvasElement } = context;
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};
diff --git a/code/addons/interactions/tsconfig.json b/code/addons/interactions/tsconfig.json
deleted file mode 100644
index a7d41e8a79b..00000000000
--- a/code/addons/interactions/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "strict": false
-  },
-  "include": ["src/**/*"]
-}
diff --git a/code/addons/interactions/vitest.config.ts b/code/addons/interactions/vitest.config.ts
deleted file mode 100644
index 7420176b2e4..00000000000
--- a/code/addons/interactions/vitest.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config';
-
-import { vitestCommonConfig } from '../../vitest.workspace';
-
-export default mergeConfig(
-  vitestCommonConfig,
-  defineConfig({
-    // Add custom config here
-  })
-);
diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
index 485ddb352f1..4cb0b9b354a 100644
--- a/code/addons/test/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -34,7 +34,6 @@ import { getAddonNames } from './utils';
 const ADDON_NAME = '@storybook/addon-test' as const;
 const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.cts', '.mts', '.cjs', '.mjs'];
 
-const addonInteractionsName = '@storybook/addon-interactions';
 const addonA11yName = '@storybook/addon-a11y';
 
 const findFile = async (basename: string, extensions = EXTENSIONS) =>
@@ -210,38 +209,6 @@ export default async function postInstall(options: PostinstallOptions) {
     return;
   }
 
-  if (info.hasAddonInteractions) {
-    let shouldUninstall = options.yes;
-    if (!options.yes) {
-      printInfo(
-        '⚠️ Attention',
-        dedent`
-          We have detected that you're using ${addonInteractionsName}.
-          The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically.
-
-          More info: ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/test-addon')}
-        `
-      );
-
-      const response = isInteractive
-        ? await prompts({
-            type: 'confirm',
-            name: 'shouldUninstall',
-            message: `Would you like me to remove and unregister ${addonInteractionsName}? Press N to abort the entire installation.`,
-            initial: true,
-          })
-        : { shouldUninstall: true };
-
-      shouldUninstall = response.shouldUninstall;
-    }
-
-    if (shouldUninstall) {
-      await $({
-        stdio: 'inherit',
-      })`storybook remove ${addonInteractionsName} --package-manager ${options.packageManager} --config-dir ${options.configDir}`;
-    }
-  }
-
   if (info.frameworkPackageName === '@storybook/nextjs') {
     printInfo(
       '🍿 Just so you know...',
@@ -564,8 +531,6 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
     isCritical: true,
   });
 
-  const hasAddonInteractions = !!(await presets.apply('ADDON_INTERACTIONS_IN_USE', false));
-
   const core = await presets.apply('core', {});
 
   const { builder, renderer } = core;
@@ -593,7 +558,6 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
     frameworkPackageName,
     builderPackageName,
     rendererPackageName,
-    hasAddonInteractions,
     addons: getAddonNames(config),
   };
 }
diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts
index 1cc14ba2308..d384aad1afe 100644
--- a/code/addons/test/src/preset.ts
+++ b/code/addons/test/src/preset.ts
@@ -180,24 +180,3 @@ export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], op
     ...values,
   ];
 };
-
-export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [], options) => {
-  // Throw an error when addon-interactions is used.
-  // This is done by reading an annotation defined in addon-interactions, which although not ideal,
-  // is a way to handle addon conflict without having to worry about the order of which they are registered
-  const annotation = await options.presets.apply('ADDON_INTERACTIONS_IN_USE', false);
-  if (annotation) {
-    // eslint-disable-next-line local-rules/no-uncategorized-errors
-    const error = new Error(
-      dedent`
-        You have both "@storybook/addon-interactions" and "@storybook/addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/addon-test is a replacement for @storybook/addon-interactions.
-        Please remove "@storybook/addon-interactions" from the addons array in your main Storybook config at ${options.configDir} and remove the dependency from your package.json file.
-      `
-    );
-    error.name = 'AddonConflictError';
-    throw error;
-  }
-
-  // for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[])
-  return entry as never;
-};
diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md
index d6116b3c30f..07204f06414 100644
--- a/code/builders/builder-vite/README.md
+++ b/code/builders/builder-vite/README.md
@@ -50,7 +50,7 @@ npx storybook@latest init --builder vite && npm run storybook
 5. Remove Storybook Webpack cache (`rm -rf node_modules/.cache`)
 6. Update your `/public/index.html` file for Vite (be sure there are no `%PUBLIC_URL%` inside it, which is a CRA variable)
 7. Be sure that any files containing JSX syntax use a `.jsx` or `.tsx` file extension, which [Vite requires](https://vitejs.dev/guide/features.html#jsx). This includes `.storybook/preview.jsx` if it contains JSX syntax.
-8. If you are using `@storybook/addon-interactions`, for now you'll need to add a [workaround](https://github.com/storybookjs/storybook/issues/18399) for jest-mock relying on the node `global` variable by creating a `.storybook/preview-head.html` file containing the following:
+8. For now you'll need to add a [workaround](https://github.com/storybookjs/storybook/issues/18399) for jest-mock relying on the node `global` variable by creating a `.storybook/preview-head.html` file containing the following:
 
 ```html
 <script>
diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts
index 428dda72b22..ddb22c29078 100644
--- a/code/builders/builder-vite/src/optimizeDeps.ts
+++ b/code/builders/builder-vite/src/optimizeDeps.ts
@@ -26,7 +26,6 @@ const INCLUDE_CANDIDATES = [
   '@storybook/addon-essentials/outline/preview',
   '@storybook/addon-essentials/viewport/preview',
   '@storybook/addon-highlight/preview',
-  '@storybook/addon-interactions/preview',
   '@storybook/addon-links/preview',
   '@storybook/addon-measure/preview',
   '@storybook/addon-outline/preview',
diff --git a/code/core/src/common/js-package-manager/NPMProxy.test.ts b/code/core/src/common/js-package-manager/NPMProxy.test.ts
index d16447f3912..133c1a416e6 100644
--- a/code/core/src/common/js-package-manager/NPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/NPMProxy.test.ts
@@ -316,23 +316,6 @@ describe('NPM Proxy', () => {
             "unrelated-and-should-be-filtered": {
               "version": "1.0.0"
             },
-            "@storybook/addon-interactions": {
-              "version": "7.0.0-rc.7",
-              "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.0-rc.7.tgz",
-              "overridden": false,
-              "dependencies": {
-                "@storybook/package": {
-                  "version": "6.0.0",
-                  "resolved": "https://registry.npmjs.org/@storybook/package/-/core-7.0.0-rc.7.tgz",
-                  "overridden": false,
-                  "dependencies": {
-                    "@storybook/channels": {
-                      "version": "7.0.0-rc.7"
-                    }
-                  }
-                }
-              }
-            },
             "@storybook/package": {
               "version": "7.0.0-beta.11",
               "resolved": "https://registry.npmjs.org/@storybook/package/-/core-7.0.0-beta.11.tgz",
@@ -369,12 +352,6 @@ describe('NPM Proxy', () => {
         {
           "dedupeCommand": "npm dedupe",
           "dependencies": {
-            "@storybook/addon-interactions": [
-              {
-                "location": "",
-                "version": "7.0.0-rc.7",
-              },
-            ],
             "@storybook/channels": [
               {
                 "location": "",
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
index b1da505bd2d..5d0c3833a05 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -246,10 +246,10 @@ describe('PNPM Proxy', () => {
               }
             },
             "dependencies": {
-              "@storybook/addon-interactions": {
-                "from": "@storybook/addon-interactions",
+              "@storybook/addon-example": {
+                "from": "@storybook/addon-example",
                 "version": "7.0.0-beta.13",
-                "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.0.0-beta.13.tgz",
+                "resolved": "https://registry.npmjs.org/@storybook/addon-example/-/addon-example-7.0.0-beta.13.tgz",
                 "dependencies": {
                   "@storybook/package": {
                     "from": "@storybook/package",
@@ -314,7 +314,7 @@ describe('PNPM Proxy', () => {
         {
           "dedupeCommand": "pnpm dedupe",
           "dependencies": {
-            "@storybook/addon-interactions": [
+            "@storybook/addon-example": [
               {
                 "location": "",
                 "version": "7.0.0-beta.13",
diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.test.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.test.ts
index 1d2cf5e61a4..16cc2b8f259 100644
--- a/code/core/src/common/js-package-manager/Yarn1Proxy.test.ts
+++ b/code/core/src/common/js-package-manager/Yarn1Proxy.test.ts
@@ -210,7 +210,7 @@ describe('Yarn 1 Proxy', () => {
                 ]
               },
               {
-                "name": "@storybook/addon-interactions@7.0.0-beta.19",
+                "name": "@storybook/addon-example@7.0.0-beta.19",
                 "children": [
                   {
                     "name": "@storybook/package@7.0.0-beta.19",
@@ -229,7 +229,7 @@ describe('Yarn 1 Proxy', () => {
         {
           "dedupeCommand": "yarn dedupe",
           "dependencies": {
-            "@storybook/addon-interactions": [
+            "@storybook/addon-example": [
               {
                 "location": "",
                 "version": "7.0.0-beta.19",
diff --git a/code/core/src/common/presets.test.ts b/code/core/src/common/presets.test.ts
index 30b799ca2b9..d55ee58596f 100644
--- a/code/core/src/common/presets.test.ts
+++ b/code/core/src/common/presets.test.ts
@@ -38,7 +38,6 @@ vi.mock('./utils/safeResolve', () => {
     '@storybook/addon-docs',
     '@storybook/addon-cool',
     '@storybook/addon-docs/preset',
-    '@storybook/addon-interactions/preset',
     '@storybook/addon-essentials',
     '@storybook/addon-knobs/manager',
     '@storybook/addon-knobs/register',
@@ -446,10 +445,9 @@ describe('loadPreset', () => {
     mockPreset('@storybook/addon-docs/preset', {});
     mockPreset('addon-foo/register.js', {});
     mockPreset('@storybook/addon-cool', {});
-    mockPreset('@storybook/addon-interactions/preset', {});
     mockPreset('addon-bar', {
       addons: ['@storybook/addon-cool'],
-      presets: ['@storybook/addon-interactions/preset'],
+      presets: [],
     });
     mockPreset('addon-baz/register.js', {});
     mockPreset('@storybook/addon-notes/register-panel', {});
@@ -541,11 +539,6 @@ describe('loadPreset', () => {
           managerEntries: [normalize('addon-foo/register')],
         },
       },
-      {
-        name: '@storybook/addon-interactions/preset',
-        options: {},
-        preset: {},
-      },
       {
         name: '@storybook/addon-cool',
         options: {},
@@ -667,11 +660,6 @@ describe('loadPreset', () => {
           "options": {},
           "preset": {},
         },
-        {
-          "name": "@storybook/addon-interactions/preset",
-          "options": {},
-          "preset": {},
-        },
         {
           "name": "@storybook/addon-cool",
           "options": {},
diff --git a/code/core/src/common/utils/__tests__/check-addon-order.test.ts b/code/core/src/common/utils/__tests__/check-addon-order.test.ts
index ed603d4609c..c8183574d4b 100644
--- a/code/core/src/common/utils/__tests__/check-addon-order.test.ts
+++ b/code/core/src/common/utils/__tests__/check-addon-order.test.ts
@@ -47,22 +47,8 @@ afterEach(() => {
 describe.each([
   ['docs', 'controls', ['docs', 'controls']],
   ['docs', 'controls', ['docs', 'foo/node_modules/@storybook/addon-controls']],
-  [
-    'actions',
-    'interactions',
-    [
-      'foo\\node_modules\\@storybook\\addon-essentials',
-      'foo\\node_modules\\@storybook\\addon-interactions',
-    ],
-  ],
-  [
-    'actions',
-    'interactions',
-    [
-      'foo\\\\node_modules\\\\@storybook\\\\addon-essentials',
-      'foo\\\\node_modules\\\\@storybook\\\\addon-interactions',
-    ],
-  ],
+  ['actions', 'interactions', ['foo\\node_modules\\@storybook\\addon-essentials']],
+  ['actions', 'interactions', ['foo\\\\node_modules\\\\@storybook\\\\addon-essentials']],
   ['docs', 'controls', [{ name: '@storybook/addon-docs' }, 'controls']],
   ['docs', 'controls', ['essentials', 'controls']],
   ['docs', 'controls', ['essentials']],
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index dd27eede12a..b04bb433fd8 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -7,7 +7,6 @@ export default {
   '@storybook/addon-essentials': '9.0.0-alpha.8',
   '@storybook/addon-mdx-gfm': '9.0.0-alpha.8',
   '@storybook/addon-highlight': '9.0.0-alpha.8',
-  '@storybook/addon-interactions': '9.0.0-alpha.8',
   '@storybook/addon-jest': '9.0.0-alpha.8',
   '@storybook/addon-links': '9.0.0-alpha.8',
   '@storybook/addon-measure': '9.0.0-alpha.8',
diff --git a/code/core/src/core-server/__for-testing__/main.ts b/code/core/src/core-server/__for-testing__/main.ts
index 586e9102512..e6eaf2f3bcd 100644
--- a/code/core/src/core-server/__for-testing__/main.ts
+++ b/code/core/src/core-server/__for-testing__/main.ts
@@ -18,7 +18,6 @@ const config: StorybookConfig = {
       },
     },
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-jest',
     '@storybook/addon-a11y',
diff --git a/code/core/src/instrumenter/instrumenter.ts b/code/core/src/instrumenter/instrumenter.ts
index df4333d2c3f..4a2e9cdb091 100644
--- a/code/core/src/instrumenter/instrumenter.ts
+++ b/code/core/src/instrumenter/instrumenter.ts
@@ -458,7 +458,7 @@ export class Instrumenter {
 
     // TODO This function should not needed anymore, as the channel already serializes values with telejson
     // Possibly we need to add HTMLElement support to telejson though
-    // Keeping this function here, as removing it means we need to refactor the deserializing that happens in addon-interactions
+    // Keeping this function here, as removing it means we need to refactor the deserializing that happens in core interactions
     const maximumDepth = 25; // mimicks the max depth of telejson
     const serializeValues = (value: any, depth: number, seen: unknown[]): any => {
       if (seen.includes(value)) {
diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx
index b56a78805c0..bcc3d953b78 100644
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@@ -1,4 +1,3 @@
-// @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index debb350ad4c..20a6ad373f1 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -1,4 +1,3 @@
-// @TODO: use addon-interactions and remove the rule disable above
 import React, { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react-vite';
diff --git a/code/core/src/preview-api/modules/store/csf/stepRunners.ts b/code/core/src/preview-api/modules/store/csf/stepRunners.ts
index 5f34b884874..a4f306df806 100644
--- a/code/core/src/preview-api/modules/store/csf/stepRunners.ts
+++ b/code/core/src/preview-api/modules/store/csf/stepRunners.ts
@@ -11,8 +11,8 @@ import type { Renderer, StepRunner } from 'storybook/internal/types';
  * step('label', () => {});
  * ```
  *
- * ...and runs it. The prototypical example is from `@storybook/addon-interactions` where the step
- * runner will decorate all instrumented code inside the step with information about the label.
+ * ...and runs it. The prototypical example is from `core/interactions` where the step runner will
+ * decorate all instrumented code inside the step with information about the label.
  *
  * In theory it is possible to have more than one addon that wants to run steps; they can be
  * composed together in a similar fashion to decorators. In some ways step runners are like
diff --git a/code/core/src/test/README.md b/code/core/src/test/README.md
index a823cad323c..b6e095981b6 100644
--- a/code/core/src/test/README.md
+++ b/code/core/src/test/README.md
@@ -5,7 +5,7 @@ The `storybook/test` package contains utilities for testing your stories inside
 ## Usage
 
 The test package exports instrumented versions of [@vitest/spy](https://vitest.dev/api/mock.html), [@vitest/expect](https://vitest.dev/api/expect.html) (based on [chai](https://www.chaijs.com/)), [@testing-library/dom](https://testing-library.com/docs/dom-testing-library/intro) and [@testing-library/user-event](https://testing-library.com/docs/user-event/intro).
-The instrumentation makes sure you can debug those methods in the [addon-interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
+The instrumentation makes sure you can debug those methods in the [interactions](https://storybook.js.org/addons/@storybook/addon-interactions) panel.
 
 ```ts
 // Button.stories.ts
diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts
index b1cb9ea9884..58316176823 100644
--- a/code/e2e-tests/addon-interactions.spec.ts
+++ b/code/e2e-tests/addon-interactions.spec.ts
@@ -6,12 +6,7 @@ import { SbPage, hasVitestIntegration } from './util';
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
-test.describe('addon-interactions', () => {
-  test.skip(
-    hasVitestIntegration,
-    `Skipping ${templateName}, which does not have addon-interactions set up.`
-  );
-
+test.describe('interactions', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page, expect).waitUntilLoaded();
@@ -21,7 +16,7 @@ test.describe('addon-interactions', () => {
     // templateName is e.g. 'vue-cli/default-js'
     test.skip(
       /^(lit)/i.test(`${templateName}`),
-      `Skipping ${templateName}, which does not support addon-interactions`
+      `Skipping ${templateName}, which does not support interactions`
     );
     test.skip(
       templateName.includes('react-native-web'),
@@ -53,7 +48,7 @@ test.describe('addon-interactions', () => {
     // templateName is e.g. 'vue-cli/default-js'
     test.skip(
       /^(lit)/i.test(`${templateName}`),
-      `Skipping ${templateName}, which does not support addon-interactions`
+      `Skipping ${templateName}, which does not support interactions`
     );
     test.skip(
       browserName === 'firefox',
@@ -131,7 +126,7 @@ test.describe('addon-interactions', () => {
   test('should show unhandled errors', async ({ page }) => {
     test.skip(
       /^(lit)/i.test(`${templateName}`),
-      `Skipping ${templateName}, which does not support addon-interactions`
+      `Skipping ${templateName}, which does not support interactions`
     );
     // We trigger the implicit action error here, but angular works a bit different with implicit actions.
     test.skip(/^(angular)/i.test(`${templateName}`));
diff --git a/code/e2e-tests/addon-test.spec.ts b/code/e2e-tests/addon-test.spec.ts
index cca2f088eb9..4f581ef07f1 100644
--- a/code/e2e-tests/addon-test.spec.ts
+++ b/code/e2e-tests/addon-test.spec.ts
@@ -7,11 +7,6 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-test', () => {
-  test.skip(
-    !hasVitestIntegration,
-    `Skipping ${templateName}, which does not have addon-test set up.`
-  );
-
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page, expect).waitUntilLoaded();
diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index 31a18c87523..d0b4864c2d4 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -78,10 +78,10 @@ type CLIOptions = {
  *
  * ```sh
  * sb add "@storybook/addon-docs"
- * sb add "@storybook/addon-interactions@7.0.1"
+ * sb add "@storybook/addon-test@9.0.1"
  * ```
  *
- * If there is no version specifier and it's a storybook addon, it will try to use the version
+ * If there is no version specifier and it's a Storybook addon, it will try to use the version
  * specifier matching your current Storybook install version.
  */
 export async function add(
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js
index e22c255ac49..e736d9d23c3 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js
+++ b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-with-wrappers.js
@@ -4,11 +4,7 @@ const wrapForPnp = (packageName) => dirname(require.resolve(join(packageName, 'p
 
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    wrapForPnp('@storybook/addon-links'),
-    wrapForPnp('@storybook/addon-essentials'),
-    wrapForPnp('@storybook/addon-interactions'),
-  ],
+  addons: [wrapForPnp('@storybook/addon-links'), wrapForPnp('@storybook/addon-essentials')],
   framework: {
     name: wrapForPnp('@storybook/angular'),
     options: {},
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
index e88bf724399..c17c11259a4 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
+++ b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
@@ -1,6 +1,6 @@
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-test'],
   framework: {
     name: '@storybook/angular',
     options: {},
diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
index 274e3171985..762e1f724d4 100644
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -301,11 +301,6 @@ export async function baseGenerator(
     ...extraAddonsToInstall,
   ].filter(Boolean);
 
-  if (hasInteractiveStories(rendererId) && !features.includes('test')) {
-    addons.push('@storybook/addon-interactions');
-    addonPackages.push('@storybook/addon-interactions');
-  }
-
   const packageJson = await packageManager.retrievePackageJson();
   const installedDependencies = new Set(
     Object.keys({ ...packageJson.dependencies, ...packageJson.devDependencies })
diff --git a/code/lib/create-storybook/src/generators/configure.test.ts b/code/lib/create-storybook/src/generators/configure.test.ts
index 8fbf7dc6024..c0a8f235f10 100644
--- a/code/lib/create-storybook/src/generators/configure.test.ts
+++ b/code/lib/create-storybook/src/generators/configure.test.ts
@@ -90,7 +90,6 @@ describe('configureMain', () => {
       addons: [
         "%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
         "%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
-        "%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
       ],
       storybookConfigFolder: '.storybook',
       framework: {
@@ -115,7 +114,6 @@ describe('configureMain', () => {
         "addons": [
           path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
-          path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))
         ],
         "framework": {
           "name": path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))
diff --git a/code/package.json b/code/package.json
index 53a0027b8d2..8dc21bca131 100644
--- a/code/package.json
+++ b/code/package.json
@@ -108,7 +108,6 @@
     "@storybook/addon-docs": "workspace:*",
     "@storybook/addon-essentials": "workspace:*",
     "@storybook/addon-highlight": "workspace:*",
-    "@storybook/addon-interactions": "workspace:*",
     "@storybook/addon-jest": "workspace:*",
     "@storybook/addon-links": "workspace:*",
     "@storybook/addon-mdx-gfm": "workspace:*",
diff --git a/code/sandbox/angular-cli-15-ts/project.json b/code/sandbox/angular-cli-15-ts/project.json
index d6b1a555227..5b7a37f9bf1 100644
--- a/code/sandbox/angular-cli-15-ts/project.json
+++ b/code/sandbox/angular-cli-15-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/angular-cli-default-ts/project.json b/code/sandbox/angular-cli-default-ts/project.json
index 7632b5c4893..b3a0a5667f7 100644
--- a/code/sandbox/angular-cli-default-ts/project.json
+++ b/code/sandbox/angular-cli-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/angular-cli-prerelease/project.json b/code/sandbox/angular-cli-prerelease/project.json
index 1587a5387ea..5e825b5f93a 100644
--- a/code/sandbox/angular-cli-prerelease/project.json
+++ b/code/sandbox/angular-cli-prerelease/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/bench-react-vite-default-ts-nodocs/project.json b/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
index 021350213dd..c4f92bde25e 100644
--- a/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
+++ b/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/bench-react-vite-default-ts-test-build/project.json b/code/sandbox/bench-react-vite-default-ts-test-build/project.json
index 75fde83971b..f4f1b6163a0 100644
--- a/code/sandbox/bench-react-vite-default-ts-test-build/project.json
+++ b/code/sandbox/bench-react-vite-default-ts-test-build/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/bench-react-vite-default-ts/project.json b/code/sandbox/bench-react-vite-default-ts/project.json
index c88a13c77ce..47eb27de9f2 100644
--- a/code/sandbox/bench-react-vite-default-ts/project.json
+++ b/code/sandbox/bench-react-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/bench-react-webpack-18-ts-test-build/project.json b/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
index a7b95c43449..8a863cec091 100644
--- a/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
+++ b/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/bench-react-webpack-18-ts/project.json b/code/sandbox/bench-react-webpack-18-ts/project.json
index 1296b417b39..802924fb922 100644
--- a/code/sandbox/bench-react-webpack-18-ts/project.json
+++ b/code/sandbox/bench-react-webpack-18-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/cra-default-js/project.json b/code/sandbox/cra-default-js/project.json
index d2e69c94e5f..8098f836a2d 100644
--- a/code/sandbox/cra-default-js/project.json
+++ b/code/sandbox/cra-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/cra-default-ts/project.json b/code/sandbox/cra-default-ts/project.json
index 9c41f11d0c0..e6eb5ffeaac 100644
--- a/code/sandbox/cra-default-ts/project.json
+++ b/code/sandbox/cra-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/ember-3-js/project.json b/code/sandbox/ember-3-js/project.json
index 1466ac8f83a..5b4fa823d87 100644
--- a/code/sandbox/ember-3-js/project.json
+++ b/code/sandbox/ember-3-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/ember-default-js/project.json b/code/sandbox/ember-default-js/project.json
index b70af44d8e8..3bbc7d09428 100644
--- a/code/sandbox/ember-default-js/project.json
+++ b/code/sandbox/ember-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/experimental-nextjs-vite-default-ts/project.json b/code/sandbox/experimental-nextjs-vite-default-ts/project.json
index 19f7c07453a..c9609e4ffa3 100644
--- a/code/sandbox/experimental-nextjs-vite-default-ts/project.json
+++ b/code/sandbox/experimental-nextjs-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/html-vite-default-js/project.json b/code/sandbox/html-vite-default-js/project.json
index 0e3cc85808a..8d231035f84 100644
--- a/code/sandbox/html-vite-default-js/project.json
+++ b/code/sandbox/html-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/html-vite-default-ts/project.json b/code/sandbox/html-vite-default-ts/project.json
index 65f1231c5c1..bb1686be3ae 100644
--- a/code/sandbox/html-vite-default-ts/project.json
+++ b/code/sandbox/html-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/html-webpack-default/project.json b/code/sandbox/html-webpack-default/project.json
index deba1210795..614ac1e05a7 100644
--- a/code/sandbox/html-webpack-default/project.json
+++ b/code/sandbox/html-webpack-default/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/internal-react16-webpack/project.json b/code/sandbox/internal-react16-webpack/project.json
index 09157d3a842..41aac56de49 100644
--- a/code/sandbox/internal-react16-webpack/project.json
+++ b/code/sandbox/internal-react16-webpack/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/internal-react18-webpack-babel/project.json b/code/sandbox/internal-react18-webpack-babel/project.json
index 9ddf15267bb..7abcd70e64a 100644
--- a/code/sandbox/internal-react18-webpack-babel/project.json
+++ b/code/sandbox/internal-react18-webpack-babel/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/internal-server-webpack5/project.json b/code/sandbox/internal-server-webpack5/project.json
index 5d143b47fca..5c30e243724 100644
--- a/code/sandbox/internal-server-webpack5/project.json
+++ b/code/sandbox/internal-server-webpack5/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/lit-vite-default-js/project.json b/code/sandbox/lit-vite-default-js/project.json
index 07ce7905641..0aa6e605da3 100644
--- a/code/sandbox/lit-vite-default-js/project.json
+++ b/code/sandbox/lit-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/lit-vite-default-ts/project.json b/code/sandbox/lit-vite-default-ts/project.json
index 375a9b862c4..f97e6f24fad 100644
--- a/code/sandbox/lit-vite-default-ts/project.json
+++ b/code/sandbox/lit-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/nextjs-default-js/project.json b/code/sandbox/nextjs-default-js/project.json
index c2074e7978e..2cd48dfd779 100644
--- a/code/sandbox/nextjs-default-js/project.json
+++ b/code/sandbox/nextjs-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/nextjs-default-ts/project.json b/code/sandbox/nextjs-default-ts/project.json
index d25343ef247..2c9d7b9e3c7 100644
--- a/code/sandbox/nextjs-default-ts/project.json
+++ b/code/sandbox/nextjs-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/nextjs-prerelease/project.json b/code/sandbox/nextjs-prerelease/project.json
index 5c7843a566e..fad859bae65 100644
--- a/code/sandbox/nextjs-prerelease/project.json
+++ b/code/sandbox/nextjs-prerelease/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/nuxt-vite-default-ts/project.json b/code/sandbox/nuxt-vite-default-ts/project.json
index 9bdc5c68252..293d742733c 100644
--- a/code/sandbox/nuxt-vite-default-ts/project.json
+++ b/code/sandbox/nuxt-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/preact-vite-default-js/project.json b/code/sandbox/preact-vite-default-js/project.json
index 16966e6079a..7fca41a5423 100644
--- a/code/sandbox/preact-vite-default-js/project.json
+++ b/code/sandbox/preact-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/preact-vite-default-ts/project.json b/code/sandbox/preact-vite-default-ts/project.json
index e756d1ef647..7db25642049 100644
--- a/code/sandbox/preact-vite-default-ts/project.json
+++ b/code/sandbox/preact-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/qwik-vite-default-ts/project.json b/code/sandbox/qwik-vite-default-ts/project.json
index 0eb305e7700..97e1c7b1902 100644
--- a/code/sandbox/qwik-vite-default-ts/project.json
+++ b/code/sandbox/qwik-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks"
diff --git a/code/sandbox/react-vite-default-js/project.json b/code/sandbox/react-vite-default-js/project.json
index 6b56944f01b..61bf55457f4 100644
--- a/code/sandbox/react-vite-default-js/project.json
+++ b/code/sandbox/react-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/react-vite-default-ts/project.json b/code/sandbox/react-vite-default-ts/project.json
index 21fb8257660..e14f3943528 100644
--- a/code/sandbox/react-vite-default-ts/project.json
+++ b/code/sandbox/react-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/react-webpack-17-ts/project.json b/code/sandbox/react-webpack-17-ts/project.json
index a7ffafd8aec..f5a47985fa7 100644
--- a/code/sandbox/react-webpack-17-ts/project.json
+++ b/code/sandbox/react-webpack-17-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/react-webpack-18-ts/project.json b/code/sandbox/react-webpack-18-ts/project.json
index a48dbef996f..1de2e861614 100644
--- a/code/sandbox/react-webpack-18-ts/project.json
+++ b/code/sandbox/react-webpack-18-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/solid-vite-default-js/project.json b/code/sandbox/solid-vite-default-js/project.json
index baffb8151c7..6460797798e 100644
--- a/code/sandbox/solid-vite-default-js/project.json
+++ b/code/sandbox/solid-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks"
diff --git a/code/sandbox/solid-vite-default-ts/project.json b/code/sandbox/solid-vite-default-ts/project.json
index d02e98c312a..e2f52a5f2c4 100644
--- a/code/sandbox/solid-vite-default-ts/project.json
+++ b/code/sandbox/solid-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks"
diff --git a/code/sandbox/svelte-kit-prerelease-ts/project.json b/code/sandbox/svelte-kit-prerelease-ts/project.json
index 9da6435e357..46dfba11277 100644
--- a/code/sandbox/svelte-kit-prerelease-ts/project.json
+++ b/code/sandbox/svelte-kit-prerelease-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/svelte-kit-skeleton-js/project.json b/code/sandbox/svelte-kit-skeleton-js/project.json
index a4d29a60624..c4f4e09efa3 100644
--- a/code/sandbox/svelte-kit-skeleton-js/project.json
+++ b/code/sandbox/svelte-kit-skeleton-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/svelte-kit-skeleton-ts/project.json b/code/sandbox/svelte-kit-skeleton-ts/project.json
index c766fe45907..2324771316d 100644
--- a/code/sandbox/svelte-kit-skeleton-ts/project.json
+++ b/code/sandbox/svelte-kit-skeleton-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/svelte-vite-default-js/project.json b/code/sandbox/svelte-vite-default-js/project.json
index 454bfbef47b..e80f90171c3 100644
--- a/code/sandbox/svelte-vite-default-js/project.json
+++ b/code/sandbox/svelte-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/svelte-vite-default-ts/project.json b/code/sandbox/svelte-vite-default-ts/project.json
index 0645439bd24..fbc5b09b827 100644
--- a/code/sandbox/svelte-vite-default-ts/project.json
+++ b/code/sandbox/svelte-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/vue-cli-default-js/project.json b/code/sandbox/vue-cli-default-js/project.json
index c06a3b9ac87..a83cd9dd57b 100644
--- a/code/sandbox/vue-cli-default-js/project.json
+++ b/code/sandbox/vue-cli-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/vue3-vite-default-js/project.json b/code/sandbox/vue3-vite-default-js/project.json
index a3c6541a2b8..7506161d849 100644
--- a/code/sandbox/vue3-vite-default-js/project.json
+++ b/code/sandbox/vue3-vite-default-js/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/sandbox/vue3-vite-default-ts/project.json b/code/sandbox/vue3-vite-default-ts/project.json
index 78c8fda72e9..299b405440b 100644
--- a/code/sandbox/vue3-vite-default-ts/project.json
+++ b/code/sandbox/vue3-vite-default-ts/project.json
@@ -5,7 +5,6 @@
   "implicitDependencies": [
     "core",
     "addon-essentials",
-    "addon-interactions",
     "addon-links",
     "addon-onboarding",
     "blocks",
diff --git a/code/yarn.lock b/code/yarn.lock
index 6422bceb4bd..087396409b0 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6173,26 +6173,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-interactions@workspace:*, @storybook/addon-interactions@workspace:addons/interactions":
-  version: 0.0.0-use.local
-  resolution: "@storybook/addon-interactions@workspace:addons/interactions"
-  dependencies:
-    "@devtools-ds/object-inspector": "npm:^1.1.2"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.4.0"
-    "@types/node": "npm:^22.0.0"
-    ansi-to-html: "npm:^0.7.2"
-    formik: "npm:^2.2.9"
-    polished: "npm:^4.2.2"
-    react: "npm:^18.2.0"
-    react-dom: "npm:^18.2.0"
-    ts-dedent: "npm:^2.2.0"
-    typescript: "npm:^5.7.3"
-  peerDependencies:
-    storybook: "workspace:^"
-  languageName: unknown
-  linkType: soft
-
 "@storybook/addon-jest@workspace:*, @storybook/addon-jest@workspace:addons/jest":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-jest@workspace:addons/jest"
@@ -7236,7 +7216,6 @@ __metadata:
     "@storybook/addon-docs": "workspace:*"
     "@storybook/addon-essentials": "workspace:*"
     "@storybook/addon-highlight": "workspace:*"
-    "@storybook/addon-interactions": "workspace:*"
     "@storybook/addon-jest": "workspace:*"
     "@storybook/addon-links": "workspace:*"
     "@storybook/addon-mdx-gfm": "workspace:*"
diff --git a/test-storybooks/ember-cli/package.json b/test-storybooks/ember-cli/package.json
index 57f245a3caa..dafc2afc136 100644
--- a/test-storybooks/ember-cli/package.json
+++ b/test-storybooks/ember-cli/package.json
@@ -17,7 +17,6 @@
     "@storybook/addon-docs": "file:../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../code/addons/jest",
     "@storybook/addon-links": "file:../../code/addons/links",
     "@storybook/addon-measure": "file:../../code/addons/measure",
diff --git a/test-storybooks/external-docs/package.json b/test-storybooks/external-docs/package.json
index 241c407ed36..e90bca62a4b 100644
--- a/test-storybooks/external-docs/package.json
+++ b/test-storybooks/external-docs/package.json
@@ -17,7 +17,6 @@
     "@storybook/addon-docs": "file:../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../code/addons/jest",
     "@storybook/addon-links": "file:../../code/addons/links",
     "@storybook/addon-measure": "file:../../code/addons/measure",
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook/main.ts
index 3f30e3ad48e..e3abeeff3a3 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook/main.ts
@@ -4,7 +4,6 @@ const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
   ],
   framework: {
     name: "@storybook/nextjs",
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.setup.ts b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.setup.ts
index 96471504b45..5f007c00344 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.setup.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.setup.ts
@@ -1,8 +1,5 @@
 import '@testing-library/jest-dom';
-import type { ProjectAnnotations } from 'storybook/internal/types';
-import { ReactRenderer } from '@storybook/react';
 import { setProjectAnnotations } from '@storybook/nextjs';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 /**
  * For some weird reason, Jest in Nextjs throws the following error:
@@ -14,5 +11,4 @@ const sbAnnotations = require('./.storybook/preview');
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
index 5504a7c6d0c..60921f51f71 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
@@ -20,7 +20,6 @@
     "@storybook/addon-docs": "file:../../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../../code/addons/jest",
     "@storybook/addon-links": "file:../../../code/addons/links",
     "@storybook/addon-measure": "file:../../../code/addons/measure",
@@ -79,7 +78,6 @@
     "@happy-dom/jest-environment": "^15.11.7",
     "@jest/globals": "^29.7.0",
     "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
     "@storybook/nextjs": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@testing-library/jest-dom": "^6.6.3",
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/cypress/support/component.ts b/test-storybooks/portable-stories-kitchen-sink/react/cypress/support/component.ts
index 14c40a0eef0..d369d6d0d9d 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/cypress/support/component.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/cypress/support/component.ts
@@ -22,7 +22,6 @@ import { mount } from 'cypress/react18'
 import type { ProjectAnnotations } from 'storybook/internal/types';
 import { ReactRenderer, setProjectAnnotations } from '@storybook/react';
 import sbAnnotations from '../../.storybook/preview';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -46,5 +45,4 @@ Cypress.Commands.add('mount', mount)
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/jest.setup.ts b/test-storybooks/portable-stories-kitchen-sink/react/jest.setup.ts
index 75fd708bbb5..24ee2b499c9 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/jest.setup.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/jest.setup.ts
@@ -1,10 +1,7 @@
 import '@testing-library/jest-dom';
-import type { ProjectAnnotations } from 'storybook/internal/types';
-import { ReactRenderer, setProjectAnnotations } from '@storybook/react';
+import { setProjectAnnotations } from '@storybook/react';
 import sbAnnotations from './.storybook/preview';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json
index 88d6790fc68..8ba8a8cffe7 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json
@@ -23,7 +23,6 @@
     "@storybook/addon-docs": "file:../../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../../code/addons/jest",
     "@storybook/addon-links": "file:../../../code/addons/links",
     "@storybook/addon-measure": "file:../../../code/addons/measure",
@@ -85,7 +84,6 @@
     "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-controls": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-test": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@storybook/react-vite": "^8.0.0",
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/playwright/index.ts b/test-storybooks/portable-stories-kitchen-sink/react/playwright/index.ts
index 956507a868f..ebcb20079f5 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/playwright/index.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/playwright/index.ts
@@ -1,9 +1,4 @@
-import type { ProjectAnnotations } from 'storybook/internal/types';
-import { ReactRenderer, setProjectAnnotations } from '@storybook/react';
+import { setProjectAnnotations } from '@storybook/react';
 import sbAnnotations from '../.storybook/preview';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
-setProjectAnnotations([
-  sbAnnotations,
-  addonInteractions as ProjectAnnotations<ReactRenderer>, // instruments actions as spies
-]);
+setProjectAnnotations([ sbAnnotations ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/.storybook/main.ts
index f95a2fafd19..f80c3b656ba 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/.storybook/main.ts
@@ -4,7 +4,6 @@ const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
   ],
   framework: {
     name: '@storybook/svelte-vite',
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/cypress/support/component.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/cypress/support/component.ts
index 0c944955912..487211bf402 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/cypress/support/component.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/cypress/support/component.ts
@@ -25,7 +25,6 @@ import type { ProjectAnnotations } from 'storybook/internal/types';
 import type { SvelteRenderer } from '@storybook/svelte';
 import { setProjectAnnotations } from '@storybook/svelte';
 import sbAnnotations from '../../.storybook/preview';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -52,5 +51,4 @@ process.env = {};
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<SvelteRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
index 74fd86ecbec..8b838119697 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
@@ -21,7 +21,6 @@
     "@storybook/addon-docs": "portal:../../../code/addons/docs",
     "@storybook/addon-essentials": "portal:../../../code/addons/essentials",
     "@storybook/addon-highlight": "portal:../../../code/addons/highlight",
-    "@storybook/addon-interactions": "portal:../../../code/addons/interactions",
     "@storybook/addon-jest": "portal:../../../code/addons/jest",
     "@storybook/addon-links": "portal:../../../code/addons/links",
     "@storybook/addon-measure": "portal:../../../code/addons/measure",
@@ -75,7 +74,6 @@
   "devDependencies": {
     "@playwright/experimental-ct-svelte": "1.48.1",
     "@storybook/addon-essentials": "8.0.0-rc.2",
-    "@storybook/addon-interactions": "8.0.0-rc.2",
     "@storybook/svelte": "8.0.0-rc.2",
     "@storybook/svelte-vite": "8.0.0-rc.2",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/playwright/index.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/playwright/index.ts
index 04d410848f7..50dbc12fb06 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/playwright/index.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/playwright/index.ts
@@ -1,9 +1,6 @@
-import { SvelteRenderer, setProjectAnnotations } from '@storybook/svelte'
-import type { ProjectAnnotations } from 'storybook/internal/types';
+import { setProjectAnnotations } from '@storybook/svelte'
 import sbAnnotations from '../.storybook/preview'
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<SvelteRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/vue3/.storybook/main.ts
index bb1f4ef43e8..50290de8e75 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/.storybook/main.ts
@@ -4,7 +4,6 @@ const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
   ],
   framework: {
     name: "@storybook/vue3-vite",
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/cypress/support/component.ts b/test-storybooks/portable-stories-kitchen-sink/vue3/cypress/support/component.ts
index 69aed5ec2bd..5a20af7e363 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/cypress/support/component.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/cypress/support/component.ts
@@ -22,7 +22,6 @@ import { mount } from 'cypress/vue'
 import type { ProjectAnnotations } from 'storybook/internal/types';
 import { VueRenderer, setProjectAnnotations } from '@storybook/vue3';
 import sbAnnotations from '../../.storybook/preview';
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 
 // Augment the Cypress namespace to include type definitions for
@@ -47,5 +46,4 @@ process.env = {};
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<VueRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
index 11f74cc8ea2..de8e038020c 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
@@ -22,7 +22,6 @@
     "@storybook/addon-docs": "file:../../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../../code/addons/jest",
     "@storybook/addon-links": "file:../../../code/addons/links",
     "@storybook/addon-measure": "file:../../../code/addons/measure",
@@ -79,7 +78,6 @@
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.48.1",
     "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
     "@storybook/vue3": "^8.0.0",
     "@storybook/vue3-vite": "^8.0.0",
     "@testing-library/jest-dom": "^6.6.3",
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/playwright/index.ts b/test-storybooks/portable-stories-kitchen-sink/vue3/playwright/index.ts
index 57aefae0593..379cc9ea381 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/playwright/index.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/playwright/index.ts
@@ -1,9 +1,6 @@
-import { VueRenderer, setProjectAnnotations } from '@storybook/vue3'
-import type { ProjectAnnotations } from 'storybook/internal/types';
+import { setProjectAnnotations } from '@storybook/vue3'
 import sbAnnotations from '../.storybook/preview'
-import * as addonInteractions from '@storybook/addon-interactions/preview';
 
 setProjectAnnotations([
   sbAnnotations,
-  addonInteractions as ProjectAnnotations<VueRenderer>, // instruments actions as spies
 ]);
diff --git a/test-storybooks/server-kitchen-sink/package.json b/test-storybooks/server-kitchen-sink/package.json
index 9bf43549e3a..acaf1fef978 100644
--- a/test-storybooks/server-kitchen-sink/package.json
+++ b/test-storybooks/server-kitchen-sink/package.json
@@ -20,7 +20,6 @@
     "@storybook/addon-docs": "file:../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../code/addons/jest",
     "@storybook/addon-links": "file:../../code/addons/links",
     "@storybook/addon-measure": "file:../../code/addons/measure",
diff --git a/test-storybooks/standalone-preview/package.json b/test-storybooks/standalone-preview/package.json
index 4e584ba9d39..81e88e6e051 100644
--- a/test-storybooks/standalone-preview/package.json
+++ b/test-storybooks/standalone-preview/package.json
@@ -13,7 +13,6 @@
     "@storybook/addon-docs": "file:../../code/addons/docs",
     "@storybook/addon-essentials": "file:../../code/addons/essentials",
     "@storybook/addon-highlight": "file:../../code/addons/highlight",
-    "@storybook/addon-interactions": "file:../../code/addons/interactions",
     "@storybook/addon-jest": "file:../../code/addons/jest",
     "@storybook/addon-links": "file:../../code/addons/links",
     "@storybook/addon-measure": "file:../../code/addons/measure",