From 30adb1b22030c2fce89acd0a077d45a61beb67ab Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 13:34:42 +0200
Subject: [PATCH 01/29] WIP

---
 src/App.css             |  38 -----
 src/App.tsx             |  18 +-
 src/assets/quizData.js  | 353 ++++++++++++++++++++++++++++++++++++++++
 src/components/Quiz.css |  43 +++++
 src/components/Quiz.jsx |  21 +++
 src/index.css           |  17 +-
 6 files changed, 423 insertions(+), 67 deletions(-)
 create mode 100644 src/assets/quizData.js
 create mode 100644 src/components/Quiz.css
 create mode 100644 src/components/Quiz.jsx

diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index 2f39c44..3b52605 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,10 @@
 import React from 'react';
-import logo from './aca.png';
-import './App.css';
+import Quiz from './components/Quiz'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} style={{maxWidth:150, maxHeight:150}} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://africacode.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          I Love ACA
-        </a>
-      </header>
+      <Quiz />
     </div>
   );
 }
diff --git a/src/assets/quizData.js b/src/assets/quizData.js
new file mode 100644
index 0000000..181faf4
--- /dev/null
+++ b/src/assets/quizData.js
@@ -0,0 +1,353 @@
+const data = [
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"Which of the following is correct about JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+    {
+        question:"What is JavaScript?",
+        option1:"JavaScript is a scripting language used to make the website interactive",
+        option2:"JavaScript is an assembly language used to make the website interactive",
+        option3:"JavaScript is a compiled language used to make the website interactive",
+        option4:"None of the mentioned"
+    },
+
+]
\ No newline at end of file
diff --git a/src/components/Quiz.css b/src/components/Quiz.css
new file mode 100644
index 0000000..9aa0060
--- /dev/null
+++ b/src/components/Quiz.css
@@ -0,0 +1,43 @@
+body{
+    background-color: rgb(25, 25, 27);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.itemsContainer{
+    background-color: rgb(230, 230, 230);
+    width: 100%;
+    padding: 20px;
+    text-align: left;
+}
+
+h1{
+    color: white;
+    text-align: center;
+    margin: 40px;
+}
+
+.itemsContainer li {
+    list-style-type: none;
+    margin-top: 20px;
+    border: solid 1px gray;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.itemsContainer button{
+    background-color: rgb(9, 216, 219);
+    margin: 10px;
+    position: relative;
+    left: 35%;
+    font-size: 18px;
+    font-weight: 700;
+    color: #dad8d8;
+    padding: 5px;
+    border: none;
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
new file mode 100644
index 0000000..0d2bdb1
--- /dev/null
+++ b/src/components/Quiz.jsx
@@ -0,0 +1,21 @@
+import './Quiz.css';
+
+function Quiz() {
+    return(
+        <div className='container'>
+            <h1>Javascript Quiz</h1>
+            <div className="itemsContainer">
+                <h3>1. What is JavaScript?</h3>
+                <ul>
+                    <li> JavaScript is a scripting language used to make the website interactive</li>
+                    <li>JavaScript is an assembly language used to make the website interactive</li>
+                    <li> JavaScript is a compiled language used to make the website interactive</li>
+                    <li>None of the mentioned</li>
+                </ul>
+                <button>Next question</button>
+            </div>
+        </div>
+    )
+}
+
+export default Quiz;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..afafd28 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,4 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+*{
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file

From 0fa35196cb77447164e6e9cbb0cc116418777f7c Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 14:13:02 +0200
Subject: [PATCH 02/29] Working progress

---
 src/assets/quizData.js  | 76 ++++++++++++++++++++---------------------
 src/components/Quiz.jsx | 16 ++++++---
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/src/assets/quizData.js b/src/assets/quizData.js
index 181faf4..bfda87a 100644
--- a/src/assets/quizData.js
+++ b/src/assets/quizData.js
@@ -1,4 +1,4 @@
-const data = [
+export const data = [
     {
         question:"What is JavaScript?",
         option1:"JavaScript is a scripting language used to make the website interactive",
@@ -8,59 +8,59 @@ const data = [
     },
     {
         question:"Which of the following is correct about JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        option1:"JavaScript is an Object-Based language",
+        option2:"JavaScript is Assembly-language",
+        option3:"JavaScript is an Object-Oriented language",
+        option4:"JavaScript is a High-level language"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
+        question:"Among the given statements, which statement defines closures in JavaScript?",
+        option1:" JavaScript is a function that is enclosed with references to its inner function scope",
+        option2:"JavaScript is a function that is enclosed with references to its lexical environmen",
+        option3:"JavaScript is a function that is enclosed with the object to its inner function scope",
         option4:"None of the mentioned"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Arrays in JavaScript are defined by which of the following statements?",
+        option1:"It is an ordered list of values",
+        option2:"It is an ordered list of objects",
+        option3:"It is an ordered list of stringe",
+        option4:"It is an ordered list of functions"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
+        question:"Which of the following is not javascript data types?",
+        option1:"Null type",
+        option2:"Undefined type",
+        option3:"Number type",
         option4:"None of the mentioned"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Where is Client-side JavaScript code is embedded within HTML documents?",
+        option1:"A URL that uses the special javascript:code",
+        option2:"A URL that uses the special javascript:protocol",
+        option3:"A URL that uses the special javascript:encoding",
+        option4:"A URL that uses the special javascript:stack"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following object is the main entry point to all client-side JavaScript features and APIs?",
+        option1:"Position",
+        option2:"Window",
+        option3:"Standard",
+        option4:"Location"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following can be used to call a JavaScript Code Snippet?",
+        option1:"Function/Method",
+        option2:"Preprocessor",
+        option3:"Triggering Event",
+        option4:"RMI"
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following explains correctly what happens when a JavaScript program is developed on a Unix Machine?",
+        option1:"will work perfectly well on a Windows Machine",
+        option2:"will be displayed as JavaScript text on the browser",
+        option3:"will throw errors and exceptions",
+        option4:"must be restricted to a Unix Machine only"
     },
     {
         question:"What is JavaScript?",
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 0d2bdb1..a372382 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,16 +1,22 @@
+import React, {useState} from 'react';
+import {data} from '../assets/quizData';
 import './Quiz.css';
 
 function Quiz() {
+
+    let [questionIndex, setQuestionIndex] = useState(0);
+    let [question, setQuestion] = useState(data[questionIndex]);
+
     return(
         <div className='container'>
             <h1>Javascript Quiz</h1>
             <div className="itemsContainer">
-                <h3>1. What is JavaScript?</h3>
+                <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
-                    <li> JavaScript is a scripting language used to make the website interactive</li>
-                    <li>JavaScript is an assembly language used to make the website interactive</li>
-                    <li> JavaScript is a compiled language used to make the website interactive</li>
-                    <li>None of the mentioned</li>
+                    <li>{question.option1}</li>
+                    <li>{question.option2}</li>
+                    <li>{question.option3}</li>
+                    <li>{question.option4}</li>
                 </ul>
                 <button>Next question</button>
             </div>

From 6c844d69de9fdc29670a6bd618db95171262bfd7 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 14:56:24 +0200
Subject: [PATCH 03/29] should more data

---
 src/assets/quizData.js | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/assets/quizData.js b/src/assets/quizData.js
index bfda87a..a0809f3 100644
--- a/src/assets/quizData.js
+++ b/src/assets/quizData.js
@@ -4,70 +4,72 @@ export const data = [
         option1:"JavaScript is a scripting language used to make the website interactive",
         option2:"JavaScript is an assembly language used to make the website interactive",
         option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        option4:"None of the mentioned",
+        answer: 1
     },
     {
         question:"Which of the following is correct about JavaScript?",
         option1:"JavaScript is an Object-Based language",
         option2:"JavaScript is Assembly-language",
         option3:"JavaScript is an Object-Oriented language",
-        option4:"JavaScript is a High-level language"
+        option4:"JavaScript is a High-level language",
+        answer: 1
     },
     {
         question:"Among the given statements, which statement defines closures in JavaScript?",
         option1:" JavaScript is a function that is enclosed with references to its inner function scope",
         option2:"JavaScript is a function that is enclosed with references to its lexical environmen",
         option3:"JavaScript is a function that is enclosed with the object to its inner function scope",
-        option4:"None of the mentioned"
+        option4:"None of the mentioned",
+        answer: 2
     },
     {
         question:"Arrays in JavaScript are defined by which of the following statements?",
         option1:"It is an ordered list of values",
         option2:"It is an ordered list of objects",
         option3:"It is an ordered list of stringe",
-        option4:"It is an ordered list of functions"
+        option4:"It is an ordered list of functions",
+        answer: 1
     },
     {
         question:"Which of the following is not javascript data types?",
         option1:"Null type",
         option2:"Undefined type",
         option3:"Number type",
-        option4:"None of the mentioned"
+        option4:"None of the mentioned",
+        answer: 4
     },
     {
         question:"Where is Client-side JavaScript code is embedded within HTML documents?",
         option1:"A URL that uses the special javascript:code",
         option2:"A URL that uses the special javascript:protocol",
         option3:"A URL that uses the special javascript:encoding",
-        option4:"A URL that uses the special javascript:stack"
+        option4:"A URL that uses the special javascript:stack",
+        answer: 2
     },
     {
         question:"Which of the following object is the main entry point to all client-side JavaScript features and APIs?",
         option1:"Position",
         option2:"Window",
         option3:"Standard",
-        option4:"Location"
+        option4:"Location",
+        answer: 2
     },
     {
         question:"Which of the following can be used to call a JavaScript Code Snippet?",
         option1:"Function/Method",
         option2:"Preprocessor",
         option3:"Triggering Event",
-        option4:"RMI"
+        option4:"RMI",
+        answer: 1
     },
     {
         question:"Which of the following explains correctly what happens when a JavaScript program is developed on a Unix Machine?",
         option1:"will work perfectly well on a Windows Machine",
         option2:"will be displayed as JavaScript text on the browser",
         option3:"will throw errors and exceptions",
-        option4:"must be restricted to a Unix Machine only"
-    },
-    {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        option4:"must be restricted to a Unix Machine only",
+        answer: 1
     },
     {
         question:"What is JavaScript?",

From 06f6258bb3b97664e29d587ff141d8f7cda0f098 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 14:58:11 +0200
Subject: [PATCH 04/29] WIP

---
 src/components/Quiz.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/Quiz.css b/src/components/Quiz.css
index 9aa0060..1085e0c 100644
--- a/src/components/Quiz.css
+++ b/src/components/Quiz.css
@@ -40,4 +40,15 @@ h1{
     padding: 5px;
     border: none;
     border-radius: 5px;
+    cursor: pointer;
+}
+
+.correct{
+    background-color: rgb(73, 244, 158);
+    border-color: rgb(73, 244, 158);
+}
+
+.wrong{
+    background-color: rgb(233, 82, 62);
+    border-color: rgb(233, 82, 62);
 }
\ No newline at end of file

From 83ff5accd26e9a80c0d5f7ddddddc5aef07bb5c4 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 15:01:18 +0200
Subject: [PATCH 05/29] update

---
 src/components/Quiz.jsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index a372382..6aff2d1 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -7,18 +7,31 @@ function Quiz() {
     let [questionIndex, setQuestionIndex] = useState(0);
     let [question, setQuestion] = useState(data[questionIndex]);
 
+    const checkMyAnswer = (element, answer) => {
+        if(question.answer===answer) {
+            element.target.classList.add("correct");
+        }
+        else{
+            element.target.classList.add("wrong")
+        }
+    }
+    const next = () => {
+        setQuestionIndex(++questionIndex);
+        setQuestion(data[questionIndex]);
+    }
+
     return(
         <div className='container'>
             <h1>Javascript Quiz</h1>
             <div className="itemsContainer">
                 <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
-                    <li>{question.option1}</li>
-                    <li>{question.option2}</li>
-                    <li>{question.option3}</li>
-                    <li>{question.option4}</li>
+                    <li onClick={(element)=>{checkMyAnswer(element,1)}}>{question.option1}</li>
+                    <li onClick={(element)=>{checkMyAnswer(element,2)}}>{question.option2}</li>
+                    <li onClick={(element)=>{checkMyAnswer(element,3)}}>{question.option3}</li>
+                    <li onClick={(element)=>{checkMyAnswer(element,4)}}>{question.option4}</li>
                 </ul>
-                <button>Next question</button>
+                <button onClick={next}>Next question</button>
             </div>
         </div>
     )

From dcf42e2117a0124a87867a150174290b0410e0cc Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 22:10:00 +0200
Subject: [PATCH 06/29] Update

---
 src/components/Quiz.jsx | 71 +++++++++++++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 6aff2d1..966ecf2 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {data} from '../assets/quizData';
 import './Quiz.css';
 
@@ -6,18 +6,59 @@ function Quiz() {
 
     let [questionIndex, setQuestionIndex] = useState(0);
     let [question, setQuestion] = useState(data[questionIndex]);
+    let [closed, setClosed] = useState(false);
+    let [score, setScore] = useState(0)
 
+    let option1 = useRef(null);
+    let option2 = useRef(null);
+    let option3 = useRef(null);
+    let option4 = useRef(null);
+
+    let myOptions = [option1, option2, option3, option4];
+
+    //checks the answer 
     const checkMyAnswer = (element, answer) => {
-        if(question.answer===answer) {
-            element.target.classList.add("correct");
-        }
-        else{
-            element.target.classList.add("wrong")
+        if(closed === false){
+            if(question.answer===answer) {
+                element.target.classList.add("correct");
+                setClosed(true);
+                setScore(score + 1);
+            }
+            else{
+                element.target.classList.add("wrong");
+                setClosed(true);
+                myOptions[question.answer-1].current.classList.add("correct");
+            }
         }
+
     }
+    //navigates to the next question
     const next = () => {
-        setQuestionIndex(++questionIndex);
-        setQuestion(data[questionIndex]);
+        if(closed === true){
+            setQuestionIndex(++questionIndex);
+            setQuestion(data[questionIndex]);
+            setClosed(false);
+            //Reset the color scheme
+            myOptions.map((option) => {
+                option.current.classList.remove("wrong");
+                option.current.classList.remove("correct");
+                return null;
+            })
+        }
+    }
+
+    const done = () => {
+        if(closed === true){
+            setQuestionIndex(++questionIndex);
+            setQuestion(data[questionIndex]);
+            setClosed(false);
+            //Reset the color scheme
+            myOptions.map((option) => {
+                option.current.classList.remove("wrong");
+                option.current.classList.remove("correct");
+                return null;
+            })
+        }
     }
 
     return(
@@ -26,12 +67,16 @@ function Quiz() {
             <div className="itemsContainer">
                 <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
-                    <li onClick={(element)=>{checkMyAnswer(element,1)}}>{question.option1}</li>
-                    <li onClick={(element)=>{checkMyAnswer(element,2)}}>{question.option2}</li>
-                    <li onClick={(element)=>{checkMyAnswer(element,3)}}>{question.option3}</li>
-                    <li onClick={(element)=>{checkMyAnswer(element,4)}}>{question.option4}</li>
+                    <li ref={option1} onClick={(element)=>{checkMyAnswer(element,1)}}>{question.option1}</li>
+                    <li ref={option2} onClick={(element)=>{checkMyAnswer(element,2)}}>{question.option2}</li>
+                    <li ref={option3} onClick={(element)=>{checkMyAnswer(element,3)}}>{question.option3}</li>
+                    <li ref={option4} onClick={(element)=>{checkMyAnswer(element,4)}}>{question.option4}</li>
                 </ul>
-                <button onClick={next}>Next question</button>
+                {questionIndex === data.length - 1 ? (
+                    <button onClick={done}>Last question</button>
+                ):(
+                    <button onClick={next}>Next question</button>
+                )}
             </div>
         </div>
     )

From c65b47c428cd07c7abbb6efcf2218bbabaa50d44 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 22:43:06 +0200
Subject: [PATCH 07/29] Last Update

---
 src/assets/quizData.js | 450 +++++++++++++++++++++++------------------
 1 file changed, 250 insertions(+), 200 deletions(-)

diff --git a/src/assets/quizData.js b/src/assets/quizData.js
index a0809f3..85359c1 100644
--- a/src/assets/quizData.js
+++ b/src/assets/quizData.js
@@ -1,3 +1,5 @@
+// NEXT TIME REMEMBER THE EXISTENCES OF SOMETHING CALLED API's CAUSE AIN'T MORE WAY I DID ALL OF THIS
+
 export const data = [
     {
         question:"What is JavaScript?",
@@ -72,284 +74,332 @@ export const data = [
         answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following scoping type does JavaScript use?",
+        option1:"Sequential",
+        option2:"Segmental",
+        option3:"Lexical",
+        option4:"Literal",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"What is the basic difference between JavaScript and Java?",
+        option1:"Functions are considered as fields",
+        option2:"Functions are values, and there is no hard distinction between methods and fields",
+        option3:"Variables are specific",
+        option4:"There is no difference",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Why JavaScript Engine is needed?",
+        option1:" Both Compiling & Interpreting the JavaScript",
+        option2:" Parsing the javascript",
+        option3:"Interpreting the JavaScript",
+        option4:"Compiling the JavaScript",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following methods/operation does javascript use instead of == and !=?",
+        option1:" JavaScript uses equalto()",
+        option2:" JavaScript uses equals() and notequals() instead",
+        option3:" JavaScript uses bitwise checkinge",
+        option4:" JavaScript uses === and !== instead",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Why event handlers is needed in JS?",
+        option1:"Allows JavaScript code to alter the behaviour of windows",
+        option2:"Adds innerHTML page to the code",
+        option3:"Change the server location",
+        option4:"Performs handling of exceptions and occurrences",
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following is not a framework?",
+        option1:"JavaScript .NET",
+        option2:"JavaScript",
+        option3:"Cocoa JS",
+        option4:"jQuery",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following is the property that is triggered in response to JS errors?",
+        option1:"onclick",
+        option2:"onerror",
+        option3:"onmessage",
+        option4:"onexception",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:" Which of the following is not an error in JavaScript?",
+        option1:"Missing of Bracket",
+        option2:"Division by zero",
+        option3:"Syntax error",
+        option4:"Missing of semicolons",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which function among the following lets to register a function to be invoked once?",
+        option1:"setTimeout()",
+        option2:"setTotaltime()",
+        option3:"setInterval()",
+        option4:"settime()",
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which function among the following lets to register a function to be invoked repeatedly after a certain time?",
+        option1:"setTimeout()",
+        option2:"setTotaltime()",
+        option3:"setInterval()",
+        option4:"settime()",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which is the handler method used to invoke when uncaught JavaScript exceptions occur?",
+        option1:"Onhalt",
+        option2:"Onerror",
+        option3:"Both onhalt and onerror",
+        option4:"Onsuspend",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which property is used to obtain browser vendor and version information?",
+        option1:"modal",
+        option2:"version",
+        option3:"browser",
+        option4:"navigator",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which method receives the return value of setInterval() to cancel future invocations?",
+        option1:"clearInvocation()",
+        option2:"cancelInvocation()",
+        option3:"clearInterval()",
+        option4:"clear()",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The setTimeout() belongs to which object?",
+        option1:"Element",
+        option2:"Window",
+        option3:"Location",
+        option4:"Event",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which method receives the return value of setTimeout() to cancel future invocations?",
+        option1:"clearTimeout()",
+        option2:" clearInterval()",
+        option3:"clearSchedule()",
+        option4:" cancelInvocation()", 
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"What will happen if we call setTimeout() with a time of 0 ms?",
+        option1:"Placed in stack",
+        option2:"Placed in queue",
+        option3:"Will run continuously",
+        option4:"Will execute immediately",  
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"To which object does the location property belong?",
+        option1:"Window",
+        option2:"Position",
+        option3:"Element",
+        option4:"Location",
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The events that are not triggered directly by user activity are called ___________",
+        option1:"Device-independent input events",
+        option2:"Device-dependent input events",
+        option3:"User interface events",
+        option4:"State change events",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The video and the audio belong to the _________",
+        option1:"Timers and error handlers",
+        option2:"API-Specific events",
+        option3:"State change events",
+        option4:"User interface events",
+        answer: b
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which are the events that have default actions that can be canceled by event handlers?",
+        option1:"Submit and form-related events",
+        option2:"Reset and form-related events",
+        option3:"Submit and reset events",
+        option4:"form-related events",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The events that represent occurrences related to the browser window are _________",
+        option1:"Window",
+        option2:"Element",
+        option3:"Display",
+        option4:"Handlers",
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Do functions in JavaScript necessarily return a value?",
+        option1:"It is mandatory",
+        option2:"Not necessary",
+        option3:"Few functions return values by default",
+        option4:"some functions do not return any value",
+        answer: c
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"What are the three important manipulations done in a for loop on a loop variable?",
+        option1:"Updation, Incrementation, Initialization",
+        option2:"Initialization,Testing, Updation",
+        option3:"Testing, Updation, Testing",
+        option4:" Initialization,Testing, Incrementation",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Among the keywords below, which one is not a statement?",
+        option1:"debugger",
+        option2:"with",
+        option3:"if",
+        option4:"use strict",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"What is React.js?",
+        option1:"Open-source JavaScript back-end library",
+        option2:"JavaScript front-end library to create a database",
+        option3:"Free and open-source JavaScript front-end library",
+        option4:"None of the mentioned",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following acts as the input of a class-based component?",
+        option1:"Class",
+        option2:"Props",
+        option3:" Factory",
+        option4:"None of the mentioned",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"React.js is written in which of the following language?",
+        option1:"C",
+        option2:"C++",
+        option3:"JavaScript",
+        option4:"Java",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"How many elements can a valid react component return?",
+        option1:"React doesn’t return element",
+        option2:"1 Element",
+        option3:"More than 1 element",
+        option4:"None of the mentioned",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"In which of the following directory React Components are saved?",
+        option1:"Inside js/components/",
+        option2:"Inside components/js",
+        option3:"Inside vendor/js/components/",
+        option4:"Inside vendor/components/",
+        answer: 1
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following command is used to Install create-react-app?",
+        option1:"npm install create-react-app",
+        option2:"npm install -f create-react-app",
+        option3:"npm install -g create-react-app",
+        option4:"install -g create-react-app", 
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following is method is not a part of ReactDOM?",
+        option1:"ReactDOM.hydrate()",
+        option2:"ReactDOM.destroy()",
+        option3:"ReactDOM.createPortal()",
+        option4:"All of the mentioned",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following is correct about prop in react?",
+        option1:"Can be changed inside another component",
+        option2:"Can be changed inside the component",
+        option3:"Cannot be changed in the component",
+        option4:"All of the mentioned",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"A function definition expression can be called as __________",
+        option1:"Function prototype",
+        option2:"Function literal",
+        option3:"Function calling",
+        option4:"Function declaration",
+        answer: 2
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The expression of calling (or executing) a function or method in JavaScript is called ________",
+        option1:"Primary expression",
+        option2:"Functional expression",
+        option3:"Invocation expression",
+        option4:"Property Access Expression", 
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Among the following, which one is a ternary operator?",
+        option1:"+",
+        option2:":",
+        option3:"-",
+        option4:"?:",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"A hexadecimal literal begins with __________",
+        option1:"00",
+        option2:"0x",
+        option3:"0X",
+        option4:"Both 0x and 0X",
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"Which of the following is not considered as an error in JavaScript?",
+        option1:"Syntax error",
+        option2:"Missing of semicolons",
+        option3:"Division by zero",
+        option4:"Missing of Bracket",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The escape sequence ‘\f’ stands for _________",
+        option1:"Floating numbers",
+        option2:"Representation of functions that returns a value",
+        option3:"\f is not present in JavaScript",
+        option4:"Form feed", 
+        answer: 4
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"The statement a===b refers to _________",
+        option1:"Both a and b are equal in value, type and reference address",
+        option2:"Both a and b are equal in value",
+        option3:"Both a and b are equal in value and type",
+        option4:"There is no such statement",
+        answer: 3
     },
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned"
+        question:"What is closure?",
+        option1:"Function objects",
+        option2:"Scope where function’s variables are resolved",
+        option3:"Both Function objects and Scope where function’s variables are resolved",
+        option4:"Function return value",
+        answer: 3
+    },
+    {
+        question:"Which of the following is not an example of closures?",
+        option1:"Objects",
+        option2:"Variables",
+        option3:"Functions",
+        option4:"Graphics",
+        answer: 4
     },
 
 ]
\ No newline at end of file

From 42827350def6b1aa7c2c0df30490af436181e42f Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Wed, 3 Jul 2024 22:47:18 +0200
Subject: [PATCH 08/29] Last Update

---
 src/assets/quizData.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/quizData.js b/src/assets/quizData.js
index 85359c1..e90f651 100644
--- a/src/assets/quizData.js
+++ b/src/assets/quizData.js
@@ -223,7 +223,7 @@ export const data = [
         option2:"API-Specific events",
         option3:"State change events",
         option4:"User interface events",
-        answer: b
+        answer: 2
     },
     {
         question:"Which are the events that have default actions that can be canceled by event handlers?",
@@ -247,7 +247,7 @@ export const data = [
         option2:"Not necessary",
         option3:"Few functions return values by default",
         option4:"some functions do not return any value",
-        answer: c
+        answer: 3
     },
     {
         question:"What are the three important manipulations done in a for loop on a loop variable?",

From dc50dfbc1ba1cab0afb40e2eda60d7222154efc8 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 02:31:22 +0200
Subject: [PATCH 09/29] WIP

---
 src/App.tsx                    | 13 +++++++++++--
 src/components/Context.jsx     |  3 +++
 src/components/Quiz.css        |  7 +++++--
 src/components/Quiz.jsx        | 19 ++++++++-----------
 src/components/ScoreScreen.css | 28 ++++++++++++++++++++++++++++
 src/components/ScoreScreen.jsx | 20 ++++++++++++++++++++
 6 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Context.jsx
 create mode 100644 src/components/ScoreScreen.css
 create mode 100644 src/components/ScoreScreen.jsx

diff --git a/src/App.tsx b/src/App.tsx
index 3b52605..486219e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,19 @@
-import React from 'react';
+import React, {useState, useContext} from 'react';
 import Quiz from './components/Quiz'
+import ScoreScreen from './components/ScoreScreen';
+import { AppContext } from './components/Context';
+
 
 function App() {
+  let [quizState, setQuizState] = useState("container");
+  let [score, setScore] = useState(0);
+
   return (
     <div className="App">
-      <Quiz />
+      <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
+        {quizState === "container" && <Quiz/>}
+        {quizState === "endGame" && <ScoreScreen/>}
+      </AppContext.Provider> 
     </div>
   );
 }
diff --git a/src/components/Context.jsx b/src/components/Context.jsx
new file mode 100644
index 0000000..580331b
--- /dev/null
+++ b/src/components/Context.jsx
@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const AppContext = createContext();
\ No newline at end of file
diff --git a/src/components/Quiz.css b/src/components/Quiz.css
index 1085e0c..71b2814 100644
--- a/src/components/Quiz.css
+++ b/src/components/Quiz.css
@@ -1,6 +1,5 @@
 body{
     background-color: rgb(25, 25, 27);
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,7 +29,7 @@ h1{
 }
 
 .itemsContainer button{
-    background-color: rgb(9, 216, 219);
+    background-color: rgb(5, 190, 193);
     margin: 10px;
     position: relative;
     left: 35%;
@@ -43,6 +42,10 @@ h1{
     cursor: pointer;
 }
 
+button:hover{
+    background-color: rgb(9, 150, 152);
+}
+
 .correct{
     background-color: rgb(73, 244, 158);
     border-color: rgb(73, 244, 158);
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 966ecf2..18599e4 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,13 +1,15 @@
-import React, {useRef, useState} from 'react';
+import React, {useRef, useState, useContext} from 'react';
 import {data} from '../assets/quizData';
+import { AppContext } from './Context';
 import './Quiz.css';
 
 function Quiz() {
 
+    let {setQuizState, score, setScore} = useContext(AppContext);
     let [questionIndex, setQuestionIndex] = useState(0);
     let [question, setQuestion] = useState(data[questionIndex]);
     let [closed, setClosed] = useState(false);
-    let [score, setScore] = useState(0)
+    
 
     let option1 = useRef(null);
     let option2 = useRef(null);
@@ -51,19 +53,14 @@ function Quiz() {
         if(closed === true){
             setQuestionIndex(++questionIndex);
             setQuestion(data[questionIndex]);
-            setClosed(false);
-            //Reset the color scheme
-            myOptions.map((option) => {
-                option.current.classList.remove("wrong");
-                option.current.classList.remove("correct");
-                return null;
-            })
+            setQuizState("endGame");
         }
+        
     }
 
     return(
         <div className='container'>
-            <h1>Javascript Quiz</h1>
+            <h1>Quiz</h1>
             <div className="itemsContainer">
                 <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
@@ -77,7 +74,7 @@ function Quiz() {
                 ):(
                     <button onClick={next}>Next question</button>
                 )}
-            </div>
+            </div>  
         </div>
     )
 }
diff --git a/src/components/ScoreScreen.css b/src/components/ScoreScreen.css
new file mode 100644
index 0000000..b65fdb1
--- /dev/null
+++ b/src/components/ScoreScreen.css
@@ -0,0 +1,28 @@
+.endGame{
+    height: 100vh;
+    width: 1355px;
+    background: linear-gradient(white 50%, rgb(31, 114, 247) 50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.title{
+    color: #000;
+}
+.endGameContent{
+    background-color: rgb(230, 230, 230);
+    width: 300px;
+    height: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+hr{
+    border: 2px solid;
+}
+
+h2{
+    margin-top: 50px;
+    font-size: 55px;
+}
\ No newline at end of file
diff --git a/src/components/ScoreScreen.jsx b/src/components/ScoreScreen.jsx
new file mode 100644
index 0000000..21332c3
--- /dev/null
+++ b/src/components/ScoreScreen.jsx
@@ -0,0 +1,20 @@
+import React, {useContext, useState} from "react";
+import './ScoreScreen.css'
+import {data} from '../assets/quizData';
+import { AppContext } from './Context';
+
+function ScoreScreen(){
+    let { score, setScore} = useContext(AppContext);
+    return(
+        <div className="endGame">
+            <h1 className="title">Quiz has Ended</h1>
+            <div className="endGameContent">
+                <h3>Score</h3>
+                <hr />
+                <h2>{score}/{data.length}</h2>
+            </div>
+        </div>
+    ) 
+}
+
+export default ScoreScreen;
\ No newline at end of file

From 760e8490e851f5d3825be8fa2eb3b4b0e7a59fc0 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 02:40:49 +0200
Subject: [PATCH 10/29] Revert "Merge branch 'reviews'"

This reverts commit ea0047371cd5395604e2733e6e12eda61007597f, reversing
changes made to 42827350def6b1aa7c2c0df30490af436181e42f.
---
 src/App.tsx                    | 13 ++-----------
 src/components/Context.jsx     |  3 ---
 src/components/Quiz.css        |  7 ++-----
 src/components/Quiz.jsx        | 19 +++++++++++--------
 src/components/ScoreScreen.css | 28 ----------------------------
 src/components/ScoreScreen.jsx | 20 --------------------
 6 files changed, 15 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/Context.jsx
 delete mode 100644 src/components/ScoreScreen.css
 delete mode 100644 src/components/ScoreScreen.jsx

diff --git a/src/App.tsx b/src/App.tsx
index 486219e..3b52605 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,19 +1,10 @@
-import React, {useState, useContext} from 'react';
+import React from 'react';
 import Quiz from './components/Quiz'
-import ScoreScreen from './components/ScoreScreen';
-import { AppContext } from './components/Context';
-
 
 function App() {
-  let [quizState, setQuizState] = useState("container");
-  let [score, setScore] = useState(0);
-
   return (
     <div className="App">
-      <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
-        {quizState === "container" && <Quiz/>}
-        {quizState === "endGame" && <ScoreScreen/>}
-      </AppContext.Provider> 
+      <Quiz />
     </div>
   );
 }
diff --git a/src/components/Context.jsx b/src/components/Context.jsx
deleted file mode 100644
index 580331b..0000000
--- a/src/components/Context.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {createContext} from 'react';
-
-export const AppContext = createContext();
\ No newline at end of file
diff --git a/src/components/Quiz.css b/src/components/Quiz.css
index 71b2814..1085e0c 100644
--- a/src/components/Quiz.css
+++ b/src/components/Quiz.css
@@ -1,5 +1,6 @@
 body{
     background-color: rgb(25, 25, 27);
+
     display: flex;
     justify-content: center;
     align-items: center;
@@ -29,7 +30,7 @@ h1{
 }
 
 .itemsContainer button{
-    background-color: rgb(5, 190, 193);
+    background-color: rgb(9, 216, 219);
     margin: 10px;
     position: relative;
     left: 35%;
@@ -42,10 +43,6 @@ h1{
     cursor: pointer;
 }
 
-button:hover{
-    background-color: rgb(9, 150, 152);
-}
-
 .correct{
     background-color: rgb(73, 244, 158);
     border-color: rgb(73, 244, 158);
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 18599e4..966ecf2 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,15 +1,13 @@
-import React, {useRef, useState, useContext} from 'react';
+import React, {useRef, useState} from 'react';
 import {data} from '../assets/quizData';
-import { AppContext } from './Context';
 import './Quiz.css';
 
 function Quiz() {
 
-    let {setQuizState, score, setScore} = useContext(AppContext);
     let [questionIndex, setQuestionIndex] = useState(0);
     let [question, setQuestion] = useState(data[questionIndex]);
     let [closed, setClosed] = useState(false);
-    
+    let [score, setScore] = useState(0)
 
     let option1 = useRef(null);
     let option2 = useRef(null);
@@ -53,14 +51,19 @@ function Quiz() {
         if(closed === true){
             setQuestionIndex(++questionIndex);
             setQuestion(data[questionIndex]);
-            setQuizState("endGame");
+            setClosed(false);
+            //Reset the color scheme
+            myOptions.map((option) => {
+                option.current.classList.remove("wrong");
+                option.current.classList.remove("correct");
+                return null;
+            })
         }
-        
     }
 
     return(
         <div className='container'>
-            <h1>Quiz</h1>
+            <h1>Javascript Quiz</h1>
             <div className="itemsContainer">
                 <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
@@ -74,7 +77,7 @@ function Quiz() {
                 ):(
                     <button onClick={next}>Next question</button>
                 )}
-            </div>  
+            </div>
         </div>
     )
 }
diff --git a/src/components/ScoreScreen.css b/src/components/ScoreScreen.css
deleted file mode 100644
index b65fdb1..0000000
--- a/src/components/ScoreScreen.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.endGame{
-    height: 100vh;
-    width: 1355px;
-    background: linear-gradient(white 50%, rgb(31, 114, 247) 50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-.title{
-    color: #000;
-}
-.endGameContent{
-    background-color: rgb(230, 230, 230);
-    width: 300px;
-    height: 200px;
-    padding: 20px;
-    text-align: center;
-}
-
-hr{
-    border: 2px solid;
-}
-
-h2{
-    margin-top: 50px;
-    font-size: 55px;
-}
\ No newline at end of file
diff --git a/src/components/ScoreScreen.jsx b/src/components/ScoreScreen.jsx
deleted file mode 100644
index 21332c3..0000000
--- a/src/components/ScoreScreen.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, {useContext, useState} from "react";
-import './ScoreScreen.css'
-import {data} from '../assets/quizData';
-import { AppContext } from './Context';
-
-function ScoreScreen(){
-    let { score, setScore} = useContext(AppContext);
-    return(
-        <div className="endGame">
-            <h1 className="title">Quiz has Ended</h1>
-            <div className="endGameContent">
-                <h3>Score</h3>
-                <hr />
-                <h2>{score}/{data.length}</h2>
-            </div>
-        </div>
-    ) 
-}
-
-export default ScoreScreen;
\ No newline at end of file

From b7730e9111bb3f3f2b5050113b6b3a25f840bfe6 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 02:51:20 +0200
Subject: [PATCH 11/29] UPDATE

This reverts commit 760e8490e851f5d3825be8fa2eb3b4b0e7a59fc0.
---
 src/App.tsx                    | 13 +++++++++++--
 src/components/Context.jsx     |  3 +++
 src/components/Quiz.css        |  7 +++++--
 src/components/Quiz.jsx        | 19 ++++++++-----------
 src/components/ScoreScreen.css | 28 ++++++++++++++++++++++++++++
 src/components/ScoreScreen.jsx | 20 ++++++++++++++++++++
 6 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Context.jsx
 create mode 100644 src/components/ScoreScreen.css
 create mode 100644 src/components/ScoreScreen.jsx

diff --git a/src/App.tsx b/src/App.tsx
index 3b52605..486219e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,19 @@
-import React from 'react';
+import React, {useState, useContext} from 'react';
 import Quiz from './components/Quiz'
+import ScoreScreen from './components/ScoreScreen';
+import { AppContext } from './components/Context';
+
 
 function App() {
+  let [quizState, setQuizState] = useState("container");
+  let [score, setScore] = useState(0);
+
   return (
     <div className="App">
-      <Quiz />
+      <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
+        {quizState === "container" && <Quiz/>}
+        {quizState === "endGame" && <ScoreScreen/>}
+      </AppContext.Provider> 
     </div>
   );
 }
diff --git a/src/components/Context.jsx b/src/components/Context.jsx
new file mode 100644
index 0000000..580331b
--- /dev/null
+++ b/src/components/Context.jsx
@@ -0,0 +1,3 @@
+import {createContext} from 'react';
+
+export const AppContext = createContext();
\ No newline at end of file
diff --git a/src/components/Quiz.css b/src/components/Quiz.css
index 1085e0c..71b2814 100644
--- a/src/components/Quiz.css
+++ b/src/components/Quiz.css
@@ -1,6 +1,5 @@
 body{
     background-color: rgb(25, 25, 27);
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -30,7 +29,7 @@ h1{
 }
 
 .itemsContainer button{
-    background-color: rgb(9, 216, 219);
+    background-color: rgb(5, 190, 193);
     margin: 10px;
     position: relative;
     left: 35%;
@@ -43,6 +42,10 @@ h1{
     cursor: pointer;
 }
 
+button:hover{
+    background-color: rgb(9, 150, 152);
+}
+
 .correct{
     background-color: rgb(73, 244, 158);
     border-color: rgb(73, 244, 158);
diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 966ecf2..18599e4 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,13 +1,15 @@
-import React, {useRef, useState} from 'react';
+import React, {useRef, useState, useContext} from 'react';
 import {data} from '../assets/quizData';
+import { AppContext } from './Context';
 import './Quiz.css';
 
 function Quiz() {
 
+    let {setQuizState, score, setScore} = useContext(AppContext);
     let [questionIndex, setQuestionIndex] = useState(0);
     let [question, setQuestion] = useState(data[questionIndex]);
     let [closed, setClosed] = useState(false);
-    let [score, setScore] = useState(0)
+    
 
     let option1 = useRef(null);
     let option2 = useRef(null);
@@ -51,19 +53,14 @@ function Quiz() {
         if(closed === true){
             setQuestionIndex(++questionIndex);
             setQuestion(data[questionIndex]);
-            setClosed(false);
-            //Reset the color scheme
-            myOptions.map((option) => {
-                option.current.classList.remove("wrong");
-                option.current.classList.remove("correct");
-                return null;
-            })
+            setQuizState("endGame");
         }
+        
     }
 
     return(
         <div className='container'>
-            <h1>Javascript Quiz</h1>
+            <h1>Quiz</h1>
             <div className="itemsContainer">
                 <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
@@ -77,7 +74,7 @@ function Quiz() {
                 ):(
                     <button onClick={next}>Next question</button>
                 )}
-            </div>
+            </div>  
         </div>
     )
 }
diff --git a/src/components/ScoreScreen.css b/src/components/ScoreScreen.css
new file mode 100644
index 0000000..b65fdb1
--- /dev/null
+++ b/src/components/ScoreScreen.css
@@ -0,0 +1,28 @@
+.endGame{
+    height: 100vh;
+    width: 1355px;
+    background: linear-gradient(white 50%, rgb(31, 114, 247) 50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.title{
+    color: #000;
+}
+.endGameContent{
+    background-color: rgb(230, 230, 230);
+    width: 300px;
+    height: 200px;
+    padding: 20px;
+    text-align: center;
+}
+
+hr{
+    border: 2px solid;
+}
+
+h2{
+    margin-top: 50px;
+    font-size: 55px;
+}
\ No newline at end of file
diff --git a/src/components/ScoreScreen.jsx b/src/components/ScoreScreen.jsx
new file mode 100644
index 0000000..21332c3
--- /dev/null
+++ b/src/components/ScoreScreen.jsx
@@ -0,0 +1,20 @@
+import React, {useContext, useState} from "react";
+import './ScoreScreen.css'
+import {data} from '../assets/quizData';
+import { AppContext } from './Context';
+
+function ScoreScreen(){
+    let { score, setScore} = useContext(AppContext);
+    return(
+        <div className="endGame">
+            <h1 className="title">Quiz has Ended</h1>
+            <div className="endGameContent">
+                <h3>Score</h3>
+                <hr />
+                <h2>{score}/{data.length}</h2>
+            </div>
+        </div>
+    ) 
+}
+
+export default ScoreScreen;
\ No newline at end of file

From c7cc6797ebbe804aff8c324edb643b864982cf39 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 07:40:07 +0200
Subject: [PATCH 12/29] Last Update

---
 src/assets/quizData.js | 146 ++++++++++++++++++++---------------------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/src/assets/quizData.js b/src/assets/quizData.js
index e90f651..01fd811 100644
--- a/src/assets/quizData.js
+++ b/src/assets/quizData.js
@@ -2,108 +2,108 @@
 
 export const data = [
     {
-        question:"What is JavaScript?",
-        option1:"JavaScript is a scripting language used to make the website interactive",
-        option2:"JavaScript is an assembly language used to make the website interactive",
-        option3:"JavaScript is a compiled language used to make the website interactive",
-        option4:"None of the mentioned",
-        answer: 1
+        question:"Which of these terms best describes GitHub?",
+        option1:"Integrated Development Environment",
+        option2:"Distributed Version Control System",
+        option3:"Issues Tracking System",
+        option4:"Web-Based Repository Hosting Service",
+        answer: 4
     },
     {
-        question:"Which of the following is correct about JavaScript?",
-        option1:"JavaScript is an Object-Based language",
-        option2:"JavaScript is Assembly-language",
-        option3:"JavaScript is an Object-Oriented language",
-        option4:"JavaScript is a High-level language",
+        question:"What is the opposite of a GIT clone?",
+        option1:"git push",
+        option2:"git add",
+        option3:"git upload",
+        option4:"git status",
         answer: 1
     },
     {
-        question:"Among the given statements, which statement defines closures in JavaScript?",
-        option1:" JavaScript is a function that is enclosed with references to its inner function scope",
-        option2:"JavaScript is a function that is enclosed with references to its lexical environmen",
-        option3:"JavaScript is a function that is enclosed with the object to its inner function scope",
-        option4:"None of the mentioned",
+        question:"What command do you run to view the commit history of your repository?",
+        option1:"git history",
+        option2:"git log",
+        option3:"git commit -h",
+        option4:"git past",
         answer: 2
     },
     {
-        question:"Arrays in JavaScript are defined by which of the following statements?",
-        option1:"It is an ordered list of values",
-        option2:"It is an ordered list of objects",
-        option3:"It is an ordered list of stringe",
-        option4:"It is an ordered list of functions",
-        answer: 1
+        question:"How do you check the state of your local git repository since your last commit?",
+        option1:"git check",
+        option2:"git status",
+        option3:"git commit",
+        option4:"git diff",
+        answer: 2
     },
     {
-        question:"Which of the following is not javascript data types?",
-        option1:"Null type",
-        option2:"Undefined type",
-        option3:"Number type",
-        option4:"None of the mentioned",
-        answer: 4
+        question:"What's a shortcut to staging all the changes you have?",
+        option1:"git commit add",
+        option2:"git commit",
+        option3:"git add",
+        option4:"git stage -a",
+        answer: 3
     },
     {
-        question:"Where is Client-side JavaScript code is embedded within HTML documents?",
-        option1:"A URL that uses the special javascript:code",
-        option2:"A URL that uses the special javascript:protocol",
-        option3:"A URL that uses the special javascript:encoding",
-        option4:"A URL that uses the special javascript:stack",
-        answer: 2
+        question:"How do you supply a commit message to a commit?",
+        option1:"git message 'I am coding!'",
+        option2:"git add 'I am coding!'",
+        option3:"git commit 'I am coding!'",
+        option4:"git commit -m 'I am coding!'",
+        answer: 4
     },
     {
-        question:"Which of the following object is the main entry point to all client-side JavaScript features and APIs?",
-        option1:"Position",
-        option2:"Window",
-        option3:"Standard",
-        option4:"Location",
-        answer: 2
+        question:"What's the git command that downloads your repository from GitHub to your computer?",
+        option1:"git push",
+        option2:"git fork",
+        option3:"git clone",
+        option4:"git commit",
+        answer: 3
     },
     {
-        question:"Which of the following can be used to call a JavaScript Code Snippet?",
-        option1:"Function/Method",
-        option2:"Preprocessor",
-        option3:"Triggering Event",
-        option4:"RMI",
+        question:"Which is the correct usage of the push command?",
+        option1:"git push <remote> <branch>",
+        option2:"git push <branch> <remote>",
+        option3:"Both correct",
+        option4:"None of them",
         answer: 1
     },
     {
-        question:"Which of the following explains correctly what happens when a JavaScript program is developed on a Unix Machine?",
-        option1:"will work perfectly well on a Windows Machine",
-        option2:"will be displayed as JavaScript text on the browser",
-        option3:"will throw errors and exceptions",
-        option4:"must be restricted to a Unix Machine only",
+        question:"What is the correct order to submit your changes from the working directory all the way to the remote repository?",
+        option1:"git add, git commit, git push",
+        option2:"git add, git push, git commit",
+        option3:"git commit, git add, git push",
+        option4:"git push, git add, commit",
         answer: 1
     },
     {
-        question:"Which of the following scoping type does JavaScript use?",
-        option1:"Sequential",
-        option2:"Segmental",
-        option3:"Lexical",
-        option4:"Literal",
+        question:"Which of the following commands show changes between commits?",
+        option1:"git commit",
+        option2:"git reset",
+        option3:"git diff",
+        option4:"git show",
         answer: 3
     },
     {
-        question:"What is the basic difference between JavaScript and Java?",
-        option1:"Functions are considered as fields",
-        option2:"Functions are values, and there is no hard distinction between methods and fields",
-        option3:"Variables are specific",
-        option4:"There is no difference",
-        answer: 2
+        question:"Which of the following commands join two or more development histories together?",
+        option1:"git merge",
+        option2:"git concat",
+        option3:"git join",
+        option4:"git branch",
+        answer: 1
     },
     {
-        question:"Why JavaScript Engine is needed?",
-        option1:" Both Compiling & Interpreting the JavaScript",
-        option2:" Parsing the javascript",
-        option3:"Interpreting the JavaScript",
-        option4:"Compiling the JavaScript",
-        answer: 3
+        question:"Which of the following commands is used in switching between branches?",
+        option1:"git checkout",
+        option2:"git switch",
+        option3:"git merge",
+        option4:"Boith A and B",
+        answer: 4
     },
     {
-        question:"Which of the following methods/operation does javascript use instead of == and !=?",
-        option1:" JavaScript uses equalto()",
-        option2:" JavaScript uses equals() and notequals() instead",
-        option3:" JavaScript uses bitwise checkinge",
-        option4:" JavaScript uses === and !== instead",
-        answer: 4
+        question:"Which of the following commands is used to reset the current HEAD to the specified state?",
+        option1:"git reset",
+        option2:"git restore",
+        option3:"git checkout",
+        option4:"git diff",
+        answer: 1
     },
     {
         question:"Why event handlers is needed in JS?",

From 5dc716c704e6ed2fdc46d9acf9aa3f335106264c Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 07:44:35 +0200
Subject: [PATCH 13/29] UPDATE

---
 src/components/Quiz.css        | 2 ++
 src/components/ScoreScreen.css | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/Quiz.css b/src/components/Quiz.css
index 71b2814..822dedf 100644
--- a/src/components/Quiz.css
+++ b/src/components/Quiz.css
@@ -1,3 +1,5 @@
+/*MAKE IT RESPONSIVE LATER*/
+
 body{
     background-color: rgb(25, 25, 27);
     display: flex;
diff --git a/src/components/ScoreScreen.css b/src/components/ScoreScreen.css
index b65fdb1..56389c2 100644
--- a/src/components/ScoreScreen.css
+++ b/src/components/ScoreScreen.css
@@ -1,3 +1,8 @@
+/*
+MAKE IT RESPONSIVE LATER
+CHANGE THE WHOLE CSS
+*/
+
 .endGame{
     height: 100vh;
     width: 1355px;

From 9bfa58eccc4ac0a517819a74611023ad8cc85cee Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 07:51:39 +0200
Subject: [PATCH 14/29] UPDATE

---
 src/components/Quiz.jsx        | 2 ++
 src/components/ScoreScreen.css | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/Quiz.jsx b/src/components/Quiz.jsx
index 18599e4..ff8a6a4 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/Quiz.jsx
@@ -1,3 +1,5 @@
+//DONT FORGET TO RESEARCH MORE ABOUT LOCALSTORAGE...COULD POSSIBLY USE IT TO SAVE THE QUIZ SCORE -0750HRS
+
 import React, {useRef, useState, useContext} from 'react';
 import {data} from '../assets/quizData';
 import { AppContext } from './Context';
diff --git a/src/components/ScoreScreen.css b/src/components/ScoreScreen.css
index 56389c2..17fed1c 100644
--- a/src/components/ScoreScreen.css
+++ b/src/components/ScoreScreen.css
@@ -1,4 +1,5 @@
 /*
+-0740HRS
 MAKE IT RESPONSIVE LATER
 CHANGE THE WHOLE CSS
 */

From be643cf5e400607ca95a6ca42f8c9859d67c983d Mon Sep 17 00:00:00 2001
From: Primordial <88948789+PrimordialOrigin@users.noreply.github.com>
Date: Thu, 4 Jul 2024 08:40:19 +0200
Subject: [PATCH 15/29] Updated config.yml

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index aa5f0fc..0d6fbd6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  heroku: circleci/heroku@0.0.10
+  vercel: vercel/now@1.0.1
 
 jobs:
   build:
@@ -19,10 +19,10 @@ jobs:
       #    command: npm run test
 
 workflows:
-  heroku_deploy:
+  vercel_deploy:
     jobs:
       - build
-      - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git
+      - vercel/deploy:
           requires:
             - build
           filters:

From c2154fe71ffa7b17eacc45406072ac28306356cb Mon Sep 17 00:00:00 2001
From: Primordial <88948789+PrimordialOrigin@users.noreply.github.com>
Date: Thu, 4 Jul 2024 08:43:07 +0200
Subject: [PATCH 16/29] Updated config.yml

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0d6fbd6..aa5f0fc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  vercel: vercel/now@1.0.1
+  heroku: circleci/heroku@0.0.10
 
 jobs:
   build:
@@ -19,10 +19,10 @@ jobs:
       #    command: npm run test
 
 workflows:
-  vercel_deploy:
+  heroku_deploy:
     jobs:
       - build
-      - vercel/deploy:
+      - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git
           requires:
             - build
           filters:

From acf8ccfc9f0270f0e1bf0d0679da53ccd3f2c930 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 11:48:11 +0200
Subject: [PATCH 17/29] Components Grouped In Separate Folders

---
 src/App.tsx                                 | 4 ++--
 src/components/{ => quiz}/Quiz.css          | 0
 src/components/{ => quiz}/Quiz.jsx          | 4 ++--
 src/components/{ => scores}/ScoreScreen.css | 0
 src/components/{ => scores}/ScoreScreen.jsx | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename src/components/{ => quiz}/Quiz.css (100%)
 rename src/components/{ => quiz}/Quiz.jsx (97%)
 rename src/components/{ => scores}/ScoreScreen.css (100%)
 rename src/components/{ => scores}/ScoreScreen.jsx (84%)

diff --git a/src/App.tsx b/src/App.tsx
index 486219e..3c624af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useContext} from 'react';
-import Quiz from './components/Quiz'
-import ScoreScreen from './components/ScoreScreen';
+import Quiz from './components/quiz/Quiz'
+import ScoreScreen from './components/scores/ScoreScreen';
 import { AppContext } from './components/Context';
 
 
diff --git a/src/components/Quiz.css b/src/components/quiz/Quiz.css
similarity index 100%
rename from src/components/Quiz.css
rename to src/components/quiz/Quiz.css
diff --git a/src/components/Quiz.jsx b/src/components/quiz/Quiz.jsx
similarity index 97%
rename from src/components/Quiz.jsx
rename to src/components/quiz/Quiz.jsx
index ff8a6a4..acc55f9 100644
--- a/src/components/Quiz.jsx
+++ b/src/components/quiz/Quiz.jsx
@@ -1,8 +1,8 @@
 //DONT FORGET TO RESEARCH MORE ABOUT LOCALSTORAGE...COULD POSSIBLY USE IT TO SAVE THE QUIZ SCORE -0750HRS
 
 import React, {useRef, useState, useContext} from 'react';
-import {data} from '../assets/quizData';
-import { AppContext } from './Context';
+import {data} from '../../assets/quizData';
+import { AppContext } from '../Context';
 import './Quiz.css';
 
 function Quiz() {
diff --git a/src/components/ScoreScreen.css b/src/components/scores/ScoreScreen.css
similarity index 100%
rename from src/components/ScoreScreen.css
rename to src/components/scores/ScoreScreen.css
diff --git a/src/components/ScoreScreen.jsx b/src/components/scores/ScoreScreen.jsx
similarity index 84%
rename from src/components/ScoreScreen.jsx
rename to src/components/scores/ScoreScreen.jsx
index 21332c3..bf816b4 100644
--- a/src/components/ScoreScreen.jsx
+++ b/src/components/scores/ScoreScreen.jsx
@@ -1,7 +1,7 @@
 import React, {useContext, useState} from "react";
 import './ScoreScreen.css'
-import {data} from '../assets/quizData';
-import { AppContext } from './Context';
+import {data} from '../../assets/quizData';
+import { AppContext } from '../Context';
 
 function ScoreScreen(){
     let { score, setScore} = useContext(AppContext);

From e138f78ec1c66e25a4af5cae548b50943b6682f1 Mon Sep 17 00:00:00 2001
From: Primordial <RamerafheKaone@protonmail.com>
Date: Thu, 4 Jul 2024 17:09:24 +0200
Subject: [PATCH 18/29] Username entry

---
 src/App.tsx                  |  4 +++-
 src/components/user/User.jsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/user/User.jsx

diff --git a/src/App.tsx b/src/App.tsx
index 3c624af..f01f3c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,15 +2,17 @@ import React, {useState, useContext} from 'react';
 import Quiz from './components/quiz/Quiz'
 import ScoreScreen from './components/scores/ScoreScreen';
 import { AppContext } from './components/Context';
+import User from './components/user/User';
 
 
 function App() {
-  let [quizState, setQuizState] = useState("container");
+  let [quizState, setQuizState] = useState("userForm");
   let [score, setScore] = useState(0);
 
   return (
     <div className="App">
       <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
+      {quizState === "userForm" && <User/>}
         {quizState === "container" && <Quiz/>}
         {quizState === "endGame" && <ScoreScreen/>}
       </AppContext.Provider> 
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
new file mode 100644
index 0000000..fa7e88e
--- /dev/null
+++ b/src/components/user/User.jsx
@@ -0,0 +1,29 @@
+import React, {useContext, useState, useEffect} from "react";
+import { AppContext } from '../Context';
+
+function User() {
+
+    let {setQuizState} = useContext(AppContext);
+    let [username, setUsername] = useState("");
+
+    function getName(event){
+        setUsername(event.target.value);
+    }
+
+    useEffect(() =>{
+        localStorage.setItem("Name",JSON.stringify(username))
+    }, [username]);
+    
+     const next = () => {setQuizState("container")}
+  return (
+    <div className="userForm">
+        <h1>WELCOME PARTICIPATION</h1>
+        <div className="item">
+            <input type="text" value={username} placeholder="Enter your name" onChange={getName}/>
+            <button onClick={next}>Enter</button>
+        </div>
+    </div>
+  )
+}
+
+export default User

From f5e492d47ce2cee914a9f6634c11ce692523d6dc Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Thu, 4 Jul 2024 19:07:48 +0200
Subject: [PATCH 19/29] added style file in components folder to work on the
 aesthistics

---
 src/App.tsx                  |  4 ++--
 src/components/Style.css     | 41 ++++++++++++++++++++++++++++++++++++
 src/components/user/User.jsx |  2 +-
 3 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Style.css

diff --git a/src/App.tsx b/src/App.tsx
index f01f3c1..3ffc77a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import Quiz from './components/quiz/Quiz'
 import ScoreScreen from './components/scores/ScoreScreen';
 import { AppContext } from './components/Context';
 import User from './components/user/User';
-
+import "./components/Style.css"
 
 function App() {
   let [quizState, setQuizState] = useState("userForm");
@@ -12,7 +12,7 @@ function App() {
   return (
     <div className="App">
       <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
-      {quizState === "userForm" && <User/>}
+        {quizState === "userForm" && <User/>}
         {quizState === "container" && <Quiz/>}
         {quizState === "endGame" && <ScoreScreen/>}
       </AppContext.Provider> 
diff --git a/src/components/Style.css b/src/components/Style.css
new file mode 100644
index 0000000..4088dc7
--- /dev/null
+++ b/src/components/Style.css
@@ -0,0 +1,41 @@
+.App {
+    text-align: center;
+  }
+  
+  .App-logo {
+    height: 40vmin;
+    pointer-events: none;
+  }
+  
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+  
+  .App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+  
+  .App-link {
+    color: #61dafb;
+  }
+  
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .test{
+    color: blue;
+  }
\ No newline at end of file
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index fa7e88e..ece6887 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -17,7 +17,7 @@ function User() {
      const next = () => {setQuizState("container")}
   return (
     <div className="userForm">
-        <h1>WELCOME PARTICIPATION</h1>
+        <h1 className="test">WELCOME PARTICIPATION</h1>
         <div className="item">
             <input type="text" value={username} placeholder="Enter your name" onChange={getName}/>
             <button onClick={next}>Enter</button>

From d770f463742af7ffe3fffce56c566e71ac190c55 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Thu, 4 Jul 2024 20:51:56 +0200
Subject: [PATCH 20/29] added new a new library Google's Materail UI, make sure
 to hit npm install on the next pull request

---
 package-lock.json            | 901 ++++++++++++++++++++++++++++++++++-
 package.json                 |   4 +
 src/components/user/User.jsx |  45 +-
 3 files changed, 923 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c1f7ddd..1414d3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "erp2022-2",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@mui/icons-material": "^5.15.21",
+        "@mui/material": "^5.15.21",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
@@ -1804,11 +1808,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
-      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1826,6 +1830,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.6.tgz",
@@ -2099,6 +2108,158 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -2159,6 +2320,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
+      "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -2909,6 +3104,261 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.21.tgz",
+      "integrity": "sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.21.tgz",
+      "integrity": "sha512-yqkq1MbdkmX5ZHyvZTBuAaA6RkvoqkoAgwBSx9Oh0L0jAfj9T/Ih/NhMNjkl8PWVSonjfDUkKroBnjRyo/1M9Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.21.tgz",
+      "integrity": "sha512-nTyCcgduKwHqiuQ/B03EQUa+utSMzn2sQp0QAibsnYe4tvc3zkMbO0amKpl48vhABIY3IvT6w9615BFIgMt0YA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.21",
+        "@mui/system": "^5.15.20",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.20",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
+      "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.20",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.20.tgz",
+      "integrity": "sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.20",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.20",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
+      "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2990,6 +3440,15 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3738,9 +4197,9 @@
       "integrity": "sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg=="
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "node_modules/@types/q": {
       "version": "1.5.5",
@@ -3775,6 +4234,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -5323,6 +5790,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6013,9 +6488,9 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
     "node_modules/csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -6273,6 +6748,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7687,6 +8171,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8271,6 +8760,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13809,6 +14311,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14913,6 +15430,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17729,11 +18251,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz",
-      "integrity": "sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
+      "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -17896,6 +18425,132 @@
       "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==",
       "requires": {}
     },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -17940,6 +18595,36 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
+      "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
+      "requires": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.0"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -18501,6 +19186,119 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/core-downloads-tracker": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.21.tgz",
+      "integrity": "sha512-dp9lXBaJZzJYeJfQY3Ow4Rb49QaCEdkl2KKYscdQHQm6bMJ+l4XPY3Cd9PCeeJTsHPIDJ60lzXbeRgs6sx/rpw=="
+    },
+    "@mui/icons-material": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.21.tgz",
+      "integrity": "sha512-yqkq1MbdkmX5ZHyvZTBuAaA6RkvoqkoAgwBSx9Oh0L0jAfj9T/Ih/NhMNjkl8PWVSonjfDUkKroBnjRyo/1M9Q==",
+      "requires": {
+        "@babel/runtime": "^7.23.9"
+      }
+    },
+    "@mui/material": {
+      "version": "5.15.21",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.21.tgz",
+      "integrity": "sha512-nTyCcgduKwHqiuQ/B03EQUa+utSMzn2sQp0QAibsnYe4tvc3zkMbO0amKpl48vhABIY3IvT6w9615BFIgMt0YA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.21",
+        "@mui/system": "^5.15.20",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.20",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.3.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+          "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.20.tgz",
+      "integrity": "sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.20",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.20.tgz",
+      "integrity": "sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.20",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.20",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.15.20",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.20.tgz",
+      "integrity": "sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.3.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+          "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -18540,6 +19338,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19095,9 +19898,9 @@
       "integrity": "sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg=="
     },
     "@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
     "@types/q": {
       "version": "1.5.5",
@@ -19132,6 +19935,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20280,6 +21091,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -20769,9 +21585,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "damerau-levenshtein": {
       "version": "1.0.8",
@@ -20964,6 +21780,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -22012,6 +22837,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -22403,6 +23233,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26243,6 +27088,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27058,6 +27914,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index fe6dd23..ce21624 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.21",
+    "@mui/material": "^5.15.21",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index ece6887..3632837 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -1,6 +1,12 @@
 import React, {useContext, useState, useEffect} from "react";
 import { AppContext } from '../Context';
-
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 function User() {
 
     let {setQuizState} = useContext(AppContext);
@@ -16,12 +22,37 @@ function User() {
     
      const next = () => {setQuizState("container")}
   return (
-    <div className="userForm">
-        <h1 className="test">WELCOME PARTICIPATION</h1>
-        <div className="item">
-            <input type="text" value={username} placeholder="Enter your name" onChange={getName}/>
-            <button onClick={next}>Enter</button>
-        </div>
+    <div className="" style={{padding: 10}}>
+        <Card className="userForm">
+        <CardContent>
+            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                Word of the Day
+            </Typography>
+            <Typography variant="h5" component="div">
+               Are a real progrommer lets see!!
+            </Typography>
+            <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                adjective
+            </Typography>
+            <Typography variant="body2">
+                well meaning and kindly.
+                <br />
+                {'"a benevolent smile"'}
+            </Typography>
+        </CardContent>
+            <div className="item">
+            <Box
+                component="form"
+                sx={{
+                    '& > :not(style)': { m: 1, width: '95%' },
+                }}
+                noValidate
+                autoComplete="off"
+                >
+                <TextField id="outlined-basic" label="Name" variant="outlined" />
+                </Box>
+            </div>
+        </Card>
     </div>
   )
 }

From d943d317f2b9302b8cf385989d682b49e6f79b21 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Thu, 4 Jul 2024 21:13:08 +0200
Subject: [PATCH 21/29] added a new component, bottom navigation, the aim is to
 make transitioning from one component to another easy

---
 src/App.tsx                             |  2 ++
 src/components/navigation/bottomnav.tsx | 27 +++++++++++++++++++++++++
 src/components/user/User.jsx            |  9 +++++++--
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/navigation/bottomnav.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3ffc77a..9238eb7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import ScoreScreen from './components/scores/ScoreScreen';
 import { AppContext } from './components/Context';
 import User from './components/user/User';
 import "./components/Style.css"
+import BottomNav from './components/navigation/bottomnav';
 
 function App() {
   let [quizState, setQuizState] = useState("userForm");
@@ -15,6 +16,7 @@ function App() {
         {quizState === "userForm" && <User/>}
         {quizState === "container" && <Quiz/>}
         {quizState === "endGame" && <ScoreScreen/>}
+        <BottomNav />
       </AppContext.Provider> 
     </div>
   );
diff --git a/src/components/navigation/bottomnav.tsx b/src/components/navigation/bottomnav.tsx
new file mode 100644
index 0000000..16bca6d
--- /dev/null
+++ b/src/components/navigation/bottomnav.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import RestoreIcon from '@mui/icons-material/Restore';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+
+export default function BottomNav() {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <Box sx={{ width: 500 }}>
+      <BottomNavigation
+        showLabels
+        value={value}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+      >
+        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
+        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+      </BottomNavigation>
+    </Box>
+  );
+}
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index 3632837..876152d 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -44,14 +44,19 @@ function User() {
             <Box
                 component="form"
                 sx={{
-                    '& > :not(style)': { m: 1, width: '95%' },
+                    '& > :not(style)': { m: 1, width: '90%' },
                 }}
                 noValidate
                 autoComplete="off"
                 >
-                <TextField id="outlined-basic" label="Name" variant="outlined" />
+                    <TextField onChange={(e)=>{setUsername(e.target.value)}} id="outlined-basic" label="Name" variant="outlined" />
                 </Box>
             </div>
+            <div style={{padding: 5, paddingBottom: 10}}>
+                {username &&
+                    <Button variant="outlined">Continue</Button>
+                }
+            </div>
         </Card>
     </div>
   )

From 978a4ae943c93dc33c0168a110abec17059d692a Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Thu, 4 Jul 2024 21:31:00 +0200
Subject: [PATCH 22/29] added breadcrumbs still working towards ease
 transititoning

---
 src/components/navigation/bottomnav.tsx   |  4 +-
 src/components/navigation/breadcrumbs.tsx | 29 +++++++++++
 src/components/user/User.jsx              | 63 ++++++++++++-----------
 3 files changed, 63 insertions(+), 33 deletions(-)
 create mode 100644 src/components/navigation/breadcrumbs.tsx

diff --git a/src/components/navigation/bottomnav.tsx b/src/components/navigation/bottomnav.tsx
index 16bca6d..e02f113 100644
--- a/src/components/navigation/bottomnav.tsx
+++ b/src/components/navigation/bottomnav.tsx
@@ -5,7 +5,7 @@ import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import RestoreIcon from '@mui/icons-material/Restore';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
-
+import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 export default function BottomNav() {
   const [value, setValue] = React.useState(0);
 
@@ -19,7 +19,7 @@ export default function BottomNav() {
         }}
       >
         <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
-        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+        <BottomNavigationAction label="Materail" icon={<LibraryBooksIcon />} />
         <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
       </BottomNavigation>
     </Box>
diff --git a/src/components/navigation/breadcrumbs.tsx b/src/components/navigation/breadcrumbs.tsx
new file mode 100644
index 0000000..6a709fe
--- /dev/null
+++ b/src/components/navigation/breadcrumbs.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+
+function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+  event.preventDefault();
+  console.info('You clicked a breadcrumb.');
+}
+
+export default function BasicBreadcrumbs() {
+  return (
+    <div role="presentation" style={{color: "white"}} onClick={handleClick}>
+      <Breadcrumbs style={{color: "white"}} aria-label="breadcrumb">
+        <Link underline="hover" style={{color: "white"}} href="/">
+          Home
+        </Link>
+        <Link
+          underline="hover"
+          style={{color: "white"}}
+          href="/material-ui/getting-started/installation/"
+        >
+          User
+        </Link>
+        <Typography style={{color: "gray"}}>quize</Typography>
+      </Breadcrumbs>
+    </div>
+  );
+}
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index 876152d..af35ba6 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -7,8 +7,8 @@ import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
+import BasicBreadcrumbs from "../navigation/breadcrumbs";
 function User() {
-
     let {setQuizState} = useContext(AppContext);
     let [username, setUsername] = useState("");
 
@@ -23,39 +23,40 @@ function User() {
      const next = () => {setQuizState("container")}
   return (
     <div className="" style={{padding: 10}}>
+        <BasicBreadcrumbs />
         <Card className="userForm">
-        <CardContent>
-            <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-                Word of the Day
-            </Typography>
-            <Typography variant="h5" component="div">
-               Are a real progrommer lets see!!
-            </Typography>
-            <Typography sx={{ mb: 1.5 }} color="text.secondary">
-                adjective
-            </Typography>
-            <Typography variant="body2">
-                well meaning and kindly.
-                <br />
-                {'"a benevolent smile"'}
-            </Typography>
-        </CardContent>
+            <CardContent>
+                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+                    Word of the Day
+                </Typography>
+                <Typography variant="h5" component="div">
+                Are a real progrommer lets see!!
+                </Typography>
+                <Typography sx={{ mb: 1.5 }} color="text.secondary">
+                    adjective
+                </Typography>
+                <Typography variant="body2">
+                    well meaning and kindly.
+                    <br />
+                    {'"a benevolent smile"'}
+                </Typography>
+            </CardContent>
             <div className="item">
-            <Box
-                component="form"
-                sx={{
-                    '& > :not(style)': { m: 1, width: '90%' },
-                }}
-                noValidate
-                autoComplete="off"
-                >
-                    <TextField onChange={(e)=>{setUsername(e.target.value)}} id="outlined-basic" label="Name" variant="outlined" />
+                <Box
+                    component="form"
+                    sx={{
+                        '& > :not(style)': { m: 1, width: '90%' },
+                    }}
+                    noValidate
+                    autoComplete="off"
+                    >
+                        <TextField onChange={(e)=>{setUsername(e.target.value)}} id="outlined-basic" label="Name" variant="outlined" />
                 </Box>
-            </div>
-            <div style={{padding: 5, paddingBottom: 10}}>
-                {username &&
-                    <Button variant="outlined">Continue</Button>
-                }
+                </div>
+                <div style={{padding: 5, paddingBottom: 10}}>
+                    {username &&
+                        <Button variant="outlined">Continue</Button>
+                    }
             </div>
         </Card>
     </div>

From 38b82a77a4ebd220cf5589d693e5f25b8ffa3857 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Thu, 4 Jul 2024 22:27:02 +0200
Subject: [PATCH 23/29] added User Interface thats more visible and attractive
 to the user to compel awesome user journey

---
 src/App.tsx                             | 17 +++++++++++-----
 src/components/navigation/bottomnav.tsx | 22 +++++++++++++-------
 src/components/quiz/Quiz.jsx            | 20 ++++++++++++------
 src/components/user/User.jsx            | 27 ++++++++++++++-----------
 4 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9238eb7..0bf387f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,15 +8,22 @@ import BottomNav from './components/navigation/bottomnav';
 
 function App() {
   let [quizState, setQuizState] = useState("userForm");
+  const [name,setName] = useState("")
   let [score, setScore] = useState(0);
 
   return (
     <div className="App">
-      <AppContext.Provider value={{quizState, setQuizState, score, setScore}}>
-        {quizState === "userForm" && <User/>}
-        {quizState === "container" && <Quiz/>}
-        {quizState === "endGame" && <ScoreScreen/>}
-        <BottomNav />
+      <AppContext.Provider value={{quizState, setQuizState, score, setScore, name, setName}}>
+        <div style={{display: "flex",flexDirection: "column" ,gap: 10 }}>
+          <div>
+            {quizState === "userForm" && <User/>}
+            {quizState === "container" && <Quiz/>}
+            {quizState === "endGame" && <ScoreScreen/>}
+          </div>
+          <div>
+            <BottomNav />
+          </div>
+        </div>
       </AppContext.Provider> 
     </div>
   );
diff --git a/src/components/navigation/bottomnav.tsx b/src/components/navigation/bottomnav.tsx
index e02f113..501db43 100644
--- a/src/components/navigation/bottomnav.tsx
+++ b/src/components/navigation/bottomnav.tsx
@@ -2,25 +2,33 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import RestoreIcon from '@mui/icons-material/Restore';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import LocationOnIcon from '@mui/icons-material/LocationOn';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import { AppContext } from '../Context';
+
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 export default function BottomNav() {
   const [value, setValue] = React.useState(0);
+  let {setQuizState} = React.useContext(AppContext);
+  let { name } = React.useContext(AppContext);
+
+  const handleBack = () => {
+    setQuizState("userForm")
+  }
 
   return (
-    <Box sx={{ width: 500 }}>
+    <Box sx={{ width: 800, display:"flex", justifyContent: "center" }}>
       <BottomNavigation
         showLabels
         value={value}
         onChange={(event, newValue) => {
           setValue(newValue);
         }}
+        sx={{ width: 785 }}
       >
-        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
-        <BottomNavigationAction label="Materail" icon={<LibraryBooksIcon />} />
-        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
+        <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
+        <BottomNavigationAction label="Material" icon={<LibraryBooksIcon />} />
+        <BottomNavigationAction label={!name ? "user" : name } icon={<AccountCircleIcon />} />
       </BottomNavigation>
     </Box>
   );
diff --git a/src/components/quiz/Quiz.jsx b/src/components/quiz/Quiz.jsx
index acc55f9..5045f8b 100644
--- a/src/components/quiz/Quiz.jsx
+++ b/src/components/quiz/Quiz.jsx
@@ -4,6 +4,7 @@ import React, {useRef, useState, useContext} from 'react';
 import {data} from '../../assets/quizData';
 import { AppContext } from '../Context';
 import './Quiz.css';
+import { Button, Card, Typography } from '@mui/material';
 
 function Quiz() {
 
@@ -61,10 +62,16 @@ function Quiz() {
     }
 
     return(
-        <div className='container'>
-            <h1>Quiz</h1>
+    <div className="" style={{padding: 10}}>
+        <Card>
+            <Typography variant="h2" component="div">
+                Quiz
+            </Typography>
+            <Typography variant="h5" component="div">
+                {questionIndex+1}. {question.question}
+            </Typography>
+            <h3></h3>
             <div className="itemsContainer">
-                <h3>{questionIndex+1}. {question.question}</h3>
                 <ul>
                     <li ref={option1} onClick={(element)=>{checkMyAnswer(element,1)}}>{question.option1}</li>
                     <li ref={option2} onClick={(element)=>{checkMyAnswer(element,2)}}>{question.option2}</li>
@@ -72,12 +79,13 @@ function Quiz() {
                     <li ref={option4} onClick={(element)=>{checkMyAnswer(element,4)}}>{question.option4}</li>
                 </ul>
                 {questionIndex === data.length - 1 ? (
-                    <button onClick={done}>Last question</button>
+                    <Button onClick={done} variant="contained" style={{paddingLeft: 20, paddingRight:20, paddingTop: 5}}>Last question</Button>
                 ):(
-                    <button onClick={next}>Next question</button>
+                    <Button onClick={next} sx={{pl:10, pr:10}} style={{paddingLeft: 20, paddingRight:20, paddingTop: 5}} variant="contained">Next question</Button>
                 )}
             </div>  
-        </div>
+        </Card>
+    </div>  
     )
 }
 
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index af35ba6..98cbc8f 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -10,42 +10,45 @@ import Typography from '@mui/material/Typography';
 import BasicBreadcrumbs from "../navigation/breadcrumbs";
 function User() {
     let {setQuizState} = useContext(AppContext);
+    let { setName} = useContext(AppContext);
     let [username, setUsername] = useState("");
 
-    function getName(event){
-        setUsername(event.target.value);
-    }
+   const handleClick = () => {
+    setName(username)
+    setQuizState("container")
+   }
 
     useEffect(() =>{
         localStorage.setItem("Name",JSON.stringify(username))
     }, [username]);
-    
-     const next = () => {setQuizState("container")}
+
+    const next = () => {setQuizState("container")}
+
   return (
     <div className="" style={{padding: 10}}>
         <BasicBreadcrumbs />
         <Card className="userForm">
             <CardContent>
                 <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-                    Word of the Day
+                    Welcome to
                 </Typography>
                 <Typography variant="h5" component="div">
-                Are a real progrommer lets see!!
+                The world of code
                 </Typography>
                 <Typography sx={{ mb: 1.5 }} color="text.secondary">
-                    adjective
+                    {" "}
                 </Typography>
                 <Typography variant="body2">
-                    well meaning and kindly.
+                    Enter you Name bellow to
                     <br />
-                    {'"a benevolent smile"'}
+                    continue
                 </Typography>
             </CardContent>
             <div className="item">
                 <Box
                     component="form"
                     sx={{
-                        '& > :not(style)': { m: 1, width: '90%' },
+                        '& > :not(style)': { m: 1, width: '50%' },
                     }}
                     noValidate
                     autoComplete="off"
@@ -55,7 +58,7 @@ function User() {
                 </div>
                 <div style={{padding: 5, paddingBottom: 10}}>
                     {username &&
-                        <Button variant="outlined">Continue</Button>
+                        <Button variant="outlined" onClick={handleClick}>Continue</Button>
                     }
             </div>
         </Card>

From 3fe20907192cfbbf136bd5776756a812348176bb Mon Sep 17 00:00:00 2001
From: Primordial <88948789+PrimordialOrigin@users.noreply.github.com>
Date: Fri, 5 Jul 2024 09:44:10 +0200
Subject: [PATCH 24/29] Updated config.yml

---
 .circleci/config.yml | 64 +++++++++++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index aa5f0fc..0bd4bdc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,30 +1,56 @@
 version: 2.1
-
-orbs:
-  heroku: circleci/heroku@0.0.10
-
 jobs:
-  build:
+  preview_deployment:
     docker:
-      - image: circleci/node:10.16.3
-    working_directory: ~/repo
+      - image: cimg/node:20.5.0
+    environment:
+      VERCEL_ORG_ID: $VERCEL_ORG_ID
+      VERCEL_PROJECT_ID: $VERCEL_PROJECT_ID
     steps:
       - checkout
-      # install dependencies
       - run:
-          name: Install Dependencies
-          command: npm install
-      #- run:
-      #    name: Run tests
-      #    command: npm run test
+          name: Install Vercel CLI
+          command: sudo npm install --global vercel@latest
+      - run:
+          name: Pull Vercel Environment Information
+          command: sudo vercel pull --yes --environment=preview --token=$VERCEL_TOKEN
+      - run:
+          name: Build Project Artifacts
+          command: sudo vercel build --token=$VERCEL_TOKEN
+      - run:
+          name: Deploy Project Artifacts to Vercel
+          command: sudo vercel deploy --prebuilt --token=$VERCEL_TOKEN
+
+  production_deployment:
+    docker:
+      - image: cimg/node:20.5.0
+    environment:
+      VERCEL_ORG_ID: $VERCEL_ORG_ID
+      VERCEL_PROJECT_ID: $VERCEL_PROJECT_ID
+    steps:
+      - checkout
+      - run:
+          name: Install Vercel CLI
+          command: sudo npm install --global vercel@latest
+      - run:
+          name: Pull Vercel Environment Information
+          command: sudo vercel pull --yes --environment=production --token=$VERCEL_TOKEN
+      - run:
+          name: Build Project Artifacts
+          command: sudo vercel build --prod --token=$VERCEL_TOKEN
+      - run:
+          name: Deploy Project Artifacts to Vercel
+          command: sudo vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN
 
 workflows:
-  heroku_deploy:
+  version: 2
+  preview_and_production:
     jobs:
-      - build
-      - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git
-          requires:
-            - build
+      - preview_deployment:
+          filters:
+            branches:
+              ignore: /main/
+      - production_deployment:
           filters:
             branches:
-              only: main
\ No newline at end of file
+              only: /main/
\ No newline at end of file

From b01b8973a330dc05f123b5de570b15f50d8a10b5 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Fri, 5 Jul 2024 10:02:55 +0200
Subject: [PATCH 25/29] redoing this commit to marge with the main branch

---
 src/components/quiz/Quiz.jsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/quiz/Quiz.jsx b/src/components/quiz/Quiz.jsx
index 5045f8b..efc9223 100644
--- a/src/components/quiz/Quiz.jsx
+++ b/src/components/quiz/Quiz.jsx
@@ -67,16 +67,34 @@ function Quiz() {
             <Typography variant="h2" component="div">
                 Quiz
             </Typography>
-            <Typography variant="h5" component="div">
-                {questionIndex+1}. {question.question}
-            </Typography>
+            <div style={{padding: 25}}>
+                <Typography variant="h5" component="div">
+                    {questionIndex+1}. {question.question}
+                </Typography>
+            </div>
             <h3></h3>
             <div className="itemsContainer">
                 <ul>
-                    <li ref={option1} onClick={(element)=>{checkMyAnswer(element,1)}}>{question.option1}</li>
-                    <li ref={option2} onClick={(element)=>{checkMyAnswer(element,2)}}>{question.option2}</li>
-                    <li ref={option3} onClick={(element)=>{checkMyAnswer(element,3)}}>{question.option3}</li>
-                    <li ref={option4} onClick={(element)=>{checkMyAnswer(element,4)}}>{question.option4}</li>
+                    <li ref={option1} onClick={(element)=>{checkMyAnswer(element,1)}}>
+                        <Typography variant="body2">
+                            {question.option1}
+                        </Typography>
+                    </li>
+                    <li ref={option2} onClick={(element)=>{checkMyAnswer(element,2)}}>
+                        <Typography variant="body2">
+                            {question.option2}
+                        </Typography>
+                    </li>
+                    <li ref={option3} onClick={(element)=>{checkMyAnswer(element,3)}}>
+                        <Typography variant="body2">
+                            {question.option3}
+                        </Typography>
+                    </li>
+                    <li ref={option4} onClick={(element)=>{checkMyAnswer(element,4)}}>
+                        <Typography variant="body2">
+                            {question.option1}
+                        </Typography>
+                    </li>
                 </ul>
                 {questionIndex === data.length - 1 ? (
                     <Button onClick={done} variant="contained" style={{paddingLeft: 20, paddingRight:20, paddingTop: 5}}>Last question</Button>

From 56c583e57c8d9b2e917f377ed2c24aa1184a22aa Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Fri, 5 Jul 2024 10:12:22 +0200
Subject: [PATCH 26/29] added a drawer bar file, in under Navigation, like the
 breadcrumbs we easing usey journey

---
 src/App.tsx                          |  2 +
 src/components/navigation/drawer.tsx | 59 ++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/components/navigation/drawer.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 0bf387f..7bf311d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { AppContext } from './components/Context';
 import User from './components/user/User';
 import "./components/Style.css"
 import BottomNav from './components/navigation/bottomnav';
+import DrawerLeft from './components/navigation/drawer';
 
 function App() {
   let [quizState, setQuizState] = useState("userForm");
@@ -21,6 +22,7 @@ function App() {
             {quizState === "endGame" && <ScoreScreen/>}
           </div>
           <div>
+            <DrawerLeft />
             <BottomNav />
           </div>
         </div>
diff --git a/src/components/navigation/drawer.tsx b/src/components/navigation/drawer.tsx
new file mode 100644
index 0000000..65bf707
--- /dev/null
+++ b/src/components/navigation/drawer.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+export default function TemporaryDrawer() {
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen: boolean) => () => {
+    setOpen(newOpen);
+  };
+
+  const DrawerList = (
+    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+
+  return (
+    <div>
+      <Button onClick={toggleDrawer(true)}>Open drawer</Button>
+      <Drawer open={open} onClose={toggleDrawer(false)}>
+        {DrawerList}
+      </Drawer>
+    </div>
+  );
+}

From e294cc62e85897ea5ce81e070f94153398b878ea Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Fri, 5 Jul 2024 11:30:08 +0200
Subject: [PATCH 27/29] Configured Tailwind Css For Fast styling

---
 package-lock.json                         | 1360 +++++++++++++++------
 package.json                              |    5 +
 postcss.config.js                         |    6 +
 src/App.tsx                               |    4 +-
 src/components/navigation/bottomnav.tsx   |    1 +
 src/components/navigation/breadcrumbs.tsx |    2 +-
 src/components/navigation/drawer.tsx      |    2 +-
 src/index.css                             |    7 +-
 tailwind.config.js                        |   11 +
 9 files changed, 1037 insertions(+), 361 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index 1414d3c..9fa3256 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,22 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.7.4",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.39",
+        "tailwindcss": "^3.4.4"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2372,6 +2388,90 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -3048,17 +3148,17 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.8.tgz",
-      "integrity": "sha512-YK5G9LaddzGbcucK4c8h5tWFmMPBvRZ/uyWmN1/SbBdIvqGUdWGkJ5BAaccgs6XbzVLsqbPJrBSFwKv3kT9i7w==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3091,12 +3191,12 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -3391,6 +3491,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
@@ -4743,27 +4852,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
-    "node_modules/acorn-node/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -4906,6 +4994,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -5066,9 +5159,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
       "funding": [
         {
           "type": "opencollective",
@@ -5077,12 +5170,16 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
-        "fraction.js": "^4.2.0",
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -5540,9 +5637,9 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "node_modules/browserslist": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
-      "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
+      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
       "funding": [
         {
           "type": "opencollective",
@@ -5551,13 +5648,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001359",
-        "electron-to-chromium": "^1.4.172",
-        "node-releases": "^2.0.5",
-        "update-browserslist-db": "^1.0.4"
+        "caniuse-lite": "^1.0.30001629",
+        "electron-to-chromium": "^1.4.796",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.16"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5658,9 +5759,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001362",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001362.tgz",
-      "integrity": "sha512-PFykHuC7BQTzCGQFaV6wD8IDRM3HpI83BXr99nNJhoOyDufgSuKlt0QVlWYt5ZJtEYFeuNVF5QY3kJcu8hVFjQ==",
+      "version": "1.0.30001640",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
+      "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5669,6 +5770,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -6591,11 +6696,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -6663,22 +6763,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dependencies": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "detective": "bin/detective.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -6854,6 +6938,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6874,9 +6963,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.177",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.177.tgz",
-      "integrity": "sha512-FYPir3NSBEGexSZUEeht81oVhHfLFl6mhUKSkjHN/iB/TwEIt/WHQrqVGfTLN5gQxwJCQkIJBe05eOXjI7omgg=="
+      "version": "1.4.816",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
+      "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -7017,9 +7106,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
       "engines": {
         "node": ">=6"
       }
@@ -7987,9 +8076,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8227,6 +8316,32 @@
         }
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -8405,15 +8520,15 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "engines": {
         "node": "*"
       },
       "funding": {
         "type": "patreon",
-        "url": "https://www.patreon.com/infusion"
+        "url": "https://github.com/sponsors/rawify"
       }
     },
     "node_modules/fresh": {
@@ -8461,9 +8576,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -8752,6 +8870,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9195,11 +9324,14 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
-      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
+      "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -9544,6 +9676,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jake": {
       "version": "10.8.5",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -11502,6 +11651,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -11695,9 +11852,9 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
       "engines": {
         "node": ">=10"
       }
@@ -12044,6 +12201,14 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -12072,10 +12237,26 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -12124,9 +12305,9 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node_modules/node-releases": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -12431,6 +12612,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -12519,6 +12705,29 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -12538,9 +12747,9 @@
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -12696,9 +12905,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -12707,12 +12916,16 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -13071,16 +13284,16 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -13095,9 +13308,9 @@
       }
     },
     "node_modules/postcss-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
-      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -13109,7 +13322,7 @@
         "url": "https://opencollective.com/postcss/"
       },
       "peerDependencies": {
-        "postcss": "^8.3.3"
+        "postcss": "^8.4.21"
       }
     },
     "node_modules/postcss-lab-function": {
@@ -13132,19 +13345,25 @@
       }
     },
     "node_modules/postcss-load-config": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^1.10.2"
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
       },
       "engines": {
-        "node": ">= 10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
+        "node": ">= 14"
       },
       "peerDependencies": {
         "postcss": ">=8.0.9",
@@ -13159,6 +13378,28 @@
         }
       }
     },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -13350,11 +13591,11 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
       "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.11"
       },
       "engines": {
         "node": ">=12.0"
@@ -13732,9 +13973,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -13997,17 +14238,6 @@
         }
       ]
     },
-    "node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -14535,11 +14765,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "node_modules/resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dependencies": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -15094,9 +15324,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15281,10 +15511,29 @@
         "node": ">=8"
       }
     },
-    "node_modules/string-width/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.7",
@@ -15354,6 +15603,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -15435,6 +15696,92 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15579,49 +15926,41 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
-      "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
-        "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
-        "postcss-import": "^14.1.0",
-        "postcss-js": "^4.0.0",
-        "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.10",
-        "postcss-value-parser": "^4.2.0",
-        "quick-lru": "^5.1.1",
-        "resolve": "^1.22.0"
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
         "tailwindcss": "lib/cli.js"
       },
       "engines": {
-        "node": ">=12.13.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.9"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/tailwindcss/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -15754,6 +16093,25 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -15833,6 +16191,11 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -16041,9 +16404,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
-      "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -16052,14 +16415,18 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
       },
       "bin": {
-        "browserslist-lint": "cli.js"
+        "update-browserslist-db": "cli.js"
       },
       "peerDependencies": {
         "browserslist": ">= 4.21.0"
@@ -16917,6 +17284,53 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -16993,14 +17407,6 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -17060,6 +17466,11 @@
     }
   },
   "dependencies": {
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -18640,6 +19051,59 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
+    "@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "requires": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
+        },
+        "ansi-styles": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="
+        },
+        "string-width": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+          "requires": {
+            "eastasianwidth": "^0.2.0",
+            "emoji-regex": "^9.2.2",
+            "strip-ansi": "^7.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+          "requires": {
+            "ansi-styles": "^6.1.0",
+            "string-width": "^5.0.1",
+            "strip-ansi": "^7.0.1"
+          }
+        }
+      }
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -19137,14 +19601,14 @@
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.8.tgz",
-      "integrity": "sha512-YK5G9LaddzGbcucK4c8h5tWFmMPBvRZ/uyWmN1/SbBdIvqGUdWGkJ5BAaccgs6XbzVLsqbPJrBSFwKv3kT9i7w=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="
     },
     "@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="
     },
     "@jridgewell/source-map": {
       "version": "0.3.2",
@@ -19173,12 +19637,12 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
-      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "@leichtgewicht/ip-codec": {
@@ -19322,6 +19786,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true
+    },
     "@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
@@ -20324,23 +20794,6 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "requires": {}
     },
-    "acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "requires": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        }
-      }
-    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -20437,6 +20890,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -20555,13 +21013,13 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "autoprefixer": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-      "integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
       "requires": {
-        "browserslist": "^4.20.3",
-        "caniuse-lite": "^1.0.30001335",
-        "fraction.js": "^4.2.0",
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -20919,14 +21377,14 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "browserslist": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
-      "integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
+      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
       "requires": {
-        "caniuse-lite": "^1.0.30001359",
-        "electron-to-chromium": "^1.4.172",
-        "node-releases": "^2.0.5",
-        "update-browserslist-db": "^1.0.4"
+        "caniuse-lite": "^1.0.30001629",
+        "electron-to-chromium": "^1.4.796",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.16"
       }
     },
     "bser": {
@@ -20997,9 +21455,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001362",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001362.tgz",
-      "integrity": "sha512-PFykHuC7BQTzCGQFaV6wD8IDRM3HpI83BXr99nNJhoOyDufgSuKlt0QVlWYt5ZJtEYFeuNVF5QY3kJcu8hVFjQ=="
+      "version": "1.0.30001640",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
+      "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -21659,11 +22117,6 @@
         "object-keys": "^1.1.1"
       }
     },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ=="
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -21713,16 +22166,6 @@
         }
       }
     },
-    "detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "requires": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      }
-    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -21861,6 +22304,11 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
+    "eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -21875,9 +22323,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.177",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.177.tgz",
-      "integrity": "sha512-FYPir3NSBEGexSZUEeht81oVhHfLFl6mhUKSkjHN/iB/TwEIt/WHQrqVGfTLN5gQxwJCQkIJBe05eOXjI7omgg=="
+      "version": "1.4.816",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz",
+      "integrity": "sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -21988,9 +22436,9 @@
       }
     },
     "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA=="
     },
     "escape-html": {
       "version": "1.0.3",
@@ -22687,9 +23135,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -22870,6 +23318,22 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
+    "foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "dependencies": {
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="
+        }
+      }
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -22989,9 +23453,9 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
     },
     "fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
     "fresh": {
       "version": "0.5.2",
@@ -23025,9 +23489,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "function.prototype.name": {
       "version": "1.1.5",
@@ -23228,6 +23692,14 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -23553,11 +24025,11 @@
       "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
     },
     "is-core-module": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
-      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
+      "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
       "requires": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.2"
       }
     },
     "is-date-object": {
@@ -23788,6 +24260,15 @@
         "istanbul-lib-report": "^3.0.0"
       }
     },
+    "jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "requires": {
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "jake": {
       "version": "10.8.5",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
@@ -25215,6 +25696,11 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -25359,9 +25845,9 @@
       }
     },
     "lilconfig": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
-      "integrity": "sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
     },
     "lines-and-columns": {
       "version": "1.2.4",
@@ -25619,6 +26105,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
+    "minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
+    },
     "mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -25641,10 +26132,20 @@
         "thunky": "^1.0.2"
       }
     },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -25681,9 +26182,9 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node-releases": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q=="
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "normalize-path": {
       "version": "3.0.0",
@@ -25889,6 +26390,11 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -25956,6 +26462,22 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "requires": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "10.3.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+          "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ=="
+        }
+      }
+    },
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
@@ -25972,9 +26494,9 @@
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -26083,13 +26605,13 @@
       }
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "requires": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-attribute-case-insensitive": {
@@ -26283,9 +26805,9 @@
       }
     },
     "postcss-import": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
-      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "requires": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -26299,9 +26821,9 @@
       "requires": {}
     },
     "postcss-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
-      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "requires": {
         "camelcase-css": "^2.0.1"
       }
@@ -26316,12 +26838,24 @@
       }
     },
     "postcss-load-config": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
-      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
       "requires": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^1.10.2"
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "dependencies": {
+        "lilconfig": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+          "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow=="
+        },
+        "yaml": {
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+          "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg=="
+        }
       }
     },
     "postcss-loader": {
@@ -26435,11 +26969,11 @@
       }
     },
     "postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
       "requires": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.11"
       }
     },
     "postcss-nesting": {
@@ -26661,9 +27195,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -26850,11 +27384,6 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
-    "quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
-    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -27264,11 +27793,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "resolve": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
-      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "requires": {
-        "is-core-module": "^2.9.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       }
@@ -27668,9 +28197,9 @@
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-loader": {
       "version": "3.0.1",
@@ -27818,6 +28347,23 @@
         }
       }
     },
+    "string-width-cjs": {
+      "version": "npm:string-width@4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        }
+      }
+    },
     "string.prototype.matchall": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
@@ -27871,6 +28417,14 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-ansi-cjs": {
+      "version": "npm:strip-ansi@6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
     "strip-bom": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
@@ -27919,6 +28473,66 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
+    "sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.5",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+          "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+          "requires": {
+            "@jridgewell/set-array": "^1.2.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.24"
+          }
+        },
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        },
+        "glob": {
+          "version": "10.4.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+          "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+          "requires": {
+            "foreground-child": "^3.1.0",
+            "jackspeak": "^3.1.2",
+            "minimatch": "^9.0.4",
+            "minipass": "^7.1.2",
+            "package-json-from-dist": "^1.0.0",
+            "path-scurry": "^1.11.1"
+          }
+        },
+        "minimatch": {
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -28038,39 +28652,32 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "tailwindcss": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
-      "integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
       "requires": {
+        "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
-        "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "lilconfig": "^2.0.5",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
-        "postcss-import": "^14.1.0",
-        "postcss-js": "^4.0.0",
-        "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.10",
-        "postcss-value-parser": "^4.2.0",
-        "quick-lru": "^5.1.1",
-        "resolve": "^1.22.0"
-      },
-      "dependencies": {
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        }
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
       }
     },
     "tapable": {
@@ -28155,6 +28762,22 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
     "throat": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
@@ -28218,6 +28841,11 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -28368,12 +28996,12 @@
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
     },
     "update-browserslist-db": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
-      "integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
       "requires": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
       }
     },
     "uri-js": {
@@ -29077,6 +29705,39 @@
         }
       }
     },
+    "wrap-ansi-cjs": {
+      "version": "npm:wrap-ansi@7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -29109,11 +29770,6 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
-    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/package.json b/package.json
index ce21624..76e4b6b 100644
--- a/package.json
+++ b/package.json
@@ -43,5 +43,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.tsx b/src/App.tsx
index 7bf311d..0ceb4a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,8 +5,7 @@ import { AppContext } from './components/Context';
 import User from './components/user/User';
 import "./components/Style.css"
 import BottomNav from './components/navigation/bottomnav';
-import DrawerLeft from './components/navigation/drawer';
-
+import "./index.css"
 function App() {
   let [quizState, setQuizState] = useState("userForm");
   const [name,setName] = useState("")
@@ -22,7 +21,6 @@ function App() {
             {quizState === "endGame" && <ScoreScreen/>}
           </div>
           <div>
-            <DrawerLeft />
             <BottomNav />
           </div>
         </div>
diff --git a/src/components/navigation/bottomnav.tsx b/src/components/navigation/bottomnav.tsx
index 501db43..b6ff4ed 100644
--- a/src/components/navigation/bottomnav.tsx
+++ b/src/components/navigation/bottomnav.tsx
@@ -26,6 +26,7 @@ export default function BottomNav() {
         }}
         sx={{ width: 785 }}
       >
+        <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
         <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
         <BottomNavigationAction label="Material" icon={<LibraryBooksIcon />} />
         <BottomNavigationAction label={!name ? "user" : name } icon={<AccountCircleIcon />} />
diff --git a/src/components/navigation/breadcrumbs.tsx b/src/components/navigation/breadcrumbs.tsx
index 6a709fe..dca184e 100644
--- a/src/components/navigation/breadcrumbs.tsx
+++ b/src/components/navigation/breadcrumbs.tsx
@@ -13,7 +13,7 @@ export default function BasicBreadcrumbs() {
     <div role="presentation" style={{color: "white"}} onClick={handleClick}>
       <Breadcrumbs style={{color: "white"}} aria-label="breadcrumb">
         <Link underline="hover" style={{color: "white"}} href="/">
-          Home
+          <p className='text-yellow-300' >Home</p>
         </Link>
         <Link
           underline="hover"
diff --git a/src/components/navigation/drawer.tsx b/src/components/navigation/drawer.tsx
index 65bf707..2760d9b 100644
--- a/src/components/navigation/drawer.tsx
+++ b/src/components/navigation/drawer.tsx
@@ -11,7 +11,7 @@ import ListItemText from '@mui/material/ListItemText';
 import InboxIcon from '@mui/icons-material/MoveToInbox';
 import MailIcon from '@mui/icons-material/Mail';
 
-export default function TemporaryDrawer() {
+export default function DrawerLe() {
   const [open, setOpen] = React.useState(false);
 
   const toggleDrawer = (newOpen: boolean) => () => {
diff --git a/src/index.css b/src/index.css
index afafd28..bd6213e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,3 @@
-*{
-    margin: 0;
-    padding: 0;
-}
\ No newline at end of file
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..c0958ec
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

From ff542de929980dff04d76bdce0a2c0f8416dae44 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Fri, 5 Jul 2024 12:23:17 +0200
Subject: [PATCH 28/29] Responsivity on Mobile devises, also completed the
 issue on red color next

---
 src/components/navigation/bottomnav.tsx   |  35 +++--
 src/components/navigation/breadcrumbs.tsx |   2 +-
 src/components/quiz/Quiz.jsx              | 177 +++++++++++-----------
 src/components/user/User.jsx              |  22 +--
 4 files changed, 123 insertions(+), 113 deletions(-)

diff --git a/src/components/navigation/bottomnav.tsx b/src/components/navigation/bottomnav.tsx
index b6ff4ed..6905dc4 100644
--- a/src/components/navigation/bottomnav.tsx
+++ b/src/components/navigation/bottomnav.tsx
@@ -7,6 +7,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import { AppContext } from '../Context';
 
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
+import { MoreVert } from '@mui/icons-material';
 export default function BottomNav() {
   const [value, setValue] = React.useState(0);
   let {setQuizState} = React.useContext(AppContext);
@@ -17,20 +18,24 @@ export default function BottomNav() {
   }
 
   return (
-    <Box sx={{ width: 800, display:"flex", justifyContent: "center" }}>
-      <BottomNavigation
-        showLabels
-        value={value}
-        onChange={(event, newValue) => {
-          setValue(newValue);
-        }}
-        sx={{ width: 785 }}
-      >
-        <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
-        <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
-        <BottomNavigationAction label="Material" icon={<LibraryBooksIcon />} />
-        <BottomNavigationAction label={!name ? "user" : name } icon={<AccountCircleIcon />} />
-      </BottomNavigation>
-    </Box>
+    <div className='lg:w-[800px]'>
+      <Box sx={{ display:"flex", justifyContent: "center" }}>
+        <div className='lg:w-[785px] flex justify-center '>
+          <BottomNavigation
+            showLabels
+            value={value}
+            onChange={(event, newValue) => {
+              setValue(newValue);
+            }}
+            sx={{ width: "90%", padding: 4, justifyContent: "center" }}
+          >
+            <BottomNavigationAction label="More" onClick={handleBack} icon={<MoreVert />} />
+            <BottomNavigationAction label="Back" onClick={handleBack} icon={<ArrowBackIosIcon />} />
+            <BottomNavigationAction label="Material" icon={<LibraryBooksIcon />} />
+            <BottomNavigationAction label={!name ? "user" : name } icon={<AccountCircleIcon />} />
+          </BottomNavigation>
+        </div>
+      </Box>
+    </div>
   );
 }
diff --git a/src/components/navigation/breadcrumbs.tsx b/src/components/navigation/breadcrumbs.tsx
index dca184e..5d4a950 100644
--- a/src/components/navigation/breadcrumbs.tsx
+++ b/src/components/navigation/breadcrumbs.tsx
@@ -13,7 +13,7 @@ export default function BasicBreadcrumbs() {
     <div role="presentation" style={{color: "white"}} onClick={handleClick}>
       <Breadcrumbs style={{color: "white"}} aria-label="breadcrumb">
         <Link underline="hover" style={{color: "white"}} href="/">
-          <p className='text-yellow-300' >Home</p>
+          <p>Home</p>
         </Link>
         <Link
           underline="hover"
diff --git a/src/components/quiz/Quiz.jsx b/src/components/quiz/Quiz.jsx
index efc9223..177b95b 100644
--- a/src/components/quiz/Quiz.jsx
+++ b/src/components/quiz/Quiz.jsx
@@ -1,110 +1,113 @@
-//DONT FORGET TO RESEARCH MORE ABOUT LOCALSTORAGE...COULD POSSIBLY USE IT TO SAVE THE QUIZ SCORE -0750HRS
-
-import React, {useRef, useState, useContext} from 'react';
-import {data} from '../../assets/quizData';
+import React, { useRef, useState, useContext } from 'react';
+import { data } from '../../assets/quizData';
 import { AppContext } from '../Context';
 import './Quiz.css';
 import { Button, Card, Typography } from '@mui/material';
 
 function Quiz() {
+    const { setQuizState, score, setScore } = useContext(AppContext);
+    const [questionIndex, setQuestionIndex] = useState(0);
+    const [closed, setClosed] = useState(false);
 
-    let {setQuizState, score, setScore} = useContext(AppContext);
-    let [questionIndex, setQuestionIndex] = useState(0);
-    let [question, setQuestion] = useState(data[questionIndex]);
-    let [closed, setClosed] = useState(false);
-    
+    const option1 = useRef(null);
+    const option2 = useRef(null);
+    const option3 = useRef(null);
+    const option4 = useRef(null);
 
-    let option1 = useRef(null);
-    let option2 = useRef(null);
-    let option3 = useRef(null);
-    let option4 = useRef(null);
+    const myOptions = [option1, option2, option3, option4];
 
-    let myOptions = [option1, option2, option3, option4];
+    const question = data[questionIndex];
 
-    //checks the answer 
+    // Checks the answer
     const checkMyAnswer = (element, answer) => {
-        if(closed === false){
-            if(question.answer===answer) {
-                element.target.classList.add("correct");
-                setClosed(true);
+        if (!closed) {
+            if (question.answer === answer) {
+                element.target.classList.add('correct');
                 setScore(score + 1);
+                // Remove the 'wrong' class after 2 seconds
+                setTimeout(() => {
+                    element.target.classList.remove('correct');
+                }, 3000);
+            } else {
+                element.target.classList.add('wrong');
+                myOptions[question.answer - 1].current.classList.add('correct');
+                 // Remove the 'wrong' class after 2 seconds
+                 setTimeout(() => {
+                    element.target.classList.remove('wrong');
+                }, 2000);
             }
-            else{
-                element.target.classList.add("wrong");
-                setClosed(true);
-                myOptions[question.answer-1].current.classList.add("correct");
-            }
+            setClosed(true);
         }
+    };
 
-    }
-    //navigates to the next question
+    // Resets the color classes
+    const resetColors = () => {
+        myOptions.forEach(option => {
+            if (option.current) {
+                option.current.classList.remove('wrong');
+                option.current.classList.remove('correct');
+            }
+        });
+    };
+
+    // Navigates to the next question
     const next = () => {
-        if(closed === true){
-            setQuestionIndex(++questionIndex);
-            setQuestion(data[questionIndex]);
-            setClosed(false);
-            //Reset the color scheme
-            myOptions.map((option) => {
-                option.current.classList.remove("wrong");
-                option.current.classList.remove("correct");
-                return null;
-            })
+        if (closed) {
+            resetColors();
+            if (questionIndex < data.length - 1) {
+                setQuestionIndex(prevIndex => prevIndex + 1);
+                setClosed(false);
+            }
         }
-    }
+    };
 
+    // Ends the quiz
     const done = () => {
-        if(closed === true){
-            setQuestionIndex(++questionIndex);
-            setQuestion(data[questionIndex]);
-            setQuizState("endGame");
+        if (closed) {
+            resetColors();
+            setQuizState('endGame');
         }
-        
-    }
+    };
 
-    return(
-    <div className="" style={{padding: 10}}>
-        <Card>
-            <Typography variant="h2" component="div">
-                Quiz
-            </Typography>
-            <div style={{padding: 25}}>
-                <Typography variant="h5" component="div">
-                    {questionIndex+1}. {question.question}
+    return (
+        <div style={{ padding: 10 }}>
+            <Card>
+                <Typography variant="h2" component="div">
+                    Quiz
                 </Typography>
-            </div>
-            <h3></h3>
-            <div className="itemsContainer">
-                <ul>
-                    <li ref={option1} onClick={(element)=>{checkMyAnswer(element,1)}}>
-                        <Typography variant="body2">
-                            {question.option1}
-                        </Typography>
-                    </li>
-                    <li ref={option2} onClick={(element)=>{checkMyAnswer(element,2)}}>
-                        <Typography variant="body2">
-                            {question.option2}
-                        </Typography>
-                    </li>
-                    <li ref={option3} onClick={(element)=>{checkMyAnswer(element,3)}}>
-                        <Typography variant="body2">
-                            {question.option3}
-                        </Typography>
-                    </li>
-                    <li ref={option4} onClick={(element)=>{checkMyAnswer(element,4)}}>
-                        <Typography variant="body2">
-                            {question.option1}
-                        </Typography>
-                    </li>
-                </ul>
-                {questionIndex === data.length - 1 ? (
-                    <Button onClick={done} variant="contained" style={{paddingLeft: 20, paddingRight:20, paddingTop: 5}}>Last question</Button>
-                ):(
-                    <Button onClick={next} sx={{pl:10, pr:10}} style={{paddingLeft: 20, paddingRight:20, paddingTop: 5}} variant="contained">Next question</Button>
-                )}
-            </div>  
-        </Card>
-    </div>  
-    )
+                <div style={{ padding: 25 }}>
+                    <Typography variant="h5" component="div">
+                        {questionIndex + 1}. {question.question}
+                    </Typography>
+                </div>
+                <div className="itemsContainer">
+                    <ul>
+                        <li ref={option1} onClick={(element) => checkMyAnswer(element, 1)}>
+                            <Typography variant="body2">{question.option1}</Typography>
+                        </li>
+                        <li ref={option2} onClick={(element) => checkMyAnswer(element, 2)}>
+                            <Typography variant="body2">{question.option2}</Typography>
+                        </li>
+                        <li ref={option3} onClick={(element) => checkMyAnswer(element, 3)}>
+                            <Typography variant="body2">{question.option3}</Typography>
+                        </li>
+                        <li ref={option4} onClick={(element) => checkMyAnswer(element, 4)}>
+                            <Typography variant="body2">{question.option4}</Typography>
+                        </li>
+                    </ul>
+                    {questionIndex === data.length - 1 ? (
+                        <Button onClick={done} variant="contained" style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 5 }}>
+                            Last question
+                        </Button>
+                    ) : (
+                        <Button onClick={next} sx={{ pl: 10, pr: 10 }} style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 5 }} variant="contained">
+                            Next question
+                        </Button>
+                    )}
+                </div>
+            </Card>
+        </div>
+    );
 }
 
-export default Quiz;
\ No newline at end of file
+export default Quiz;
diff --git a/src/components/user/User.jsx b/src/components/user/User.jsx
index 98cbc8f..ff1e1a9 100644
--- a/src/components/user/User.jsx
+++ b/src/components/user/User.jsx
@@ -45,16 +45,18 @@ function User() {
                 </Typography>
             </CardContent>
             <div className="item">
-                <Box
-                    component="form"
-                    sx={{
-                        '& > :not(style)': { m: 1, width: '50%' },
-                    }}
-                    noValidate
-                    autoComplete="off"
-                    >
-                        <TextField onChange={(e)=>{setUsername(e.target.value)}} id="outlined-basic" label="Name" variant="outlined" />
-                </Box>
+                <div className="lg:w-[100%] flex justify-center w-[90%]">
+                    <Box
+                        component="form"
+                        sx={{
+                            '& > :not(style)': { m: 1, width: '100%' },
+                        }}
+                        noValidate
+                        autoComplete="off"
+                        >
+                            <TextField onChange={(e)=>{setUsername(e.target.value)}} id="outlined-basic" label="Name" variant="outlined" />
+                    </Box>
+                </div>
                 </div>
                 <div style={{padding: 5, paddingBottom: 10}}>
                     {username &&

From 0dc9727c8a064bcfe6939134e04b3d9b2c9ef238 Mon Sep 17 00:00:00 2001
From: ragmer09toske <retsepile.raymondshao@gmail.com>
Date: Fri, 5 Jul 2024 12:36:35 +0200
Subject: [PATCH 29/29] temporary fix on the red error issue, added a timer to
 remove the .wrong .correct

---
 src/components/quiz/Quiz.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/quiz/Quiz.jsx b/src/components/quiz/Quiz.jsx
index 177b95b..7497925 100644
--- a/src/components/quiz/Quiz.jsx
+++ b/src/components/quiz/Quiz.jsx
@@ -27,7 +27,7 @@ function Quiz() {
                 // Remove the 'wrong' class after 2 seconds
                 setTimeout(() => {
                     element.target.classList.remove('correct');
-                }, 3000);
+                }, 2000);
             } else {
                 element.target.classList.add('wrong');
                 myOptions[question.answer - 1].current.classList.add('correct');
@@ -51,7 +51,7 @@ function Quiz() {
     };
 
     // Navigates to the next question
-    const next = () => {
+    const next = (element) => {
         if (closed) {
             resetColors();
             if (questionIndex < data.length - 1) {
@@ -100,7 +100,7 @@ function Quiz() {
                             Last question
                         </Button>
                     ) : (
-                        <Button onClick={next} sx={{ pl: 10, pr: 10 }} style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 5 }} variant="contained">
+                        <Button onClick={(element)=>next(element)} sx={{ pl: 10, pr: 10 }} style={{ paddingLeft: 20, paddingRight: 20, paddingTop: 5 }} variant="contained">
                             Next question
                         </Button>
                     )}