From 2d3f837635d3d4429dc59bc4cbf06fdd38fca965 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 28 Jun 2026 12:34:39 +0300
Subject: [PATCH 1/5] chore: upgrade dev dependencies to React 18.2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Upgrade devDependencies across all packages to React 18.2 while keeping
peerDependencies at >=16.9.0 for consumer compatibility. No source code
changes — library remains compatible with React 16/17/18.

- Bump react/react-dom devDeps from ^16.x to ^18.2.0 (16 packages)
- Upgrade @testing-library/react from ^12 to ^14
- Remove deprecated @testing-library/react-hooks (merged into @testing-library/react)
- Remove @hot-loader/react-dom (unused with Vite tooling)
- Bump react-is to ^18.2.0
- Fix act() wrapping in tests for React 18 automatic batching
- Update snapshots for React 18 output
---
 packages/base/package.json                    |   8 +-
 packages/components/button/package.json       |   8 +-
 packages/components/clickable/package.json    |   8 +-
 packages/components/dialog/package.json       |   9 +-
 .../src/Dialog/__tests__/Dialog.test.tsx      | 277 +++++++++++-------
 .../Dialog/__tests__/useDisableScroll.test.ts |   2 +-
 .../Refable/__tests__/Refable.test.tsx        |   3 +-
 .../hooks/__tests__/useDisableScroll.test.ts  |   2 +-
 packages/components/icon-button/package.json  |   8 +-
 .../IconButton/__tests__/IconButton.test.tsx  |  18 +-
 packages/components/icon/package.json         |   4 +-
 packages/components/layer/package.json        |   8 +-
 packages/components/layout/package.json       |   8 +-
 packages/components/loader/package.json       |   8 +-
 packages/components/tooltip/package.json      |   8 +-
 packages/components/typography/package.json   |   8 +-
 packages/core/package.json                    |  14 +-
 .../Avatar/__tests__/Avatar.test.tsx          |   3 +-
 .../BreadcrumbItem.snapshot.test.tsx.snap     |  20 +-
 .../__tests__/BreadcrumbMenu.test.tsx         |  10 +-
 .../Chips.snapshot.test.tsx.snap              |  40 +--
 .../__tests__/ColorPicker.test.tsx            |   6 +-
 .../Combobox/__tests__/Combobox.test.tsx      |  30 +-
 .../Combobox.snapshot.test.tsx.snap           |  16 -
 .../__snapshots__/DatePicker.test.tsx.snap    |  16 +-
 .../GridKeyboardNavigationContext.test.tsx    |   2 +-
 .../Label.snapshot.test.tsx.snap              |   8 +-
 .../__snapshots__/Link.snapshot.test.tsx.snap |  28 +-
 .../Menu/Menu/__tests__/Menu.test.tsx         |   3 +-
 .../useAdjacentSelectableMenuIndex.test.tsx   |   2 +-
 .../hooks/__tests__/useFocusOnMount.test.tsx  |   2 +-
 .../useLastNavigationDirection.test.tsx       |   2 +-
 .../useFocusGridItemByActiveStatus.test.ts    |   2 +-
 .../useMenuGridItemNavContext.test.ts         |   2 +-
 .../MenuItem.snapshot.test.tsx.snap           |   8 +-
 .../__tests__/useFocusEscapeTargets.test.ts   |   2 +-
 .../__tests__/MultiStepIndicator.test.tsx     |   3 +-
 .../__tests__/useNumberFieldState.test.ts     |   2 +-
 .../__tests__/useSpinButtonHandlers.test.ts   |   2 +-
 .../RadioButton.snapshot.test.tsx.snap        |   9 -
 .../__tests__/Slider-non-ranged.test.tsx      | 142 ++++-----
 .../Slider/__tests__/Slider-ranged.test.tsx   | 170 +++++------
 .../__snapshots__/Slider-ranged.test.tsx.snap |  68 ++---
 .../Slider/__tests__/sliderTestUtils.tsx      |  18 +-
 .../__tests__/SplitButton.test.tsx            |  33 ++-
 .../components/Steps/__tests__/Steps.test.tsx |   3 +-
 .../Tabs/Tab/__tests__/Tab.test.tsx           |   7 +-
 .../__tests__/TextField-tests.test.tsx        |  29 +-
 .../TextWithHighlight.test.tsx.snap           |   4 +-
 .../Tipseen/__tests__/Tipseen.test.tsx        |   9 +-
 .../components/Toast/__tests__/Toast.test.tsx |   3 +-
 .../hooks/__tests__/useDebounceEvent.test.ts  |   4 +-
 .../hooks/__tests__/useEventListener.test.ts  |   3 +-
 .../src/hooks/__tests__/useKeyEvent.test.ts   |   3 +-
 .../useActiveDescendantListFocus.test.ts      |   2 +-
 .../__tests__/useAfterFirstRender.test.tsx    |   2 +-
 .../useGridKeyboardNavigation.test.ts         |   3 +-
 .../useSetFocus/__tests__/useSetFocus.test.ts |   2 +-
 .../useSwitch/__tests__/useSwitch.test.ts     |   6 +-
 .../useWizard/__tests__/useWizard.test.ts     |   2 +-
 packages/docs/package.json                    |  12 +-
 packages/hooks/package.json                   |   9 +-
 .../__tests__/useClickOutside.test.ts         |   3 +-
 packages/shared/package.json                  |   4 +-
 packages/storybook-blocks/package.json        |   8 +-
 yarn.lock                                     | 157 +++++-----
 66 files changed, 611 insertions(+), 714 deletions(-)

diff --git a/packages/base/package.json b/packages/base/package.json
index 64b96a9880..ba2f57d007 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -43,12 +43,12 @@
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index 14bca2e0c3..12ac23dc7b 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -46,12 +46,12 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
     "@vibe/icons": "4.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/clickable/package.json b/packages/components/clickable/package.json
index e40f154e2c..dc3b58ee51 100644
--- a/packages/components/clickable/package.json
+++ b/packages/components/clickable/package.json
@@ -44,12 +44,12 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/dialog/package.json b/packages/components/dialog/package.json
index fce8297af7..45c1abd258 100644
--- a/packages/components/dialog/package.json
+++ b/packages/components/dialog/package.json
@@ -48,14 +48,13 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/react-transition-group": "^4.4.5",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx b/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
index 37e682c104..28563365be 100644
--- a/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
+++ b/packages/components/dialog/src/Dialog/__tests__/Dialog.test.tsx
@@ -1,7 +1,7 @@
 import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { render, screen, within, act } from "@testing-library/react";
 import Dialog, { type DialogProps } from "../Dialog";
 
 function renderVisibleDialogOnMount(dialogProps: DialogProps) {
@@ -30,26 +30,31 @@ describe("Dialog tests", () => {
       expect(onClickOutsideMock).toBeCalled();
     });
 
-    it("should not call onClickOutside callback when clicking inside the dialog", async () => {
+    it("should not call onClickOutside callback when clicking inside the dialog", () => {
       const onClickOutsideMock = vi.fn();
       renderVisibleDialogOnMount({ onClickOutside: onClickOutsideMock, content: <div>Dialog</div> });
-      const dialog = await screen.findByText("Dialog");
+      act(() => {
+        vi.runAllTimers();
+      });
+      const dialog = screen.getByText("Dialog");
       userEvent.click(dialog);
       expect(onClickOutsideMock).not.toBeCalled();
     });
 
-    it("should call onDialogDidShow callback when dialog is shown", async () => {
+    it("should call onDialogDidShow callback when dialog is shown", () => {
       const onDialogDidShowMock = vi.fn();
       renderVisibleDialogOnMount({
         onDialogDidShow: onDialogDidShowMock,
         content: <div>Dialog</div>,
         shouldCallbackOnMount: true
       });
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
       expect(onDialogDidShowMock).toBeCalled();
     });
 
-    it("should call onDialogDidHide callback when dialog is hidden", async () => {
+    it("should call onDialogDidHide callback when dialog is hidden", () => {
       const onDialogDidHideMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -62,25 +67,32 @@ describe("Dialog tests", () => {
           <button type="button">Toggle</button>
         </Dialog>
       );
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
       const button = within(container).getByText("Toggle");
-      await userEvent.click(button);
-      vi.runAllTimers();
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+      userEvent.click(button);
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onDialogDidHideMock).toBeCalled();
     });
 
-    it("should call onContentClick callback when clicking inside dialog", async () => {
+    it("should call onContentClick callback when clicking inside dialog", () => {
       const onContentClickMock = vi.fn();
       renderVisibleDialogOnMount({ onContentClick: onContentClickMock, content: <div>Dialog Content</div> });
-      const dialog = await screen.findByText("Dialog Content");
-      await userEvent.click(dialog);
+      act(() => {
+        vi.runAllTimers();
+      });
+      const dialog = screen.getByText("Dialog Content");
+      userEvent.click(dialog);
       expect(onContentClickMock).toBeCalled();
     });
   });
 
   describe("Show/Hide Triggers", () => {
-    it("should show dialog on click when showTrigger is click", async () => {
+    it("should show dialog on click when showTrigger is click", () => {
       const { container } = render(
         <Dialog showTrigger={["click"]} content={<div>Dialog Content</div>}>
           <button type="button">Click Me</button>
@@ -90,13 +102,15 @@ describe("Dialog tests", () => {
       expect(screen.queryByText("Dialog Content")).not.toBeInTheDocument();
 
       const button = within(container).getByText("Click Me");
-      await userEvent.click(button);
-      vi.runAllTimers();
+      userEvent.click(button);
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Dialog Content")).toBeInTheDocument());
+      expect(screen.getByText("Dialog Content")).toBeInTheDocument();
     });
 
-    it("should show dialog on mouseenter when showTrigger is mouseenter", async () => {
+    it("should show dialog on mouseenter when showTrigger is mouseenter", () => {
       const { container } = render(
         <Dialog showTrigger={["mouseenter"]} hideTrigger={["mouseleave"]} content={<div>Hover Content</div>}>
           <div>Hover Me</div>
@@ -106,13 +120,15 @@ describe("Dialog tests", () => {
       expect(screen.queryByText("Hover Content")).not.toBeInTheDocument();
 
       const trigger = within(container).getByText("Hover Me");
-      await userEvent.hover(trigger);
-      vi.runAllTimers();
+      userEvent.hover(trigger);
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
+      expect(screen.getByText("Hover Content")).toBeInTheDocument();
     });
 
-    it("should show dialog on focus when showTrigger is focus", async () => {
+    it("should show dialog on focus when showTrigger is focus", () => {
       const { container } = render(
         <Dialog showTrigger={["focus"]} hideTrigger={["blur"]} content={<div>Focus Content</div>}>
           <input placeholder="Focus Me" />
@@ -122,13 +138,15 @@ describe("Dialog tests", () => {
       expect(screen.queryByText("Focus Content")).not.toBeInTheDocument();
 
       const input = within(container).getByPlaceholderText("Focus Me");
-      input.focus();
-      vi.runAllTimers();
+      act(() => {
+        input.focus();
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
+      expect(screen.getByText("Focus Content")).toBeInTheDocument();
     });
 
-    it("should hide dialog on mouseleave when hideTrigger is mouseleave", async () => {
+    it("should hide dialog on mouseleave when hideTrigger is mouseleave", () => {
       const { container } = render(
         <Dialog
           shouldShowOnMount
@@ -139,18 +157,22 @@ describe("Dialog tests", () => {
           <div>Hover Me</div>
         </Dialog>
       );
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Hover Content")).toBeInTheDocument());
+      expect(screen.getByText("Hover Content")).toBeInTheDocument();
 
       const trigger = within(container).getByText("Hover Me");
-      await userEvent.unhover(trigger);
-      vi.runAllTimers();
+      userEvent.unhover(trigger);
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.queryByText("Hover Content")).not.toBeInTheDocument());
+      expect(screen.queryByText("Hover Content")).not.toBeInTheDocument();
     });
 
-    it("should hide dialog on blur when hideTrigger is blur", async () => {
+    it("should hide dialog on blur when hideTrigger is blur", () => {
       const onDialogDidHideMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -165,36 +187,44 @@ describe("Dialog tests", () => {
         </Dialog>
       );
 
-      await waitFor(() => expect(screen.getByText("Focus Content")).toBeInTheDocument());
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(screen.getByText("Focus Content")).toBeInTheDocument();
 
       const input = within(container).getByPlaceholderText("Focus Me");
-      input.focus();
-
-      // Trigger blur by focusing something else
-      await userEvent.tab();
+      act(() => {
+        input.focus();
+        input.blur();
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+      expect(onDialogDidHideMock).toBeCalled();
     });
   });
 
   describe("Keyboard Interactions", () => {
-    it("should hide dialog on Escape key when hideTrigger includes esckey", async () => {
+    it("should hide dialog on Escape key when hideTrigger includes esckey", () => {
       render(
         <Dialog shouldShowOnMount showTrigger={["click"]} hideTrigger={["esckey"]} content={<div>Press Escape</div>}>
           <button type="button">Toggle</button>
         </Dialog>
       );
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Press Escape")).toBeInTheDocument());
+      expect(screen.getByText("Press Escape")).toBeInTheDocument();
 
-      await userEvent.keyboard("{Escape}");
-      vi.runAllTimers();
+      userEvent.keyboard("{Escape}");
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.queryByText("Press Escape")).not.toBeInTheDocument());
+      expect(screen.queryByText("Press Escape")).not.toBeInTheDocument();
     });
 
-    it("should trigger enter event on Enter key", async () => {
+    it("should trigger enter event on Enter key", () => {
       const onDialogDidHideMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -207,21 +237,27 @@ describe("Dialog tests", () => {
           <button type="button">Toggle</button>
         </Dialog>
       );
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Press Enter")).toBeInTheDocument());
+      expect(screen.getByText("Press Enter")).toBeInTheDocument();
 
       const button = within(container).getByText("Toggle");
-      button.focus();
-      await userEvent.keyboard("{Enter}");
-      vi.runAllTimers();
+      act(() => {
+        button.focus();
+      });
+      userEvent.keyboard("{Enter}");
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+      expect(onDialogDidHideMock).toBeCalled();
     });
   });
 
   describe("Delay Behavior", () => {
-    it("should respect showDelay when showing dialog", async () => {
+    it("should respect showDelay when showing dialog", () => {
       const onDialogDidShowMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -235,18 +271,18 @@ describe("Dialog tests", () => {
       );
 
       const button = within(container).getByText("Click");
-      await userEvent.click(button);
+      userEvent.click(button);
 
-      // Should not show immediately
       expect(onDialogDidShowMock).not.toBeCalled();
 
-      // Advance timers by 500ms
-      vi.advanceTimersByTime(500);
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
 
-      await waitFor(() => expect(onDialogDidShowMock).toBeCalled());
+      expect(onDialogDidShowMock).toBeCalled();
     });
 
-    it("should respect hideDelay when hiding dialog", async () => {
+    it("should respect hideDelay when hiding dialog", () => {
       const onDialogDidHideMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -260,21 +296,23 @@ describe("Dialog tests", () => {
           <button type="button">Click</button>
         </Dialog>
       );
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
       const button = within(container).getByText("Click");
-      await userEvent.click(button);
+      userEvent.click(button);
 
-      // Should not hide immediately
       expect(onDialogDidHideMock).not.toBeCalled();
 
-      // Advance timers by 300ms
-      vi.advanceTimersByTime(300);
+      act(() => {
+        vi.advanceTimersByTime(300);
+      });
 
-      await waitFor(() => expect(onDialogDidHideMock).toBeCalled());
+      expect(onDialogDidHideMock).toBeCalled();
     });
 
-    it("should cancel show timeout when hiding is triggered", async () => {
+    it("should cancel show timeout when hiding is triggered", () => {
       const onDialogDidShowMock = vi.fn();
       const { container } = render(
         <Dialog
@@ -290,81 +328,102 @@ describe("Dialog tests", () => {
 
       const trigger = within(container).getByText("Hover Me");
 
-      // Start hovering
-      await userEvent.hover(trigger);
-      vi.advanceTimersByTime(200);
+      userEvent.hover(trigger);
+      act(() => {
+        vi.advanceTimersByTime(200);
+      });
 
-      // Stop hovering before showDelay completes
-      await userEvent.unhover(trigger);
-      vi.runAllTimers();
+      userEvent.unhover(trigger);
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      // Should not have shown
       expect(onDialogDidShowMock).not.toBeCalled();
     });
   });
 
   describe("Controlled Mode", () => {
-    it("should show dialog when open prop is true", async () => {
+    it("should show dialog when open prop is true", () => {
       render(
         <Dialog open={true} content={<div>Controlled Open</div>}>
           <button type="button">Reference</button>
         </Dialog>
       );
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Controlled Open")).toBeInTheDocument());
+      expect(screen.getByText("Controlled Open")).toBeInTheDocument();
     });
 
-    it("should hide dialog when open prop is false", async () => {
+    it("should hide dialog when open prop is false", () => {
       const { rerender } = render(
         <Dialog open={true} content={<div>Controlled</div>}>
           <button type="button">Reference</button>
         </Dialog>
       );
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Controlled")).toBeInTheDocument());
+      expect(screen.getByText("Controlled")).toBeInTheDocument();
 
       rerender(
         <Dialog open={false} content={<div>Controlled</div>}>
           <button type="button">Reference</button>
         </Dialog>
       );
+      act(() => {
+        vi.runAllTimers();
+      });
 
       expect(screen.queryByText("Controlled")).not.toBeInTheDocument();
     });
   });
 
   describe("Positioning", () => {
-    it("should render dialog with top position", async () => {
+    it("should render dialog with top position", () => {
       renderVisibleDialogOnMount({
         position: "top",
         content: <div data-testid="dialog-content">Top Dialog</div>
       });
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      const dialogContent = await screen.findByTestId("dialog-content");
-      expect(dialogContent).toBeInTheDocument();
+      expect(screen.getByTestId("dialog-content")).toBeInTheDocument();
     });
 
-    it("should render dialog with bottom position", async () => {
+    it("should render dialog with bottom position", () => {
       renderVisibleDialogOnMount({ position: "bottom", content: <div>Bottom Dialog</div> });
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Bottom Dialog")).toBeInTheDocument());
+      expect(screen.getByText("Bottom Dialog")).toBeInTheDocument();
     });
 
-    it("should render dialog with left position", async () => {
+    it("should render dialog with left position", () => {
       renderVisibleDialogOnMount({ position: "left", content: <div>Left Dialog</div> });
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Left Dialog")).toBeInTheDocument());
+      expect(screen.getByText("Left Dialog")).toBeInTheDocument();
     });
 
-    it("should render dialog with right position", async () => {
+    it("should render dialog with right position", () => {
       renderVisibleDialogOnMount({ position: "right", content: <div>Right Dialog</div> });
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Right Dialog")).toBeInTheDocument());
+      expect(screen.getByText("Right Dialog")).toBeInTheDocument();
     });
   });
 
   describe("Disable Prop", () => {
-    it("should not show dialog when disable is true", async () => {
+    it("should not show dialog when disable is true", () => {
       const { container } = render(
         <Dialog disable={true} showTrigger={["click"]} content={<div>Disabled Dialog</div>}>
           <button type="button">Click</button>
@@ -372,38 +431,46 @@ describe("Dialog tests", () => {
       );
 
       const button = within(container).getByText("Click");
-      await userEvent.click(button);
-      vi.runAllTimers();
+      userEvent.click(button);
+      act(() => {
+        vi.runAllTimers();
+      });
 
       expect(screen.queryByText("Disabled Dialog")).not.toBeInTheDocument();
     });
   });
 
   describe("Animation", () => {
-    it("should apply expand animation by default", async () => {
+    it("should apply expand animation by default", () => {
       renderVisibleDialogOnMount({ content: <div>Animated</div> });
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Animated")).toBeInTheDocument());
+      expect(screen.getByText("Animated")).toBeInTheDocument();
     });
 
-    it("should apply opacity-and-slide animation when specified", async () => {
+    it("should apply opacity-and-slide animation when specified", () => {
       renderVisibleDialogOnMount({ animationType: "opacity-and-slide", content: <div>Slide Animated</div> });
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("Slide Animated")).toBeInTheDocument());
+      expect(screen.getByText("Slide Animated")).toBeInTheDocument();
     });
 
-    it("should prevent animation on mount when preventAnimationOnMount is true", async () => {
+    it("should prevent animation on mount when preventAnimationOnMount is true", () => {
       renderVisibleDialogOnMount({ preventAnimationOnMount: true, content: <div>No Animation</div> });
-      vi.runAllTimers();
+      act(() => {
+        vi.runAllTimers();
+      });
 
-      await waitFor(() => expect(screen.getByText("No Animation")).toBeInTheDocument());
+      expect(screen.getByText("No Animation")).toBeInTheDocument();
     });
   });
 
   describe("Event Handler Chaining", () => {
-    it("should chain onClick handlers", async () => {
+    it("should chain onClick handlers", () => {
       const dialogOnClickMock = vi.fn();
       const childOnClickMock = vi.fn();
 
@@ -416,13 +483,13 @@ describe("Dialog tests", () => {
       );
 
       const button = within(container).getByText("Click Both");
-      await userEvent.click(button);
+      userEvent.click(button);
 
       expect(dialogOnClickMock).toBeCalled();
       expect(childOnClickMock).toBeCalled();
     });
 
-    it("should chain onMouseEnter handlers", async () => {
+    it("should chain onMouseEnter handlers", () => {
       const dialogOnMouseEnterMock = vi.fn();
       const childOnMouseEnterMock = vi.fn();
 
@@ -433,7 +500,7 @@ describe("Dialog tests", () => {
       );
 
       const trigger = within(container).getByText("Hover");
-      await userEvent.hover(trigger);
+      userEvent.hover(trigger);
 
       expect(dialogOnMouseEnterMock).toBeCalled();
       expect(childOnMouseEnterMock).toBeCalled();
@@ -441,7 +508,7 @@ describe("Dialog tests", () => {
   });
 
   describe("Instant Show and Hide", () => {
-    it("should show and hide instantly when instantShowAndHide is true", async () => {
+    it("should show and hide instantly when instantShowAndHide is true", () => {
       const onDialogDidShowMock = vi.fn();
       const onDialogDidHideMock = vi.fn();
 
@@ -460,12 +527,10 @@ describe("Dialog tests", () => {
 
       const button = within(container).getByText("Toggle");
 
-      // Show
-      await userEvent.click(button);
+      userEvent.click(button);
       expect(onDialogDidShowMock).toBeCalled();
 
-      // Hide
-      await userEvent.click(button);
+      userEvent.click(button);
       expect(onDialogDidHideMock).toBeCalled();
     });
   });
diff --git a/packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts b/packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts
index 68af306698..bfa91c3423 100644
--- a/packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts
+++ b/packages/components/dialog/src/Dialog/__tests__/useDisableScroll.test.ts
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, expect, type MockInstance } from "vitest";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useDisableScroll from "../hooks/useDisableScroll";
 
 describe("useDisableScroll", () => {
diff --git a/packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx b/packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx
index 7ec9e53fe1..68ec87d10e 100644
--- a/packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx
+++ b/packages/components/dialog/src/Dialog/components/Refable/__tests__/Refable.test.tsx
@@ -1,7 +1,6 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { cleanup } from "@testing-library/react-hooks";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, cleanup } from "@testing-library/react";
 import { Refable } from "../Refable";
 
 describe("Refable", () => {
diff --git a/packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts b/packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts
index d79c643547..712049d879 100644
--- a/packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts
+++ b/packages/components/dialog/src/Dialog/hooks/__tests__/useDisableScroll.test.ts
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, expect, type MockInstance } from "vitest";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useDisableScroll from "../useDisableScroll";
 
 describe("useDisableScroll", () => {
diff --git a/packages/components/icon-button/package.json b/packages/components/icon-button/package.json
index 45353d6ac0..39a2d3892c 100644
--- a/packages/components/icon-button/package.json
+++ b/packages/components/icon-button/package.json
@@ -47,11 +47,11 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx b/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
index d2bafd5839..2f5aaf30fe 100644
--- a/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
+++ b/packages/components/icon-button/src/IconButton/__tests__/IconButton.test.tsx
@@ -35,21 +35,21 @@ describe("IconButton tests", () => {
   });
 
   describe("Tooltips", () => {
-    it("should display the tooltip content", async () => {
+    it("should display the tooltip content", () => {
       const tooltipContent = "My Text";
 
       renderComponent({ tooltipContent });
       const component = screen.getByLabelText(ariaLabel);
       act(() => {
         fireEvent.mouseEnter(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
       const content = screen.getByText(tooltipContent);
       expect(content).toBeTruthy();
       act(() => {
         fireEvent.mouseLeave(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
     });
 
     it("should display the tooltip with aria label", () => {
@@ -57,14 +57,14 @@ describe("IconButton tests", () => {
       const component = screen.getByLabelText(ariaLabel);
       act(() => {
         fireEvent.mouseEnter(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
       const content = screen.getByText(ariaLabel);
       expect(content).toBeTruthy();
       act(() => {
         fireEvent.mouseLeave(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
     });
 
     it("should display not disabledReason if disabled is false", () => {
@@ -74,14 +74,14 @@ describe("IconButton tests", () => {
       const component = screen.getByLabelText(ariaLabel);
       act(() => {
         fireEvent.mouseEnter(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
       const content = screen.queryByText(disabledReason);
       expect(content).toBeFalsy();
       act(() => {
         fireEvent.mouseLeave(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
     });
 
     it("should display disabledReason if disabled is true", () => {
@@ -91,14 +91,14 @@ describe("IconButton tests", () => {
       const component = screen.getByLabelText(ariaLabel);
       act(() => {
         fireEvent.mouseEnter(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
       const content = screen.queryByText(disabledReason);
       expect(content).toBeTruthy();
       act(() => {
         fireEvent.mouseLeave(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
     });
   });
 
diff --git a/packages/components/icon/package.json b/packages/components/icon/package.json
index e145354104..e336596cd2 100644
--- a/packages/components/icon/package.json
+++ b/packages/components/icon/package.json
@@ -45,8 +45,8 @@
   },
   "devDependencies": {
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/layer/package.json b/packages/components/layer/package.json
index 909968556e..9a05afabbb 100644
--- a/packages/components/layer/package.json
+++ b/packages/components/layer/package.json
@@ -45,12 +45,12 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
     "@vibe/icons": "4.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/layout/package.json b/packages/components/layout/package.json
index a5541cf9c7..85f34dfd20 100644
--- a/packages/components/layout/package.json
+++ b/packages/components/layout/package.json
@@ -45,11 +45,11 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/loader/package.json b/packages/components/loader/package.json
index 22d614141f..a5f8c3f52c 100644
--- a/packages/components/loader/package.json
+++ b/packages/components/loader/package.json
@@ -42,11 +42,11 @@
     "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index bd4186ee71..62e3364b20 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -47,12 +47,12 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
     "@vibe/icons": "4.1.0",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/components/typography/package.json b/packages/components/typography/package.json
index 06756b7bd7..c850884c99 100644
--- a/packages/components/typography/package.json
+++ b/packages/components/typography/package.json
@@ -45,11 +45,11 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/core/package.json b/packages/core/package.json
index b92f663bb3..863021d9e4 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -113,7 +113,7 @@
     "react-day-picker": "^8.10.2",
     "react-focus-lock": "^2.13.2",
     "react-inlinesvg": "^4.1.3",
-    "react-is": "^16.9.0",
+    "react-is": "^18.2.0",
     "react-remove-scroll": "^2.6.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
@@ -137,7 +137,6 @@
     "@babel/standalone": "^7.24.4",
     "@babel/traverse": "^7.24.4",
     "@babel/types": "^7.24.0",
-    "@hot-loader/react-dom": "^16.13.0",
     "@jest/transform": "^29.7.0",
     "@rollup/plugin-babel": "^6.0.2",
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -167,8 +166,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^8.6.15",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/babel__standalone": "^7.1.7",
     "@types/jest-axe": "^3.5.9",
@@ -176,7 +174,7 @@
     "@types/react-is": "^16.7.5",
     "@types/react-resizable": "^3.0.7",
     "@types/react-syntax-highlighter": "^11.0.5",
-    "@types/react-test-renderer": "^16.9.0",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/react-transition-group": "^4.4.5",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -229,13 +227,13 @@
     "postcss-scss": "^4.0.2",
     "preact": "^10.8.0",
     "prettier": "^2.5.1",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
     "react-live": "^4.1.5",
     "react-resizable": "^3.0.4",
     "react-syntax-highlighter": "^15.5.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.2.0",
     "remark-gfm": "^4.0.0",
     "resolve-url-loader": "^5.0.0",
     "rollup": "^2.79.1",
diff --git a/packages/core/src/components/Avatar/__tests__/Avatar.test.tsx b/packages/core/src/components/Avatar/__tests__/Avatar.test.tsx
index 7edf6bf68d..6e3047ecc5 100644
--- a/packages/core/src/components/Avatar/__tests__/Avatar.test.tsx
+++ b/packages/core/src/components/Avatar/__tests__/Avatar.test.tsx
@@ -1,7 +1,6 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { cleanup } from "@testing-library/react-hooks";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, cleanup } from "@testing-library/react";
 import Avatar, { type AvatarProps } from "../Avatar";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap
index d977871ed4..3806883c13 100644
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__tests__/__snapshots__/BreadcrumbItem.snapshot.test.tsx.snap
@@ -19,9 +19,7 @@ exports[`BreadcrumbsItem renders correctly > when disabled item 1`] = `
       >
         <span
           className="breadcrumbText"
-        >
-          
-        </span>
+        />
       </span>
     </li>
   </ol>
@@ -47,9 +45,7 @@ exports[`BreadcrumbsItem renders correctly > with className 1`] = `
       >
         <span
           className="breadcrumbText"
-        >
-          
-        </span>
+        />
       </span>
     </li>
   </ol>
@@ -76,9 +72,7 @@ exports[`BreadcrumbsItem renders correctly > with current item 1`] = `
       >
         <span
           className="breadcrumbText"
-        >
-          
-        </span>
+        />
       </span>
     </li>
   </ol>
@@ -104,9 +98,7 @@ exports[`BreadcrumbsItem renders correctly > with empty props 1`] = `
       >
         <span
           className="breadcrumbText"
-        >
-          
-        </span>
+        />
       </span>
     </li>
   </ol>
@@ -147,9 +139,7 @@ exports[`BreadcrumbsItem renders correctly > with icon 1`] = `
         </svg>
         <span
           className="breadcrumbText"
-        >
-          
-        </span>
+        />
       </span>
     </li>
   </ol>
diff --git a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx
index 4ed2855059..4b845c1356 100644
--- a/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx
+++ b/packages/core/src/components/BreadcrumbsBar/BreadcrumbMenu/__tests__/BreadcrumbMenu.test.tsx
@@ -1,6 +1,6 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import BreadcrumbsBar from "../../BreadcrumbsBar";
 import BreadcrumbMenu from "../BreadcrumbMenu";
@@ -31,7 +31,7 @@ describe("BreadcrumbMenu tests", () => {
     vi.clearAllMocks();
   });
 
-  it("should open menu when clicked", async () => {
+  it("should open menu when clicked", () => {
     const { getByRole, queryByText } = render(
       <BreadcrumbsBar type="navigation">
         <BreadcrumbMenu>
@@ -50,10 +50,8 @@ describe("BreadcrumbMenu tests", () => {
       vi.runAllTimers();
     });
 
-    await waitFor(() => {
-      expect(screen.getByText("Option 1")).toBeInTheDocument();
-      expect(screen.getByText("Option 2")).toBeInTheDocument();
-    });
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
   });
 
   it("should pass onClick handlers to MenuItem", () => {
diff --git a/packages/core/src/components/Chips/__tests__/__snapshots__/Chips.snapshot.test.tsx.snap b/packages/core/src/components/Chips/__tests__/__snapshots__/Chips.snapshot.test.tsx.snap
index 015e3186ec..8579919fd9 100644
--- a/packages/core/src/components/Chips/__tests__/__snapshots__/Chips.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Chips/__tests__/__snapshots__/Chips.snapshot.test.tsx.snap
@@ -18,9 +18,7 @@ exports[`Chips renders correctly > renders correctly disabled chip 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
 </div>
 `;
 
@@ -69,9 +67,7 @@ exports[`Chips renders correctly > renders correctly with color 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <button
     aria-busy={false}
     aria-disabled={false}
@@ -131,9 +127,7 @@ exports[`Chips renders correctly > renders correctly with empty props 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <button
     aria-busy={false}
     aria-disabled={false}
@@ -217,9 +211,7 @@ exports[`Chips renders correctly > renders correctly with left avatar 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
 </div>
 `;
 
@@ -248,9 +240,7 @@ exports[`Chips renders correctly > renders correctly with left custom renderer 1
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <button
     aria-busy={false}
     aria-disabled={false}
@@ -327,9 +317,7 @@ exports[`Chips renders correctly > renders correctly with left icon 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
 </div>
 `;
 
@@ -351,9 +339,7 @@ exports[`Chips renders correctly > renders correctly with right avatar 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <div
     className="avatar large avatar right"
     data-testid="avatar"
@@ -399,9 +385,7 @@ exports[`Chips renders correctly > renders correctly with right custom renderer
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <div
     className="customRenderer right"
   >
@@ -468,9 +452,7 @@ exports[`Chips renders correctly > renders correctly with right icon 1`] = `
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
   <svg
     aria-hidden={true}
     className="icon icon right noFocusStyle"
@@ -571,8 +553,6 @@ exports[`Chips renders correctly > renders correctly without close button 1`] =
   <div
     className="typography primary start singleLineEllipsis text text2Normal label"
     data-testid="text"
-  >
-    
-  </div>
+  />
 </div>
 `;
diff --git a/packages/core/src/components/ColorPicker/__tests__/ColorPicker.test.tsx b/packages/core/src/components/ColorPicker/__tests__/ColorPicker.test.tsx
index 287d40d300..417d7ebfe5 100644
--- a/packages/core/src/components/ColorPicker/__tests__/ColorPicker.test.tsx
+++ b/packages/core/src/components/ColorPicker/__tests__/ColorPicker.test.tsx
@@ -118,8 +118,8 @@ describe("ColorPicker", () => {
     const component = colorPicker.getByLabelText(colorNameTooltip);
     act(() => {
       fireEvent.mouseOver(component);
+      vi.advanceTimersByTime(1000);
     });
-    vi.advanceTimersByTime(1000);
     const content = screen.getByText(colorNameTooltip);
     expect(content).toBeTruthy();
   });
@@ -133,8 +133,8 @@ describe("ColorPicker", () => {
     const component = colorPicker.getByLabelText(colorNameTooltip);
     act(() => {
       fireEvent.mouseOver(component);
+      vi.advanceTimersByTime(1000);
     });
-    vi.advanceTimersByTime(1000);
     const content = screen.queryByText(colorNameTooltip);
     expect(content).toBeTruthy();
   });
@@ -158,8 +158,8 @@ describe("ColorPicker", () => {
     const component = colorPicker.getByLabelText(contentByColorTooltip);
     act(() => {
       fireEvent.mouseOver(component);
+      vi.advanceTimersByTime(1000);
     });
-    vi.advanceTimersByTime(1000);
     const contentByName = screen.queryByText(colorNameTooltip);
     const expected = screen.getByText(contentByColorTooltip);
 
diff --git a/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx b/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
index ad1b5dbd77..3371c4edad 100644
--- a/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
+++ b/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
@@ -1,6 +1,6 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, screen, waitFor, cleanup } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor, cleanup } from "@testing-library/react";
 import Combobox from "../Combobox";
 
 function clickValueCheckCallback(getByLabelText, onClickMock, labelText, value, numberOfCall = 1) {
@@ -50,23 +50,27 @@ describe("Combobox tests", () => {
       expect(onMouseLeaveMock.mock.calls.length).toBe(1);
     });
 
-    it("should call callback func when noResultsRenderer", async () => {
+    it("should call callback func when noResultsRenderer", () => {
       const noResRendereMock = vi.fn();
       const { getByLabelText } = render(<Combobox noResultsRenderer={noResRendereMock} options={mockOptions} />);
       const input = getByLabelText("Search for content");
       expect(noResRendereMock.mock.calls.length).toBe(0);
       fireEvent.change(input, { target: { value: "No text in option" } });
-      vi.runAllTimers();
-      await waitFor(() => expect(noResRendereMock.mock.calls.length).toBe(1));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(noResRendereMock.mock.calls.length).toBe(1);
     });
 
-    it("should display no results message", async () => {
+    it("should display no results message", () => {
       const noRes = "NO MESSAGE";
       const { getByLabelText } = render(<Combobox options={mockOptions} noResultsMessage={noRes} />);
       const input = getByLabelText("Search for content");
       fireEvent.change(input, { target: { value: "No text in option" } });
-      vi.runAllTimers();
-      await waitFor(() => expect(screen.getByText(noRes)).toBeInstanceOf(Node));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(screen.getByText(noRes)).toBeInstanceOf(Node);
     });
 
     it("should support default filter", async () => {
@@ -82,18 +86,18 @@ describe("Combobox tests", () => {
       expect(orangeOption).toBeTruthy();
     });
 
-    it("should call onAddNew func when add new", async () => {
+    it("should call onAddNew func when add new", () => {
       const onAddMock = vi.fn();
 
       const { getByLabelText } = render(<Combobox onAddNew={onAddMock} options={mockOptions} />);
       const input = getByLabelText("Search for content");
       fireEvent.change(input, { target: { value: "No text in option" } });
-      vi.runAllTimers();
-
-      await waitFor(() => {
-        fireEvent.click(screen.getByText("Add new"));
-        expect(onAddMock.mock.calls.length).toBe(1);
+      act(() => {
+        vi.runAllTimers();
       });
+
+      fireEvent.click(screen.getByText("Add new"));
+      expect(onAddMock.mock.calls.length).toBe(1);
     });
 
     it("should not call onClick for disabled option", () => {
diff --git a/packages/core/src/components/Combobox/__tests__/__snapshots__/Combobox.snapshot.test.tsx.snap b/packages/core/src/components/Combobox/__tests__/__snapshots__/Combobox.snapshot.test.tsx.snap
index b42ae5f61f..71362b4d23 100644
--- a/packages/core/src/components/Combobox/__tests__/__snapshots__/Combobox.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Combobox/__tests__/__snapshots__/Combobox.snapshot.test.tsx.snap
@@ -54,7 +54,6 @@ exports[`Combobox renders correctly > when disabled 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -114,7 +113,6 @@ exports[`Combobox renders correctly > with another noResultsMessage 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -174,7 +172,6 @@ exports[`Combobox renders correctly > with autoFocus 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -234,7 +231,6 @@ exports[`Combobox renders correctly > with className 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -294,7 +290,6 @@ exports[`Combobox renders correctly > with custom search icon 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -355,7 +350,6 @@ exports[`Combobox renders correctly > with divider 1`] = `
         type="search"
         value=""
       />
-      
     </div>
     <div
       className="scrollableContainer optionsContainer"
@@ -520,7 +514,6 @@ exports[`Combobox renders correctly > with divider and colored categories 1`] =
         type="search"
         value=""
       />
-      
     </div>
     <div
       className="scrollableContainer optionsContainer"
@@ -694,7 +687,6 @@ exports[`Combobox renders correctly > with empty props 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -754,7 +746,6 @@ exports[`Combobox renders correctly > with id 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -842,7 +833,6 @@ exports[`Combobox renders correctly > with loading 1`] = `
           />
         </svg>
       </div>
-      
     </div>
   </div>
 </div>
@@ -902,7 +892,6 @@ exports[`Combobox renders correctly > with optionClassName 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -962,7 +951,6 @@ exports[`Combobox renders correctly > with optionLineHeight 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -1023,7 +1011,6 @@ exports[`Combobox renders correctly > with optionRenderer 1`] = `
         type="search"
         value=""
       />
-      
     </div>
     <div
       className="scrollableContainer optionsContainer"
@@ -1141,7 +1128,6 @@ exports[`Combobox renders correctly > with optionsListHeight 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -1201,7 +1187,6 @@ exports[`Combobox renders correctly > with placeholder 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
@@ -1261,7 +1246,6 @@ exports[`Combobox renders correctly > with size 1`] = `
         type="search"
         value=""
       />
-      
     </div>
   </div>
 </div>
diff --git a/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index ee174204e3..dae20cf736 100644
--- a/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -39,12 +39,12 @@ exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
                     >
                       <div
                         aria-activedescendant=""
-                        aria-controls="downshift-0-menu"
+                        aria-controls="downshift-:r0:-menu"
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Month"
                         class="triggerWrapper small"
-                        id="downshift-0-toggle-button"
+                        id="downshift-:r0:-toggle-button"
                         role="combobox"
                         tabindex="0"
                       >
@@ -65,10 +65,10 @@ exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
                         >
                           <button
                             aria-busy="false"
-                            aria-controls="downshift-0-menu"
+                            aria-controls="downshift-:r0:-menu"
                             aria-disabled="false"
                             aria-expanded="false"
-                            aria-labelledby="downshift-0-menu"
+                            aria-labelledby="downshift-:r0:-menu"
                             class="button sizeMedium kindTertiary colorPrimary noSidePadding"
                             data-testid="icon-button"
                             data-vibe="Button"
@@ -114,12 +114,12 @@ exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
                     >
                       <div
                         aria-activedescendant=""
-                        aria-controls="downshift-1-menu"
+                        aria-controls="downshift-:r1:-menu"
                         aria-expanded="false"
                         aria-haspopup="dialog"
                         aria-label="Year"
                         class="triggerWrapper small"
-                        id="downshift-1-toggle-button"
+                        id="downshift-:r1:-toggle-button"
                         role="combobox"
                         tabindex="0"
                       >
@@ -140,10 +140,10 @@ exports[`DatePicker tests > snapshot tests > renders correctly 1`] = `
                         >
                           <button
                             aria-busy="false"
-                            aria-controls="downshift-1-menu"
+                            aria-controls="downshift-:r1:-menu"
                             aria-disabled="false"
                             aria-expanded="false"
-                            aria-labelledby="downshift-1-menu"
+                            aria-labelledby="downshift-:r1:-menu"
                             class="button sizeMedium kindTertiary colorPrimary noSidePadding"
                             data-testid="icon-button"
                             data-vibe="Button"
diff --git a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
index d10921ebbe..75b9fa38c7 100644
--- a/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
+++ b/packages/core/src/components/GridKeyboardNavigationContext/__tests__/GridKeyboardNavigationContext.test.tsx
@@ -1,6 +1,6 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { act, cleanup, renderHook } from "@testing-library/react-hooks";
+import { act, cleanup, renderHook } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NavDirections } from "../../../hooks/useFullKeyboardListeners";
 import { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from "../GridKeyboardNavigationContext";
diff --git a/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap b/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap
index c0870ca5d4..341af7ad0c 100644
--- a/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Label/__tests__/__snapshots__/Label.snapshot.test.tsx.snap
@@ -197,9 +197,7 @@ exports[`Label renders correctly > line > with className 1`] = `
     <span
       className="typography inherit start singleLineEllipsis text text2Normal"
       data-testid="text"
-    >
-      
-    </span>
+    />
     <span
       className="legWrapper"
     />
@@ -279,9 +277,7 @@ exports[`Label renders correctly > with empty props 1`] = `
     <span
       className="typography inherit start singleLineEllipsis text text2Normal"
       data-testid="text"
-    >
-      
-    </span>
+    />
     <span
       className="legWrapper"
     />
diff --git a/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap b/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
index aa6c4842f3..bb875e0093 100644
--- a/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Link/__tests__/__snapshots__/Link.snapshot.test.tsx.snap
@@ -16,9 +16,7 @@ exports[`Link renders correctly > with aria-describedby 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -38,9 +36,7 @@ exports[`Link renders correctly > with aria-label 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -60,9 +56,7 @@ exports[`Link renders correctly > with aria-labelledby 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -82,9 +76,7 @@ exports[`Link renders correctly > with className 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -112,9 +104,7 @@ exports[`Link renders correctly > with icon 1`] = `
   />
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -134,9 +124,7 @@ exports[`Link renders correctly > with id 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
 </a>
 `;
 
@@ -156,9 +144,7 @@ exports[`Link renders correctly > with right icon 1`] = `
 >
   <span
     className="text"
-  >
-    
-  </span>
+  />
   <span
     aria-hidden={true}
     className="icon iconEnd fa fa fa-star"
diff --git a/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx b/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
index f0e09ba32c..9e07af63ba 100644
--- a/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
+++ b/packages/core/src/components/Menu/Menu/__tests__/Menu.test.tsx
@@ -1,8 +1,7 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
 import renderer from "react-test-renderer";
-import { cleanup, fireEvent, render } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { cleanup, fireEvent, render, act } from "@testing-library/react";
 import Menu from "../Menu";
 import MenuItem from "../../MenuItem/MenuItem";
 import MenuTitle from "../../MenuTitle/MenuTitle";
diff --git a/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx b/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
index 12f1cc0ba5..fc86f2f603 100644
--- a/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
+++ b/packages/core/src/components/Menu/Menu/hooks/__tests__/useAdjacentSelectableMenuIndex.test.tsx
@@ -1,6 +1,6 @@
 import type React from "react";
 import { describe, it, expect } from "vitest";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { useAdjacentSelectableMenuIndex } from "../useAdjacentSelectableMenuIndex";
 
 describe("useAdjacentSelectableMenuIndex", () => {
diff --git a/packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx b/packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx
index 4e26f836de..cb635be5d5 100644
--- a/packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx
+++ b/packages/core/src/components/Menu/Menu/hooks/__tests__/useFocusOnMount.test.tsx
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect, type MockedFunction } from "vitest";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import { useFocusOnMount, type UseFocusOnMountProps } from "../useFocusOnMount";
 import { isMenuChildSelectable } from "../../utils/utils";
 import { type ReactElement } from "react";
diff --git a/packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx b/packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx
index 4ec4c6f446..90b9e1a595 100644
--- a/packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx
+++ b/packages/core/src/components/Menu/Menu/hooks/__tests__/useLastNavigationDirection.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NavDirections } from "../../../../../hooks/useFullKeyboardListeners";
 import { useLastNavigationDirection } from "../useLastNavigationDirection";
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts b/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
index f2ab66be51..753a67f925 100644
--- a/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
+++ b/packages/core/src/components/Menu/MenuGridItem/__tests__/useFocusGridItemByActiveStatus.test.ts
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react";
 import { useFocusGridItemByActiveStatus } from "../useFocusGridItemByActiveStatus";
 
 import * as useLastNavigationDirectionModule from "../../Menu/hooks/useLastNavigationDirection";
diff --git a/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts b/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
index 536914b3f5..0b95b8cd4a 100644
--- a/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
+++ b/packages/core/src/components/Menu/MenuGridItem/__tests__/useMenuGridItemNavContext.test.ts
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react";
 import { NavDirections } from "../../../../hooks/useFullKeyboardListeners";
 import * as GridKeyboardNavigationContextModule from "../../../GridKeyboardNavigationContext/GridKeyboardNavigationContext";
 import { useMenuGridItemNavContext } from "../useMenuGridItemNavContext";
diff --git a/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
index eac60a0c29..f8f9dcceab 100644
--- a/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
+++ b/packages/core/src/components/Menu/MenuItem/__tests__/__snapshots__/MenuItem.snapshot.test.tsx.snap
@@ -107,9 +107,7 @@ exports[`Snapshots > renders correctly with custom class name 1`] = `
 >
   <div
     className="title"
-  >
-    
-  </div>
+  />
   <div
     className="container directionRow justifyStart alignCenter"
     style={
@@ -132,9 +130,7 @@ exports[`Snapshots > renders correctly with empty props 1`] = `
 >
   <div
     className="title"
-  >
-    
-  </div>
+  />
   <div
     className="container directionRow justifyStart alignCenter"
     style={
diff --git a/packages/core/src/components/Modal/hooks/useFocusEscapeTargets/__tests__/useFocusEscapeTargets.test.ts b/packages/core/src/components/Modal/hooks/useFocusEscapeTargets/__tests__/useFocusEscapeTargets.test.ts
index bfa8e62b19..fc259c3f33 100644
--- a/packages/core/src/components/Modal/hooks/useFocusEscapeTargets/__tests__/useFocusEscapeTargets.test.ts
+++ b/packages/core/src/components/Modal/hooks/useFocusEscapeTargets/__tests__/useFocusEscapeTargets.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react";
 import { createRef } from "react";
 import useFocusEscapeTargets from "../useFocusEscapeTargets";
 import type { FocusEscapeTarget } from "../useFocusEscapeTargets.types";
diff --git a/packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx b/packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx
index 98cd727179..22fc4f2d22 100644
--- a/packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx
+++ b/packages/core/src/components/MultiStepIndicator/__tests__/MultiStepIndicator.test.tsx
@@ -1,7 +1,6 @@
 import { vi, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { fireEvent, render, act } from "@testing-library/react";
 import MultiStepIndicator from "../MultiStepIndicator";
 import { type Step } from "../MultiStep.types";
 
diff --git a/packages/core/src/components/NumberField/hooks/__tests__/useNumberFieldState.test.ts b/packages/core/src/components/NumberField/hooks/__tests__/useNumberFieldState.test.ts
index b42a8ba80a..6365d0ee91 100644
--- a/packages/core/src/components/NumberField/hooks/__tests__/useNumberFieldState.test.ts
+++ b/packages/core/src/components/NumberField/hooks/__tests__/useNumberFieldState.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import { vi, describe, it, expect } from "vitest";
 import useNumberFieldState, { type UseNumberFieldStateProps } from "../useNumberFieldState";
 
diff --git a/packages/core/src/components/NumberField/hooks/__tests__/useSpinButtonHandlers.test.ts b/packages/core/src/components/NumberField/hooks/__tests__/useSpinButtonHandlers.test.ts
index 330ba6215e..b68a6b82e7 100644
--- a/packages/core/src/components/NumberField/hooks/__tests__/useSpinButtonHandlers.test.ts
+++ b/packages/core/src/components/NumberField/hooks/__tests__/useSpinButtonHandlers.test.ts
@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import { vi, describe, it, expect } from "vitest";
 import useSpinButtonHandlers, { type UseSpinButtonHandlersProps } from "../useSpinButtonHandlers";
 import { createRef } from "react";
diff --git a/packages/core/src/components/RadioButton/__tests__/__snapshots__/RadioButton.snapshot.test.tsx.snap b/packages/core/src/components/RadioButton/__tests__/__snapshots__/RadioButton.snapshot.test.tsx.snap
index aa979d6f9b..54f5b7843a 100644
--- a/packages/core/src/components/RadioButton/__tests__/__snapshots__/RadioButton.snapshot.test.tsx.snap
+++ b/packages/core/src/components/RadioButton/__tests__/__snapshots__/RadioButton.snapshot.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`RadioButton renders correctly > when autoFocus 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -49,7 +48,6 @@ exports[`RadioButton renders correctly > when checked 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -75,7 +73,6 @@ exports[`RadioButton renders correctly > when default checked 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -101,7 +98,6 @@ exports[`RadioButton renders correctly > when disabled 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -127,7 +123,6 @@ exports[`RadioButton renders correctly > when unchecked 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -153,7 +148,6 @@ exports[`RadioButton renders correctly > with className 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -179,7 +173,6 @@ exports[`RadioButton renders correctly > with empty props 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -205,7 +198,6 @@ exports[`RadioButton renders correctly > with name 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
 
@@ -262,6 +254,5 @@ exports[`RadioButton renders correctly > with value 1`] = `
       data-testid="radio-button-control"
     />
   </span>
-  
 </label>
 `;
diff --git a/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx b/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx
index 05e2f1e584..ff47db0873 100644
--- a/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx
+++ b/packages/core/src/components/Slider/__tests__/Slider-non-ranged.test.tsx
@@ -12,121 +12,95 @@ vi.mock("../../TextField/TextField", () => ({
   }
 }));
 
-it("a. Non-ranged Slider: basic renderer", async () => {
-  const { asFragment } = await renderSliderInNonRangeMode();
+it("a. Non-ranged Slider: basic renderer", () => {
+  const { asFragment } = renderSliderInNonRangeMode();
   expect(asFragment().firstChild).toMatchSnapshot();
 });
 
 describe("b. Non-ranged Slider Active/Inactive", () => {
-  it("01. show Tooltip when hover Thumb", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode();
-      userEvent.hover(elThumb);
+  it("01. show Tooltip when hover Thumb", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode();
+    userEvent.hover(elThumb);
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("02. hide Tooltip when unhover Thumb", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode();
-      userEvent.hover(elThumb);
+  it("02. hide Tooltip when unhover Thumb", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode();
+    userEvent.hover(elThumb);
+    act(() => {
       vi.advanceTimersByTime(999);
-      userEvent.unhover(elThumb);
+    });
+    userEvent.unhover(elThumb);
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("03. activate Thumb by Tab key press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment } = await renderSliderInNonRangeMode();
-      userEvent.tab();
+  it("03. activate Thumb by Tab key press", () => {
+    const { asFragment } = renderSliderInNonRangeMode();
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("04. de-activate Thumb by Tab key press, when Thumb focused", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode();
-      elThumb.focus();
-      userEvent.tab();
+  it("04. de-activate Thumb by Tab key press, when Thumb focused", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode();
+    elThumb.focus();
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 });
 
 describe("c. Non-ranged Slider Key Events", () => {
-  it("01. decrease value by Left/Down keys press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });
-      elThumb.focus();
-      userEvent.keyboard("{arrowleft}");
-      userEvent.keyboard("{arrowdown}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("01. decrease value by Left/Down keys press", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode({ showValue: true });
+    elThumb.focus();
+    userEvent.keyboard("{arrowleft}");
+    userEvent.keyboard("{arrowdown}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("02. increase value by Right/Up keys press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });
-      elThumb.focus();
-      userEvent.keyboard("{arrowright}");
-      userEvent.keyboard("{arrowup}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("02. increase value by Right/Up keys press", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode({ showValue: true });
+    elThumb.focus();
+    userEvent.keyboard("{arrowright}");
+    userEvent.keyboard("{arrowup}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("03. decrease value (step 10%) by PageDown key press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });
-      elThumb.focus();
-      userEvent.keyboard("{pagedown}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("03. decrease value (step 10%) by PageDown key press", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode({ showValue: true });
+    elThumb.focus();
+    userEvent.keyboard("{pagedown}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("04. increase value (step 10%) by PageUp key pres", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode({ showValue: true });
-      elThumb.focus();
-      userEvent.keyboard("{pageup}");
-      userEvent.keyboard("{pageup}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("04. increase value (step 10%) by PageUp key pres", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode({ showValue: true });
+    elThumb.focus();
+    userEvent.keyboard("{pageup}");
+    userEvent.keyboard("{pageup}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("05. change value by keys press in Step and Label mode", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumb } = await renderSliderInNonRangeMode({
-        indicateSelection: true,
-        showValue: true,
-        step: 10
-      });
-      elThumb.focus();
-      await userEvent.keyboard("{arrowright}");
-      await userEvent.keyboard("{arrowright}");
-      result = asFragment().firstChild;
+  it("05. change value by keys press in Step and Label mode", () => {
+    const { asFragment, elThumb } = renderSliderInNonRangeMode({
+      indicateSelection: true,
+      showValue: true,
+      step: 10
     });
-    expect(result).toMatchSnapshot();
+    elThumb.focus();
+    userEvent.keyboard("{arrowright}");
+    userEvent.keyboard("{arrowright}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx b/packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx
index 085e07ed95..a4c9b95585 100644
--- a/packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx
+++ b/packages/core/src/components/Slider/__tests__/Slider-ranged.test.tsx
@@ -12,145 +12,117 @@ vi.mock("../../TextField/TextField", () => ({
   }
 }));
 
-it("a. Ranges Slider: basic renderer", async () => {
-  const { asFragment } = await renderSliderInRangeMode();
+it("a. Ranges Slider: basic renderer", () => {
+  const { asFragment } = renderSliderInRangeMode();
   expect(asFragment().firstChild).toMatchSnapshot();
 });
 
 describe("b. Ranges Slider Active/Inactive", () => {
-  it("01. show Tooltip when hover Start Thumb", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbStart } = await renderSliderInRangeMode();
-      userEvent.hover(elThumbStart);
+  it("01. show Tooltip when hover Start Thumb", () => {
+    const { asFragment, elThumbStart } = renderSliderInRangeMode();
+    userEvent.hover(elThumbStart);
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("02. show Tooltip when hover End Thumb", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbEnd } = await renderSliderInRangeMode();
-      userEvent.hover(elThumbEnd);
+  it("02. show Tooltip when hover End Thumb", () => {
+    const { asFragment, elThumbEnd } = renderSliderInRangeMode();
+    userEvent.hover(elThumbEnd);
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("03. hide Tooltip when unhover Thumb", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbStart } = await renderSliderInRangeMode();
-      userEvent.hover(elThumbStart);
+  it("03. hide Tooltip when unhover Thumb", () => {
+    const { asFragment, elThumbStart } = renderSliderInRangeMode();
+    userEvent.hover(elThumbStart);
+    act(() => {
       vi.advanceTimersByTime(999);
-      userEvent.unhover(elThumbStart);
+    });
+    userEvent.unhover(elThumbStart);
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("04. activate Start Thumb by Tab key press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode();
-      userEvent.tab();
+  it("04. activate Start Thumb by Tab key press", () => {
+    const { asFragment } = renderSliderInRangeMode();
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("05. activate End Thumb by Tab key press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment } = await renderSliderInRangeMode();
-      userEvent.tab();
+  it("05. activate End Thumb by Tab key press", () => {
+    const { asFragment } = renderSliderInRangeMode();
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      userEvent.tab();
+    });
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("06. de-activate Thumb by Tab key press, when End Thumb focused", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbEnd } = await renderSliderInRangeMode();
-      elThumbEnd.focus();
-      userEvent.tab();
+  it("06. de-activate Thumb by Tab key press, when End Thumb focused", () => {
+    const { asFragment, elThumbEnd } = renderSliderInRangeMode();
+    elThumbEnd.focus();
+    userEvent.tab();
+    act(() => {
       vi.advanceTimersByTime(999);
-      result = asFragment().firstChild;
     });
-    expect(result).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 });
 
 describe("c. Ranges Slider Key Events", () => {
-  it("01. decrease value by Left/Down keys press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbStart } = await renderSliderInRangeMode({ showValue: true });
-      elThumbStart.focus();
-      userEvent.keyboard("{arrowleft}");
-      userEvent.keyboard("{arrowdown}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("01. decrease value by Left/Down keys press", () => {
+    const { asFragment, elThumbStart } = renderSliderInRangeMode({ showValue: true });
+    elThumbStart.focus();
+    userEvent.keyboard("{arrowleft}");
+    userEvent.keyboard("{arrowdown}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("02. increase value by Right/Up keys press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbEnd } = await renderSliderInRangeMode({ showValue: true });
-      elThumbEnd.focus();
-      userEvent.keyboard("{arrowright}");
-      userEvent.keyboard("{arrowup}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("02. increase value by Right/Up keys press", () => {
+    const { asFragment, elThumbEnd } = renderSliderInRangeMode({ showValue: true });
+    elThumbEnd.focus();
+    userEvent.keyboard("{arrowright}");
+    userEvent.keyboard("{arrowup}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("03. decrease value (step 10%) by PageDown key press", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbEnd } = await renderSliderInRangeMode({ showValue: true });
-      elThumbEnd.focus();
-      userEvent.keyboard("{pagedown}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("03. decrease value (step 10%) by PageDown key press", () => {
+    const { asFragment, elThumbEnd } = renderSliderInRangeMode({ showValue: true });
+    elThumbEnd.focus();
+    userEvent.keyboard("{pagedown}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("04. increase value (step 10%) by PageUp key pres", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbStart } = await renderSliderInRangeMode({ showValue: true });
-      elThumbStart.focus();
-      userEvent.keyboard("{pageup}");
-      userEvent.keyboard("{pageup}");
-      result = asFragment().firstChild;
-    });
-    expect(result).toMatchSnapshot();
+  it("04. increase value (step 10%) by PageUp key pres", () => {
+    const { asFragment, elThumbStart } = renderSliderInRangeMode({ showValue: true });
+    elThumbStart.focus();
+    userEvent.keyboard("{pageup}");
+    userEvent.keyboard("{pageup}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it("05. change value by keys press in Step and Label mode", async () => {
-    let result;
-    await act(async () => {
-      const { asFragment, elThumbStart } = await renderSliderInRangeMode({
-        indicateSelection: true,
-        showValue: true,
-        step: 10
-      });
-      elThumbStart.focus();
-      await userEvent.keyboard("{arrowright}");
-      await userEvent.keyboard("{arrowright}");
-      result = asFragment().firstChild;
+  it("05. change value by keys press in Step and Label mode", () => {
+    const { asFragment, elThumbStart } = renderSliderInRangeMode({
+      indicateSelection: true,
+      showValue: true,
+      step: 10
     });
-    expect(result).toMatchSnapshot();
+    elThumbStart.focus();
+    userEvent.keyboard("{arrowright}");
+    userEvent.keyboard("{arrowright}");
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap
index d7b783c93f..cd860655df 100644
--- a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap
+++ b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.tsx.snap
@@ -361,24 +361,24 @@ exports[`c. Ranges Slider Key Events > 01. decrease value by Left/Down keys pres
       />
       <div
         class="filledTrack"
-        style="left: 23%; width: 42%;"
+        style="left: 0%; width: 65%;"
       />
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="23"
-        aria-valuetext="23%"
+        aria-valuenow="0"
+        aria-valuetext="0%"
         class="thumb small notDisabledThumb"
         data-testid="monday-slider__thumb-0"
         role="slider"
-        style="left: 23%;"
+        style="left: 0%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          23%
+          0%
         </label>
       </div>
       <div
@@ -422,42 +422,42 @@ exports[`c. Ranges Slider Key Events > 02. increase value by Right/Up keys press
       />
       <div
         class="filledTrack"
-        style="left: 25%; width: 42%;"
+        style="left: 0%; width: 66%;"
       />
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="25"
-        aria-valuetext="25%"
+        aria-valuenow="0"
+        aria-valuetext="0%"
         class="thumb small focused notDisabledThumb"
         data-testid="monday-slider__thumb-0"
         role="slider"
-        style="left: 25%;"
+        style="left: 0%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          25%
+          0%
         </label>
       </div>
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="67"
-        aria-valuetext="67%"
+        aria-valuenow="66"
+        aria-valuetext="66%"
         class="thumb small focused notDisabledThumb"
         data-testid="monday-slider__thumb-1"
         role="slider"
-        style="left: 67%;"
+        style="left: 66%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          67%
+          66%
         </label>
       </div>
     </div>
@@ -483,42 +483,42 @@ exports[`c. Ranges Slider Key Events > 03. decrease value (step 10%) by PageDown
       />
       <div
         class="filledTrack"
-        style="left: 25%; width: 30%;"
+        style="left: 0%; width: 65%;"
       />
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="25"
-        aria-valuetext="25%"
+        aria-valuenow="0"
+        aria-valuetext="0%"
         class="thumb small focused notDisabledThumb"
         data-testid="monday-slider__thumb-0"
         role="slider"
-        style="left: 25%;"
+        style="left: 0%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          25%
+          0%
         </label>
       </div>
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="55"
-        aria-valuetext="55%"
+        aria-valuenow="65"
+        aria-valuetext="65%"
         class="thumb small focused notDisabledThumb"
         data-testid="monday-slider__thumb-1"
         role="slider"
-        style="left: 55%;"
+        style="left: 65%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          55%
+          65%
         </label>
       </div>
     </div>
@@ -544,24 +544,24 @@ exports[`c. Ranges Slider Key Events > 04. increase value (step 10%) by PageUp k
       />
       <div
         class="filledTrack"
-        style="left: 45%; width: 20%;"
+        style="left: 10%; width: 55%;"
       />
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="45"
-        aria-valuetext="45%"
+        aria-valuenow="10"
+        aria-valuetext="10%"
         class="thumb small notDisabledThumb"
         data-testid="monday-slider__thumb-0"
         role="slider"
-        style="left: 45%;"
+        style="left: 10%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          45%
+          10%
         </label>
       </div>
       <div
@@ -599,7 +599,7 @@ exports[`c. Ranges Slider Key Events > 05. change value by keys press in Step an
     <div
       data-testid="mock-text-field-comp"
     >
-      {"value":"45%","className":"selectionIndicator"}
+      {"value":"10%","className":"selectionIndicator"}
     </div>
   </div>
   <div
@@ -615,24 +615,24 @@ exports[`c. Ranges Slider Key Events > 05. change value by keys press in Step an
       />
       <div
         class="filledTrack"
-        style="left: 45%; width: 20%;"
+        style="left: 10%; width: 55%;"
       />
       <div
         aria-disabled="false"
         aria-valuemax="100"
         aria-valuemin="0"
-        aria-valuenow="45"
-        aria-valuetext="45%"
+        aria-valuenow="10"
+        aria-valuetext="10%"
         class="thumb small notDisabledThumb"
         data-testid="monday-slider__thumb-0"
         role="slider"
-        style="left: 45%;"
+        style="left: 10%;"
         tabindex="0"
       >
         <label
           class="label colorPrimary positionTop"
         >
-          45%
+          10%
         </label>
       </div>
       <div
diff --git a/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx b/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
index 9b29811050..55da68d98f 100644
--- a/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
+++ b/packages/core/src/components/Slider/__tests__/sliderTestUtils.tsx
@@ -4,25 +4,21 @@ import Slider from "../Slider";
 
 export const SLIDER_LABEL = "my-slider";
 
-export async function renderSliderInNonRangeMode(props = {}) {
+export function renderSliderInNonRangeMode(props = {}) {
   const renderResult = render(<Slider aria-label={SLIDER_LABEL} defaultValue={20} {...props} />);
-  // noinspection JSCheckFunctionSignatures
-  const elThumb = await screen.findByLabelText(SLIDER_LABEL);
+  const elThumb = screen.getByLabelText(SLIDER_LABEL);
   return { ...renderResult, elThumb };
 }
 
-export async function renderSliderInRangeMode(props = {}) {
+export function renderSliderInRangeMode(props = {}) {
   const renderResult = render(<Slider ranged={true} defaultValue={[25, 65]} {...props} />);
-  // noinspection JSCheckFunctionSignatures
-  const elThumbStart = await screen.findByTestId("monday-slider__thumb-0");
-  // noinspection JSCheckFunctionSignatures
-  const elThumbEnd = await screen.findByTestId("monday-slider__thumb-1");
+  const elThumbStart = screen.getByTestId("monday-slider__thumb-0");
+  const elThumbEnd = screen.getByTestId("monday-slider__thumb-1");
   return { ...renderResult, elThumbStart, elThumbEnd };
 }
 
-export async function renderSliderForSnapshots(props, dataTestId = "monday-slider__thumb-0") {
+export function renderSliderForSnapshots(props, dataTestId = "monday-slider__thumb-0") {
   const { asFragment } = render(<Slider {...props} />);
-  // noinspection JSCheckFunctionSignatures
-  await screen.findByTestId(dataTestId);
+  screen.getByTestId(dataTestId);
   return asFragment().firstChild;
 }
diff --git a/packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx b/packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
index 992dc2f4c0..83090a8857 100644
--- a/packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
+++ b/packages/core/src/components/SplitButton/__tests__/SplitButton.test.tsx
@@ -1,6 +1,6 @@
 import { vi, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 import SplitButton from "../SplitButton";
 import userEvent from "@testing-library/user-event";
@@ -44,12 +44,14 @@ const renderComponent = ({ ...props } = {}) => {
 vi.useFakeTimers();
 
 describe("SplitButton tests", () => {
-  it("opens the secondary content dialog on click", async () => {
+  it("opens the secondary content dialog on click", () => {
     const splitButtonComponent = renderComponent();
     const arrowButton = getSecondaryButton(splitButtonComponent);
-    fireEvent.click(arrowButton);
-    vi.runAllTimers();
-    const expectedSecondaryDialog = await screen.findByText(secondaryContentText, {}, { timeout: 10000 });
+    act(() => {
+      fireEvent.click(arrowButton);
+      vi.runAllTimers();
+    });
+    const expectedSecondaryDialog = screen.getByText(secondaryContentText);
     expect(expectedSecondaryDialog).toBeTruthy();
   });
 
@@ -136,7 +138,7 @@ describe("SplitButton tests", () => {
       expect(primaryButtonOnClick.mock.calls.length).toBe(1);
     });
 
-    it("opens the secondary content dialog when enter pressed on secondaryButton", async () => {
+    it("opens the secondary content dialog when enter pressed on secondaryButton", () => {
       const splitButtonComponent = renderComponent();
       const arrowButton = getSecondaryButton(splitButtonComponent);
       act(() => {
@@ -144,13 +146,13 @@ describe("SplitButton tests", () => {
         userEvent.keyboard(ENTER_KEY);
         vi.runAllTimers();
       });
-      const expectedSecondaryDialog = await screen.findByText(secondaryContentText, {});
+      const expectedSecondaryDialog = screen.getByText(secondaryContentText);
       expect(expectedSecondaryDialog).toBeTruthy();
     });
   });
 
   describe("with SplitButtonMenu", () => {
-    it("should focus on first menu item", async () => {
+    it("should focus on first menu item", () => {
       const splitButtonComponent = render(
         <SplitButton secondaryDialogContent={menuSecondaryContent}>{text}</SplitButton>
       );
@@ -158,18 +160,17 @@ describe("SplitButton tests", () => {
       act(() => {
         arrowButton.focus();
         userEvent.keyboard(ENTER_KEY);
+        vi.runAllTimers();
       });
-      vi.runAllTimers();
-      let menu;
-      await waitFor(async () => {
-        menu = await splitButtonComponent.findByTestId(getTestId(ComponentDefaultTestId.MENU, splitMenuId));
-        expect(menu).toBeTruthy();
+      const menu = splitButtonComponent.getByTestId(getTestId(ComponentDefaultTestId.MENU, splitMenuId));
+      expect(menu).toBeTruthy();
+
+      act(() => {
+        vi.runAllTimers();
       });
 
       const firstMenuItemId = `${getTestId(ComponentDefaultTestId.MENU_ITEM)}_0`;
-      await waitFor(() => {
-        expect(splitButtonComponent.getByTestId(firstMenuItemId)).toHaveFocus();
-      });
+      expect(splitButtonComponent.getByTestId(firstMenuItemId)).toHaveFocus();
     });
   });
 });
diff --git a/packages/core/src/components/Steps/__tests__/Steps.test.tsx b/packages/core/src/components/Steps/__tests__/Steps.test.tsx
index 9bd215e2b2..2360de9583 100644
--- a/packages/core/src/components/Steps/__tests__/Steps.test.tsx
+++ b/packages/core/src/components/Steps/__tests__/Steps.test.tsx
@@ -1,7 +1,6 @@
 import { vi, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { fireEvent, render, act } from "@testing-library/react";
 import Steps, { type StepsProps } from "../Steps";
 import { NEXT_TEXT, BACK_TEXT, FINISH_TEXT } from "../StepsConstants";
 
diff --git a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
index 06748f16fb..37c51f9486 100644
--- a/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
+++ b/packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx
@@ -1,7 +1,6 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { render, fireEvent, screen, cleanup } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { render, fireEvent, screen, cleanup, act } from "@testing-library/react";
 import Tab, { type TabProps } from "../Tab";
 
 vi.useFakeTimers();
@@ -39,14 +38,14 @@ describe("Tab tests", () => {
       const component = screen.getByText(text);
       act(() => {
         fireEvent.mouseEnter(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
       const content = screen.getByText(tooltipContent);
       expect(content).toBeTruthy();
       act(() => {
         fireEvent.mouseLeave(component);
+        vi.advanceTimersByTime(1000);
       });
-      vi.advanceTimersByTime(1000);
     });
   });
 
diff --git a/packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx b/packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
index 70bb03c6cb..b4a9139a42 100644
--- a/packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
+++ b/packages/core/src/components/TextField/__tests__/TextField-tests.test.tsx
@@ -1,8 +1,7 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render, cleanup, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, cleanup, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { act } from "@testing-library/react-hooks";
 import TextField from "../TextField";
 
 const TEST_ID = "test-text-field";
@@ -70,7 +69,7 @@ describe("TextField tests", () => {
     expect(ref.current.className).toMatch("input");
   });
 
-  it("should call the debounced function after time passed (fake timers)", async () => {
+  it("should call the debounced function after time passed (fake timers)", () => {
     const { rerender } = inputComponent;
     const debounceTime = 200;
     inputComponent = rerender(
@@ -80,19 +79,17 @@ describe("TextField tests", () => {
     const input = screen.getByPlaceholderText(defaultPlaceHolder);
     userEvent.type(input, value);
     expect(onChangeStub).not.toHaveBeenCalled();
-    vi.advanceTimersByTime(debounceTime + 1);
-    await waitFor(
-      () =>
-        expect(onChangeStub).toHaveBeenCalledWith(
-          value,
-          expect.objectContaining({
-            target: expect.objectContaining({
-              value: value,
-              id: TEST_ID
-            })
-          })
-        ),
-      { timeout: debounceTime }
+    act(() => {
+      vi.advanceTimersByTime(debounceTime + 1);
+    });
+    expect(onChangeStub).toHaveBeenCalledWith(
+      value,
+      expect.objectContaining({
+        target: expect.objectContaining({
+          value: value,
+          id: TEST_ID
+        })
+      })
     );
   });
 
diff --git a/packages/core/src/components/TextWithHighlight/__tests__/__snapshots__/TextWithHighlight.test.tsx.snap b/packages/core/src/components/TextWithHighlight/__tests__/__snapshots__/TextWithHighlight.test.tsx.snap
index 68ca3350d7..78c2bb3c23 100644
--- a/packages/core/src/components/TextWithHighlight/__tests__/__snapshots__/TextWithHighlight.test.tsx.snap
+++ b/packages/core/src/components/TextWithHighlight/__tests__/__snapshots__/TextWithHighlight.test.tsx.snap
@@ -4,7 +4,5 @@ exports[`renders correctly with empty props 1`] = `
 <div
   className="textWithHighlightWrapper withEllipsis"
   data-testid="text-with-highlight"
->
-  
-</div>
+/>
 `;
diff --git a/packages/core/src/components/Tipseen/__tests__/Tipseen.test.tsx b/packages/core/src/components/Tipseen/__tests__/Tipseen.test.tsx
index 7afafe4b87..5ffe6e066a 100644
--- a/packages/core/src/components/Tipseen/__tests__/Tipseen.test.tsx
+++ b/packages/core/src/components/Tipseen/__tests__/Tipseen.test.tsx
@@ -1,7 +1,6 @@
 import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import React from "react";
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { fireEvent, render, waitFor, act } from "@testing-library/react";
 import TipseenContent from "../TipseenContent";
 import Tipseen from "../Tipseen";
 import { DISMISS_BUTTON_TEXT, SUBMIT_BUTTON_TEXT } from "../TipseenConstants";
@@ -59,14 +58,14 @@ describe("Snapshot tests", () => {
       );
       expect(asFragment()).toMatchSnapshot();
     });
-    it("renders correctly with dark close button theme", async () => {
+    it("renders correctly with dark close button theme", () => {
       const { asFragment } = render(
         <Tipseen content="content" showDelay={0} closeButtonTheme="dark">
           {tipseenMockChildren}
         </Tipseen>
       );
-      await waitFor(() => {
-        expect(asFragment()).toBeTruthy();
+      act(() => {
+        vi.runAllTimers();
       });
       expect(asFragment()).toMatchSnapshot();
     });
diff --git a/packages/core/src/components/Toast/__tests__/Toast.test.tsx b/packages/core/src/components/Toast/__tests__/Toast.test.tsx
index 9507b3f5e3..5360e3c093 100644
--- a/packages/core/src/components/Toast/__tests__/Toast.test.tsx
+++ b/packages/core/src/components/Toast/__tests__/Toast.test.tsx
@@ -1,7 +1,6 @@
 import { vi, describe, it, expect } from "vitest";
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
-import { act } from "@testing-library/react-hooks";
+import { fireEvent, render, act } from "@testing-library/react";
 import Toast, { type ToastProps } from "../Toast";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 
diff --git a/packages/core/src/hooks/__tests__/useDebounceEvent.test.ts b/packages/core/src/hooks/__tests__/useDebounceEvent.test.ts
index 3a4e58c1c6..66e36ed34b 100644
--- a/packages/core/src/hooks/__tests__/useDebounceEvent.test.ts
+++ b/packages/core/src/hooks/__tests__/useDebounceEvent.test.ts
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from "vitest";
-import { renderHook, cleanup, act, type RenderHookResult } from "@testing-library/react-hooks";
+import { renderHook, cleanup, act } from "@testing-library/react";
 import useDebounceEvent, { type UseDebounceResult } from "../useDebounceEvent";
 import { type ChangeEvent } from "react";
 
@@ -7,7 +7,7 @@ describe("useDebounceEvent", () => {
   const delay = 0;
   const initialStateValue = "";
   let onChangeCallbackStub: Mock;
-  let hookResult: RenderHookResult<unknown, UseDebounceResult>;
+  let hookResult: ReturnType<typeof renderHook<UseDebounceResult>>;
 
   beforeEach(() => {
     onChangeCallbackStub = vi.fn();
diff --git a/packages/core/src/hooks/__tests__/useEventListener.test.ts b/packages/core/src/hooks/__tests__/useEventListener.test.ts
index 4519e38d83..db502acaa8 100644
--- a/packages/core/src/hooks/__tests__/useEventListener.test.ts
+++ b/packages/core/src/hooks/__tests__/useEventListener.test.ts
@@ -1,6 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from "vitest";
-import { renderHook, cleanup, act } from "@testing-library/react-hooks";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, renderHook, cleanup, act } from "@testing-library/react";
 import useEventListener from "../useEventListener";
 
 describe("useEventListener", () => {
diff --git a/packages/core/src/hooks/__tests__/useKeyEvent.test.ts b/packages/core/src/hooks/__tests__/useKeyEvent.test.ts
index c14b07a620..ba4755901d 100644
--- a/packages/core/src/hooks/__tests__/useKeyEvent.test.ts
+++ b/packages/core/src/hooks/__tests__/useKeyEvent.test.ts
@@ -1,6 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from "vitest";
-import { renderHook, cleanup, act } from "@testing-library/react-hooks";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, renderHook, cleanup, act } from "@testing-library/react";
 import useKeyEvent from "../useKeyEvent";
 
 describe("useKeyEvent", () => {
diff --git a/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts b/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
index 31a8a6140a..7a74040639 100644
--- a/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
+++ b/packages/core/src/hooks/useActiveDescendantListFocus/__tests__/useActiveDescendantListFocus.test.ts
@@ -1,5 +1,5 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
-import { renderHook, cleanup, act } from "@testing-library/react-hooks";
+import { renderHook, cleanup, act } from "@testing-library/react";
 import useActiveDescendantListFocus from "../../useActiveDescendantListFocus";
 import userEvent from "@testing-library/user-event";
 
diff --git a/packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx b/packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx
index aa0e342032..6e6fd6d4fe 100644
--- a/packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx
+++ b/packages/core/src/hooks/useAfterFirstRender/__tests__/useAfterFirstRender.test.tsx
@@ -1,5 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react";
 import useAfterFirstRender from "../";
 
 describe("useAfterFirstRender", () => {
diff --git a/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts b/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
index ee0a892ff5..62a985a4c3 100644
--- a/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
+++ b/packages/core/src/hooks/useGridKeyboardNavigation/__tests__/useGridKeyboardNavigation.test.ts
@@ -1,6 +1,5 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
-import { renderHook, cleanup, act } from "@testing-library/react-hooks";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, renderHook, cleanup, act } from "@testing-library/react";
 import { range } from "es-toolkit";
 import useGridKeyboardNavigation from "../useGridKeyboardNavigation";
 import userEvent from "@testing-library/user-event";
diff --git a/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts b/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
index 31562ba526..3b75a3a400 100644
--- a/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
+++ b/packages/core/src/hooks/useSetFocus/__tests__/useSetFocus.test.ts
@@ -1,5 +1,5 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
-import { act, cleanup, renderHook } from "@testing-library/react-hooks";
+import { act, cleanup, renderHook } from "@testing-library/react";
 import useSetFocus from "../index";
 
 describe("useSetFocus", () => {
diff --git a/packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts b/packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts
index ec867e36cb..e91130359a 100644
--- a/packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts
+++ b/packages/core/src/hooks/useSwitch/__tests__/useSwitch.test.ts
@@ -1,5 +1,5 @@
 import { vi, afterEach, describe, it, expect } from "vitest";
-import { act, cleanup, renderHook, type RenderResult } from "@testing-library/react-hooks";
+import { act, cleanup, renderHook } from "@testing-library/react";
 import useSwitch, { type UseSwitchProps } from "../index";
 import { type ChangeEvent } from "react";
 
@@ -77,10 +77,10 @@ describe("useSwitch", () => {
   });
 
   function renderHookForTest(props?: UseSwitchProps) {
-    return renderHook<UseSwitchProps, ReturnType<typeof useSwitch>>(() => useSwitch(props));
+    return renderHook(() => useSwitch(props));
   }
 
-  function callOnChange(result: RenderResult<ReturnType<typeof useSwitch>>) {
+  function callOnChange(result: { current: ReturnType<typeof useSwitch> }) {
     const mockEvent = {} as ChangeEvent<HTMLInputElement>;
     act(() => {
       result.current.onChange(mockEvent);
diff --git a/packages/core/src/hooks/useWizard/__tests__/useWizard.test.ts b/packages/core/src/hooks/useWizard/__tests__/useWizard.test.ts
index 4bfe54e83a..da9d77e079 100644
--- a/packages/core/src/hooks/useWizard/__tests__/useWizard.test.ts
+++ b/packages/core/src/hooks/useWizard/__tests__/useWizard.test.ts
@@ -1,5 +1,5 @@
 import { vi, describe, it, expect } from "vitest";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react";
 import useWizard from "../useWizard";
 
 describe("useWizard", () => {
diff --git a/packages/docs/package.json b/packages/docs/package.json
index d53dd33fd5..41ae91db6d 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -47,7 +47,6 @@
     "@babel/standalone": "^7.24.4",
     "@babel/types": "^7.24.0",
     "@chromatic-com/storybook": "^3.2.4",
-    "@hot-loader/react-dom": "^16.13.0",
     "@storybook/addon-a11y": "^8.6.15",
     "@storybook/addon-actions": "^8.6.15",
     "@storybook/addon-controls": "^8.6.15",
@@ -73,8 +72,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^8.6.15",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/babel__standalone": "^7.1.7",
     "@types/body-scroll-lock": "^3.1.0",
@@ -84,7 +82,7 @@
     "@types/react-resizable": "^3.0.7",
     "@types/react-select": "^3.1.2",
     "@types/react-syntax-highlighter": "^11.0.5",
-    "@types/react-test-renderer": "^16.9.0",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/react-transition-group": "^4.4.5",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -138,13 +136,13 @@
     "postcss-scss": "^4.0.2",
     "preact": "^10.8.0",
     "prettier": "^2.5.1",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
     "react-live": "^4.1.5",
     "react-resizable": "^3.0.4",
     "react-syntax-highlighter": "^15.5.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.2.0",
     "remark-gfm": "^4.0.0",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.51.0",
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 397d491686..d51febf94f 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -38,13 +38,12 @@
     "es-toolkit": "^1.39.10"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
     "@vibe/config": "4.0.2",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-test-renderer": "16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^5.9.3",
     "vitest": "^1.6.0"
   },
diff --git a/packages/hooks/src/useClickOutside/__tests__/useClickOutside.test.ts b/packages/hooks/src/useClickOutside/__tests__/useClickOutside.test.ts
index a946c7b7a3..e3858bab95 100644
--- a/packages/hooks/src/useClickOutside/__tests__/useClickOutside.test.ts
+++ b/packages/hooks/src/useClickOutside/__tests__/useClickOutside.test.ts
@@ -1,6 +1,5 @@
 import { vi, beforeEach, afterEach, describe, it, expect, type Mock } from "vitest";
-import { renderHook, cleanup, act } from "@testing-library/react-hooks";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, renderHook, cleanup, act } from "@testing-library/react";
 import useClickOutside from "../index";
 
 describe("useClickOutside", () => {
diff --git a/packages/shared/package.json b/packages/shared/package.json
index b12c7860a2..9bf4cea48f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -37,8 +37,8 @@
     "@vibe/config": "4.0.2",
     "@vitejs/plugin-react": "^4.3.1",
     "prettier": "^2.5.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
diff --git a/packages/storybook-blocks/package.json b/packages/storybook-blocks/package.json
index 186a000ab4..ccfa032047 100644
--- a/packages/storybook-blocks/package.json
+++ b/packages/storybook-blocks/package.json
@@ -64,7 +64,7 @@
     "@storybook/addon-links": "^8.6.15",
     "@storybook/react": "^8.6.15",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^14.0.0",
     "@typescript-eslint/eslint-plugin": "^6.2.0",
     "@typescript-eslint/parser": "^6.2.0",
     "autoprefixer": "^10.4.14",
@@ -88,9 +88,9 @@
     "postcss": "^8.4.27",
     "prettier": "^3.0.0",
     "prop-types": "^15.8.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rollup": "^3.26.3",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 825aef62a0..a2b0065944 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2907,16 +2907,6 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@hot-loader/react-dom@^16.13.0":
-  version "16.14.0"
-  resolved "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-16.14.0.tgz#3cfc64e40bb78fa623e59b582b8f09dcdaad648a"
-  integrity sha512-EN9czvcLsMYmSDo5yRKZOAq3ZGRlDpad1gPtX0NdMMomJXcPE3yFSeFzE94X/NjOaiSVimB7LuqPYpkWVaIi4Q==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"
@@ -5573,20 +5563,6 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/dom@^8.0.0":
-  version "8.20.1"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz"
-  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^5.0.1"
-    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"
-
 "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz"
@@ -5656,25 +5632,14 @@
     lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz"
-  integrity sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==
+"@testing-library/react@^14.0.0":
+  version "14.3.1"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-14.3.1.tgz#29513fc3770d6fb75245c4e1245c470e4ffdd830"
+  integrity sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@types/react" ">=16.9.0"
-    "@types/react-dom" ">=16.9.0"
-    "@types/react-test-renderer" ">=16.9.0"
-    react-error-boundary "^3.1.0"
-
-"@testing-library/react@^12.1.2":
-  version "12.1.5"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz"
-  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "<18.0.0"
+    "@testing-library/dom" "^9.0.0"
+    "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@14.5.2":
   version "14.5.2"
@@ -6155,19 +6120,17 @@
   resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
-"@types/react-dom@*", "@types/react-dom@>=16.9.0":
+"@types/react-dom@*":
   version "18.2.22"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz"
   integrity sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@<18.0.0":
-  version "17.0.25"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz"
-  integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==
-  dependencies:
-    "@types/react" "^17"
+"@types/react-dom@^18.0.0":
+  version "18.3.7"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz#b89ddf2cd83b4feafcc4e2ea41afdfb95a0d194f"
+  integrity sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==
 
 "@types/react-is@^16.7.5":
   version "16.7.5"
@@ -6199,19 +6162,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@>=16.9.0":
-  version "18.0.7"
-  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.7.tgz"
-  integrity sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-test-renderer@^16.9.0":
-  version "16.9.12"
-  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.12.tgz"
-  integrity sha512-RJ4jeg32v2h1izOZ3gES/zQhQOwi6BEnZW890pmAuf3yVSfDm0wOR42YiWFiuSJJRyRykNaXEzis74+y3Ac9HQ==
+"@types/react-test-renderer@^18.0.0":
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d"
+  integrity sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==
   dependencies:
-    "@types/react" "^16"
+    "@types/react" "^18"
 
 "@types/react-transition-group@*", "@types/react-transition-group@^4.4.5":
   version "4.4.10"
@@ -6234,7 +6190,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16.9.0", "@types/react@^18.0.25":
+"@types/react@*", "@types/react@^18.0.25":
   version "18.2.69"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.69.tgz"
   integrity sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==
@@ -6252,14 +6208,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17":
-  version "17.0.79"
-  resolved "https://registry.npmjs.org/@types/react/-/react-17.0.79.tgz"
-  integrity sha512-gavKA8AwJAML9zWHuiQRASjrrPJHbT/zrUDHiUGUf+l5a3pkEd6atvjjq+8y2vfRHBJLQJjFpxSa9I8qe9zHAw==
+"@types/react@^18":
+  version "18.3.31"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz#b5e95e28ffcceab8d982f33f2eb076e17653c2a4"
+  integrity sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
+    csstype "^3.2.2"
 
 "@types/readline-sync@^1.4.8":
   version "1.4.8"
@@ -9462,6 +9417,11 @@ csstype@^3.0.2, csstype@^3.1.0:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+csstype@^3.2.2:
+  version "3.2.3"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
+
 cwd@^0.10.0:
   version "0.10.0"
   resolved "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz#172400694057c22a13b0cf16162c7e4b7a7fe567"
@@ -18129,7 +18089,7 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-react-dom@^16.13.0, react-dom@^16.14.0, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
   version "16.14.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz"
   integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
@@ -18139,6 +18099,14 @@ react-dom@^16.13.0, react-dom@^16.14.0, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-dom@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.2"
+
 react-draggable@^4.0.3:
   version "4.4.6"
   resolved "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz"
@@ -18147,13 +18115,6 @@ react-draggable@^4.0.3:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
-react-error-boundary@^3.1.0:
-  version "3.1.4"
-  resolved "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.4.tgz"
-  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 react-fast-compare@^3.0.1:
   version "3.2.2"
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
@@ -18202,7 +18163,12 @@ react-is@18.2.0, react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.6, react-is@^16.9.0:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0, react-is@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -18334,6 +18300,14 @@ react-select@3.1.0:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
+react-shallow-renderer@^16.15.0:
+  version "16.15.0"
+  resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"
@@ -18354,15 +18328,14 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
-react-test-renderer@16, react-test-renderer@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz"
-  integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
+react-test-renderer@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
+  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
   dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.19.1"
+    react-is "^18.3.1"
+    react-shallow-renderer "^16.15.0"
+    scheduler "^0.23.2"
 
 react-transition-group@^4.3.0, react-transition-group@^4.4.5:
   version "4.4.5"
@@ -18436,7 +18409,7 @@ react-with-styles@^4.1.0:
     prop-types "^15.7.2"
     react-with-direction "^1.3.1"
 
-react@^16.13.0, react@^16.14.0, "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+"react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
   version "16.14.0"
   resolved "https://registry.npmjs.org/react/-/react-16.14.0.tgz"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -18445,6 +18418,13 @@ react@^16.13.0, react@^16.14.0, "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
@@ -19315,6 +19295,13 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz"

From 6c12a263a19df5b72cda17f6744b7f2fb716182b Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 28 Jun 2026 15:31:00 +0300
Subject: [PATCH 2/5] fix: revert react-is to ^16.9.0, fix interaction test
 assertions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- react-is is a runtime dependency bundled into output — keep at v16
  to avoid +3.5KB per component (symbols are stable across React versions)
- Wrap interaction test DOM assertions in waitFor() for React 18 batching
---
 packages/core/package.json                               | 2 +-
 .../src/components/Combobox/__tests__/Combobox.test.tsx  | 2 +-
 .../useGridKeyboardNavigationContext.interactions.ts     | 9 ++++++---
 .../useActiveDescendantListFocus.interactions.ts         | 9 ++++++---
 yarn.lock                                                | 2 +-
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 863021d9e4..43073fae6a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -113,7 +113,7 @@
     "react-day-picker": "^8.10.2",
     "react-focus-lock": "^2.13.2",
     "react-inlinesvg": "^4.1.3",
-    "react-is": "^18.2.0",
+    "react-is": "^16.9.0",
     "react-remove-scroll": "^2.6.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
diff --git a/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx b/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
index 3371c4edad..346e3a8b85 100644
--- a/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
+++ b/packages/core/src/components/Combobox/__tests__/Combobox.test.tsx
@@ -1,6 +1,6 @@
 import { vi, beforeEach, afterEach, describe, it, expect } from "vitest";
 import React from "react";
-import { act, fireEvent, render, screen, waitFor, cleanup } from "@testing-library/react";
+import { act, fireEvent, render, screen, cleanup } from "@testing-library/react";
 import Combobox from "../Combobox";
 
 function clickValueCheckCallback(getByLabelText, onClickMock, labelText, value, numberOfCall = 1) {
diff --git a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
index 347e3674d4..a703a81f00 100644
--- a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
+++ b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
@@ -1,4 +1,5 @@
 import { expect } from "@storybook/jest";
+import { waitFor } from "@storybook/test";
 import { getByText, interactionSuite, clickElement, typeMultipleTimes, resetFocus } from "@vibe/core/interactionsTests";
 
 //NOTE: this test may fail if it runs when the storybook page isn't focused. (For example, during an HMR refresh without focusing the storybook tab)
@@ -39,7 +40,9 @@ export const useGridContextMultipleDepthsPlaySuite = interactionSuite({
 });
 
 async function assertElementWithTextToBeActive(text) {
-  const activeElements = document.getElementsByClassName("active-item");
-  expect(activeElements).toHaveLength(1);
-  expect(activeElements[0]).toHaveTextContent(text);
+  await waitFor(() => {
+    const activeElements = document.getElementsByClassName("active-item");
+    expect(activeElements).toHaveLength(1);
+    expect(activeElements[0]).toHaveTextContent(text);
+  });
 }
diff --git a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
index cf1624e839..880c56f4f2 100644
--- a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
+++ b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
@@ -1,4 +1,5 @@
 import { expect } from "@storybook/jest";
+import { waitFor } from "@storybook/test";
 import {
   getByTestId,
   interactionSuite,
@@ -24,9 +25,11 @@ async function expectElementToBeNaturallyFocused(element) {
   expect(document.activeElement).toEqual(element);
 }
 async function expectElementVisuallyFocusedByText(text) {
-  const activeElements = document.getElementsByClassName(styles.visualFocus);
-  expect(activeElements).toHaveLength(1);
-  expect(activeElements[0]).toHaveTextContent(text);
+  await waitFor(() => {
+    const activeElements = document.getElementsByClassName(styles.visualFocus);
+    expect(activeElements).toHaveLength(1);
+    expect(activeElements[0]).toHaveTextContent(text);
+  });
 }
 
 async function keyboardNavAndFocusForVerticalList(canvas) {
diff --git a/yarn.lock b/yarn.lock
index a2b0065944..d2cc03450f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18163,7 +18163,7 @@ react-is@18.2.0, react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0, react-is@^18.3.1:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.3.1:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==

From 3459582123a785717a0744f971616de16f861e8b Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 28 Jun 2026 16:17:45 +0300
Subject: [PATCH 3/5] fix: use @storybook/test for waitFor in interaction tests

Import expect and waitFor from @storybook/test (unified module) instead
of separate @storybook/jest import.
---
 .../useGridKeyboardNavigationContext.interactions.ts           | 3 +--
 .../useActiveDescendantListFocus.interactions.ts               | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
index a703a81f00..fa210adf1c 100644
--- a/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
+++ b/packages/docs/src/pages/components/GridKeyboardNavigationContext/useGridKeyboardNavigationContext.interactions.ts
@@ -1,5 +1,4 @@
-import { expect } from "@storybook/jest";
-import { waitFor } from "@storybook/test";
+import { expect, waitFor } from "@storybook/test";
 import { getByText, interactionSuite, clickElement, typeMultipleTimes, resetFocus } from "@vibe/core/interactionsTests";
 
 //NOTE: this test may fail if it runs when the storybook page isn't focused. (For example, during an HMR refresh without focusing the storybook tab)
diff --git a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
index 880c56f4f2..54e2b91270 100644
--- a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
+++ b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
@@ -1,5 +1,4 @@
-import { expect } from "@storybook/jest";
-import { waitFor } from "@storybook/test";
+import { expect, waitFor } from "@storybook/test";
 import {
   getByTestId,
   interactionSuite,

From 7b8d1569a70276c6f70e85182add4d37efdc6d06 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 28 Jun 2026 17:06:43 +0300
Subject: [PATCH 4/5] fix: focus input element in useActiveDescendantListFocus
 interaction test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hook checks document.activeElement against focusedElementRef.current
(the inner input). The test was focusing the Search wrapper div found by
test-id, which doesn't match — causing the hook to early-return without
updating visual focus.
---
 .../useActiveDescendantListFocus.interactions.ts               | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
index 54e2b91270..ea401bf8d3 100644
--- a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
+++ b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
@@ -17,7 +17,8 @@ export const overviewInteractionSuite = interactionSuite({
 });
 
 async function getSearchElement(canvas) {
-  return await getByTestId(canvas, getTestId(ComponentDefaultTestId.SEARCH));
+  const searchWrapper = await getByTestId(canvas, getTestId(ComponentDefaultTestId.SEARCH));
+  return searchWrapper.querySelector("input") || searchWrapper;
 }
 
 async function expectElementToBeNaturallyFocused(element) {

From c9caf40fcc1c1ce1225bbf3768889801dccc35c6 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Sun, 28 Jun 2026 17:48:51 +0300
Subject: [PATCH 5/5] fix: use userEvent.tab() for focus in interaction test

userEvent.keyboard() dispatches events based on user-event's internal
focus tracking, not document.activeElement. Calling element.focus()
directly doesn't update that tracking, so keyboard events were
dispatched on the wrong element. Using userEvent.tab() properly updates
both browser focus and user-event's tracked focus target.
---
 ...eActiveDescendantListFocus.interactions.ts | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
index ea401bf8d3..99707b7e5b 100644
--- a/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
+++ b/packages/docs/src/pages/hooks/useActiveDescendantListFocus/useActiveDescendantListFocus.interactions.ts
@@ -1,4 +1,4 @@
-import { expect, waitFor } from "@storybook/test";
+import { expect, userEvent, waitFor } from "@storybook/test";
 import {
   getByTestId,
   interactionSuite,
@@ -17,13 +17,15 @@ export const overviewInteractionSuite = interactionSuite({
 });
 
 async function getSearchElement(canvas) {
-  const searchWrapper = await getByTestId(canvas, getTestId(ComponentDefaultTestId.SEARCH));
-  return searchWrapper.querySelector("input") || searchWrapper;
+  return await getByTestId(canvas, getTestId(ComponentDefaultTestId.SEARCH));
 }
 
 async function expectElementToBeNaturallyFocused(element) {
-  expect(document.activeElement).toEqual(element);
+  await waitFor(() => {
+    expect(document.activeElement).toEqual(element);
+  });
 }
+
 async function expectElementVisuallyFocusedByText(text) {
   await waitFor(() => {
     const activeElements = document.getElementsByClassName(styles.visualFocus);
@@ -35,29 +37,25 @@ async function expectElementVisuallyFocusedByText(text) {
 async function keyboardNavAndFocusForVerticalList(canvas) {
   const element = await getSearchElement(canvas);
 
-  // set focus on the list's element which in charge on natural focus element
-  element.focus();
-  // move visual focus to first item
+  await userEvent.tab();
+  await expectElementToBeNaturallyFocused(element);
+
   await pressNavigationKey(NavigationCommand.DOWN_ARROW);
   await expectElementVisuallyFocusedByText("Item 1");
   await expectElementToBeNaturallyFocused(element);
 
-  // move visual focus to second item
   await pressNavigationKey(NavigationCommand.DOWN_ARROW);
   await expectElementVisuallyFocusedByText("Item 2");
   await expectElementToBeNaturallyFocused(element);
 
-  // move visual focus to first item again
   await pressNavigationKey(NavigationCommand.UP_ARROW);
   await expectElementVisuallyFocusedByText("Item 1");
   await expectElementToBeNaturallyFocused(element);
 
-  // move to last item by press up keyboard button
   await pressNavigationKey(NavigationCommand.UP_ARROW);
   await expectElementVisuallyFocusedByText("Item 3");
   await expectElementToBeNaturallyFocused(element);
 
-  // move to first item again by press down keyboard button while visual focus is on the last item
   await pressNavigationKey(NavigationCommand.DOWN_ARROW);
   await expectElementVisuallyFocusedByText("Item 1");
   await expectElementToBeNaturallyFocused(element);