From 1cce87ed010166b4d1c9824daf52dc5342251a1b Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:47:40 +0200
Subject: [PATCH] chore(deps): use testing-library instead of
 react-test-renderer

---
 package.json                                  |    4 +-
 .../button/__test__/Button.test.tsx           |   23 +-
 .../__snapshots__/Button.test.tsx.snap        | 1085 ++++++++++++++---
 .../__test__/RadioButton.test.tsx             |    9 +-
 .../__snapshots__/RadioButton.test.tsx.snap   |  436 +++++--
 .../spinner/__test__/Spinner.test.tsx         |    4 +-
 .../__snapshots__/Spinner.test.tsx.snap       |  127 +-
 .../switch/__test__/Switch.test.tsx           |   25 +-
 .../__snapshots__/Switch.test.tsx.snap        |  792 ++++++++----
 yarn.lock                                     |   52 +-
 10 files changed, 2025 insertions(+), 532 deletions(-)

diff --git a/package.json b/package.json
index 8bf5fa5..eca52fd 100644
--- a/package.json
+++ b/package.json
@@ -32,9 +32,12 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/test": "^8.0.4",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-istanbul": "^1.4.0",
@@ -51,7 +54,6 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
     "react": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
     "sass": "^1.72.0",
     "storybook": "^8.0.4",
     "tailwindcss": "^3.4.1",
diff --git a/src/components/button/__test__/Button.test.tsx b/src/components/button/__test__/Button.test.tsx
index df6a1ab..b1a5b20 100644
--- a/src/components/button/__test__/Button.test.tsx
+++ b/src/components/button/__test__/Button.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Button } from '../Button';
-import renderer from 'react-test-renderer';
 
 describe('Button component', () => {
   it('Button onClick should be called correctly', () => {
@@ -14,57 +13,57 @@ describe('Button component', () => {
   });
 
   it('Primary button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary">Primary</Button>).toJSON();
+    const button = render(<Button variant="primary">Primary</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Secondary button should render correctly', () => {
-    const button = renderer.create(<Button variant="secondary">Secondary</Button>).toJSON();
+    const button = render(<Button variant="secondary">Secondary</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Ghost button should render correctly', () => {
-    const button = renderer.create(<Button variant="ghost">Ghost</Button>).toJSON();
+    const button = render(<Button variant="ghost">Ghost</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Destructive button should render correctly', () => {
-    const button = renderer.create(<Button variant="destructive">Destructive</Button>).toJSON();
+    const button = render(<Button variant="destructive">Destructive</Button>);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" disabled />).toJSON();
+    const button = render(<Button variant="primary" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Secondary disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="secondary" disabled />).toJSON();
+    const button = render(<Button variant="secondary" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Ghost disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="ghost" disabled />).toJSON();
+    const button = render(<Button variant="ghost" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Destructive disabled button should render correctly', () => {
-    const button = renderer.create(<Button variant="destructive" disabled />).toJSON();
+    const button = render(<Button variant="destructive" disabled />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary medium button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" size="medium" />).toJSON();
+    const button = render(<Button variant="primary" size="medium" />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary loading button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" loading />).toJSON();
+    const button = render(<Button variant="primary" loading />);
     expect(button).toMatchSnapshot();
   });
 
   it('Primary submit button should render correctly', () => {
-    const button = renderer.create(<Button variant="primary" type="submit" />).toJSON();
+    const button = render(<Button variant="primary" type="submit" />);
     expect(button).toMatchSnapshot();
   });
 });
diff --git a/src/components/button/__test__/__snapshots__/Button.test.tsx.snap b/src/components/button/__test__/__snapshots__/Button.test.tsx.snap
index bb64263..1407d77 100644
--- a/src/components/button/__test__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/button/__test__/__snapshots__/Button.test.tsx.snap
@@ -1,213 +1,1008 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button component > Destructive button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-red active:bg-red-dark text-white shadow-sm "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  >
-    Destructive
-  </div>
-</button>
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        >
+          Destructive
+        </div>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-red active:bg-red-dark text-white shadow-sm "
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      >
+        Destructive
+      </div>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Destructive disabled button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-gray-30 text-white shadow-sm "
-  disabled={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+        disabled=""
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-gray-30 text-white shadow-sm "
+      disabled=""
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Ghost button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10 "
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        >
+          Ghost
+        </div>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 hover:bg-gray-5 active:bg-gray-10 focus-visible:bg-gray-10 "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  >
-    Ghost
-  </div>
-</button>
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      >
+        Ghost
+      </div>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Ghost disabled button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 text-gray-30 "
-  disabled={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+        disabled=""
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 text-gray-30 "
+      disabled=""
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Primary button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        >
+          Primary
+        </div>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  >
-    Primary
-  </div>
-</button>
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      >
+        Primary
+      </div>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Primary disabled button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-gray-30 text-white shadow-sm "
+        disabled=""
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-gray-30 text-white shadow-sm "
-  disabled={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+      disabled=""
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Primary loading button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-primary-dark active:bg-primary-dark text-white shadow-sm "
+        disabled=""
+        type="button"
+      >
+        <svg
+          class="animate-spin "
+          fill="none"
+          height="18"
+          viewBox="0 0 24 24"
+          width="18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          />
+          <path
+            class="opacity-75"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
+              3 7.938l3-2.647z"
+            fill="currentColor"
+          />
+        </svg>
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-primary-dark active:bg-primary-dark text-white shadow-sm "
-  disabled={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <svg
-    className="animate-spin "
-    fill="none"
-    height={18}
-    viewBox="0 0 24 24"
-    width={18}
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      className="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      strokeWidth="4"
-    />
-    <path
-      className="opacity-75"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
+      disabled=""
+      type="button"
+    >
+      <svg
+        class="animate-spin "
+        fill="none"
+        height="18"
+        viewBox="0 0 24 24"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
               3 7.938l3-2.647z"
-      fill="currentColor"
-    />
-  </svg>
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+          fill="currentColor"
+        />
+      </svg>
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Primary medium button should render correctly 1`] = `
-<button
-  className="h-8 px-3.5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-8 px-3.5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-8 px-3.5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Primary submit button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="submit"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+        type="submit"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-primary active:bg-primary-dark text-white shadow-sm "
+      type="submit"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Secondary button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-surface dark:bg-gray-5 border border-gray-10 hover:border-gray-20 active:bg-gray-1 dark:active:bg-gray-10 text-gray-80 shadow-sm "
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        >
+          Secondary
+        </div>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-surface dark:bg-gray-5 border border-gray-10 hover:border-gray-20 active:bg-gray-1 dark:active:bg-gray-10 text-gray-80 shadow-sm "
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  >
-    Secondary
-  </div>
-</button>
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      >
+        Secondary
+      </div>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Button component > Secondary disabled button should render correctly 1`] = `
-<button
-  className="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
+      whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
+      ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
+      focus-visible:ring-primary/50 bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm "
+        disabled=""
+        type="button"
+      >
+        <div
+          class="flex items-center justify-center space-x-2"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="h-10 px-5 relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 
       whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 
       ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out 
       focus-visible:ring-primary/50 bg-surface dark:bg-gray-5 text-gray-30 border border-gray-5 shadow-sm "
-  disabled={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  type="button"
->
-  <div
-    className="flex items-center justify-center space-x-2"
-  />
-</button>
+      disabled=""
+      type="button"
+    >
+      <div
+        class="flex items-center justify-center space-x-2"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/src/components/radio-button/__test__/RadioButton.test.tsx b/src/components/radio-button/__test__/RadioButton.test.tsx
index e05ce76..5c34dd1 100644
--- a/src/components/radio-button/__test__/RadioButton.test.tsx
+++ b/src/components/radio-button/__test__/RadioButton.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { RadioButton } from '../RadioButton';
-import renderer from 'react-test-renderer';
 
 describe('Radio Button component', () => {
   it('Radio button onClick should work correctly', () => {
@@ -15,22 +14,22 @@ describe('Radio Button component', () => {
   });
 
   it('Radio Button component should render correctly', () => {
-    const radioButton = renderer.create(<RadioButton checked={false} onClick={() => undefined} />).toJSON();
+    const radioButton = render(<RadioButton checked={false} onClick={() => undefined} />);
     expect(radioButton).toMatchSnapshot();
   });
 
   it('Checked Radio Button component should render correctly', () => {
-    const radioButton = renderer.create(<RadioButton checked onClick={() => undefined} />).toJSON();
+    const radioButton = render(<RadioButton checked onClick={() => undefined} />);
     expect(radioButton).toMatchSnapshot();
   });
 
   it('Disabled Radio Button component should render correctly', () => {
-    const radioButton = renderer.create(<RadioButton disabled checked={false} onClick={() => undefined} />).toJSON();
+    const radioButton = render(<RadioButton disabled checked={false} onClick={() => undefined} />);
     expect(radioButton).toMatchSnapshot();
   });
 
   it('Disabled and Checked Radio Button component should render correctly', () => {
-    const radioButton = renderer.create(<RadioButton disabled checked={false} onClick={() => undefined} />).toJSON();
+    const radioButton = render(<RadioButton disabled checked={false} onClick={() => undefined} />);
     expect(radioButton).toMatchSnapshot();
   });
 });
diff --git a/src/components/radio-button/__test__/__snapshots__/RadioButton.test.tsx.snap b/src/components/radio-button/__test__/__snapshots__/RadioButton.test.tsx.snap
index 878d065..f218b7f 100644
--- a/src/components/radio-button/__test__/__snapshots__/RadioButton.test.tsx.snap
+++ b/src/components/radio-button/__test__/__snapshots__/RadioButton.test.tsx.snap
@@ -1,85 +1,385 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio Button component > Checked Radio Button component should render correctly 1`] = `
-<div
-  className="flex cursor-pointer"
->
-  <button
-    className="flex h-5 w-5 items-center justify-center rounded-full border border-0 bg-primary active:bg-primary-dark border-gray-40"
-    disabled={false}
-    onClick={[Function]}
-  >
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex cursor-pointer"
+      >
+        <button
+          class="flex h-5 w-5 items-center justify-center rounded-full border border-0 bg-primary active:bg-primary-dark border-gray-40"
+        >
+          <div
+            class="h-2.5 w-2.5 rounded-full bg-white"
+          />
+        </button>
+        <input
+          checked=""
+          class="h-0 w-0 appearance-none opacity-0"
+          type="radio"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
-      className="h-2.5 w-2.5 rounded-full bg-white"
-    />
-  </button>
-  <input
-    checked={true}
-    className="h-0 w-0 appearance-none opacity-0"
-    type="radio"
-  />
-</div>
+      class="flex cursor-pointer"
+    >
+      <button
+        class="flex h-5 w-5 items-center justify-center rounded-full border border-0 bg-primary active:bg-primary-dark border-gray-40"
+      >
+        <div
+          class="h-2.5 w-2.5 rounded-full bg-white"
+        />
+      </button>
+      <input
+        checked=""
+        class="h-0 w-0 appearance-none opacity-0"
+        type="radio"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Radio Button component > Disabled Radio Button component should render correctly 1`] = `
-<div
-  className="flex cursor-pointer"
->
-  <button
-    className="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
-    disabled={true}
-    onClick={[Function]}
-  >
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex cursor-pointer"
+      >
+        <button
+          class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
+          disabled=""
+        >
+          <div
+            class="h-2.5 w-2.5 rounded-full bg-white"
+          />
+        </button>
+        <input
+          checked=""
+          class="h-0 w-0 appearance-none opacity-0"
+          type="radio"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
-      className="h-2.5 w-2.5 rounded-full bg-white"
-    />
-  </button>
-  <input
-    checked={true}
-    className="h-0 w-0 appearance-none opacity-0"
-    type="radio"
-  />
-</div>
+      class="flex cursor-pointer"
+    >
+      <button
+        class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
+        disabled=""
+      >
+        <div
+          class="h-2.5 w-2.5 rounded-full bg-white"
+        />
+      </button>
+      <input
+        checked=""
+        class="h-0 w-0 appearance-none opacity-0"
+        type="radio"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Radio Button component > Disabled and Checked Radio Button component should render correctly 1`] = `
-<div
-  className="flex cursor-pointer"
->
-  <button
-    className="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
-    disabled={true}
-    onClick={[Function]}
-  >
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex cursor-pointer"
+      >
+        <button
+          class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
+          disabled=""
+        >
+          <div
+            class="h-2.5 w-2.5 rounded-full bg-white"
+          />
+        </button>
+        <input
+          checked=""
+          class="h-0 w-0 appearance-none opacity-0"
+          type="radio"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
-      className="h-2.5 w-2.5 rounded-full bg-white"
-    />
-  </button>
-  <input
-    checked={true}
-    className="h-0 w-0 appearance-none opacity-0"
-    type="radio"
-  />
-</div>
+      class="flex cursor-pointer"
+    >
+      <button
+        class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-10"
+        disabled=""
+      >
+        <div
+          class="h-2.5 w-2.5 rounded-full bg-white"
+        />
+      </button>
+      <input
+        checked=""
+        class="h-0 w-0 appearance-none opacity-0"
+        type="radio"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Radio Button component > Radio Button component should render correctly 1`] = `
-<div
-  className="flex cursor-pointer"
->
-  <button
-    className="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-40"
-    disabled={false}
-    onClick={[Function]}
-  >
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="flex cursor-pointer"
+      >
+        <button
+          class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-40"
+        >
+          <div
+            class="h-2.5 w-2.5 rounded-full hover:bg-gray-10"
+          />
+        </button>
+        <input
+          checked=""
+          class="h-0 w-0 appearance-none opacity-0"
+          type="radio"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
-      className="h-2.5 w-2.5 rounded-full hover:bg-gray-10"
-    />
-  </button>
-  <input
-    checked={true}
-    className="h-0 w-0 appearance-none opacity-0"
-    type="radio"
-  />
-</div>
+      class="flex cursor-pointer"
+    >
+      <button
+        class="flex h-5 w-5 items-center justify-center rounded-full border false border-gray-40"
+      >
+        <div
+          class="h-2.5 w-2.5 rounded-full hover:bg-gray-10"
+        />
+      </button>
+      <input
+        checked=""
+        class="h-0 w-0 appearance-none opacity-0"
+        type="radio"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/src/components/spinner/__test__/Spinner.test.tsx b/src/components/spinner/__test__/Spinner.test.tsx
index 668c4e2..11f8d36 100644
--- a/src/components/spinner/__test__/Spinner.test.tsx
+++ b/src/components/spinner/__test__/Spinner.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 import Spinner from '../Spinner';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 describe('Spinner component', () => {
   it('Primary button should render correctly', () => {
-    const spinner = renderer.create(<Spinner size={20} />).toJSON();
+    const spinner = render(<Spinner size={20} />);
     expect(spinner).toMatchSnapshot();
   });
 });
diff --git a/src/components/spinner/__test__/__snapshots__/Spinner.test.tsx.snap b/src/components/spinner/__test__/__snapshots__/Spinner.test.tsx.snap
index b4ec1c3..af91d36 100644
--- a/src/components/spinner/__test__/__snapshots__/Spinner.test.tsx.snap
+++ b/src/components/spinner/__test__/__snapshots__/Spinner.test.tsx.snap
@@ -1,27 +1,110 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Spinner component > Primary button should render correctly 1`] = `
-<svg
-  className="animate-spin "
-  fill="none"
-  height={20}
-  viewBox="0 0 24 24"
-  width={20}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <circle
-    className="opacity-25"
-    cx="12"
-    cy="12"
-    r="10"
-    stroke="currentColor"
-    strokeWidth="4"
-  />
-  <path
-    className="opacity-75"
-    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <svg
+        class="animate-spin "
+        fill="none"
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
               3 7.938l3-2.647z"
-    fill="currentColor"
-  />
-</svg>
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  </body>,
+  "container": <div>
+    <svg
+      class="animate-spin "
+      fill="none"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824
+              3 7.938l3-2.647z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/src/components/switch/__test__/Switch.test.tsx b/src/components/switch/__test__/Switch.test.tsx
index 756f502..ecb7581 100644
--- a/src/components/switch/__test__/Switch.test.tsx
+++ b/src/components/switch/__test__/Switch.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import renderer from 'react-test-renderer';
 import { SwitchComponent } from '../Switch';
 
 describe('Switch component', () => {
@@ -15,47 +14,51 @@ describe('Switch component', () => {
   });
 
   it('Switch onCheckedChange should be called with the correct value', async () => {
-    const onCheckedChangeMock = vi.fn(); // Crea un mock para onCheckedChange
+    const onCheckedChangeMock = vi.fn();
     render(<SwitchComponent size="md" onCheckedChange={onCheckedChangeMock} />);
 
     const switchComponent = screen.getByTestId('switch');
 
-    await userEvent.click(switchComponent);
+    await act(async () => {
+      await userEvent.click(switchComponent);
+    });
 
     expect(onCheckedChangeMock).toHaveBeenCalledWith(true);
 
-    await userEvent.click(switchComponent);
+    await act(async () => {
+      await userEvent.click(switchComponent);
+    });
 
     expect(onCheckedChangeMock).toHaveBeenCalledWith(false);
   });
 
   it('Medium switch should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent size="md" />).toJSON();
+    const switchComponent = render(<SwitchComponent size="md" />);
     expect(switchComponent).toMatchSnapshot();
   });
 
   it('Medium switch disabled should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent disabled size="md" />).toJSON();
+    const switchComponent = render(<SwitchComponent disabled size="md" />);
     expect(switchComponent).toMatchSnapshot();
   });
 
   it('Large switch should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent size="lg" />).toJSON();
+    const switchComponent = render(<SwitchComponent size="lg" />);
     expect(switchComponent).toMatchSnapshot();
   });
 
   it('Large switch disabled should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent disabled size="lg" />).toJSON();
+    const switchComponent = render(<SwitchComponent disabled size="lg" />);
     expect(switchComponent).toMatchSnapshot();
   });
 
   it('Extra Large switch should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent size="xl" />).toJSON();
+    const switchComponent = render(<SwitchComponent size="xl" />);
     expect(switchComponent).toMatchSnapshot();
   });
 
   it('Extra Large switch disabled should render correctly', () => {
-    const switchComponent = renderer.create(<SwitchComponent disabled size="xl" />).toJSON();
+    const switchComponent = render(<SwitchComponent disabled size="xl" />);
     expect(switchComponent).toMatchSnapshot();
   });
 });
diff --git a/src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap b/src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap
index 2b4aee3..e43f193 100644
--- a/src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap
+++ b/src/components/switch/__test__/__snapshots__/Switch.test.tsx.snap
@@ -1,271 +1,577 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch component > Extra Large switch disabled should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-5 data-[state=checked]:bg-green/50 w-14 h-8 rounded-full relative outline-none"
-    data-disabled=""
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={true}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-5 data-[state=checked]:bg-green/50 w-14 h-8 rounded-full relative outline-none"
+        data-disabled=""
+        data-state="unchecked"
+        data-testid="switch"
+        disabled=""
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+          data-disabled=""
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-5 data-[state=checked]:bg-green/50 w-14 h-8 rounded-full relative outline-none"
       data-disabled=""
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={true}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      disabled=""
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+        data-disabled=""
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Switch component > Extra Large switch should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-10 data-[state=checked]:bg-green w-14 h-8 rounded-full relative outline-none"
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={false}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-10 data-[state=checked]:bg-green w-14 h-8 rounded-full relative outline-none"
+        data-state="unchecked"
+        data-testid="switch"
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-10 data-[state=checked]:bg-green w-14 h-8 rounded-full relative outline-none"
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={false}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[25px] will-change-transform w-7 h-7"
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Switch component > Large switch disabled should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-5 data-[state=checked]:bg-green/50 w-12 h-7 rounded-full relative outline-none"
-    data-disabled=""
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={true}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-5 data-[state=checked]:bg-green/50 w-12 h-7 rounded-full relative outline-none"
+        data-disabled=""
+        data-state="unchecked"
+        data-testid="switch"
+        disabled=""
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+          data-disabled=""
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-5 data-[state=checked]:bg-green/50 w-12 h-7 rounded-full relative outline-none"
       data-disabled=""
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={true}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      disabled=""
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+        data-disabled=""
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Switch component > Large switch should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-10 data-[state=checked]:bg-green w-12 h-7 rounded-full relative outline-none"
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={false}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-10 data-[state=checked]:bg-green w-12 h-7 rounded-full relative outline-none"
+        data-state="unchecked"
+        data-testid="switch"
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-10 data-[state=checked]:bg-green w-12 h-7 rounded-full relative outline-none"
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={false}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[21px] will-change-transform w-6 h-6"
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Switch component > Medium switch disabled should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-5 data-[state=checked]:bg-green/50 w-8 h-5 rounded-full relative outline-none"
-    data-disabled=""
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={true}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-5 data-[state=checked]:bg-green/50 w-8 h-5 rounded-full relative outline-none"
+        data-disabled=""
+        data-state="unchecked"
+        data-testid="switch"
+        disabled=""
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+          data-disabled=""
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-5 data-[state=checked]:bg-green/50 w-8 h-5 rounded-full relative outline-none"
       data-disabled=""
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={true}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      disabled=""
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+        data-disabled=""
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
 
 exports[`Switch component > Medium switch should render correctly 1`] = `
-[
-  <button
-    aria-checked={false}
-    className="bg-gray-10 data-[state=checked]:bg-green w-8 h-5 rounded-full relative outline-none"
-    data-state="unchecked"
-    data-testid="switch"
-    disabled={false}
-    id="switch"
-    onClick={[Function]}
-    role="switch"
-    style={
-      {
-        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-      }
-    }
-    type="button"
-    value="on"
-  >
-    <span
-      className="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        aria-checked="false"
+        class="bg-gray-10 data-[state=checked]:bg-green w-8 h-5 rounded-full relative outline-none"
+        data-state="unchecked"
+        data-testid="switch"
+        id="switch"
+        role="switch"
+        type="button"
+        value="on"
+      >
+        <span
+          class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+          data-state="unchecked"
+        />
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      aria-checked="false"
+      class="bg-gray-10 data-[state=checked]:bg-green w-8 h-5 rounded-full relative outline-none"
       data-state="unchecked"
-    />
-  </button>,
-  <input
-    aria-hidden={true}
-    defaultChecked={false}
-    disabled={false}
-    style={
-      {
-        "margin": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "transform": "translateX(-100%)",
-      }
-    }
-    tabIndex={-1}
-    type="checkbox"
-    value="on"
-  />,
-]
+      data-testid="switch"
+      id="switch"
+      role="switch"
+      type="button"
+      value="on"
+    >
+      <span
+        class="block bg-white rounded-full transition-transform duration-100 translate-x-[3px] data-[state=checked]:translate-x-[13px] will-change-transform w-4 h-4"
+        data-state="unchecked"
+      />
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
 `;
diff --git a/yarn.lock b/yarn.lock
index 2f11c4c..20be853 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2901,6 +2901,20 @@
     "@types/express" "^4.7.0"
     file-system-cache "2.3.0"
 
+"@testing-library/dom@^10.4.0":
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
+  integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.3.0"
+    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", "@testing-library/dom@^9.3.4":
   version "9.3.4"
   resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz"
@@ -3157,6 +3171,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.3.0":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.67":
   version "18.2.67"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz"
@@ -3716,7 +3737,7 @@ aria-query@5.1.3:
   dependencies:
     deep-equal "^2.0.5"
 
-aria-query@^5.0.0:
+aria-query@5.3.0, aria-query@^5.0.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -7588,11 +7609,6 @@ react-is@18.1.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -7603,6 +7619,11 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-remove-scroll-bar@2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
@@ -7630,14 +7651,6 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-shallow-renderer@^16.15.0:
-  version "16.15.0"
-  resolved "https://registry.yarnpkg.com/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.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -7647,15 +7660,6 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-test-renderer@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
-  integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==
-  dependencies:
-    react-is "^18.2.0"
-    react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.0"
-
 "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -8261,6 +8265,7 @@ string-argv@0.3.2, string-argv@~0.3.1:
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8348,6 +8353,7 @@ string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==