From f79f7b3b00c754cef25601de3702046197502748 Mon Sep 17 00:00:00 2001
From: etesam <etesamansari13@gmail.com>
Date: Thu, 9 Nov 2023 23:58:24 -0500
Subject: [PATCH 1/4] :truck: Moved testing dependencies to workspace `root`

Added test for to do list application
---
 apps/docs/components/todo-list.tsx            |  14 +-
 apps/docs/package.json                        |   4 +-
 apps/docs/tests/components.test.tsx           |  59 ++++
 package.json                                  |   7 +-
 packages/react-magic-motion/package.json      |   6 +-
 packages/react-magic-motion/tests/index.tsx   |  17 +-
 .../tests/magic-exit.test.tsx                 |  12 +-
 pnpm-lock.yaml                                | 330 ++++++++++++------
 .../vitest.config.ts => vitest.config.ts      |   9 +-
 9 files changed, 326 insertions(+), 132 deletions(-)
 create mode 100644 apps/docs/tests/components.test.tsx
 rename packages/react-magic-motion/vitest.config.ts => vitest.config.ts (64%)

diff --git a/apps/docs/components/todo-list.tsx b/apps/docs/components/todo-list.tsx
index 396def1..efc50b3 100644
--- a/apps/docs/components/todo-list.tsx
+++ b/apps/docs/components/todo-list.tsx
@@ -21,9 +21,11 @@ function shuffle<T>(array: T[]): T[] {
 }
 
 function TodoListItem({
+  testId,
   todo,
   setTodos,
 }: {
+  testId: string;
   todo: { id: string; text: string };
   setTodos: Dispatch<SetStateAction<{ id: string; text: string }[]>>;
 }): JSX.Element {
@@ -42,6 +44,7 @@ function TodoListItem({
         type="button"
         title="Delete this item"
         className="nx-bg-black/[.02]"
+        data-testid={testId + "-delete-button"}
         onClick={() =>
           setTodos((todos) => todos.filter((t) => t.id !== todo.id))
         }
@@ -81,8 +84,13 @@ export function TodoList(): JSX.Element {
           overflow: "hidden",
         }}
       >
-        {todos.map((todo) => (
-          <TodoListItem key={todo.id} todo={todo} setTodos={setTodos} />
+        {todos.map((todo, i) => (
+          <TodoListItem
+            testId={`todo-${i}`}
+            key={todo.id}
+            todo={todo}
+            setTodos={setTodos}
+          />
         ))}
       </ul>
       <form
@@ -92,6 +100,7 @@ export function TodoList(): JSX.Element {
         <input
           ref={newTodoInput}
           type="text"
+          data-testid="add-todo-input"
           placeholder="Write a new todo 📝"
           className="nx-bg-black/[.05] dark:nx-bg-gray-50/10"
           style={{
@@ -104,6 +113,7 @@ export function TodoList(): JSX.Element {
 
         <button
           type="submit"
+          data-testid="add-todo-button"
           title="Add a new todo"
           style={{
             whiteSpace: "nowrap",
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 2926578..7d97eb5 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@vercel/analytics": "^1.1.1",
diff --git a/apps/docs/tests/components.test.tsx b/apps/docs/tests/components.test.tsx
new file mode 100644
index 0000000..74a130b
--- /dev/null
+++ b/apps/docs/tests/components.test.tsx
@@ -0,0 +1,59 @@
+import {
+  act,
+  fireEvent,
+  getByTestId,
+  render,
+  waitFor,
+} from "@testing-library/react";
+import { describe, test, expect, beforeAll, vi } from "vitest";
+import { TodoList } from "../components/todo-list";
+import "@testing-library/jest-dom";
+import { MagicMotion } from "react-magic-motion";
+
+describe("Application Tests", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn().mockImplementation((query) => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+  });
+  test("to do list component", async () => {
+    const { container } = render(
+      <MagicMotion>
+        <TodoList />
+      </MagicMotion>
+    );
+    expect(container).toHaveTextContent("🐕 Walk the dog");
+    expect(container).toHaveTextContent("🍔 Eat lunch");
+    expect(container).toHaveTextContent("📚 Study react");
+    expect(container).toHaveTextContent("🏀 Play basketball");
+    expect(container).toHaveTextContent("🔎 Study biology");
+    expect(container).toHaveTextContent("👟 Buy shoes");
+
+    const thirdDeleteButton = getByTestId(container, "todo-2-delete-button");
+    act(() => {
+      thirdDeleteButton.click();
+    });
+    await waitFor(() => {
+      expect(container).not.toHaveTextContent("📚 Study react");
+    });
+    const todoInput = getByTestId(container, "add-todo-input");
+    fireEvent.change(todoInput, { target: { value: "New To Do Item" } });
+    const todoSubmitButton = getByTestId(container, "add-todo-button");
+    act(() => {
+      todoSubmitButton.click();
+    });
+    await waitFor(() => {
+      expect(container).toHaveTextContent("New To Do Item");
+    });
+  });
+});
diff --git a/package.json b/package.json
index 3d789a5..51e179d 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,16 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
+    "@babel/traverse": ">=7.23.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react": "^4.1.1",
     "eslint": "^8.48.0",
+    "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
     "tsconfig": "workspace:*",
     "turbo": "^1.10.13",
-    "@babel/traverse": ">=7.23.2"
+    "vitest": "^0.34.6"
   },
   "packageManager": "pnpm@8.6.10",
   "name": "react-magic-motion",
diff --git a/packages/react-magic-motion/package.json b/packages/react-magic-motion/package.json
index 8c9e660..21e6de5 100644
--- a/packages/react-magic-motion/package.json
+++ b/packages/react-magic-motion/package.json
@@ -25,21 +25,17 @@
     "typescript"
   ],
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
     "@turbo/gen": "^1.10.12",
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-is": "^18.2.1",
     "eslint-config-custom": "workspace:*",
-    "jsdom": "^22.1.0",
     "react": "^18.2.0",
     "react-is": "^18.2.0",
     "tsconfig": "workspace:*",
     "tsup": "^7.2.0",
-    "typescript": "^4.5.2",
-    "vitest": "^0.34.6"
+    "typescript": "^4.5.2"
   },
   "dependencies": {
     "framer-motion": "^10.16.2"
diff --git a/packages/react-magic-motion/tests/index.tsx b/packages/react-magic-motion/tests/index.tsx
index 9375418..2238931 100644
--- a/packages/react-magic-motion/tests/index.tsx
+++ b/packages/react-magic-motion/tests/index.tsx
@@ -1,4 +1,10 @@
-import { type ReactNode, forwardRef, useRef } from "react";
+import {
+  type ReactNode,
+  forwardRef,
+  useRef,
+  cloneElement,
+  ReactElement,
+} from "react";
 
 export function TestComponent({
   customText,
@@ -38,3 +44,12 @@ export function ForwardedRefParent(): JSX.Element {
     <ForwardedRefComponent ref={buttonRef}>Click me!</ForwardedRefComponent>
   );
 }
+
+export function cloneRootElem(rootElem: ReactElement) {
+  return cloneElement(rootElem, {
+    ...rootElem.props,
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  });
+}
diff --git a/packages/react-magic-motion/tests/magic-exit.test.tsx b/packages/react-magic-motion/tests/magic-exit.test.tsx
index 50087c8..5b6a6fe 100644
--- a/packages/react-magic-motion/tests/magic-exit.test.tsx
+++ b/packages/react-magic-motion/tests/magic-exit.test.tsx
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { describe, beforeAll, vi, test, expect } from "vitest";
-import { cloneElement } from "react";
 import { convertChildrenToMotionChildren } from "../utils/magic-animation";
+import { cloneRootElem } from ".";
 
 describe("<MagicExit> tests", () => {
   beforeAll(() => {
@@ -34,16 +34,10 @@ describe("<MagicExit> tests", () => {
       {
         isRootNode: true,
         rootNodeCallback: (rootElem) => {
-          const clonedRootElem = cloneElement(rootElem, {
-            ...rootElem.props,
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-          });
-          return clonedRootElem;
+          return cloneRootElem(rootElem);
         },
         depth: 1,
-      }
+      },
     ) as any[];
 
     expect(motionChildren).toBeDefined();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d72e68b..9b11cd6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,9 +15,21 @@ importers:
       '@babel/traverse':
         specifier: '>=7.23.2'
         version: 7.23.2
+      '@testing-library/jest-dom':
+        specifier: ^6.1.4
+        version: 6.1.4(vitest@0.34.6)
+      '@testing-library/react':
+        specifier: ^14.0.0
+        version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@vitejs/plugin-react':
+        specifier: ^4.1.1
+        version: 4.1.1(vite@4.5.0)
       eslint:
         specifier: ^8.48.0
         version: 8.48.0
+      jsdom:
+        specifier: ^22.1.0
+        version: 22.1.0
       prettier:
         specifier: ^3.0.3
         version: 3.0.3
@@ -27,6 +39,9 @@ importers:
       turbo:
         specifier: ^1.10.13
         version: 1.10.13
+      vitest:
+        specifier: ^0.34.6
+        version: 0.34.6(jsdom@22.1.0)
 
   apps/docs:
     dependencies:
@@ -35,7 +50,7 @@ importers:
         version: 1.1.1
       next:
         specifier: ^14.0.1
-        version: 14.0.1(react-dom@18.2.0)(react@18.2.0)
+        version: 14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       nextra:
         specifier: ^2.13.2
         version: 2.13.2(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
@@ -78,7 +93,7 @@ importers:
     dependencies:
       next:
         specifier: ^13.5.2
-        version: 13.5.2(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.2(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -126,12 +141,6 @@ importers:
         specifier: ^10.16.2
         version: 10.16.2(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
-      '@testing-library/jest-dom':
-        specifier: ^6.1.4
-        version: 6.1.4(vitest@0.34.6)
-      '@testing-library/react':
-        specifier: ^14.0.0
-        version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
       '@turbo/gen':
         specifier: ^1.10.12
         version: 1.10.12(@types/node@20.5.2)(typescript@4.9.5)
@@ -150,9 +159,6 @@ importers:
       eslint-config-custom:
         specifier: workspace:*
         version: link:../eslint-config-custom
-      jsdom:
-        specifier: ^22.1.0
-        version: 22.1.0
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -168,9 +174,6 @@ importers:
       typescript:
         specifier: ^4.5.2
         version: 4.9.5
-      vitest:
-        specifier: ^0.34.6
-        version: 0.34.6(jsdom@22.1.0)
 
   packages/tsconfig: {}
 
@@ -191,15 +194,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.19
-    dev: true
-
-  /@babel/code-frame@7.22.10:
-    resolution: {integrity: sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.22.10
-      chalk: 2.4.2
-    dev: true
 
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
@@ -211,14 +205,13 @@ packages:
   /@babel/compat-data@7.22.9:
     resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/core@7.22.11:
     resolution: {integrity: sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.22.13
       '@babel/generator': 7.22.10
       '@babel/helper-compilation-targets': 7.22.10
       '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.11)
@@ -236,6 +229,28 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/core@7.23.3:
+    resolution: {integrity: sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.1
+      '@babel/code-frame': 7.22.13
+      '@babel/generator': 7.23.3
+      '@babel/helper-compilation-targets': 7.22.15
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.3)
+      '@babel/helpers': 7.23.2
+      '@babel/parser': 7.23.3
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.3
+      '@babel/types': 7.23.3
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   /@babel/eslint-parser@7.22.11(@babel/core@7.22.11)(eslint@8.52.0):
     resolution: {integrity: sha512-YjOYZ3j7TjV8OhLW6NCtyg8G04uStATEUe5eiLuCZaXz2VSDQ3dsAtm2D+TuQyAqNMUK2WacGo0/uma9Pein1w==}
     engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
@@ -270,6 +285,15 @@ packages:
       jsesc: 2.5.2
     dev: true
 
+  /@babel/generator@7.23.3:
+    resolution: {integrity: sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.3
+      '@jridgewell/gen-mapping': 0.3.3
+      '@jridgewell/trace-mapping': 0.3.19
+      jsesc: 2.5.2
+
   /@babel/helper-compilation-targets@7.22.10:
     resolution: {integrity: sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==}
     engines: {node: '>=6.9.0'}
@@ -281,10 +305,19 @@ packages:
       semver: 6.3.1
     dev: true
 
+  /@babel/helper-compilation-targets@7.22.15:
+    resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.22.9
+      '@babel/helper-validator-option': 7.22.15
+      browserslist: 4.21.10
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-environment-visitor@7.22.5:
     resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
@@ -297,14 +330,18 @@ packages:
     dependencies:
       '@babel/template': 7.22.15
       '@babel/types': 7.23.0
-    dev: true
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.23.0
-    dev: true
+
+  /@babel/helper-module-imports@7.22.15:
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.3
 
   /@babel/helper-module-imports@7.22.5:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
@@ -327,24 +364,39 @@ packages:
       '@babel/helper-validator-identifier': 7.22.5
     dev: true
 
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.3):
+    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.20
+
+  /@babel/helper-plugin-utils@7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.22.11
-    dev: true
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.23.0
-    dev: true
 
   /@babel/helper-string-parser@7.22.5:
     resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-validator-identifier@7.22.20:
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
@@ -353,7 +405,10 @@ packages:
   /@babel/helper-validator-identifier@7.22.5:
     resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
+
+  /@babel/helper-validator-option@7.22.15:
+    resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==}
+    engines: {node: '>=6.9.0'}
 
   /@babel/helper-validator-option@7.22.5:
     resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
@@ -371,14 +426,15 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/highlight@7.22.10:
-    resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
+  /@babel/helpers@7.23.2:
+    resolution: {integrity: sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: true
+      '@babel/template': 7.22.15
+      '@babel/traverse': 7.23.3
+      '@babel/types': 7.23.3
+    transitivePeerDependencies:
+      - supports-color
 
   /@babel/highlight@7.22.20:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
@@ -401,6 +457,32 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.23.0
+
+  /@babel/parser@7.23.3:
+    resolution: {integrity: sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.23.3
+
+  /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.3):
+    resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-plugin-utils': 7.22.5
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.3):
+    resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/runtime-corejs3@7.22.10:
@@ -424,7 +506,6 @@ packages:
       '@babel/code-frame': 7.22.13
       '@babel/parser': 7.23.0
       '@babel/types': 7.23.0
-    dev: true
 
   /@babel/template@7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
@@ -453,6 +534,23 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/traverse@7.23.3:
+    resolution: {integrity: sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.13
+      '@babel/generator': 7.23.3
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.3
+      '@babel/types': 7.23.3
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   /@babel/types@7.22.11:
     resolution: {integrity: sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==}
     engines: {node: '>=6.9.0'}
@@ -460,7 +558,6 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.5
       to-fast-properties: 2.0.0
-    dev: true
 
   /@babel/types@7.23.0:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
@@ -469,7 +566,14 @@ packages:
       '@babel/helper-string-parser': 7.22.5
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
-    dev: true
+
+  /@babel/types@7.23.3:
+    resolution: {integrity: sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.22.5
+      '@babel/helper-validator-identifier': 7.22.20
+      to-fast-properties: 2.0.0
 
   /@braintree/sanitize-url@6.0.4:
     resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
@@ -978,16 +1082,15 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-<<<<<<< HEAD
+  /@humanwhocodes/object-schema@2.0.1:
+    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
+    dev: true
+
   /@jest/schemas@29.6.3:
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@sinclair/typebox': 0.27.8
-=======
-  /@humanwhocodes/object-schema@2.0.1:
-    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
->>>>>>> d30150c61f4527188f4b0a3c01fa832d28fda946
     dev: true
 
   /@jridgewell/gen-mapping@0.3.3:
@@ -997,28 +1100,23 @@ packages:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.19
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.19:
     resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.9:
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
@@ -1440,7 +1538,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-<<<<<<< HEAD
   /@testing-library/dom@9.3.3:
     resolution: {integrity: sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==}
     engines: {node: '>=14'}
@@ -1498,12 +1595,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@theguild/remark-mermaid@0.0.4(react@18.2.0):
-    resolution: {integrity: sha512-C1gssw07eURtCwzXqZZdvyV/eawQ/cXfARaXIgBU9orffox+/YQ+exxmNu9v16NSGzAVsGF4qEVHvCOcCR/FpQ==}
-=======
   /@theguild/remark-mermaid@0.0.5(react@18.2.0):
     resolution: {integrity: sha512-e+ZIyJkEv9jabI4m7q29wZtZv+2iwPGsXJ2d46Zi7e+QcFudiyuqhLhHG/3gX3ZEB+hxTch+fpItyMS8jwbIcw==}
->>>>>>> d30150c61f4527188f4b0a3c01fa832d28fda946
     peerDependencies:
       react: ^18.2.0
     dependencies:
@@ -1579,6 +1672,35 @@ packages:
     resolution: {integrity: sha512-0Z6Tr7wjKJIk4OUEjVUQMtyunLDy339vcMaj38Kpj6jM2OE1p3S4kXExKZ7a3uXQAPCoy3sbrP1wibDKaf39oA==}
     dev: true
 
+  /@types/babel__core@7.20.4:
+    resolution: {integrity: sha512-mLnSC22IC4vcWiuObSRjrLd9XcBTGf59vUSoq2jkQDJ/QQ8PMI9rSuzE+aEV8karUMbskw07bKYoUJCKTUaygg==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
+      '@types/babel__generator': 7.6.7
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.4
+    dev: true
+
+  /@types/babel__generator@7.6.7:
+    resolution: {integrity: sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
+  /@types/babel__template@7.4.4:
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+    dependencies:
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
+    dev: true
+
+  /@types/babel__traverse@7.20.4:
+    resolution: {integrity: sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
   /@types/chai-subset@1.3.4:
     resolution: {integrity: sha512-CCWNXrJYSUIojZ1149ksLl3AN9cmZ5djf+yUoVVV+NuYrtydItQVlL2ZDqyC6M6O9LWRnVf8yYDxbXHO2TfQZg==}
     dependencies:
@@ -2001,6 +2123,22 @@ packages:
       - supports-color
     dev: true
 
+  /@vitejs/plugin-react@4.1.1(vite@4.5.0):
+    resolution: {integrity: sha512-Jie2HERK+uh27e+ORXXwEP5h0Y2lS9T2PRGbfebiHGlwzDO0dEnd2aNtOR/qjBlPb1YgxwAONeblL1xqLikLag==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.2.0
+    dependencies:
+      '@babel/core': 7.23.3
+      '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.3)
+      '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.3)
+      '@types/babel__core': 7.20.4
+      react-refresh: 0.14.0
+      vite: 4.5.0(@types/node@20.5.2)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@vitest/expect@0.34.6:
     resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
     dependencies:
@@ -2184,7 +2322,7 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.2.0
       es-abstract: 1.21.2
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
       is-string: 1.0.7
     dev: true
 
@@ -2200,7 +2338,7 @@ packages:
       define-properties: 1.2.0
       es-abstract: 1.21.2
       es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
     dev: true
 
   /array.prototype.flat@1.3.1:
@@ -2229,7 +2367,7 @@ packages:
       define-properties: 1.2.0
       es-abstract: 1.21.2
       es-shim-unscopables: 1.0.0
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
     dev: true
 
   /arraybuffer.prototype.slice@1.0.1:
@@ -2376,7 +2514,6 @@ packages:
       electron-to-chromium: 1.4.498
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: true
 
   /buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
@@ -2463,7 +2600,6 @@ packages:
 
   /caniuse-lite@1.0.30001549:
     resolution: {integrity: sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==}
-    dev: true
 
   /caniuse-lite@1.0.30001558:
     resolution: {integrity: sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==}
@@ -2719,6 +2855,9 @@ packages:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
     dev: true
 
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   /core-js-pure@3.32.1:
     resolution: {integrity: sha512-f52QZwkFVDPf7UEQZGHKx6NYxsxmVGJe5DIvbzOdRMJlmT6yv0KDjR8rmy3ngr/t5wU54c7Sp/qIJH0ppbhVpQ==}
     requiresBuild: true
@@ -3361,7 +3500,6 @@ packages:
 
   /electron-to-chromium@1.4.498:
     resolution: {integrity: sha512-4LODxAzKGVy7CJyhhN5mebwe7U2L29P+0G+HUriHnabm0d7LSff8Yn7t+Wq+2/9ze2Fu1dhX7mww090xfv7qXQ==}
-    dev: true
 
   /elkjs@0.8.2:
     resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
@@ -3409,7 +3547,7 @@ packages:
       es-set-tostringtag: 2.0.1
       es-to-primitive: 1.2.1
       function.prototype.name: 1.1.5
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
       get-symbol-description: 1.0.0
       globalthis: 1.0.3
       gopd: 1.0.1
@@ -3436,7 +3574,7 @@ packages:
       string.prototype.trimstart: 1.0.6
       typed-array-length: 1.0.4
       unbox-primitive: 1.0.2
-      which-typed-array: 1.1.9
+      which-typed-array: 1.1.11
 
   /es-abstract@1.22.1:
     resolution: {integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==}
@@ -4327,7 +4465,6 @@ packages:
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
@@ -4338,13 +4475,6 @@ packages:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
     dev: true
 
-  /get-intrinsic@1.2.0:
-    resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-symbols: 1.0.3
-
   /get-intrinsic@1.2.1:
     resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
     dependencies:
@@ -4465,7 +4595,6 @@ packages:
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
-    dev: true
 
   /globals@13.20.0:
     resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
@@ -5254,7 +5383,7 @@ packages:
     resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
     dev: true
 
   /is-windows@1.0.2:
@@ -5362,7 +5491,6 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
@@ -5389,7 +5517,7 @@ packages:
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
-    dev: true
+    hasBin: true
 
   /jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
@@ -5569,7 +5697,6 @@ packages:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
       yallist: 3.1.1
-    dev: true
 
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@@ -6402,7 +6529,7 @@ packages:
       react: '>=16.0.0'
       react-dom: '>=16.0.0'
     dependencies:
-      next: 14.0.1(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -6414,12 +6541,12 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      next: 14.0.1(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /next@13.5.2(react-dom@18.2.0)(react@18.2.0):
+  /next@13.5.2(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-vog4UhUaMYAzeqfiAAmgB/QWLW7p01/sg+2vn6bqc/CxHFYizMzLv6gjxKzl31EVFkfl/F+GbxlKizlkTE9RdA==}
     engines: {node: '>=16.14.0'}
     hasBin: true
@@ -6441,7 +6568,7 @@ packages:
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.23.3)(react@18.2.0)
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
@@ -6459,7 +6586,7 @@ packages:
       - babel-plugin-macros
     dev: false
 
-  /next@14.0.1(react-dom@18.2.0)(react@18.2.0):
+  /next@14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==}
     engines: {node: '>=18.17.0'}
     hasBin: true
@@ -6481,7 +6608,7 @@ packages:
       postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(react@18.2.0)
+      styled-jsx: 5.1.1(@babel/core@7.23.3)(react@18.2.0)
       watchpack: 2.4.0
     optionalDependencies:
       '@next/swc-darwin-arm64': 14.0.1
@@ -6515,7 +6642,7 @@ packages:
       git-url-parse: 13.1.0
       intersection-observer: 0.12.2
       match-sorter: 6.3.1
-      next: 14.0.1(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       next-seo: 6.1.0(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
       next-themes: 0.2.1(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
       nextra: 2.13.2(next@14.0.1)(react-dom@18.2.0)(react@18.2.0)
@@ -6545,7 +6672,7 @@ packages:
       gray-matter: 4.0.3
       katex: 0.16.9
       lodash.get: 4.4.2
-      next: 14.0.1(react-dom@18.2.0)(react@18.2.0)
+      next: 14.0.1(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)
       next-mdx-remote: 4.4.1(react-dom@18.2.0)(react@18.2.0)
       p-limit: 3.1.0
       react: 18.2.0
@@ -6591,7 +6718,6 @@ packages:
 
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: true
 
   /non-layered-tidy-tree-layout@2.0.2:
     resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
@@ -7046,11 +7172,6 @@ packages:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
-<<<<<<< HEAD
-    dev: true
-=======
-    dev: false
->>>>>>> d30150c61f4527188f4b0a3c01fa832d28fda946
 
   /preferred-pm@3.1.2:
     resolution: {integrity: sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q==}
@@ -7201,6 +7322,11 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /react-refresh@0.14.0:
+    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -7583,7 +7709,6 @@ packages:
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
-    dev: true
 
   /semver@7.5.4:
     resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
@@ -7823,7 +7948,7 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.2.0
       es-abstract: 1.21.2
-      get-intrinsic: 1.2.0
+      get-intrinsic: 1.2.1
       has-symbols: 1.0.3
       internal-slot: 1.0.5
       regexp.prototype.flags: 1.5.0
@@ -7923,7 +8048,7 @@ packages:
       inline-style-parser: 0.1.1
     dev: false
 
-  /styled-jsx@5.1.1(react@18.2.0):
+  /styled-jsx@5.1.1(@babel/core@7.23.3)(react@18.2.0):
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
@@ -7936,6 +8061,7 @@ packages:
       babel-plugin-macros:
         optional: true
     dependencies:
+      '@babel/core': 7.23.3
       client-only: 0.0.1
       react: 18.2.0
     dev: false
@@ -8081,7 +8207,6 @@ packages:
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -8574,7 +8699,6 @@ packages:
       browserslist: 4.21.10
       escalade: 3.1.1
       picocolors: 1.0.0
-    dev: true
 
   /update-check@1.5.4:
     resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
@@ -8910,7 +9034,7 @@ packages:
       isarray: 2.0.5
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
-      which-typed-array: 1.1.9
+      which-typed-array: 1.1.11
     dev: true
 
   /which-collection@1.0.1:
@@ -8944,17 +9068,6 @@ packages:
       gopd: 1.0.1
       has-tostringtag: 1.0.0
 
-  /which-typed-array@1.1.9:
-    resolution: {integrity: sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.5
-      call-bind: 1.0.2
-      for-each: 0.3.3
-      gopd: 1.0.1
-      has-tostringtag: 1.0.0
-      is-typed-array: 1.1.10
-
   /which@1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
@@ -9041,7 +9154,6 @@ packages:
 
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
 
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
diff --git a/packages/react-magic-motion/vitest.config.ts b/vitest.config.ts
similarity index 64%
rename from packages/react-magic-motion/vitest.config.ts
rename to vitest.config.ts
index 9c28b26..c8fa6f4 100644
--- a/packages/react-magic-motion/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,12 +1,13 @@
 /// <reference types="vitest" />
-
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from "vitest/config";
+import react from '@vitejs/plugin-react';
 
 // eslint-disable-next-line import/no-default-export -- This is a vitest config so it should have a default export
 export default defineConfig({
+  plugins: [react()],
   test: {
     // Test configuration options go here
     globals: true, // if you want to have describe, it, etc. in the global scope
-    environment: 'jsdom', // for testing browser-like environment
+    environment: "jsdom", // for testing browser-like environment
   },
-})
\ No newline at end of file
+});

From 7342c74c5ced0d8075b08df5cb795d73e6be0df6 Mon Sep 17 00:00:00 2001
From: etesam <etesamansari13@gmail.com>
Date: Fri, 10 Nov 2023 00:02:33 -0500
Subject: [PATCH 2/4] :truck: Changed import for `MagicMotion` in test file

---
 .github/workflows/unit-tests.yml    | 2 +-
 apps/docs/tests/components.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
index 11e52de..04f119a 100644
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -1,4 +1,4 @@
-name: Run Unit Tests
+name: 🌚 Run Unit Tests
 
 on:
   push:
diff --git a/apps/docs/tests/components.test.tsx b/apps/docs/tests/components.test.tsx
index 74a130b..b8bbffe 100644
--- a/apps/docs/tests/components.test.tsx
+++ b/apps/docs/tests/components.test.tsx
@@ -8,7 +8,7 @@ import {
 import { describe, test, expect, beforeAll, vi } from "vitest";
 import { TodoList } from "../components/todo-list";
 import "@testing-library/jest-dom";
-import { MagicMotion } from "react-magic-motion";
+import { MagicMotion } from "../../../packages/react-magic-motion/magic-motion";
 
 describe("Application Tests", () => {
   beforeAll(() => {

From cf4fee4312451432aa95e61cd83dc8e9ac5f63a5 Mon Sep 17 00:00:00 2001
From: etesam <etesamansari13@gmail.com>
Date: Fri, 10 Nov 2023 00:38:44 -0500
Subject: [PATCH 3/4] :green_heart: Fixed build errors in package

---
 apps/docs/components/todo-list.tsx                  |  2 +-
 apps/web/app/layout-container/toggle.tsx            |  1 +
 packages/react-magic-motion/.eslintrc.js            | 11 ++++++++++-
 packages/react-magic-motion/tests/index.tsx         | 13 ++++---------
 .../react-magic-motion/tests/magic-exit.test.tsx    |  3 +--
 .../react-magic-motion/utils/magic-animation.ts     |  2 +-
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/apps/docs/components/todo-list.tsx b/apps/docs/components/todo-list.tsx
index efc50b3..b88b9a1 100644
--- a/apps/docs/components/todo-list.tsx
+++ b/apps/docs/components/todo-list.tsx
@@ -44,7 +44,7 @@ function TodoListItem({
         type="button"
         title="Delete this item"
         className="nx-bg-black/[.02]"
-        data-testid={testId + "-delete-button"}
+        data-testid={`${testId  }-delete-button`}
         onClick={() =>
           setTodos((todos) => todos.filter((t) => t.id !== todo.id))
         }
diff --git a/apps/web/app/layout-container/toggle.tsx b/apps/web/app/layout-container/toggle.tsx
index 4ddd148..4faa45b 100644
--- a/apps/web/app/layout-container/toggle.tsx
+++ b/apps/web/app/layout-container/toggle.tsx
@@ -12,6 +12,7 @@ export function Toggle({
     <button
       onClick={() => setIsActive((prev) => !prev)}
       className="toggle-button"
+      type="button"
       style={{
         display: "flex",
         justifyContent: isActive ? "flex-end" : "flex-start",
diff --git a/packages/react-magic-motion/.eslintrc.js b/packages/react-magic-motion/.eslintrc.js
index 2e55f0d..1d73311 100644
--- a/packages/react-magic-motion/.eslintrc.js
+++ b/packages/react-magic-motion/.eslintrc.js
@@ -13,7 +13,16 @@ module.exports = {
       files: ["*.test.tsx"],
       "rules": {
         "@typescript-eslint/no-unsafe-assignment" : 'off',
-        "@typescript-eslint/no-unsafe-call": "off"
+        "@typescript-eslint/no-unsafe-call": "off",
+        'import/no-extraneous-dependencies': [
+          1,
+          {
+            devDependencies: true,
+            includeInternal: false,
+            includeTypes: false,
+            packageDir: ['.', '../..'], // <--- the key addition
+          },
+        ],
       }
     }
   ]
diff --git a/packages/react-magic-motion/tests/index.tsx b/packages/react-magic-motion/tests/index.tsx
index 2238931..f1380a6 100644
--- a/packages/react-magic-motion/tests/index.tsx
+++ b/packages/react-magic-motion/tests/index.tsx
@@ -1,10 +1,5 @@
-import {
-  type ReactNode,
-  forwardRef,
-  useRef,
-  cloneElement,
-  ReactElement,
-} from "react";
+import { forwardRef, useRef, cloneElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 
 export function TestComponent({
   customText,
@@ -21,7 +16,7 @@ export function ParentComponent(): JSX.Element {
 }
 
 interface ForwardedRefComponent {
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 const ForwardedRefComponent = forwardRef<
@@ -45,7 +40,7 @@ export function ForwardedRefParent(): JSX.Element {
   );
 }
 
-export function cloneRootElem(rootElem: ReactElement) {
+export function cloneRootElem(rootElem: ReactElement): ReactNode {
   return cloneElement(rootElem, {
     ...rootElem.props,
     initial: { opacity: 0 },
diff --git a/packages/react-magic-motion/tests/magic-exit.test.tsx b/packages/react-magic-motion/tests/magic-exit.test.tsx
index 5b6a6fe..4148b01 100644
--- a/packages/react-magic-motion/tests/magic-exit.test.tsx
+++ b/packages/react-magic-motion/tests/magic-exit.test.tsx
@@ -1,4 +1,3 @@
-import "@testing-library/jest-dom";
 import { describe, beforeAll, vi, test, expect } from "vitest";
 import { convertChildrenToMotionChildren } from "../utils/magic-animation";
 import { cloneRootElem } from ".";
@@ -37,7 +36,7 @@ describe("<MagicExit> tests", () => {
           return cloneRootElem(rootElem);
         },
         depth: 1,
-      },
+      }
     ) as any[];
 
     expect(motionChildren).toBeDefined();
diff --git a/packages/react-magic-motion/utils/magic-animation.ts b/packages/react-magic-motion/utils/magic-animation.ts
index ed4beed..c4ec8c4 100644
--- a/packages/react-magic-motion/utils/magic-animation.ts
+++ b/packages/react-magic-motion/utils/magic-animation.ts
@@ -81,7 +81,7 @@ export function convertChildrenToMotionChildren(
     }
 
     // Checks if the child is a function component
-    let parent = null;
+    let parent:ReactNode = null;
     while (typeof node.type === "function") {
       if (isLoggingEnabled)
         logSuccess(FUNCTIONCOMPONENTMESSAGE(node.type.name));

From 7df20ab67cbec64d6f342ad9ed94976377c5bd3d Mon Sep 17 00:00:00 2001
From: etesam <etesamansari13@gmail.com>
Date: Sat, 11 Nov 2023 00:55:19 -0500
Subject: [PATCH 4/4] :white_check_mark: Added test for `accordion` and
 `search` components

---
 apps/docs/components/accordion.tsx  |  1 +
 apps/docs/components/search.tsx     |  6 ++---
 apps/docs/tests/components.test.tsx | 41 +++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/apps/docs/components/accordion.tsx b/apps/docs/components/accordion.tsx
index b3c5259..bd48ed3 100644
--- a/apps/docs/components/accordion.tsx
+++ b/apps/docs/components/accordion.tsx
@@ -14,6 +14,7 @@ export function Accordion(): JSX.Element {
     >
       <button
         type="button"
+        data-testid="accordion-button"
         style={{
           fontSize: "1.1em",
           fontWeight: 500,
diff --git a/apps/docs/components/search.tsx b/apps/docs/components/search.tsx
index e57ea51..f9663e9 100644
--- a/apps/docs/components/search.tsx
+++ b/apps/docs/components/search.tsx
@@ -124,6 +124,7 @@ export function Search(): JSX.Element {
         Search Books
       </label>
       <input
+        data-testid="search-input"
         id="searchInput"
         placeholder="Harry Potter"
         type="text"
@@ -146,10 +147,7 @@ export function Search(): JSX.Element {
       >
         {books
           .filter(({ title }) =>
-            title
-              .toLowerCase()
-              .trim()
-              .includes(searchText.toLowerCase().trim()),
+            title.toLowerCase().trim().includes(searchText.toLowerCase().trim())
           )
           .map(({ id, title, imgSrc }) => (
             <Book key={id} title={title} imgSrc={imgSrc} />
diff --git a/apps/docs/tests/components.test.tsx b/apps/docs/tests/components.test.tsx
index b8bbffe..f412ded 100644
--- a/apps/docs/tests/components.test.tsx
+++ b/apps/docs/tests/components.test.tsx
@@ -9,6 +9,8 @@ import { describe, test, expect, beforeAll, vi } from "vitest";
 import { TodoList } from "../components/todo-list";
 import "@testing-library/jest-dom";
 import { MagicMotion } from "../../../packages/react-magic-motion/magic-motion";
+import { Accordion } from "../components/accordion";
+import { Search } from "../components/search";
 
 describe("Application Tests", () => {
   beforeAll(() => {
@@ -56,4 +58,43 @@ describe("Application Tests", () => {
       expect(container).toHaveTextContent("New To Do Item");
     });
   });
+
+  test("accordion component", async () => {
+    const { container } = render(
+      <MagicMotion>
+        <Accordion />
+      </MagicMotion>
+    );
+    expect(container).toHaveTextContent("Click me to see my content");
+    expect(container).not.toHaveTextContent(
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida lobortis sem, vel blandit dolor ultrices nec. Donec dapibus tellus ut libero sagittis, a pharetra eros placerat. Aliquam erat volutpat. Nunc nec nisl ac turpis semper pharetra. Nullam pulvinar pellentesque mauris, sit amet tincidunt nisl convallis id."
+    );
+
+    const accordionButton = getByTestId(container, "accordion-button");
+    act(() => {
+      accordionButton.click();
+    });
+    await waitFor(() => {
+      expect(container).toHaveTextContent(
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida lobortis sem, vel blandit dolor ultrices nec. Donec dapibus tellus ut libero sagittis, a pharetra eros placerat. Aliquam erat volutpat. Nunc nec nisl ac turpis semper pharetra. Nullam pulvinar pellentesque mauris, sit amet tincidunt nisl convallis id."
+      );
+    });
+  });
+  test("search component", async () => {
+    const { container } = render(
+      <MagicMotion>
+        <Search />
+      </MagicMotion>
+    );
+    expect(container).toHaveTextContent("Dune");
+    expect(container).toHaveTextContent("Foundation");
+    expect(container).toHaveTextContent("Gone Girl");
+    const searchInput = getByTestId(container, "search-input");
+    fireEvent.change(searchInput, { target: { value: "Dune" } });
+    await waitFor(() => {
+      expect(container).toHaveTextContent("Dune");
+      expect(container).not.toHaveTextContent("Foundation");
+      expect(container).not.toHaveTextContent("Gone Girl");
+    });
+  });
 });