diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 2ba5ed1f7826..b7e7ad90da52 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -88,8 +88,8 @@
   },
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
-    "@storybook/jest": "future",
-    "@storybook/testing-library": "future",
+    "@storybook/jest": "next",
+    "@storybook/testing-library": "next",
     "@types/node": "^16.0.0",
     "formik": "^2.2.9",
     "typescript": "~4.9.3"
diff --git a/code/addons/interactions/src/components/MethodCall.tsx b/code/addons/interactions/src/components/MethodCall.tsx
index 7bb2f6503916..bbf2d6e3018b 100644
--- a/code/addons/interactions/src/components/MethodCall.tsx
+++ b/code/addons/interactions/src/components/MethodCall.tsx
@@ -141,7 +141,14 @@ export const Node = ({
     /* eslint-enable no-underscore-dangle */
 
     case Object.prototype.toString.call(value) === '[object Object]':
-      return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
+      return (
+        <ObjectNode
+          value={value}
+          showInspector={showObjectInspector}
+          callsById={callsById}
+          {...props}
+        />
+      );
     default:
       return <OtherNode value={value} {...props} />;
   }
@@ -222,11 +229,13 @@ export const ArrayNode = ({
 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();
@@ -253,7 +262,7 @@ export const ObjectNode = ({
       .map(([k, v]) => (
         <Fragment key={k}>
           <span style={{ color: colors.objectkey }}>{k}: </span>
-          <Node value={v} nested />
+          <Node value={v} callsById={callsById} nested />
         </Fragment>
       )),
     <span>, </span>
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index c8ddea0b6ea3..0bf84ad495a8 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -31,10 +31,9 @@ export const Step = {
 export const TypeAndClear = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    // TODO: seems like userEvent.type + userEvent.clear + userEvent.type is not working for Svelte and Vue2/3. We should probably investigate, might be a bug in userEvent or in our implementation.
-    await fireEvent.input(canvas.getByTestId('value'), { target: { value: 'initial value' } });
-    await fireEvent.input(canvas.getByTestId('value'), { target: { value: '' } });
-    await fireEvent.input(canvas.getByTestId('value'), { target: { value: 'final value' } });
+    await userEvent.type(canvas.getByTestId('value'), 'initial value');
+    await userEvent.clear(canvas.getByTestId('value'));
+    await userEvent.type(canvas.getByTestId('value'), 'final value');
   },
 };
 
@@ -96,3 +95,28 @@ export const Validation = {
     await expect(args.onSuccess).not.toHaveBeenCalled();
   },
 };
+
+export const UserEventSetup = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const user = userEvent.setup();
+    const canvas = within(canvasElement);
+    await step('Select, type and paste on input using user-event v14 setup', async () => {
+      const input = await canvas.getByRole('textbox');
+      await user.click(input);
+      await user.type(input, 'Pasting: ');
+      await user.paste('foobar');
+    });
+    await step('Tab and press enter on submit button', async () => {
+      await user.pointer([
+        { keys: '[TouchA>]', target: await canvas.getByRole('textbox') },
+        { keys: '[/TouchA]' },
+      ]);
+      await user.tab();
+      await user.keyboard('{enter}');
+      const submitButton = await canvas.findByRole('button');
+      await expect(submitButton).toHaveFocus();
+      await expect(args.onSuccess).toHaveBeenCalled();
+    });
+  },
+};
diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts
index 8e2c24b74484..063cfd14cefd 100644
--- a/code/e2e-tests/addon-interactions.spec.ts
+++ b/code/e2e-tests/addon-interactions.spec.ts
@@ -66,9 +66,9 @@ test.describe('addon-interactions', () => {
     const panel = sbPage.panelContent();
     const runStatusBadge = await panel.locator('[aria-label="Status of the test run"]');
     await expect(runStatusBadge).toContainText(/Pass/);
-    await expect(panel).toContainText(/value: "initial value"/);
-    await expect(panel).toContainText(/value: ""/);
-    await expect(panel).toContainText(/value: "final value"/);
+    await expect(panel).toContainText(/"initial value"/);
+    await expect(panel).toContainText(/clear/);
+    await expect(panel).toContainText(/"final value"/);
     await expect(panel).toBeVisible();
 
     // Test interactions debugger - Stepping through works, count is correct and values are as expected
@@ -94,6 +94,9 @@ test.describe('addon-interactions', () => {
     // Test rerun state (from addon panel) - Interactions have rerun, count is correct and values are as expected
     const rerunInteractionButton = await panel.locator('[aria-label="Rerun"]');
     await rerunInteractionButton.click();
+
+    await expect(formInput).toHaveValue('final value');
+
     await interactionsRow.first().isVisible();
     await interactionsRow.nth(1).isVisible();
     await interactionsRow.nth(2).isVisible();
@@ -108,5 +111,6 @@ test.describe('addon-interactions', () => {
     await interactionsRow.nth(2).isVisible();
     await expect(interactionsTab).toContainText(/(3)/);
     await expect(interactionsTab).toBeVisible();
+    await expect(formInput).toHaveValue('final value');
   });
 });
diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
index 2bc4c00298e8..b3415c745430 100644
--- a/code/frameworks/angular/template/components/form.component.ts
+++ b/code/frameworks/angular/template/components/form.component.ts
@@ -6,7 +6,7 @@ import { Component, Output, EventEmitter } from '@angular/core';
     <form id="interaction-test-form" (submit)="handleSubmit($event)">
       <label>
         Enter Value
-        <input type="text" data-testid="value" [value]="value" required />
+        <input type="text" data-testid="value" [(ngModel)]="value" required />
       </label>
       <button type="submit">Submit</button>
       <p *ngIf="complete">Completed!!</p>
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
index 636448b8dd45..03c667e9dac2 100644
--- a/code/lib/cli/src/generators/baseGenerator.ts
+++ b/code/lib/cli/src/generators/baseGenerator.ts
@@ -244,10 +244,7 @@ export async function baseGenerator(
 
   if (hasInteractiveStories(rendererId)) {
     addons.push('@storybook/addon-interactions');
-    addonPackages.push(
-      '@storybook/addon-interactions',
-      '@storybook/testing-library@^0.1.1-future.2'
-    );
+    addonPackages.push('@storybook/addon-interactions', '@storybook/testing-library@^0.2.0-next.0');
   }
 
   const files = await fse.readdir(process.cwd());
diff --git a/code/package.json b/code/package.json
index b60f700833ae..f5984820e747 100644
--- a/code/package.json
+++ b/code/package.json
@@ -151,7 +151,7 @@
     "@storybook/html-vite": "workspace:*",
     "@storybook/html-webpack5": "workspace:*",
     "@storybook/instrumenter": "workspace:*",
-    "@storybook/jest": "future",
+    "@storybook/jest": "next",
     "@storybook/linter-config": "^3.1.2",
     "@storybook/manager": "workspace:*",
     "@storybook/manager-api": "workspace:*",
@@ -184,7 +184,7 @@
     "@storybook/svelte": "workspace:*",
     "@storybook/svelte-webpack5": "workspace:*",
     "@storybook/telemetry": "workspace:*",
-    "@storybook/testing-library": "future",
+    "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "@storybook/vue": "workspace:*",
diff --git a/code/renderers/html/template/components/Form.js b/code/renderers/html/template/components/Form.js
index f2f239cbff70..823a89f49b99 100644
--- a/code/renderers/html/template/components/Form.js
+++ b/code/renderers/html/template/components/Form.js
@@ -2,30 +2,32 @@
 export const Form = ({ onSuccess }) => {
   const container = document.createElement('div');
 
-  const getInnerHTML = ({ complete }) => `
+  const getInnerHTML = ({ complete, value }) => `
   <form id="interaction-test-form">
     <label>
       Enter Value
-      <input type="text" data-testid="value" required />
+      <input type="text" data-testid="value" value="${value}" required />
     </label>
     <button type="submit">Submit</button>
     ${complete ? '<p>Completed!!</p>' : ''}
   </form>
 `;
 
-  container.innerHTML = getInnerHTML({ complete: false });
+  container.innerHTML = getInnerHTML({ complete: false, value: '' });
 
   const form = container.querySelector('form');
   form.addEventListener('submit', (e) => {
     e.preventDefault();
 
+    const { value } = form.querySelector('input'); // Store the current value
+
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: true });
+      container.innerHTML = getInnerHTML({ complete: true, value });
     }, 500);
     setTimeout(() => {
-      container.innerHTML = getInnerHTML({ complete: false });
+      container.innerHTML = getInnerHTML({ complete: false, value });
     }, 1500);
-    onSuccess(e);
+    onSuccess(value);
   });
 
   return container;
diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx
index f12e905f0dba..fb58cbb10508 100644
--- a/code/renderers/preact/template/components/Form.jsx
+++ b/code/renderers/preact/template/components/Form.jsx
@@ -24,7 +24,7 @@ export const Form = ({ onSuccess }) => {
           data-testid="value"
           value={value}
           required
-          onChange={(event) => setValue(event.target.value)}
+          onInput={(event) => setValue(event.target.value)}
         />
       </label>
       <button type="submit">Submit</button>
diff --git a/code/renderers/svelte/template/components/Form.svelte b/code/renderers/svelte/template/components/Form.svelte
index 467c31d4974b..3b2f7a5b9d97 100644
--- a/code/renderers/svelte/template/components/Form.svelte
+++ b/code/renderers/svelte/template/components/Form.svelte
@@ -26,8 +26,8 @@
 <form id="interaction-test-form" on:submit|preventDefault={handleSubmit}>
   <label>
     Enter Value
-    <input type="text" data-testid="value" {value} required on:click={handleClick} />
+    <input type="text" data-testid="value" bind:value required on:click={handleClick} />
   </label>
   <button type="submit">Submit</button>
   {#if complete}<p>Completed!!</p>{/if}
-</form>
+</form>
\ No newline at end of file
diff --git a/code/renderers/vue/template/components/Form.vue b/code/renderers/vue/template/components/Form.vue
index fc46f159e337..2375a381eb7a 100644
--- a/code/renderers/vue/template/components/Form.vue
+++ b/code/renderers/vue/template/components/Form.vue
@@ -2,7 +2,13 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input
+        type="text"
+        data-testid="value"
+        :value="value"
+        @input="value = $event.target.value"
+        required
+      />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +33,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {
diff --git a/code/renderers/vue3/template/components/Form.vue b/code/renderers/vue3/template/components/Form.vue
index fc46f159e337..e867030f0917 100644
--- a/code/renderers/vue3/template/components/Form.vue
+++ b/code/renderers/vue3/template/components/Form.vue
@@ -2,7 +2,7 @@
   <form id="interaction-test-form" @submit.prevent="onSubmit">
     <label>
       Enter Value
-      <input type="text" data-testid="value" :value="value" required @click="setValue" />
+      <input type="text" data-testid="value" v-model="value" required />
     </label>
     <button type="submit">Submit</button>
     <p v-if="complete">Completed!!</p>
@@ -27,9 +27,6 @@ export default {
   },
 
   methods: {
-    setValue(event) {
-      this.value = event.target.value;
-    },
     onSubmit() {
       this.onSuccess(this.value);
       setTimeout(() => {
diff --git a/code/yarn.lock b/code/yarn.lock
index b5e567ea951c..fe8359af1ac0 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5318,10 +5318,10 @@ __metadata:
     "@storybook/core-events": 7.1.0-alpha.37
     "@storybook/global": ^5.0.0
     "@storybook/instrumenter": 7.1.0-alpha.37
-    "@storybook/jest": future
+    "@storybook/jest": next
     "@storybook/manager-api": 7.1.0-alpha.37
     "@storybook/preview-api": 7.1.0-alpha.37
-    "@storybook/testing-library": future
+    "@storybook/testing-library": next
     "@storybook/theming": 7.1.0-alpha.37
     "@storybook/types": 7.1.0-alpha.37
     "@types/node": ^16.0.0
@@ -5955,21 +5955,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/channel-postmessage@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/global": ^5.0.0
-    qs: ^6.10.0
-    telejson: ^7.0.3
-    tiny-invariant: ^1.3.1
-  checksum: 1e3002cc791026923d5961ce373b8208a95c50d11e3ea8b748a79c05a5744128aac42d9a3d1cdd9f9ad61827e64227fd0b4246cc7b42c834e3702a3182e87eab
-  languageName: node
-  linkType: hard
-
 "@storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:deprecated/channel-websocket":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:deprecated/channel-websocket"
@@ -5995,13 +5980,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/channels@npm:7.1.0-alpha.29"
-  checksum: 62c4b7f3852354dfc9013b5d2f51524325351772690765abefaba720c573abae230149c793d3424c62f58cf8ea0897fbd73aeb17daa511fa18fab142dcf31e82
-  languageName: node
-  linkType: hard
-
 "@storybook/cli@7.1.0-alpha.37, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
@@ -6077,15 +6055,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/client-logger@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/global": ^5.0.0
-  checksum: 928cf347346cf85a747216f2387cc240ed2395d508358be4ed93d0319af1a25e326f8456125feef923f6d014000a2bf95cf43140cc4fcddd510a852478f05f39
-  languageName: node
-  linkType: hard
-
 "@storybook/codemod@7.1.0-alpha.37, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
@@ -6205,13 +6174,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/core-events@npm:7.1.0-alpha.29"
-  checksum: 6a266433427b06aa99f0e02dbaad9d545a22e6e3c0487e1bbcc78d3782bee91e8062ed08b44461749069dd519d2cec9af76dbeb03ee452e4bcc78b0c04fc64e5
-  languageName: node
-  linkType: hard
-
 "@storybook/core-server@7.1.0-alpha.37, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
@@ -6472,28 +6434,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@npm:future":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/instrumenter@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.29
-  checksum: a401ad429008be2c06eead8e52f4d1db73fcbb0e5a4ba406e82a034d46057752c8bdad9912cb2df2b48954fc4c75ba96a6895fe33f1df934ae12b0e2bec4d46c
-  languageName: node
-  linkType: hard
-
-"@storybook/jest@npm:future":
-  version: 0.1.1-future.2
-  resolution: "@storybook/jest@npm:0.1.1-future.2"
+"@storybook/jest@npm:next":
+  version: 0.1.1-next.1
+  resolution: "@storybook/jest@npm:0.1.1-next.1"
   dependencies:
     "@storybook/expect": storybook-jest
-    "@storybook/instrumenter": future
     "@testing-library/jest-dom": ^5.16.2
     jest-mock: ^27.3.0
-  checksum: bfecca13ba3d32e7b37eee7c6cb272c18b8dc79b25a1381627bfeb33efc881f0780a32d1acf4a92c058148728923718cee92e588d44290f26f4d428b480187d5
+  checksum: 09ffd8f56def15bb79e897cad6eb9a2157af223a876936a27b7082de2f3891cccdbaeac1b1e81481e9d50bc7d2837f8029f5b1a4e9f1a3f4aa6314222f4c17be
   languageName: node
   linkType: hard
 
@@ -6961,29 +6909,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-api@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/preview-api@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channel-postmessage": 7.1.0-alpha.29
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/csf": ^0.1.0
-    "@storybook/global": ^5.0.0
-    "@storybook/types": 7.1.0-alpha.29
-    "@types/qs": ^6.9.5
-    dequal: ^2.0.2
-    lodash: ^4.17.21
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    synchronous-promise: ^2.0.15
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  checksum: be648b02a0b3218e837f7b15389487da2d146174e0aa919c4383b09630a541abf850595b74642a1e409ad5a96fba6224af03bd87f5de556dcc51f380cf34c1d3
-  languageName: node
-  linkType: hard
-
 "@storybook/preview-web@7.1.0-alpha.37, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:deprecated/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:deprecated/preview-web"
@@ -7183,7 +7108,7 @@ __metadata:
     "@storybook/html-vite": "workspace:*"
     "@storybook/html-webpack5": "workspace:*"
     "@storybook/instrumenter": "workspace:*"
-    "@storybook/jest": future
+    "@storybook/jest": next
     "@storybook/linter-config": ^3.1.2
     "@storybook/manager": "workspace:*"
     "@storybook/manager-api": "workspace:*"
@@ -7216,7 +7141,7 @@ __metadata:
     "@storybook/svelte": "workspace:*"
     "@storybook/svelte-webpack5": "workspace:*"
     "@storybook/telemetry": "workspace:*"
-    "@storybook/testing-library": future
+    "@storybook/testing-library": next
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
     "@storybook/vue": "workspace:*"
@@ -7485,14 +7410,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/testing-library@npm:future":
-  version: 0.2.0-future.0
-  resolution: "@storybook/testing-library@npm:0.2.0-future.0"
+"@storybook/testing-library@npm:next":
+  version: 0.2.0-next.0
+  resolution: "@storybook/testing-library@npm:0.2.0-next.0"
   dependencies:
-    "@testing-library/dom": ^8.3.0
-    "@testing-library/user-event": ^13.2.1
+    "@testing-library/dom": ^9.3.1
+    "@testing-library/user-event": ^14.4.3
     ts-dedent: ^2.2.0
-  checksum: 5327898a2effe0a55877c54b5dc80c5db664f62b5f4c56693cbd1ee9665b02300839280cdd1b5f1d715fff89063462c8d23b873f67bc6c06b8599cde10c52059
+  checksum: 342ee91530b77db13c2691c36d7a00efead1af6453b58bbcca4d01afcdbe8e2b12dcaef734bea165838b6e6dd5af7d12032039c12e53955d7026190e56f6dc1b
   languageName: node
   linkType: hard
 
@@ -7535,18 +7460,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/types@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/types@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@types/babel__core": ^7.0.0
-    "@types/express": ^4.7.0
-    file-system-cache: ^2.0.0
-  checksum: 29c94d3ba0b0bc4759893640e02cc83d0682f5c97dbefb1c5903a99d0341161f65eb0a65175123970a1176ff13e0f0b1661f5460583ea8de15c1b7ef18f73aeb
-  languageName: node
-  linkType: hard
-
 "@storybook/vue-vite@workspace:frameworks/vue-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
@@ -7945,19 +7858,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.3.0":
-  version: 8.20.0
-  resolution: "@testing-library/dom@npm:8.20.0"
+"@testing-library/dom@npm:^9.3.1":
+  version: 9.3.1
+  resolution: "@testing-library/dom@npm:9.3.1"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
     "@types/aria-query": ^5.0.1
-    aria-query: ^5.0.0
+    aria-query: 5.1.3
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
+    lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 454c71f65708d1504256ae055f060adf8ed9eadcc7ddbf6d07a528045beceb842783c1253871759f5c137eca58e5e32700dc64b130cbb37e10e7a52ab08d7b44
+  checksum: 25d1deddba014c107fd9703181fbb7063ed376d3ad42d7918ee752e7e677edfb5abaf672b22afc5257ffe760c9c7e5cc981656297c328bc61578d23c6b65b4dc
   languageName: node
   linkType: hard
 
@@ -8002,6 +7915,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^14.4.3":
+  version: 14.4.3
+  resolution: "@testing-library/user-event@npm:14.4.3"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 28e1e4ed2fdaa9486e203c6789386be228e305abd3fa41f38c828af415fd4a4e80f4de88de0e502ff11c4b4926f221b874a2a45bcc8170d30714e12dad2c1bd0
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -10293,6 +10215,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.1.3, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3":
+  version: 5.1.3
+  resolution: "aria-query@npm:5.1.3"
+  dependencies:
+    deep-equal: ^2.0.5
+  checksum: edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^4.2.2":
   version: 4.2.2
   resolution: "aria-query@npm:4.2.2"
@@ -10303,15 +10234,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: ^2.0.5
-  checksum: edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
-  languageName: node
-  linkType: hard
-
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -21012,7 +20934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
+"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
   bin:
diff --git a/scripts/package.json b/scripts/package.json
index 17efd063c107..ae488cbc425e 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -70,9 +70,9 @@
     "@nx/workspace": "16.2.1",
     "@octokit/graphql": "^5.0.5",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/jest": "future",
+    "@storybook/jest": "next",
     "@storybook/linter-config": "^3.1.2",
-    "@storybook/testing-library": "future",
+    "@storybook/testing-library": "next",
     "@swc/core": "^1.3.23",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/jest-dom": "^5.11.9",
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 65b88986777b..a09f9d71b882 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -352,9 +352,9 @@ async function addExtraDependencies({
 }) {
   // web-components doesn't install '@storybook/testing-library' by default
   const extraDeps = [
-    '@storybook/jest@future',
-    '@storybook/testing-library@future',
-    '@storybook/test-runner@future',
+    '@storybook/jest@next',
+    '@storybook/testing-library@next',
+    '@storybook/test-runner@next',
   ];
   if (debug) logger.log('🎁 Adding extra deps', extraDeps);
   if (!dryRun) {
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 7522113236fe..88a85f0b6c87 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -2781,44 +2781,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channel-postmessage@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/channel-postmessage@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/global": ^5.0.0
-    qs: ^6.10.0
-    telejson: ^7.0.3
-    tiny-invariant: ^1.3.1
-  checksum: 1e3002cc791026923d5961ce373b8208a95c50d11e3ea8b748a79c05a5744128aac42d9a3d1cdd9f9ad61827e64227fd0b4246cc7b42c834e3702a3182e87eab
-  languageName: node
-  linkType: hard
-
-"@storybook/channels@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/channels@npm:7.1.0-alpha.29"
-  checksum: 62c4b7f3852354dfc9013b5d2f51524325351772690765abefaba720c573abae230149c793d3424c62f58cf8ea0897fbd73aeb17daa511fa18fab142dcf31e82
-  languageName: node
-  linkType: hard
-
-"@storybook/client-logger@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/client-logger@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/global": ^5.0.0
-  checksum: 928cf347346cf85a747216f2387cc240ed2395d508358be4ed93d0319af1a25e326f8456125feef923f6d014000a2bf95cf43140cc4fcddd510a852478f05f39
-  languageName: node
-  linkType: hard
-
-"@storybook/core-events@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/core-events@npm:7.1.0-alpha.29"
-  checksum: 6a266433427b06aa99f0e02dbaad9d545a22e6e3c0487e1bbcc78d3782bee91e8062ed08b44461749069dd519d2cec9af76dbeb03ee452e4bcc78b0c04fc64e5
-  languageName: node
-  linkType: hard
-
 "@storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
@@ -2828,15 +2790,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "@storybook/csf@npm:0.1.1"
-  dependencies:
-    type-fest: ^2.19.0
-  checksum: 999bb87fbbe047a559bbaa5baf2ed84872fcd5cdcae3c1169f8e4c641eefe8759d09a09034a78ed114032c0e5cf6301b7fa89e5e3ce60d75cf0bd5e33ec0a6e7
-  languageName: node
-  linkType: hard
-
 "@storybook/eslint-config-storybook@npm:^3.1.2":
   version: 3.1.2
   resolution: "@storybook/eslint-config-storybook@npm:3.1.2"
@@ -2855,35 +2808,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/global@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "@storybook/global@npm:5.0.0"
-  checksum: 8f1b61dcdd3a89584540896e659af2ecc700bc740c16909a7be24ac19127ea213324de144a141f7caf8affaed017d064fea0618d453afbe027cf60f54b4a6d0b
-  languageName: node
-  linkType: hard
-
-"@storybook/instrumenter@npm:future":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/instrumenter@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.29
-  checksum: a401ad429008be2c06eead8e52f4d1db73fcbb0e5a4ba406e82a034d46057752c8bdad9912cb2df2b48954fc4c75ba96a6895fe33f1df934ae12b0e2bec4d46c
-  languageName: node
-  linkType: hard
-
-"@storybook/jest@npm:future":
-  version: 0.1.1-future.2
-  resolution: "@storybook/jest@npm:0.1.1-future.2"
+"@storybook/jest@npm:next":
+  version: 0.1.1-next.1
+  resolution: "@storybook/jest@npm:0.1.1-next.1"
   dependencies:
     "@storybook/expect": storybook-jest
-    "@storybook/instrumenter": future
     "@testing-library/jest-dom": ^5.16.2
     jest-mock: ^27.3.0
-  checksum: bfecca13ba3d32e7b37eee7c6cb272c18b8dc79b25a1381627bfeb33efc881f0780a32d1acf4a92c058148728923718cee92e588d44290f26f4d428b480187d5
+  checksum: 09ffd8f56def15bb79e897cad6eb9a2157af223a876936a27b7082de2f3891cccdbaeac1b1e81481e9d50bc7d2837f8029f5b1a4e9f1a3f4aa6314222f4c17be
   languageName: node
   linkType: hard
 
@@ -2914,29 +2846,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/preview-api@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channel-postmessage": 7.1.0-alpha.29
-    "@storybook/channels": 7.1.0-alpha.29
-    "@storybook/client-logger": 7.1.0-alpha.29
-    "@storybook/core-events": 7.1.0-alpha.29
-    "@storybook/csf": ^0.1.0
-    "@storybook/global": ^5.0.0
-    "@storybook/types": 7.1.0-alpha.29
-    "@types/qs": ^6.9.5
-    dequal: ^2.0.2
-    lodash: ^4.17.21
-    memoizerific: ^1.11.3
-    qs: ^6.10.0
-    synchronous-promise: ^2.0.15
-    ts-dedent: ^2.0.0
-    util-deprecate: ^1.0.2
-  checksum: be648b02a0b3218e837f7b15389487da2d146174e0aa919c4383b09630a541abf850595b74642a1e409ad5a96fba6224af03bd87f5de556dcc51f380cf34c1d3
-  languageName: node
-  linkType: hard
-
 "@storybook/scripts@workspace:.":
   version: 0.0.0-use.local
   resolution: "@storybook/scripts@workspace:."
@@ -2958,9 +2867,9 @@ __metadata:
     "@nx/workspace": 16.2.1
     "@octokit/graphql": ^5.0.5
     "@storybook/eslint-config-storybook": ^3.1.2
-    "@storybook/jest": future
+    "@storybook/jest": next
     "@storybook/linter-config": ^3.1.2
-    "@storybook/testing-library": future
+    "@storybook/testing-library": next
     "@swc/core": ^1.3.23
     "@testing-library/dom": ^9.3.0
     "@testing-library/jest-dom": ^5.11.9
@@ -3080,26 +2989,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/testing-library@npm:future":
-  version: 0.2.0-future.0
-  resolution: "@storybook/testing-library@npm:0.2.0-future.0"
+"@storybook/testing-library@npm:next":
+  version: 0.2.0-next.0
+  resolution: "@storybook/testing-library@npm:0.2.0-next.0"
   dependencies:
-    "@testing-library/dom": ^8.3.0
-    "@testing-library/user-event": ^13.2.1
+    "@testing-library/dom": ^9.3.1
+    "@testing-library/user-event": ^14.4.3
     ts-dedent: ^2.2.0
-  checksum: 5327898a2effe0a55877c54b5dc80c5db664f62b5f4c56693cbd1ee9665b02300839280cdd1b5f1d715fff89063462c8d23b873f67bc6c06b8599cde10c52059
-  languageName: node
-  linkType: hard
-
-"@storybook/types@npm:7.1.0-alpha.29":
-  version: 7.1.0-alpha.29
-  resolution: "@storybook/types@npm:7.1.0-alpha.29"
-  dependencies:
-    "@storybook/channels": 7.1.0-alpha.29
-    "@types/babel__core": ^7.0.0
-    "@types/express": ^4.7.0
-    file-system-cache: ^2.0.0
-  checksum: 29c94d3ba0b0bc4759893640e02cc83d0682f5c97dbefb1c5903a99d0341161f65eb0a65175123970a1176ff13e0f0b1661f5460583ea8de15c1b7ef18f73aeb
+  checksum: 342ee91530b77db13c2691c36d7a00efead1af6453b58bbcca4d01afcdbe8e2b12dcaef734bea165838b6e6dd5af7d12032039c12e53955d7026190e56f6dc1b
   languageName: node
   linkType: hard
 
@@ -3233,9 +3130,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.3.0":
-  version: 8.20.0
-  resolution: "@testing-library/dom@npm:8.20.0"
+"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.0":
+  version: 9.3.0
+  resolution: "@testing-library/dom@npm:9.3.0"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
@@ -3243,25 +3140,25 @@ __metadata:
     aria-query: ^5.0.0
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
+    lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 454c71f65708d1504256ae055f060adf8ed9eadcc7ddbf6d07a528045beceb842783c1253871759f5c137eca58e5e32700dc64b130cbb37e10e7a52ab08d7b44
+  checksum: c5f9b6cf6ddf31e4556961d5ec8a6d700b953df3181860355e9506efe8825d40952286ab392b2f6aeb5cbaebf2f022562ef168c34f730f88d7c977e63ac41d82
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.0":
-  version: 9.3.0
-  resolution: "@testing-library/dom@npm:9.3.0"
+"@testing-library/dom@npm:^9.3.1":
+  version: 9.3.1
+  resolution: "@testing-library/dom@npm:9.3.1"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
     "@types/aria-query": ^5.0.1
-    aria-query: ^5.0.0
+    aria-query: 5.1.3
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
     lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: c5f9b6cf6ddf31e4556961d5ec8a6d700b953df3181860355e9506efe8825d40952286ab392b2f6aeb5cbaebf2f022562ef168c34f730f88d7c977e63ac41d82
+  checksum: 25d1deddba014c107fd9703181fbb7063ed376d3ad42d7918ee752e7e677edfb5abaf672b22afc5257ffe760c9c7e5cc981656297c328bc61578d23c6b65b4dc
   languageName: node
   linkType: hard
 
@@ -3296,17 +3193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^13.2.1":
-  version: 13.5.0
-  resolution: "@testing-library/user-event@npm:13.5.0"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: ff57edaeab31322c80c3f01d55404b4cebb907b9ec7672b96a1a14d053f172046b01c5f27b45677927ebee8ed91bce695a7d09edec9a48875cfacabe39d0426a
-  languageName: node
-  linkType: hard
-
 "@testing-library/user-event@npm:^14.4.3":
   version: 14.4.3
   resolution: "@testing-library/user-event@npm:14.4.3"
@@ -3365,7 +3251,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14":
+"@types/babel__core@npm:^7.1.14":
   version: 7.20.1
   resolution: "@types/babel__core@npm:7.20.1"
   dependencies:
@@ -3513,7 +3399,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express@npm:^4.17.11, @types/express@npm:^4.7.0":
+"@types/express@npm:^4.17.11":
   version: 4.17.17
   resolution: "@types/express@npm:4.17.17"
   dependencies:
@@ -3767,7 +3653,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*, @types/qs@npm:^6.9.5":
+"@types/qs@npm:*":
   version: 6.9.7
   resolution: "@types/qs@npm:6.9.7"
   checksum: 157eb05f4c75790b0ebdcf7b0547ff117feabc8cda03c3cac3d3ea82bb19a1912e76a411df3eb0bdd01026a9770f07bc0e7e3fbe39ebb31c1be4564c16be35f1
@@ -4670,7 +4556,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0, aria-query@npm:^5.1.3":
+"aria-query@npm:5.1.3, aria-query@npm:^5.0.0, aria-query@npm:^5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
   dependencies:
@@ -6349,7 +6235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0, dequal@npm:^2.0.2":
+"dequal@npm:^2.0.0":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888
@@ -7797,16 +7683,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-system-cache@npm:^2.0.0":
-  version: 2.3.0
-  resolution: "file-system-cache@npm:2.3.0"
-  dependencies:
-    fs-extra: 11.1.1
-    ramda: 0.29.0
-  checksum: 43de19f0db32e6546bb7abeecb1d6ea83c1eca23b38905c9415a29f6219cc9d6d87b0c1a6aca92c46a0f1bc276241a339f2f68b8aa0ca5c2eb64b6e1e3e4da01
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -8026,7 +7902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:11.1.1, fs-extra@npm:^11.1.0":
+"fs-extra@npm:^11.1.0":
   version: 11.1.1
   resolution: "fs-extra@npm:11.1.1"
   dependencies:
@@ -10855,7 +10731,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0":
+"lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
   bin:
@@ -12974,7 +12850,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.10.0, qs@npm:^6.4.0":
+"qs@npm:^6.4.0":
   version: 6.11.2
   resolution: "qs@npm:6.11.2"
   dependencies:
@@ -13030,13 +12906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:0.29.0":
-  version: 0.29.0
-  resolution: "ramda@npm:0.29.0"
-  checksum: b00eaaf1c62b06a99affa1d583e256bd65ad27ab9d0ef512f55d7d93b842e7cd244a4a09179f61fdd8548362e409323867a2b0477cbd0626b5644eb6ac7c53da
-  languageName: node
-  linkType: hard
-
 "range-parser@npm:~1.2.1":
   version: 1.2.1
   resolution: "range-parser@npm:1.2.1"
@@ -15023,13 +14892,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"synchronous-promise@npm:^2.0.15":
-  version: 2.0.17
-  resolution: "synchronous-promise@npm:2.0.17"
-  checksum: 1babe643d8417789ef6e5a2f3d4b8abcda2de236acd09bbe2c98f6be82c0a2c92ed21a6e4f934845fa8de18b1435a9cba1e8c3d945032e8a532f076224c024b1
-  languageName: node
-  linkType: hard
-
 "syntax-error@npm:^1.1.6":
   version: 1.4.0
   resolution: "syntax-error@npm:1.4.0"
@@ -15100,15 +14962,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"telejson@npm:^7.0.3":
-  version: 7.1.0
-  resolution: "telejson@npm:7.1.0"
-  dependencies:
-    memoizerific: ^1.11.3
-  checksum: dc9a185d0e00d947c0eaa229bfb993aab61a3ba79282ae409768fc8ae66d236e89a64ebe291f9ea6ed5e05396e0be52a7542ea32b6c1321b20440f28c7828edc
-  languageName: node
-  linkType: hard
-
 "temp-dir@npm:^2.0.0":
   version: 2.0.0
   resolution: "temp-dir@npm:2.0.0"
@@ -15181,13 +15034,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "tiny-invariant@npm:1.3.1"
-  checksum: 5b87c1d52847d9452b60d0dcb77011b459044e0361ca8253bfe7b43d6288106e12af926adb709a6fc28900e3864349b91dad9a4ac93c39aa15f360b26c2ff4db
-  languageName: node
-  linkType: hard
-
 "tmp@npm:~0.2.1":
   version: 0.2.1
   resolution: "tmp@npm:0.2.1"
@@ -16119,7 +15965,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2":
+"util-deprecate@npm:^1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
   checksum: 41a5bdd214df2f6c3ecf8622745e4a366c4adced864bc3c833739791aeeeb1838119af7daed4ba36428114b5c67dcda034a79c882e97e43c03e66a4dd7389942