.storybook/main.js

@@ -9,6 +9,7 @@ const config = {
     "@storybook/addon-docs",
     "@storybook/addon-onboarding",
     "@storybook/addon-a11y",
+    "@storybook/addon-interactions",
     "@storybook/addon-vitest",
   ],
   framework: {

package-lock.json

@@ -21,6 +21,7 @@
         "@playwright/test": "^1.55.0",
         "@storybook/addon-a11y": "^9.1.2",
         "@storybook/addon-docs": "^9.1.2",
+        "@storybook/addon-interactions": "^8.6.14",
         "@storybook/addon-onboarding": "^9.1.2",
         "@storybook/addon-styling-webpack": "^2.0.0",
         "@storybook/addon-viewport": "^9.0.8",
@@ -5331,6 +5332,27 @@
         "storybook": "^9.1.2"
       }
     },
+    "node_modules/@storybook/addon-interactions": {
+      "version": "8.6.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.6.14.tgz",
+      "integrity": "sha512-8VmElhm2XOjh22l/dO4UmXxNOolGhNiSpBcls2pqWSraVh4a670EyYBZsHpkXqfNHo2YgKyZN3C91+9zfH79qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@storybook/instrumenter": "8.6.14",
+        "@storybook/test": "8.6.14",
+        "polished": "^4.2.2",
+        "ts-dedent": "^2.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.6.14"
+      }
+    },
     "node_modules/@storybook/addon-onboarding": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-9.1.2.tgz",
@@ -17535,6 +17557,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "@playwright/test": "^1.55.0",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-onboarding": "^9.1.2",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-viewport": "^9.0.8",

stories/Button.visual.stories.js

@@ -1,5 +1,5 @@
 import Button from "../app/components/Button.js";
-import { within, userEvent } from "@storybook/testing-library";
+import { within, userEvent } from "@storybook/test";
 
 export default {
   title: "Components/Button/Visual Regression",

stories/Footer.responsive.stories.js

@@ -1,5 +1,5 @@
 import Footer from "../app/components/Footer.js";
-import { within, userEvent } from "@storybook/testing-library";
+import { within, userEvent } from "@storybook/test";
 
 export default {
   title: "Components/Footer/Responsive",

stories/Header.responsive.stories.js

@@ -1,5 +1,5 @@
 import Header from "../app/components/Header.js";
-import { within, userEvent } from "@storybook/testing-library";
+import { within, userEvent } from "@storybook/test";
 
 export default {
   title: "Components/Header/Responsive",